{"version":3,"sources":["../../src/Tabs/Tab.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/utils.ts","../../src/Badge/DotBadge/DotBadge.tsx","../../src/Badge/DotBadge/DotBadge.css.ts","../../src/Badge/NumberBadge/NumberBadge.tsx","../../src/Badge/NumberBadge/NumberBadge.css.ts","../../src/Tabs/Tab.provider.tsx","../../src/Tabs/Tab.utils.ts","../../src/Tabs/Tab.list.tsx","../../src/Tabs/Tabs.css.ts","../../src/Tabs/Tabs.indicator.tsx","../../src/Tabs/Tab.panel.tsx","../../src/Tabs/Tabs.tsx"],"names":["AlertTriangleFilled","Check","vars","useEffect","useRef","P","match","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","css","variantMap","dotBadgeCSS","DotBadge","variant","type","numberBadgeCSS","NumberBadge","number","createContext","useContext","TabIndexContext","TabProvider","useTabContext","context","getTabARIA","index","uniqueId","tabpanelId","tabId","Fragment","jsxs","Tab","tabContext","tabRef","attr","isActive","numberBadgeVariantMap","numberBadgeSizeMap","renderContent","badge","renderStatus","cloneElement","useCallback","filledCss","textCss","tabListCSS","variantStyle","useState","TabsIndicator","activeTabOffset","setActiveTabOffset","activeTab","isActiveTabHasDot","DOT_AREA_WIDTH","TabList","tabKeyList","_","len","renderTabs","keyDownHandler","event","activeIndex","setActiveIndex","jump","move","step","TabPanels","TabPanel","isFirstOpen","Element","shouldRender","useControllableState","useId","Tabs","direction","fullWidth","defaultIndex","id"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { AlertTriangleFilled, Check } from \"@imwebme/clay-icons\";\nimport { vars } from \"@imwebme/clay-token\";\nimport { useEffect, useRef } from \"react\";\nimport { P, match } from \"ts-pattern\";\nimport type { NumberBadgeProps } from \"../Badge\";\nimport { DotBadge, NumberBadge } from \"../Badge\";\nimport { Flex } from \"../utilities\";\nimport { useTabContext } from \"./Tab.provider\";\nimport { getTabARIA } from \"./Tab.utils\";\nimport type { TabProps } from \"./Tabs.types\";\n\nexport const Tab = (props: TabProps) => {\n  const tabContext = useTabContext();\n  const tabRef = useRef<HTMLButtonElement>(null);\n  const attr = getTabARIA({\n    index: props._index,\n    uniqueId: tabContext.uniqueId,\n  });\n\n  const isActive = tabContext.activeIndex === props._index;\n\n  const numberBadgeVariantMap = match(tabContext.variant)\n    .returnType<NumberBadgeProps[\"variant\"]>()\n    .with(\"filled\", () => (isActive ? \"primary-inverse\" : \"secondary\"))\n    .with(\"text\", () => (isActive ? \"primary\" : \"secondary\"))\n    .otherwise(() => \"secondary\");\n\n  const numberBadgeSizeMap = match(tabContext.size)\n    .returnType<NumberBadgeProps[\"size\"]>()\n    .with(\"small\", () => \"small\")\n    .with(\"medium\", () => \"medium\")\n    .otherwise(() => \"large\");\n\n  const renderContent = match(props)\n    .with({ badge: P.union(P.string, P.number) }, ({ badge }) => (\n      <>\n        {props.icon}\n        <Flex gap={vars.spacing[1]} alignItems=\"center\">\n          {props.text}\n\n          <NumberBadge variant={numberBadgeVariantMap} size={numberBadgeSizeMap} number={badge} />\n        </Flex>\n      </>\n    ))\n    .with({ dot: P.boolean }, () => (\n      <>\n        {props.icon}\n        <Flex\n          gap={vars.spacing[1]}\n          native={{\n            // dot 일 경우 indicator 가 dot 영역까지 차지하면 안되기 때문에 넣어준 data attribute\n            // plz check Tab.list.tsx for more detail\n            \"data-clay-dot-badge\": true,\n          }}\n        >\n          {props.text}\n\n          <DotBadge variant=\"accent\" sx={{ alignSelf: \"start\" }} />\n        </Flex>\n      </>\n    ))\n    .otherwise(() => (\n      <>\n        {props.icon}\n        {props.text}\n      </>\n    ));\n\n  const renderStatus = match(props.status)\n    .with(\"success\", () => <Check style={{ color: vars.semantic.color.iconSuccess }} />)\n    .with(\"warning\", () => (\n      <AlertTriangleFilled style={{ color: vars.semantic.color.iconCritical }} />\n    ))\n    .otherwise(() => null);\n\n  useEffect(() => {\n    if (isActive) {\n      tabRef.current?.focus();\n    }\n  }, [isActive]);\n\n  return (\n    <button\n      ref={tabRef}\n      type=\"button\"\n      onClick={props._onClick}\n      role=\"tab\"\n      tabIndex={-1}\n      aria-selected={isActive}\n      aria-disabled={props.disabled}\n      data-selected={isActive}\n      disabled={props.disabled}\n      {...attr.tab}\n      css={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        cursor: props.disabled ? \"not-allowed\" : \"pointer\",\n        gap: vars.spacing[2],\n      }}\n    >\n      {renderContent}\n\n      {renderStatus}\n    </button>\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 { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { dotBadgeCSS, variantMap } from \"./DotBadge.css\";\nimport type { DotBadgeComponent, DotBadgeProps } from \"./DotBadge.types\";\n\nexport const DotBadge: DotBadgeComponent = forwardRef(function ClayDotBadge<E extends ElementType>(\n  { variant, as, className, native, size = \"small\", sx, type = \"default\" }: DotBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...variantMap.type[type],\n        ...native?.style,\n      }}\n      css={[dotBadgeCSS, sx]}\n    />\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    accent: {\n      \"--background-color\": vars.semantic.color.focusAccent,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.iconCritical,\n    },\n  },\n  type: {\n    border: {\n      \"--outline\": `var(--border-width) solid ${vars.semantic.color.surface}`,\n    },\n    default: {\n      \"--outline\": \"none\",\n    },\n  },\n  size: {\n    small: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"6px\",\n      \"--height\": \"6px\",\n    },\n    medium: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"8px\",\n      \"--height\": \"8px\",\n    },\n    large: {\n      \"--border-width\": \"2px\",\n      \"--width\": \"10px\",\n      \"--height\": \"10px\",\n    },\n    largeBold: {\n      \"--border-width\": \"3px\",\n      \"--width\": \"10px\",\n      \"--height\": \"10px\",\n    },\n  },\n} as Record<string, Record<string, Record<string, string>>>;\n\nexport const dotBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n\n  width: \"var(--width)\",\n  height: \"var(--height)\",\n\n  backgroundColor: \"var(--background-color)\",\n\n  borderRadius: vars.rounded.full,\n\n  outline: \"var(--outline)\",\n});\n","/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { numberBadgeCSS, variantMap } from \"./NumberBadge.css\";\nimport type { NumberBadgeProps } from \"./NumberBadge.types\";\n\ntype NumberBadgeComponent = <E extends ElementType>(\n  props: NumberBadgeProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const NumberBadge: NumberBadgeComponent = forwardRef(function ClayNumberBadge<\n  E extends ElementType,\n>(\n  { number, as, size = \"medium\", native, sx, variant, className }: NumberBadgeProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const Element = as || \"span\";\n\n  return (\n    <Element\n      ref={ref}\n      className={className}\n      {...native}\n      style={{\n        ...variantMap.variant[variant],\n        ...variantMap.size[size],\n        ...native?.style,\n      }}\n      css={[numberBadgeCSS, sx]}\n    >\n      {number}\n    </Element>\n  );\n});\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const variantMap = {\n  variant: {\n    primary: {\n      \"--background-color\": vars.semantic.color.surfaceInverse,\n      \"--color\": vars.semantic.color.textInverse,\n    },\n    secondary: {\n      \"--background-color\": vars.semantic.color.surfaceSlateSecondary,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    accent: {\n      \"--background-color\": vars.semantic.color.surfaceHighlightPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    critical: {\n      \"--background-color\": vars.semantic.color.surfaceCriticalPrimary,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"primary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.text,\n    },\n    \"secondary-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textSub,\n    },\n    \"accent-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textAccent,\n    },\n    \"critical-inverse\": {\n      \"--background-color\": vars.semantic.color.surface,\n      \"--color\": vars.semantic.color.textCritical,\n    },\n  } as Record<string, Record<string, string>>,\n  size: {\n    small: {\n      \"--padding\": `${vars.spacing[\"1\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-xsmall\n      \"--font-size\": vars.fontSize[\"2xsmall\"],\n      \"--line-height\": vars.lineHeight[3],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    medium: {\n      \"--padding\": `${vars.spacing[\"05\"]} ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"20px\",\n      // label-small-bold\n      \"--font-size\": vars.fontSize.xsmall,\n      \"--line-height\": vars.lineHeight[4],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n    large: {\n      \"--padding\": `0 ${vars.spacing[\"15\"]}`,\n      \"--min-width\": \"24px\",\n      // label-medium-bold\n      \"--font-size\": vars.fontSize.small,\n      \"--line-height\": vars.lineHeight[\"6\"],\n      \"--font-weight\": vars.fontWeight.semibold,\n    },\n  } as Record<string, Record<string, string>>,\n};\n\nexport const numberBadgeCSS = css({\n  display: \"inline-block\",\n  verticalAlign: \"middle\",\n  textAlign: \"center\",\n\n  // variant styles\n  backgroundColor: \"var(--background-color)\",\n  color: \"var(--color)\",\n\n  // size styles\n  padding: \"var(--padding)\",\n  minWidth: \"var(--min-width)\",\n  fontSize: \"var(--font-size)\",\n  lineHeight: \"var(--line-height)\",\n  fontWeight: \"var(--font-weight)\",\n\n  \"*:disabled > &\": {\n    backgroundColor: vars.semantic.color.surfaceSub,\n    color: vars.semantic.color.textDisabled,\n  },\n\n  borderRadius: vars.rounded.full,\n});\n","import type { Dispatch, PropsWithChildren, SetStateAction } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { PickRequired } from \"../types\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nconst TabIndexContext = createContext<\n  | ({\n      setActiveIndex: Dispatch<SetStateAction<number>>;\n      activeIndex: number;\n      uniqueId: string;\n    } & Pick<TabsProps, \"variant\" | \"direction\" | \"size\" | \"fullWidth\"> & {\n        underline?: boolean;\n      })\n  | undefined\n>(undefined);\n\nexport const TabProvider = ({\n  children,\n  ...props\n}: PropsWithChildren<\n  {\n    activeIndex: number;\n    setActiveIndex: Dispatch<SetStateAction<number>>;\n    underline?: boolean;\n    uniqueId: string;\n  } & PickRequired<TabsProps, \"direction\" | \"variant\" | \"size\" | \"fullWidth\">\n>) => {\n  return <TabIndexContext.Provider value={props}>{children}</TabIndexContext.Provider>;\n};\n\nexport const useTabContext = () => {\n  const context = useContext(TabIndexContext);\n\n  if (!context) {\n    throw new Error(\"useTabContext must be used within a TabProvider\");\n  }\n\n  return context;\n};\n","export const getTabARIA = ({ index, uniqueId }: { index?: number; uniqueId: string }) => {\n  const tabpanelId = `clay-tabpanel-${uniqueId}-${index}`;\n  const tabId = `clay-tab-${uniqueId}-${index}`;\n\n  return {\n    tab: {\n      id: tabId,\n      \"aria-controls\": tabpanelId,\n    },\n    tabpanel: {\n      id: tabpanelId,\n      \"aria-labelledby\": tabId,\n    },\n  };\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { cloneElement, useCallback } from \"react\";\nimport { Flex } from \"../utilities\";\nimport { getValidChildren } from \"../utils\";\nimport { useTabContext } from \"./Tab.provider\";\nimport { tabListCSS } from \"./Tabs.css\";\nimport { TabsIndicator } from \"./Tabs.indicator\";\nimport type { TabListProps } from \"./Tabs.types\";\n\nexport const TabList = ({ children, className, sx }: TabListProps) => {\n  const tabContext = useTabContext();\n  const tabKeyList = getValidChildren(children).map((_, index) => index);\n  const len = tabKeyList.length;\n\n  const renderTabs = () =>\n    getValidChildren(children).map((child, index) => {\n      return cloneElement(child, {\n        // eslint-disable-next-line react/no-array-index-key\n        key: index,\n        _onClick: () => {\n          tabContext.setActiveIndex(index);\n        },\n        _index: index,\n      });\n    });\n\n  const keyDownHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const { activeIndex, setActiveIndex } = tabContext;\n\n      const jump = (index: number) => {\n        setActiveIndex(index);\n      };\n\n      const move = (step: number) => {\n        jump(tabKeyList[(((activeIndex + step) % len) + len) % len]);\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          jump(tabKeyList[0]);\n          break;\n        case \"End\":\n          jump(tabKeyList[tabKeyList.length - 1]);\n          break;\n\n        default:\n          break;\n      }\n    },\n    [len, tabContext, tabKeyList],\n  );\n\n  return (\n    <Flex\n      className={className}\n      sx={sx}\n      position=\"relative\"\n      display={tabContext.fullWidth ? \"flex\" : \"inline-flex\"}\n      width={tabContext.fullWidth ? \"100%\" : \"fit-content\"}\n      flexDirection={tabContext.direction === \"vertical\" ? \"column\" : \"row\"}\n      native={{\n        role: \"tablist\",\n        onKeyDown: keyDownHandler,\n        \"aria-orientation\": tabContext.direction,\n      }}\n      whiteSpace=\"nowrap\"\n      css={[\n        tabListCSS({\n          variant: tabContext.variant,\n          size: tabContext.size,\n        }),\n        {\n          \"&::-webkit-scrollbar\": {\n            display: \"none\",\n          },\n        },\n      ]}\n    >\n      {renderTabs()}\n\n      {tabContext.variant === \"text\" && tabContext.underline && <TabsIndicator />}\n    </Flex>\n  );\n};\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport { match } from \"ts-pattern\";\nimport type { PickRequired } from \"../types\";\nimport type { FilledTabsProps, TabsProps, TextTabsProps } from \"./Tabs.types\";\n\nconst filledCss = ({ size }: PickRequired<FilledTabsProps, \"size\">) =>\n  css({\n    gap: vars.spacing[size === \"large\" ? \"15\" : 1],\n\n    '[role=\"tab\"]': {\n      ...vars.semantic.typography[`label-${size === \"large\" ? \"large\" : \"medium\"}-bold`],\n\n      padding: match(size)\n        .with(\"small\", () => `${vars.spacing[1]} ${vars.spacing[3]}`)\n        .with(\"medium\", () => `${vars.spacing[2]} ${vars.spacing[3]}`)\n        .with(\"large\", () => `${vars.spacing[3]} ${vars.spacing[4]}`)\n        .exhaustive(),\n\n      gap: vars.spacing[size === \"medium\" || size === \"small\" ? 1 : \"15\"],\n\n      transition: \"background-color 0.3s ease-out\",\n\n      '&:not(:disabled)[data-selected=\"true\"]': {\n        backgroundColor: vars.semantic.color.actionPrimary,\n        color: vars.semantic.color.textInverse,\n\n        svg: {\n          color: vars.semantic.color.iconInverse,\n        },\n      },\n\n      '&:not(:disabled, [data-selected=\"true\"]):active': {\n        backgroundColor: vars.semantic.color.actionSecondaryPressed,\n      },\n\n      '&:not([data-selected=\"true\"], :active, :disabled):hover': {\n        backgroundColor: vars.semantic.color.actionSecondaryHover,\n        '& [data-clay-badge-on=\"false\"]': {\n          backgroundColor: vars.semantic.color.actionPrimaryDisabled,\n        },\n      },\n\n      \"&:disabled\": {\n        backgroundColor: \"transparent\",\n        color: vars.semantic.color.textDisabled,\n\n        svg: {\n          color: vars.semantic.color.iconDisabled,\n        },\n      },\n\n      borderRadius: vars.rounded[size === \"small\" ? \"small\" : \"medium\"],\n    },\n  });\n\nconst textCss = ({ size }: PickRequired<TextTabsProps, \"size\">) =>\n  css({\n    ...match(size)\n      .with(\"large\", () => ({\n        gap: vars.spacing[4],\n        ...vars.semantic.typography[\"label-large\"],\n      }))\n      .with(\"medium\", () => ({\n        gap: vars.spacing[3],\n        ...vars.semantic.typography[\"label-medium\"],\n      }))\n      .with(\"xlarge\", () => ({\n        gap: vars.spacing[5],\n        ...vars.semantic.typography[\"label-xlarge-bold\"],\n      }))\n      .with(\"2xlarge\", () => ({\n        gap: vars.spacing[6],\n        ...vars.semantic.typography[\"label-3xlarge-bold\"],\n      }))\n      .exhaustive(),\n\n    '[role=\"tab\"]': {\n      padding: `${vars.spacing[size === \"medium\" ? \"2\" : \"3\"]} 0`,\n      gap: vars.spacing[size === \"medium\" ? 1 : \"15\"],\n\n      transition: \"color 0.3s ease-out\",\n      color: vars.semantic.color.textSub,\n\n      svg: {\n        color: vars.semantic.color.iconSub,\n      },\n\n      '&:not(:disabled)[data-selected=\"true\"]': {\n        color: vars.semantic.color.text,\n\n        svg: {\n          color: vars.semantic.color.icon,\n        },\n      },\n\n      '&:not([data-selected=\"true\"], :active, :disabled):hover': {\n        color: vars.semantic.color.text,\n\n        svg: {\n          color: vars.semantic.color.icon,\n        },\n      },\n\n      \"&:disabled\": {\n        color: vars.semantic.color.textDisabled,\n        cursor: \"not-allowed\",\n\n        svg: {\n          color: vars.semantic.color.iconDisabled,\n        },\n      },\n    },\n  });\n\nexport const tabListCSS = (props: Pick<TabsProps, \"variant\" | \"size\" | \"fullWidth\">) => {\n  const variantStyle = match(props)\n    .with({ variant: \"filled\" }, filledCss)\n    .with({ variant: \"text\" }, textCss)\n    .exhaustive();\n\n  return css({\n    '[role=\"tab\"]': {\n      flex: props.fullWidth ? 1 : \"auto\",\n    },\n\n    ...variantStyle,\n  });\n};\n","import { vars } from \"@imwebme/clay-token\";\nimport { useEffect, useState } from \"react\";\nimport { Flex } from \"../utilities\";\nimport { useTabContext } from \"./Tab.provider\";\nimport { getTabARIA } from \"./Tab.utils\";\n\nexport const TabsIndicator = () => {\n  const tabContext = useTabContext();\n  const [activeTabOffset, setActiveTabOffset] = useState({ left: 0, width: 0 });\n  const attr = getTabARIA({\n    index: tabContext.activeIndex,\n    uniqueId: tabContext.uniqueId,\n  });\n\n  useEffect(() => {\n    const activeTab = document?.querySelector<HTMLButtonElement>(`#${CSS.escape(attr.tab.id)}`);\n\n    const isActiveTabHasDot = activeTab?.querySelector(\"[data-clay-dot-badge]\");\n\n    if (!activeTab) return;\n\n    const DOT_AREA_WIDTH = 10;\n\n    setActiveTabOffset({\n      left: activeTab?.offsetLeft || 0,\n      width:\n        (isActiveTabHasDot && !tabContext.fullWidth\n          ? activeTab.offsetWidth - DOT_AREA_WIDTH\n          : activeTab.offsetWidth) || 0,\n    });\n  }, [attr.tab.id, tabContext.fullWidth]);\n\n  return (\n    <Flex\n      position=\"absolute\"\n      bottom={0}\n      left={activeTabOffset.left ?? 0}\n      width={activeTabOffset.width ?? \"50px\"}\n      height={2}\n      backgroundColor={vars.semantic.color.focus}\n      transition=\"left 0.3s, width 0.3s\"\n    />\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { cloneElement, forwardRef, useRef } from \"react\";\nimport { getValidChildren } from \"../utils\";\nimport { useTabContext } from \"./Tab.provider\";\nimport { getTabARIA } from \"./Tab.utils\";\nimport type { TabPanelProps, TabPanelsProps } from \"./Tabs.types\";\n\nexport const TabPanels = (props: TabPanelsProps) => {\n  const renderTabPanels = () =>\n    getValidChildren(props.children).map((child, index) =>\n      cloneElement(child, {\n        // eslint-disable-next-line react/no-array-index-key\n        key: index,\n        _index: index,\n      }),\n    );\n\n  return <>{renderTabPanels()}</>;\n};\n\ntype TabPanelComponent = <E extends ElementType = \"section\">(\n  props: TabPanelProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const TabPanel: TabPanelComponent = forwardRef(function TabPanel<E extends ElementType>(\n  props: TabPanelProps<E>,\n  ref: ComponentPropsWithRef<E>[\"ref\"],\n) {\n  const isFirstOpen = useRef(true);\n  const Element = props.as ?? \"section\";\n  const tabContext = useTabContext();\n\n  const attr = getTabARIA({\n    index: props._index,\n    uniqueId: tabContext.uniqueId,\n  });\n\n  if (!tabContext) {\n    return null;\n  }\n\n  const isActive = tabContext.activeIndex === props._index;\n  const shouldRender = isActive || props.preRender || isFirstOpen.current === false;\n\n  if (isActive && isFirstOpen.current) isFirstOpen.current = false;\n\n  return (\n    <Element\n      role=\"tabpanel\"\n      tabIndex={0}\n      ref={ref}\n      className={props.className}\n      css={props.sx}\n      {...props.native}\n      {...attr.tabpanel}\n      {...(!isActive && { hidden: true })}\n    >\n      {shouldRender ? props.children : null}\n    </Element>\n  );\n});\n","import { useControllableState } from \"@imwebme/clay-hooks\";\nimport { useId } from \"react\";\nimport { Flex } from \"../utilities\";\nimport { TabProvider } from \"./Tab.provider\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nexport const Tabs = ({\n  direction = \"horizontal\",\n  size = \"medium\",\n  fullWidth = false,\n  defaultIndex = 0,\n  ...props\n}: TabsProps) => {\n  const [activeIndex, setActiveIndex] = useControllableState({\n    value: props.index,\n    defaultValue: defaultIndex,\n    onChange: props.onChange,\n  });\n\n  const id = useId();\n\n  return (\n    <TabProvider\n      activeIndex={props.index ?? activeIndex}\n      setActiveIndex={setActiveIndex}\n      direction={direction}\n      variant={props.variant}\n      size={size}\n      fullWidth={fullWidth}\n      underline={props.variant === \"text\" ? props.underline : false}\n      uniqueId={id}\n    >\n      <Flex flexDirection={direction === \"horizontal\" ? \"column\" : \"row\"} overflow=\"hidden\">\n        {props.children}\n      </Flex>\n    </TabProvider>\n  );\n};\n"]}