{"version":3,"sources":["../../../src/Legacy/Tabs/Tabs.tsx","../../../src/utilities/Clay/Clay.tsx","../../../src/utilities/Flex/Flex.tsx","../../../src/utils.ts","../../../src/Legacy/TabList/TabList.tsx","../../../src/Legacy/TabList/TabList.css.ts","../../../src/Legacy/TabList/TabList.hooks.ts"],"names":["Fragment","useEffect","useState","match","vars","forwardRef","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","size","width","height","shape","sx","as","native","props","__objRest","__spreadProps","__spreadValues","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","Children","isValidElement","getValidChildren","child","cloneElement","useRef","css","getPaddingForSquared","getStyleForUnderLine","segmentCSSBySize","segmentActiveColorByType","type","tabListCSS","variant","background","fullWidth","debounce","useCallback","useTabListIndicatorStyle","activeTab","tabIndicatorStyle","setTabIndicatorStyle","getActiveTabOffset","debouncedSetTabIndicatorStyle","useTabs","value","setValue","tabRefObject","activeTabRef","setActiveTabRef","activeIndex","tab","handleKeyDown","event","tabKeyList","focusNextTab","nextKey","move","step","len","tabValue","index","jsxs","segmentTabIndicatorCSS","renderTabIndicator","commonStyle","LegacyTabList","direction","activeValue","onChangeValue","getTabProps","onChangeValueRef","renderTabs","tabDirectionMap","LegacyTabs","tabPanelStyle","tabListStyle","activeKey","setActiveKey","getTabPanels","isActive","isPreRender","tabListProps"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { Fragment, useEffect, useState } from \"react\";\nimport { match } from \"ts-pattern\";\nimport { Flex } from \"../../utilities\";\nimport { getValidChildren } from \"../../utils\";\nimport { LegacyTabList } from \"../TabList\";\nimport type { LegacyTabsProps } from \"./Tabs.types\";\n\nconst tabDirectionMap = {\n  \"vertical-rl\": \"row-reverse\",\n  \"vertical-lr\": \"row\",\n  horizontal: \"column\",\n} as const;\n\n/** @deprecated Tabs 를 사용해주세요 */\nexport const LegacyTabs = <T extends string>({\n  children,\n  activeValue,\n  size = \"medium\",\n  direction = \"horizontal\",\n  background = false,\n  variant,\n  onChangeValue,\n  tabPanelStyle,\n  tabListStyle,\n  fullWidth = false,\n  type = \"primary\",\n}: LegacyTabsProps<T>) => {\n  const [activeKey, setActiveKey] = useState<T>(activeValue ?? (\"0\" as T));\n\n  useEffect(() => {\n    if (activeValue) setActiveKey(activeValue);\n  }, [activeValue]);\n\n  useEffect(() => {\n    if (onChangeValue) onChangeValue(activeKey);\n  }, [activeKey, onChangeValue]);\n\n  const getTabPanels = () => {\n    const panels = getValidChildren(children).map((child, index) => {\n      const value = child.props.value ?? index.toString();\n      const isActive = value === activeKey;\n      const isPreRender = child.props.preRender;\n\n      if (isActive && child.props.children)\n        return (\n          <div\n            key={value}\n            id={`clay-tabpanel-${value}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${value}`}\n            tabIndex={0}\n            css={tabPanelStyle}\n          >\n            {child.props.children}\n          </div>\n        );\n\n      if (isPreRender)\n        return (\n          <div\n            key={value}\n            id={`clay-tabpanel-${value}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${value}`}\n            aria-hidden\n            tabIndex={-1}\n            css={{ display: \"none\", ...tabPanelStyle }}\n          >\n            {child.props.children}\n          </div>\n        );\n\n      return <Fragment key={value} />;\n    });\n\n    return panels;\n  };\n\n  const tabListProps = match(variant)\n    .with(\"segment\", () => ({ variant, size, fullWidth, background, type }))\n    .otherwise(() => ({ variant, size, fullWidth }));\n\n  return (\n    <Flex flexDirection={tabDirectionMap[direction]}>\n      <LegacyTabList\n        direction={direction === \"horizontal\" ? \"horizontal\" : \"vertical\"}\n        activeValue={activeKey}\n        onChangeValue={setActiveKey}\n        sx={tabListStyle}\n        {...tabListProps}\n      >\n        {children}\n      </LegacyTabList>\n\n      {getTabPanels()}\n    </Flex>\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"./Clay.types\";\n\nexport type ClayComponent = <C extends ElementType = \"div\">(\n  props: ClayProps<C> & {\n    ref?: ComponentPropsWithRef<C>[\"ref\"];\n  },\n) => ReactElement | null;\n\nconst Clay: ClayComponent = forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      className,\n      _hover,\n      _active,\n      _after,\n      _before,\n      _focus,\n      size,\n      width,\n      height,\n      shape,\n      sx,\n      as,\n      native,\n      ...props\n    }: ClayProps<E>,\n    ref: ComponentPropsWithRef<E>[\"ref\"],\n  ) => {\n    const Element = as || \"div\";\n\n    return (\n      <Element\n        ref={ref}\n        className={className}\n        css={{\n          width: size || width,\n          height: size || height,\n          ...(shape === \"circle\" && {\n            borderRadius: vars.rounded.full,\n          }),\n          \"&:hover\": _hover,\n          \"&:active\": _active,\n          \"&:after\": _after,\n          \"&:before\": _before,\n          \"&:focus\": _focus,\n          ...props,\n          ...sx,\n        }}\n        {...native}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst ClayNameSpace = Object.assign(Clay, { displayName: \"Clay\" });\n\nexport { ClayNameSpace as Clay };\n","import type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Clay } from \"../Clay\";\nimport type { ClayComponent, ClayProps } from \"../Clay/Clay.types\";\n\nconst _Flex: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Clay ref={ref} display=\"flex\" {...props} />,\n);\n\nconst Flex = Object.assign(_Flex, { displayName: \"Flex\" });\n\nconst _FlexCenter: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} alignItems=\"center\" justifyContent=\"center\" {...props} />,\n);\n\nconst FlexCenter = Object.assign(_FlexCenter, { displayName: \"Flex.Center\" });\n\nconst _FlexColumn: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    { as = \"div\" as any, ...props }: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} as={as} flexDirection=\"column\" {...props} />,\n);\n\nconst FlexColumn = Object.assign(_FlexColumn, { displayName: \"Flex.Column\" });\n\n/**\n * @deprecated Use `Flex.Column` instead\n */\nexport const Stack = FlexColumn;\n\nconst FlexNameSpace = Object.assign(Flex, { Center: FlexCenter, Column: FlexColumn });\n\nexport { FlexNameSpace as Flex };\n","import { Children, isValidElement } from \"react\";\n\n/**\n * Gets only the valid children of a component,\n * and ignores any nullish or falsy child.\n *\n * @param children the children\n */\nexport function getValidChildren(children: React.ReactNode) {\n  return Children.toArray(children).filter((child) =>\n    isValidElement(child),\n  ) as React.ReactElement[];\n}\n","/** @jsxImportSource @emotion/react */\n\nimport type { CSSObject } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\nimport { cloneElement, useEffect, useRef } from \"react\";\nimport { Clay, Flex } from \"../../utilities\";\nimport { getValidChildren } from \"../../utils\";\nimport { tabListCSS } from \"./TabList.css\";\nimport { useTabs } from \"./TabList.hooks\";\nimport type { LegacyTabIndicatorStyle, LegacyTabListProps } from \"./TabList.types\";\n\nconst segmentTabIndicatorCSS = (type: LegacyTabListProps<string>[\"type\"]): CSSObject => {\n  switch (type) {\n    case \"raised\":\n      return {\n        backgroundColor: vars.semantic.color.actionSecondary,\n        boxShadow: vars.dropShadow.popover,\n      };\n\n    case \"secondary\":\n      return {\n        backgroundColor: vars.semantic.color.actionElevated,\n      };\n\n    case \"outlined\":\n      return {\n        border: `2px solid ${vars.semantic.color.actionPrimary}`,\n        backgroundColor: \"transparent\",\n      };\n\n    // primary\n    default:\n      return {\n        backgroundColor: vars.semantic.color.focus,\n      };\n  }\n};\n\nconst renderTabIndicator = ({\n  variant,\n  tabIndicatorStyle,\n  type,\n  background,\n}: Pick<LegacyTabListProps<string>, \"variant\" | \"type\" | \"background\"> & {\n  tabIndicatorStyle?: LegacyTabIndicatorStyle;\n}) => {\n  const commonStyle: CSSProperties = {\n    position: \"absolute\",\n    left: tabIndicatorStyle?.left,\n    width: tabIndicatorStyle?.width,\n    height: tabIndicatorStyle?.height,\n    transitionProperty: \"left, width\",\n    transitionTimingFunction: \"ease-out\",\n    ...(tabIndicatorStyle && {\n      transitionDuration: \"0.3s\",\n    }),\n  };\n\n  switch (variant) {\n    case \"segment\":\n      return (\n        <Clay\n          native={{\n            \"data-clay-tabs-indicator\": true,\n          }}\n          {...commonStyle}\n          bottom={background ? vars.spacing[1] : 0}\n          backgroundColor={vars.semantic.color.focus}\n          borderRadius={vars.rounded.small}\n          sx={segmentTabIndicatorCSS(type)}\n        />\n      );\n\n    case \"underline\":\n      return (\n        <Clay\n          native={{\n            \"data-clay-tabs-indicator\": true,\n          }}\n          {...commonStyle}\n          bottom={0}\n          height=\"2px\"\n          backgroundColor={vars.semantic.color.focus}\n          borderRadius=\"50px\"\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n\n/**\n * @deprecated Use `Tabs` instead.\n */\nexport const LegacyTabList = <T extends string>({\n  children,\n  variant,\n  size = \"medium\",\n  direction = \"horizontal\",\n  background,\n  fullWidth,\n  type,\n  activeValue,\n  onChangeValue,\n  sx,\n}: LegacyTabListProps<T>) => {\n  const { getTabProps, setValue, tabIndicatorStyle, value } = useTabs({\n    defaultValue: activeValue ?? (\"0\" as T),\n  });\n\n  useEffect(() => {\n    if (activeValue) setValue(activeValue);\n  }, [activeValue, setValue]);\n\n  const onChangeValueRef = useRef<LegacyTabListProps<T>[\"onChangeValue\"]>();\n  onChangeValueRef.current = onChangeValue;\n  useEffect(() => {\n    onChangeValueRef.current?.(value);\n  }, [value]);\n\n  const renderTabs = () => {\n    const tabs = getValidChildren(children).map((child, index) => {\n      const value = child.props.value ?? index.toString();\n\n      return cloneElement(child, {\n        ...getTabProps(value, index),\n        variant,\n      });\n    });\n\n    return tabs;\n  };\n\n  return (\n    <Flex\n      display={fullWidth ? \"flex\" : \"inline-flex\"}\n      width={fullWidth ? \"100%\" : \"fit-content\"}\n      position=\"relative\"\n      native={{\n        role: \"tablist\",\n      }}\n      flexDirection={direction === \"horizontal\" ? \"row\" : \"column\"}\n      css={[tabListCSS({ variant, size, background, type, fullWidth }), sx]}\n    >\n      {renderTabIndicator({ variant, tabIndicatorStyle, type, background })}\n\n      {renderTabs()}\n    </Flex>\n  );\n};\n","import type { CSSObject } from \"@emotion/react\";\nimport { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { LegacyTabListProps } from \"./TabList.types\";\n\nconst getPaddingForSquared = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    case \"small\":\n      return `${vars.spacing[1]} ${vars.spacing[3]}`;\n\n    case \"large\":\n      return `${vars.spacing[3]} ${vars.spacing[4]}`;\n\n    // medium\n    default:\n      return `${vars.spacing[2]} ${vars.spacing[3]}`;\n  }\n};\n\nconst getStyleForUnderLine = (size: LegacyTabListProps<string>[\"size\"]) => {\n  switch (size) {\n    // underline은 small 을 지원하지 않습니다.\n    case \"small\":\n      return {};\n\n    case \"large\":\n      return {\n        gap: vars.spacing[4],\n        ...vars.semantic.typography[\"label-large\"],\n      };\n\n    case \"xlarge\":\n      return {\n        gap: vars.spacing[5],\n        ...vars.semantic.typography[\"label-xlarge-bold\"],\n      };\n\n    case \"2xlarge\":\n      return {\n        gap: vars.spacing[6],\n        ...vars.semantic.typography[\"label-3xlarge-bold\"],\n      };\n\n    // medium\n    default:\n      return {\n        gap: vars.spacing[3],\n        ...vars.semantic.typography[\"label-medium\"],\n      };\n  }\n};\n\nconst segmentCSSBySize = (size: LegacyTabListProps<string>[\"size\"]): CSSObject => {\n  switch (size) {\n    case \"small\":\n      return {\n        paddingTop: vars.spacing[1],\n        paddingBottom: vars.spacing[1],\n        minWidth: \"54px\",\n      };\n\n    case \"large\":\n      return {\n        paddingTop: vars.spacing[\"25\"],\n        paddingBottom: vars.spacing[\"25\"],\n        minWidth: \"64px\",\n      };\n\n    // medium\n    default:\n      return {\n        paddingTop: vars.spacing[\"15\"],\n        paddingBottom: vars.spacing[\"15\"],\n        minWidth: \"60px\",\n      };\n  }\n};\n\nconst segmentActiveColorByType = (type: LegacyTabListProps<string>[\"type\"]) => {\n  switch (type) {\n    case \"raised\":\n      return vars.semantic.color.text;\n\n    case \"outlined\":\n      return vars.semantic.color.textPrimary;\n\n    // primary, secondary\n    default:\n      return vars.semantic.color.textOn;\n  }\n};\n\nexport const tabListCSS = ({\n  variant,\n  size,\n  background,\n  type,\n  fullWidth,\n}: Pick<LegacyTabListProps<string>, \"variant\" | \"size\" | \"background\" | \"type\" | \"fullWidth\">) => {\n  switch (variant) {\n    case \"segment\":\n      return css({\n        backgroundColor: background ? vars.semantic.color.surfaceSub : \"transparent\",\n        padding: background ? vars.spacing[1] : 0,\n        borderRadius: vars.rounded.medium,\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[\"label-medium-bold\"],\n          ...segmentCSSBySize(size),\n\n          paddingLeft: vars.spacing[3],\n          paddingRight: vars.spacing[3],\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSecondary,\n          flex: fullWidth ? 1 : \"auto\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: segmentActiveColorByType(type),\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.textSecondaryHover,\n          },\n        },\n      });\n    case \"squared\":\n      return css({\n        gap: vars.spacing[size === \"large\" ? \"15\" : 1],\n\n        '[role=\"tab\"]': {\n          ...vars.semantic.typography[`label-${size === \"large\" ? \"large\" : \"medium\"}`],\n\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: getPaddingForSquared(size),\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"background-color 0.3s ease-out\",\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            backgroundColor: vars.semantic.color.actionPrimary,\n            color: vars.semantic.color.textInverse,\n          },\n\n          '&:not([aria-disabled=\"true\"], [aria-selected=\"true\"]):active': {\n            backgroundColor: vars.semantic.color.actionSecondaryPressed,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            backgroundColor: vars.semantic.color.actionSecondaryHover,\n            '& [data-clay-badge-on=\"false\"]': {\n              backgroundColor: vars.semantic.color.actionPrimaryDisabled,\n            },\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            backgroundColor: \"transparent\",\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n\n          borderRadius: vars.rounded[size === \"small\" ? \"small\" : \"medium\"],\n        },\n      });\n    // text tab\n    default:\n      return css({\n        gap: vars.spacing[size === \"medium\" ? 3 : 4],\n\n        ...getStyleForUnderLine(size),\n\n        '[role=\"tab\"]': {\n          flex: fullWidth ? 1 : \"auto\",\n\n          padding: `${vars.spacing[size === \"medium\" ? \"2\" : \"3\"]} 0`,\n          gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n          transition: \"color 0.3s ease-out\",\n          color: vars.semantic.color.textSub,\n\n          '&:not([aria-disabled=\"true\"])[aria-selected=\"true\"]': {\n            color: vars.semantic.color.text,\n          },\n\n          '&:not([aria-selected=\"true\"], :active, [aria-disabled=\"true\"]):hover': {\n            color: vars.semantic.color.text,\n          },\n\n          '&[aria-disabled=\"true\"]': {\n            color: vars.semantic.color.textDisabled,\n            cursor: \"not-allowed\",\n          },\n        },\n      });\n  }\n};\n","import debounce from \"lodash.debounce\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LegacyTabIndicatorStyle } from \"./TabList.types\";\n\nconst useTabListIndicatorStyle = (activeTab: HTMLElement | null) => {\n  const [tabIndicatorStyle, setTabIndicatorStyle] = useState<LegacyTabIndicatorStyle>();\n\n  const getActiveTabOffset = useCallback(() => {\n    if (!activeTab) return undefined;\n\n    return {\n      width: activeTab.offsetWidth,\n      left: activeTab.offsetLeft,\n      height: activeTab.offsetHeight,\n    };\n  }, [activeTab]);\n\n  useEffect(() => {\n    setTabIndicatorStyle(getActiveTabOffset);\n  }, [getActiveTabOffset]);\n\n  useEffect(() => {\n    const debouncedSetTabIndicatorStyle = debounce(() => {\n      setTabIndicatorStyle(getActiveTabOffset);\n    }, 100);\n\n    window.addEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n\n    return () => {\n      window.removeEventListener(\"resize\", debouncedSetTabIndicatorStyle);\n      debouncedSetTabIndicatorStyle.cancel();\n    };\n  }, [getActiveTabOffset]);\n\n  return tabIndicatorStyle;\n};\n\nexport const useTabs = <T extends string>(props: { defaultValue: T }) => {\n  const [value, setValue] = useState<T>(props?.defaultValue);\n  const tabRefObject = useRef<{ value: T; ref: HTMLElement }[]>([]);\n  const [activeTabRef, setActiveTabRef] = useState<HTMLElement | null>(null);\n  const tabIndicatorStyle = useTabListIndicatorStyle(activeTabRef);\n\n  useEffect(() => {\n    const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n    setActiveTabRef(tabRefObject.current[activeIndex]?.ref ?? null);\n  }, [value]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const activeIndex = tabRefObject.current.findIndex((tab) => tab.value === value);\n      if (activeIndex === -1) return;\n\n      const activeTab = tabRefObject.current[activeIndex];\n      const isClayTabActive =\n        document.activeElement?.role === \"tab\" &&\n        document.activeElement.id === `clay-tab-${activeTab.value}`;\n\n      if (!isClayTabActive) return;\n\n      const tabKeyList = tabRefObject.current.map((tab) => tab.value);\n\n      const focusNextTab = (nextKey: string) => {\n        document.getElementById(`clay-tab-${nextKey}`)?.focus();\n      };\n\n      const move = (step: number) => {\n        const len = tabKeyList.length;\n        const nextKey = tabKeyList[(((activeIndex + step) % len) + len) % len];\n        setValue(nextKey);\n        focusNextTab(nextKey);\n      };\n\n      switch (event.key) {\n        case \"ArrowLeft\":\n          move(-1);\n          break;\n        case \"ArrowRight\":\n          move(1);\n          break;\n        case \"Home\":\n          focusNextTab(tabKeyList[0]);\n          break;\n        case \"End\":\n          focusNextTab(tabKeyList[tabKeyList.length - 1]);\n          break;\n\n        default:\n          break;\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [value]);\n\n  const getTabProps = (tabValue: T, index: number) => ({\n    key: tabValue,\n    id: tabValue,\n    active: value === tabValue,\n    ref: (ref: HTMLButtonElement) => {\n      tabRefObject.current[index] = { value: tabValue, ref };\n    },\n    onClick: () => {\n      setValue(tabValue);\n    },\n    value,\n  });\n\n  return {\n    value,\n    setValue,\n    getTabProps,\n    tabIndicatorStyle,\n  };\n};\n"]}