{"version":3,"file":"Tabs.mjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@raikou/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSafeId,\n  getThemeColor,\n  RaikouColor,\n  RaikouRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TabsProvider } from './Tabs.context';\nimport { TabsList, TabsListStylesNames } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames } from './TabsTab/TabsTab';\nimport {\n  TabsListStyle,\n  TabsPanelStyle,\n  TabsRootStyle,\n  TabsTabSectionStyle,\n  TabsTabStyle,\n} from './Tabs.css';\n\nexport type TabsStylesNames =\n  | 'root'\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabsTabStylesNames;\n\nexport type TabsVariant = 'default' | 'outline' | 'pills';\nexport type TabsCssVariables = {\n  root: '--tabs-color' | '--tabs-radius';\n};\n\nexport interface TabsProps\n  extends BoxProps,\n    StylesApiProps<TabsFactory>,\n    ElementProps<'div', 'defaultValue' | 'value' | 'onChange'> {\n  /** Default value for uncontrolled component */\n  defaultValue?: string | null;\n\n  /** Value for controlled component */\n  value?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Tabs orientation, `'horizontal'` by default */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"`, `'left'` by default */\n  placement?: 'left' | 'right';\n\n  /** Base id, used to generate ids to connect labels with controls, generated randomly by default */\n  id?: string;\n\n  /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */\n  loop?: boolean;\n\n  /** Determines whether tab should be activated with arrow key press, `true` by default */\n  activateTabWithKeyboard?: boolean;\n\n  /** Determines whether tab can be deactivated, `false` by default */\n  allowTabDeactivation?: boolean;\n\n  /** Tabs content */\n  children?: React.ReactNode;\n\n  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */\n  color?: RaikouColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */\n  radius?: RaikouRadius;\n\n  /** Determines whether tabs should have inverted styles, `false` by default */\n  inverted?: boolean;\n\n  /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active, `true` by default */\n  keepMounted?: boolean;\n\n  /** Determines whether active item text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. Only applicable when `variant=\"pills\"` */\n  autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n  props: TabsProps;\n  ref: HTMLDivElement;\n  variant: TabsVariant;\n  stylesNames: TabsStylesNames;\n  vars: TabsCssVariables;\n  staticComponents: {\n    Tab: typeof TabsTab;\n    Panel: typeof TabsPanel;\n    List: typeof TabsList;\n  };\n}>;\n\nconst VALUE_ERROR =\n  'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps: Partial<TabsProps> = {\n  keepMounted: true,\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  allowTabDeactivation: false,\n  unstyled: false,\n  inverted: false,\n  variant: 'default',\n  placement: 'left',\n};\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n  root: {\n    '--tabs-radius': getRadius(radius),\n    '--tabs-color': getThemeColor(color, theme),\n    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n      ? getContrastColor({ color, theme, autoContrast })\n      : undefined,\n  },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props, ref) => {\n  const props = useProps('Tabs', defaultProps, _props);\n  const {\n    defaultValue,\n    value,\n    onChange,\n    orientation,\n    children,\n    loop,\n    id,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    variant,\n    color,\n    radius,\n    inverted,\n    placement,\n    keepMounted,\n    classNames,\n    styles,\n    unstyled,\n    className,\n    style,\n    vars,\n    autoContrast,\n    mod,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n\n  const [currentTab, setCurrentTab] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const getStyles = useStyles<TabsFactory>({\n    name: 'Tabs',\n    props,\n    classes: {\n      root: TabsRootStyle,\n      list: TabsListStyle,\n      panel: TabsPanelStyle,\n      tab: TabsTabStyle,\n      tabSection: TabsTabSectionStyle,\n    },\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TabsProvider\n      value={{\n        placement,\n        value: currentTab,\n        orientation,\n        id: uid,\n        loop,\n        activateTabWithKeyboard,\n        getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n        getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n        onChange: setCurrentTab,\n        allowTabDeactivation,\n        variant,\n        color,\n        radius,\n        inverted,\n        keepMounted,\n        unstyled,\n        getStyles,\n      }}\n    >\n      <Box\n        ref={ref}\n        id={uid}\n        variant={variant}\n        mod={[\n          {\n            orientation,\n            inverted: orientation === 'horizontal' && inverted,\n            placement: orientation === 'vertical' && placement,\n          },\n          mod,\n        ]}\n        {...getStyles('root')}\n        {...others}\n      >\n        {children}\n      </Box>\n    </TabsProvider>\n  );\n});\n\nTabs.displayName = '@raikou/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n"],"names":[],"mappings":"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"}