@epilot/zenith-react 0.2.0-next.3 → 0.2.0-next.4

package/dist/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n  /** Selects a tab. Absent when a trigger renders outside `Tabs`. */\n  select?: (value: string) => void\n  /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n  beginPress?: (value: string) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    ...boxModel,\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    ...nativeControl,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    // A label never wraps, so selection (and its semibold) can never change a tab's height.\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n    // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n    // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n    // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n    \"&[data-label]\": {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      rowGap: 0,\n      \"&::after\": {\n        content: \"attr(data-label)\",\n        height: 0,\n        ...shorthands.overflow(\"hidden\"),\n        visibility: \"hidden\",\n        pointerEvents: \"none\",\n        userSelect: \"none\",\n        fontWeight: tokens.fontWeightSemibold,\n      },\n    },\n    // A vertical rail keeps its labels left-aligned inside the reserved width.\n    \"&[data-orientation='vertical'][data-label]\": {\n      alignItems: \"flex-start\",\n    },\n    // #18: the selected tab is marked by a semibold label, not by colour alone.\n    \"&[data-state='active']\": {\n      fontWeight: tokens.fontWeightSemibold,\n    },\n    // In a vertical rail the selected tab also carries a leading bar, whose colour comes from the\n    // variant; horizontal tabs are marked by weight and fill alone.\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        content: \"''\",\n        position: \"absolute\",\n        left: 0,\n        top: tokens.spacingElement2,\n        bottom: tokens.spacingElement2,\n        // No stroke token owns a 3px indicator bar.\n        width: \"3px\",\n        ...shorthands.borderRadius(tokens.radiusFull),\n      },\n    },\n  },\n  // Sizes\n  sm: {\n    ...boxModel,\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n    // the selected tab keeps its fill under the pointer.\n    \":hover\": {\n      backgroundColor: tokens.grayA2,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\n      \"&:hover\": {\n        backgroundColor: tokens.grayA3,\n      },\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.accentA11,\n      },\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.accentA11,\n      },\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.errorA11,\n      },\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // Zenith owns the value so a trigger can select on click, which Radix does not do (it selects on\n  // mousedown, Enter/Space and focus). Radix always receives it controlled; \"\" selects nothing,\n  // which is what an uncontrolled Root without a defaultValue shows.\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = (isControlled ? valueProp : uncontrolled) ?? \"\"\n  const latest = React.useRef({ value, isControlled, onValueChange })\n  latest.current = { value, isControlled, onValueChange }\n\n  // One pointer press on a trigger can reach `select` twice for the same tab: Radix selects on\n  // mousedown, then again on the focus that press causes if the tab is still unselected, which it\n  // is when a controlled owner declined (#17; unchanged through Radix Tabs 1.2.1). A press opens a\n  // window in which only the first report for its tab goes through. Mousedown and the focus it\n  // causes run in one task, so the window closes on the next one and a later focus is reported.\n  const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n  const beginPress = React.useCallback((pressed: string) => {\n    const token = { value: pressed, reported: false }\n    press.current = token\n    setTimeout(() => {\n      if (press.current === token) press.current = null\n    }, 0)\n  }, [])\n\n  const select = React.useCallback((next: string) => {\n    const current = latest.current\n    const pressed = press.current\n    if (pressed !== null && pressed.value === next) {\n      if (pressed.reported) return\n      pressed.reported = true\n    }\n    if (next === current.value) return\n    if (!current.isControlled) setUncontrolled(next)\n    current.onValueChange?.(next)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ size, variant, select, beginPress }),\n    [size, variant, select, beginPress]\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n        value={value}\n        onValueChange={select}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n  /** The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. */\n  children?: React.ReactNode\n}\n\n/** A string, number, or array of only strings and numbers, as one string; otherwise undefined. */\nfunction plainLabel(children: React.ReactNode): string | undefined {\n  if (typeof children === \"string\" || typeof children === \"number\")\n    return String(children)\n  if (\n    Array.isArray(children) &&\n    children.every((c) => typeof c === \"string\" || typeof c === \"number\")\n  )\n    return children.join(\"\")\n  return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger(\n  {\n    className,\n    variant = \"default\",\n    onClick,\n    onKeyDown,\n    onBlur,\n    onMouseDown,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    size,\n    variant: rootVariant,\n    select,\n    beginPress,\n  } = React.useContext(TabsContext)\n\n  // Runs before Radix's own mousedown handler, under the same conditions Radix selects on.\n  const handleMouseDown: TabsTriggerProps[\"onMouseDown\"] = (event) => {\n    onMouseDown?.(event)\n    if (\n      !event.defaultPrevented &&\n      event.button === 0 &&\n      !event.ctrlKey &&\n      !props.disabled\n    ) {\n      beginPress?.(props.value)\n    }\n  }\n\n  // Radix has already selected on the key that synthesises this click; selecting again would\n  // report the change twice to an owner that declined it.\n  const keyActivated = React.useRef(false)\n\n  const handleKeyDown: TabsTriggerProps[\"onKeyDown\"] = (event) => {\n    onKeyDown?.(event)\n    // Only a key Radix acted on synthesises a click. A prevented one skips Radix and produces no\n    // click, so flagging it would leave nothing to clear the flag and swallow the next bare click.\n    keyActivated.current =\n      !event.defaultPrevented && (event.key === \"Enter\" || event.key === \" \")\n  }\n\n  const handleBlur: TabsTriggerProps[\"onBlur\"] = (event) => {\n    onBlur?.(event)\n    keyActivated.current = false\n  }\n\n  // A click with no mousedown before it — `element.click()`, assistive technology, automation —\n  // reaches none of Radix's handlers. `detail` is 0 for exactly those clicks; a pointer click\n  // carries its count and was already handled, or deliberately refused, on mousedown.\n  const handleClick: TabsTriggerProps[\"onClick\"] = (event) => {\n    onClick?.(event)\n    const fromKey = keyActivated.current\n    keyActivated.current = false\n    if (\n      fromKey ||\n      event.detail !== 0 ||\n      event.defaultPrevented ||\n      event.ctrlKey ||\n      props.disabled\n    ) {\n      return\n    }\n    select?.(props.value)\n  }\n\n  // Feeds the reserved-width copy; only plain text can be copied by CSS.\n  const label = plainLabel(props.children)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      data-label={label}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n      // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n      {...(label !== undefined ? { children: label } : {})}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.radiusFull","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA11","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","token","select","next","current","_a","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","plainLabel","children","c","TabsTrigger","onClick","onKeyDown","onBlur","onMouseDown","rootVariant","handleMouseDown","event","keyActivated","handleKeyDown","handleBlur","handleClick","fromKey","label","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsActivationMode = \"automatic\" | \"manual\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n  /** The root's `activationMode`, which Base UI reads from the list as `activateOnFocus`. */\n  activationMode: TabsActivationMode\n  /** The root's `dir`, which Base UI reads from a `DirectionProvider` around the list. */\n  dir?: \"ltr\" | \"rtl\"\n  /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n  beginPress?: (value: string, doc: Document) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n  activationMode: \"automatic\",\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    ...boxModel,\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    // A label never wraps, so selection (and its semibold) can never change a tab's height.\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n    // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n    // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n    // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n    \"&[data-label]\": {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      rowGap: 0,\n      \"&::after\": {\n        content: \"attr(data-label)\",\n        height: 0,\n        ...shorthands.overflow(\"hidden\"),\n        visibility: \"hidden\",\n        pointerEvents: \"none\",\n        userSelect: \"none\",\n        fontWeight: tokens.fontWeightSemibold,\n      },\n    },\n    // A vertical rail keeps its labels left-aligned inside the reserved width.\n    \"&[data-orientation='vertical'][data-label]\": {\n      alignItems: \"flex-start\",\n    },\n    // #18: the selected tab is marked by a semibold label, not by colour alone.\n    \"&[data-active]\": {\n      fontWeight: tokens.fontWeightSemibold,\n    },\n  },\n  // Sizes\n  sm: {\n    ...boxModel,\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n    // the selected tab keeps its fill under the pointer.\n    \":hover\": {\n      backgroundColor: tokens.grayA2,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-active]\": {\n      backgroundColor: tokens.grayA3,\n      \"&:hover\": {\n        backgroundColor: tokens.grayA3,\n      },\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-active]\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-active]\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\n/**\n * Radix's `asChild` over Base UI's `render`: the single child element becomes the part and keeps\n * its own children, since Base UI lets the rendered element's props win the merge.\n */\nfunction slotProps(asChild: boolean, children: React.ReactNode) {\n  const child = asChild ? onlySlotChild(children) : undefined\n  return child ? { render: child } : { children }\n}\n\n/**\n * What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\ntype TabsValueChangeDetails = {\n  /**\n   * Why the tab changed. `Tabs` keeps the selection itself, so every change it reports is a\n   * person's (a click, a key, or focus under automatic activation), which Base UI calls `none`.\n   */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the current tab selected. */\n  cancel: () => void\n  /** Lets the event propagate where the tabs would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n  /** Where the newly selected tab sits relative to the previous one. */\n  activationDirection: \"left\" | \"right\" | \"up\" | \"down\" | \"none\"\n}\n\n/**\n * The root's own props, declared in Zenith rather than taken from Base UI, whose types would leak\n * into the published declarations. The root renders a `<div>`, so the DOM attributes,\n * handlers, `ref`, `key`, `className` and `style` stay the div's.\n */\ntype TabsRootProps = {\n  /** The value of the selected tab, when the tabs are controlled. */\n  value?: string\n  /** The value of the tab selected at first, when the tabs are uncontrolled. Without it no tab is selected. */\n  defaultValue?: string\n  /**\n   * Called with the newly selected tab's value and Base UI's change details. `eventDetails.cancel()`\n   * keeps the current tab selected.\n   */\n  onValueChange?: (value: string, eventDetails: TabsValueChangeDetails) => void\n  /**\n   * How the tabs are laid out, which also sets the arrow keys that move between them (left and\n   * right, or up and down).\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\"\n  /** The reading direction of the tabs; under `rtl` the left and right arrow keys swap. */\n  dir?: \"ltr\" | \"rtl\"\n  /**\n   * Whether a tab is selected as soon as the arrow keys focus it (`automatic`), or only on Enter,\n   * Space or a click (`manual`).\n   * @default \"automatic\"\n   */\n  activationMode?: TabsActivationMode\n  /** Renders the single child element as the root, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\nexport type TabsProps = Omit<\n  React.ComponentPropsWithRef<\"div\">,\n  keyof TabsRootProps\n> &\n  TabsRootProps & {\n    size?: TabsSize\n    variant?: TabsRootVariant\n  }\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    activationMode = \"automatic\",\n    dir,\n    asChild = false,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // Zenith owns the value, so Base UI always receives it controlled: an uncontrolled Base UI root\n  // selects its first tab when there is no defaultValue and reports that as a change, where these\n  // tabs select nothing. `null` is Base UI's \"no tab selected\".\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : uncontrolled\n  const latest = React.useRef({ isControlled, onValueChange })\n  latest.current = { isControlled, onValueChange }\n\n  // One pointer press on a trigger can reach `select` twice for the same tab under automatic\n  // activation: Base UI selects on the focus the press causes, then again on its click if the tab\n  // is still unselected, which it is when a controlled owner declined (#17). A press opens a\n  // window in which only the first report for its tab goes through. The click a release causes is\n  // dispatched in the same task as its pointerup, so the window closes on the task after that.\n  const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n  const beginPress = React.useCallback((pressed: string, doc: Document) => {\n    const token = { value: pressed, reported: false }\n    press.current = token\n    const end = () => {\n      doc.removeEventListener(\"pointerup\", end, true)\n      doc.removeEventListener(\"pointercancel\", end, true)\n      setTimeout(() => {\n        if (press.current === token) press.current = null\n      }, 0)\n    }\n    doc.addEventListener(\"pointerup\", end, true)\n    doc.addEventListener(\"pointercancel\", end, true)\n  }, [])\n\n  const select = React.useCallback(\n    (next: string, eventDetails: TabsPrimitive.Root.ChangeEventDetails) => {\n      const pressed = press.current\n      if (pressed !== null && pressed.value === next) {\n        if (pressed.reported) {\n          eventDetails.cancel()\n          return\n        }\n        pressed.reported = true\n      }\n      const current = latest.current\n      // Base UI reports `initial`, `disabled` and `missing` only for an uncontrolled root, and this\n      // one is always controlled, so the reason is `none`.\n      current.onValueChange?.(next, eventDetails as TabsValueChangeDetails)\n      if (!current.isControlled && !eventDetails.isCanceled)\n        setUncontrolled(next)\n    },\n    []\n  )\n\n  const contextValue = React.useMemo(\n    () => ({ size, variant, activationMode, dir, beginPress }),\n    [size, variant, activationMode, dir, beginPress]\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        // Base UI types the root's handlers with its own event wrapper; the element is the same\n        // <div>, so the caller's div-typed handlers receive exactly the events they declare.\n        {...(props as TabsPrimitive.Root.Props)}\n        dir={dir}\n        {...slotProps(asChild, children)}\n        value={value ?? null}\n        onValueChange={select}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentPropsWithRef<\"div\"> & {\n  /** Whether the arrow keys wrap from the last tab to the first and back. @default true */\n  loop?: boolean\n  /** Renders the single child element as the list, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  function TabsList(\n    { className, loop, asChild = false, children, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n    const { activationMode, dir } = React.useContext(TabsContext)\n\n    const list = (\n      <TabsPrimitive.List\n        ref={ref}\n        data-slot=\"tabs-list\"\n        {...{ [SLOT_ATTR]: \"tabs-list\" }}\n        className={mergeClasses(styles.list, className)}\n        // Radix selected the focused tab by default; Base UI only does when told to.\n        activateOnFocus={activationMode === \"automatic\"}\n        loopFocus={loop}\n        {...(props as TabsPrimitive.List.Props)}\n        {...slotProps(asChild, children)}\n      />\n    )\n\n    // Base UI's arrow keys follow the direction a provider gives them, not the root's attribute.\n    return dir ? (\n      <DirectionProvider direction={dir}>{list}</DirectionProvider>\n    ) : (\n      list\n    )\n  }\n)\n\nexport type TabsTriggerProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  \"value\"\n> & {\n  /** Pairs the tab with the `TabsContent` of the same value. */\n  value: string\n  variant?: TabsTriggerVariant\n  /** The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. */\n  children?: React.ReactNode\n  /** Renders the single child element as the tab, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\n/** A string, number, or array of only strings and numbers, as one string; otherwise undefined. */\nfunction plainLabel(children: React.ReactNode): string | undefined {\n  if (typeof children === \"string\" || typeof children === \"number\")\n    return String(children)\n  if (\n    Array.isArray(children) &&\n    children.every((c) => typeof c === \"string\" || typeof c === \"number\")\n  )\n    return children.join(\"\")\n  return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  TabsTriggerProps\n>(function TabsTrigger(\n  {\n    className,\n    variant = \"default\",\n    asChild = false,\n    children,\n    onClick,\n    onKeyDown,\n    onPointerDown,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    size,\n    variant: rootVariant,\n    beginPress,\n  } = React.useContext(TabsContext)\n  const child = asChild ? onlySlotChild(children) : undefined\n  // Base UI drives a native <button> unless told otherwise; a child that is another intrinsic\n  // element gets the ARIA button behaviour Radix's Slot gave it.\n  const nativeButton =\n    !child || typeof child.type !== \"string\" || child.type === \"button\"\n\n  const handlePointerDown: TabsTriggerProps[\"onPointerDown\"] = (event) => {\n    onPointerDown?.(event)\n    if (event.button === 0 && !props.disabled) {\n      beginPress?.(props.value, event.currentTarget.ownerDocument)\n    }\n  }\n\n  // Feeds the reserved-width copy; only plain text can be copied by CSS.\n  const label = child ? undefined : plainLabel(children)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Tab\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      data-label={label}\n      nativeButton={nativeButton}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...(props as TabsPrimitive.Tab.Props)}\n      // The caller's handlers run before Base UI's. As under Radix, a click the caller prevented\n      // selects nothing, and neither does a ctrl-click, which macOS reserves for the context menu.\n      onClick={(event) => {\n        onClick?.(event as React.MouseEvent<HTMLButtonElement>)\n        if (event.defaultPrevented || event.ctrlKey)\n          event.preventBaseUIHandler()\n      }}\n      // Base UI selects a tab on Space even when the caller prevented the keydown; a prevented\n      // key selects nothing, as it does on a native button and did under Radix.\n      onKeyDown={(event) => {\n        onKeyDown?.(event as React.KeyboardEvent<HTMLButtonElement>)\n        if (event.defaultPrevented && event.key === \" \") {\n          event.preventBaseUIHandler()\n        }\n      }}\n      onPointerDown={handlePointerDown}\n      // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n      {...(child\n        ? { render: child }\n        : { children: label !== undefined ? label : children })}\n    />\n  )\n})\n\nexport type TabsContentProps = Omit<\n  React.ComponentPropsWithRef<\"div\">,\n  \"value\"\n> & {\n  /** Pairs the panel with the `TabsTrigger` of the same value. */\n  value: string\n  /** Keeps the panel mounted while its tab is not selected, hidden. */\n  forceMount?: true\n  /** Renders the single child element as the panel, merging its props and behaviour onto it. */\n  asChild?: boolean\n}\n\nexport const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n  function TabsContent(\n    { className, forceMount, asChild = false, children, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <TabsPrimitive.Panel\n        ref={ref}\n        data-slot=\"tabs-content\"\n        {...{ [SLOT_ATTR]: \"tabs-content\" }}\n        className={mergeClasses(styles.content, className)}\n        keepMounted={forceMount}\n        {...(props as TabsPrimitive.Panel.Props)}\n        {...slotProps(asChild, children)}\n      />\n    )\n  }\n)\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","onlySlotChild","children","elements","slotProps","asChild","child","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","activationMode","dir","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","doc","token","end","select","next","eventDetails","current","_a","contextValue","jsx","TabsPrimitive","SLOT_ATTR","mergeClasses","TabsList","loop","list","DirectionProvider","plainLabel","c","TabsTrigger","onClick","onKeyDown","onPointerDown","rootVariant","nativeButton","handlePointerDown","event","label","resolvedVariantClass","TabsContent","forceMount"],"mappings":"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"}