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

package/dist/components/option-card/option-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n  \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n  \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n  type?: \"single\" | \"multiple\"\n  layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n  React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n  controlType: OptionCardControlType\n  registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n  null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeZenithStyles({\n  // Group layouts\n  group: {\n    // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n    // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n    // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n    // why tsc accepted that for as long as it did.\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n\n  // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n  grid: {\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n  },\n  // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n  // as equal-weight peers regardless of their content.\n  row: {\n    gridAutoFlow: \"column\",\n    gridAutoColumns: \"minmax(0, 1fr)\",\n  },\n  // v1: plain `grid` with no template. One column, stacked.\n  column: {},\n\n  card: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n    ...shorthands.gap(tokens.spacingElement3),\n    overflow: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    // Not currentColor: that picked up this rule's `color: grayA12` and painted a near-black\n    // edge. The predecessor's bare `border` resolved to a subtle grey; grayA6 is its match.\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA6),\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.375rem\"),\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    backgroundColor: \"transparent\",\n    transitionProperty: \"color, background-color, border-color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    height: \"auto\",\n    minWidth: \"0\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentSoft,\n      ...shorthands.borderColor(tokens.accentA8),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n      ...shorthands.borderColor(tokens.accentSolid),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n      ...shorthands.borderColor(\"transparent\"),\n      backgroundColor: tokens.accentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n      backgroundColor: tokens.accentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n  },\n\n  // Media\n  mediaRoot: {\n    flexShrink: 0,\n  },\n  mediaIcon: {\n    display: \"grid\",\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    placeContent: \"center\",\n    alignSelf: \"start\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentLight,\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n  mediaIllustration: {\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    alignSelf: \"stretch\",\n    overflow: \"hidden\",\n    \"& svg\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n    },\n    \"& img\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"contain\",\n    },\n  },\n\n  // Content\n  content: {\n    display: \"grid\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    gridAutoRows: \"min-content\",\n    alignItems: \"center\",\n    columnGap: tokens.spacingElement2,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n\n  // Title\n  title: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    minWidth: 0,\n    alignSelf: \"center\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  // Description\n  description: {\n    gridColumnStart: 1,\n    gridRowStart: 2,\n    minWidth: 0,\n    overflowWrap: \"break-word\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA11,\n  },\n\n  // Control\n  control: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    alignSelf: \"center\",\n    justifySelf: \"end\",\n  },\n\n  // Radio glyph\n  radioOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    transitionProperty: \"border-color\",\n    transitionDuration: \"150ms\",\n  },\n  radioDot: {\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.accentSolid,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Checkbox glyph\n  checkboxOuter: {\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    ...shorthands.borderRadius(\"4px\"),\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentContrast,\n    transitionProperty: \"background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  checkboxCheck: {\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Switch glyph\n  switchTrack: {\n    display: \"inline-flex\",\n    height: \"1.25rem\",\n    width: \"2.125rem\",\n    flexShrink: 0,\n    alignItems: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    backgroundColor: tokens.grayA3,\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n  },\n  switchThumb: {\n    display: \"block\",\n    width: \"1rem\",\n    height: \"1rem\",\n    transform: \"translateX(1px)\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.grayContrast,\n    // v1 shadow-xs; no shadow tokens in this package.\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n  },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n  </svg>\n)\n\nconst RadioGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.radioOuter}\n      {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n    >\n      <span\n        className={styles.radioDot}\n        {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n      />\n    </span>\n  )\n}\n\nconst CheckboxGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.checkboxOuter}\n      {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n    >\n      <CheckIcon\n        className={styles.checkboxCheck}\n        {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n      />\n    </span>\n  )\n}\n\nconst SwitchGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.switchTrack}\n      {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n    >\n      <span\n        className={styles.switchThumb}\n        {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n      />\n    </span>\n  )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Root\n> & {\n  layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  OptionCardGroupProps\n>(function OptionCardGroup(\n  { className, layout = DEFAULT_LAYOUT, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n      <ToggleGroupPrimitive.Root\n        ref={ref}\n        data-slot=\"option-card-group\"\n        {...{ [SLOT_ATTR]: \"option-card-group\" }}\n        data-layout={layout}\n        {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n        className={mergeClasses(styles.group, styles[layout], className)}\n        {...props}\n      />\n    </OptionCardGroupContext.Provider>\n  )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n  type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n  const styles = useStyles()\n  const card = React.useContext(OptionCardContext)\n  const register = card?.registerType\n\n  React.useEffect(() => {\n    if (type && register) register(type)\n  }, [type, register])\n\n  const resolved = type ?? card?.controlType ?? \"checkbox\"\n  if (resolved === \"none\") return null\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-control\"\n      {...{ [SLOT_ATTR]: \"option-card-control\" }}\n      className={mergeClasses(styles.control, className)}\n      {...props}\n    >\n      {resolved === \"radio\" ? (\n        <RadioGlyph />\n      ) : resolved === \"switch\" ? (\n        <SwitchGlyph />\n      ) : (\n        <CheckboxGlyph />\n      )}\n    </span>\n  )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n  variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-media\"\n      {...{ [SLOT_ATTR]: \"option-card-media\" }}\n      data-variant={variant}\n      className={mergeClasses(\n        styles.mediaRoot,\n        variant === \"illustration\"\n          ? styles.mediaIllustration\n          : styles.mediaIcon,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-title\"\n      {...{ [SLOT_ATTR]: \"option-card-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-description\"\n      {...{ [SLOT_ATTR]: \"option-card-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n  React.Children.toArray(children).some(\n    (c) => React.isValidElement(c) && c.type === OptionCardControl\n  )\n\nexport const OptionCardContent = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-content\"\n      {...{ [SLOT_ATTR]: \"option-card-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    >\n      {children}\n      {!hasControl(children) && <OptionCardControl />}\n    </span>\n  )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onChange\" | \"title\"\n> & {\n  /** Value of this option. Required inside an {@link OptionCardGroup}. */\n  value?: string\n  /** Controlled selected state for a standalone (group-less) card. */\n  pressed?: boolean\n  /** Uncontrolled default selected state for a standalone card. */\n  defaultPressed?: boolean\n  /** Fired when a standalone card is toggled. */\n  onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n  React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n  function OptionCard(\n    {\n      className,\n      children,\n      value,\n      pressed,\n      defaultPressed,\n      onPressedChange,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(OptionCardGroupContext)\n    const inGroup = group !== null\n\n    const fallbackId = React.useId()\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      inGroup &&\n      value === undefined\n    ) {\n      console.warn(MISSING_VALUE_WARNING)\n    }\n\n    const [internalPressed, setInternalPressed] = React.useState(\n      defaultPressed ?? false\n    )\n    const isControlled = pressed !== undefined\n    const currentPressed = isControlled ? pressed : internalPressed\n    const handlePressedChange = (next: boolean) => {\n      if (!isControlled) setInternalPressed(next)\n      onPressedChange?.(next)\n    }\n\n    const groupControlType: OptionCardControlType = inGroup\n      ? group.type === \"multiple\"\n        ? \"checkbox\"\n        : \"radio\"\n      : \"checkbox\"\n    const [controlType, setControlType] =\n      React.useState<OptionCardControlType>(groupControlType)\n    const ctx = React.useMemo<OptionCardContextValue>(\n      () => ({ controlType, registerType: setControlType }),\n      [controlType]\n    )\n\n    const childArray = React.Children.toArray(children)\n    const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n    const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n    const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n    const content = hasContentChild ? (\n      rest\n    ) : (\n      <OptionCardContent>\n        <OptionCardTitle>{rest}</OptionCardTitle>\n      </OptionCardContent>\n    )\n\n    const body = (\n      <>\n        {media}\n        {content}\n      </>\n    )\n\n    if (inGroup) {\n      return (\n        <OptionCardContext.Provider value={ctx}>\n          <ToggleGroupPrimitive.Item\n            ref={ref}\n            data-slot=\"option-card\"\n            {...{ [SLOT_ATTR]: \"option-card\" }}\n            value={value ?? fallbackId}\n            className={mergeClasses(styles.card, className)}\n            {...props}\n          >\n            {body}\n          </ToggleGroupPrimitive.Item>\n        </OptionCardContext.Provider>\n      )\n    }\n\n    const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n    return (\n      <OptionCardContext.Provider value={ctx}>\n        <TogglePrimitive.Root\n          ref={ref}\n          data-slot=\"option-card\"\n          {...{ [SLOT_ATTR]: \"option-card\" }}\n          pressed={currentPressed}\n          onPressedChange={handlePressedChange}\n          role={standaloneRole}\n          aria-checked={currentPressed}\n          aria-pressed={undefined}\n          className={mergeClasses(styles.card, className)}\n          {...props}\n        >\n          {body}\n        </TogglePrimitive.Root>\n      </OptionCardContext.Provider>\n    )\n  }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeZenithStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.grayA6","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.accentSoft","SLOT_ATTR","tokens.accentSolid","tokens.accentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsx","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","jsxs","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}
+{"version":3,"file":"option-card.js","sources":["../../../src/components/option-card/option-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\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\nconst DEFAULT_LAYOUT = \"grid\" as const\n\nconst MISSING_VALUE_WARNING =\n  \"OptionCard: a card inside an OptionCardGroup is missing a `value`. \" +\n  \"Give each card a unique `value` so it can be selected and controlled.\"\n\n/** The trailing control glyph an {@link OptionCard} shows for its selected state. */\nexport type OptionCardControlType = \"radio\" | \"checkbox\" | \"switch\" | \"none\"\n\nexport type OptionCardLayout = \"grid\" | \"row\" | \"column\"\n\n// ── Group context ──────────────────────────────────────────────────────────\ntype OptionCardGroupContextValue = {\n  type?: \"single\" | \"multiple\"\n  layout: OptionCardLayout\n}\nconst OptionCardGroupContext =\n  React.createContext<OptionCardGroupContextValue | null>(null)\n\n// ── Card context ───────────────────────────────────────────────────────────\ntype OptionCardContextValue = {\n  controlType: OptionCardControlType\n  registerType: (type: OptionCardControlType) => void\n}\nconst OptionCardContext = React.createContext<OptionCardContextValue | null>(\n  null\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeZenithStyles({\n  // Group layouts\n  group: {\n    ...boxModel,\n    // The GROUP only lays out. v1's group base class is literally \"\" -- every border, padding and\n    // interaction style below used to live here, copied from v1's CARD class onto the wrong element,\n    // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for\n    // why tsc accepted that for as long as it did.\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n\n  // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]\n  grid: {\n    gridTemplateColumns: \"repeat(auto-fit, minmax(200px, 1fr))\",\n  },\n  // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read\n  // as equal-weight peers regardless of their content.\n  row: {\n    gridAutoFlow: \"column\",\n    gridAutoColumns: \"minmax(0, 1fr)\",\n  },\n  // v1: plain `grid` with no template. One column, stacked.\n  column: {},\n\n  card: {\n    ...nativeControl,\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.\n    ...shorthands.gap(tokens.spacingElement3),\n    overflow: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    // Not currentColor: that picked up this rule's `color: grayA12` and painted a near-black\n    // edge. The predecessor's bare `border` resolved to a subtle grey; grayA6 is its match.\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA6),\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.375rem\"),\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    backgroundColor: \"transparent\",\n    transitionProperty: \"color, background-color, border-color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    height: \"auto\",\n    minWidth: \"0\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentSoft,\n      ...shorthands.borderColor(tokens.accentA8),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n      ...shorthands.borderColor(tokens.accentSolid),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-dot\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-outer\"]`]: {\n      ...shorthands.borderColor(\"transparent\"),\n      backgroundColor: tokens.accentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-checkbox-check\"]`]: {\n      opacity: 1,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-track\"]`]: {\n      backgroundColor: tokens.accentSolid,\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-switch-thumb\"]`]: {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n  },\n\n  // Media\n  mediaRoot: {\n    flexShrink: 0,\n  },\n  mediaIcon: {\n    ...boxModel,\n    display: \"grid\",\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    placeContent: \"center\",\n    alignSelf: \"start\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentLight,\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n  mediaIllustration: {\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    alignSelf: \"stretch\",\n    overflow: \"hidden\",\n    \"& svg\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n    },\n    \"& img\": {\n      position: \"absolute\",\n      ...shorthands.inset(0),\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"contain\",\n    },\n  },\n\n  // Content\n  content: {\n    ...boxModel,\n    display: \"grid\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    gridAutoRows: \"min-content\",\n    alignItems: \"center\",\n    columnGap: tokens.spacingElement2,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    [`&:has([${SLOT_ATTR}=\"option-card-control\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n\n  // Title\n  title: {\n    ...boxModel,\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    minWidth: 0,\n    alignSelf: \"center\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  // Description\n  description: {\n    ...boxModel,\n    gridColumnStart: 1,\n    gridRowStart: 2,\n    minWidth: 0,\n    overflowWrap: \"break-word\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA11,\n  },\n\n  // Control\n  control: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    alignSelf: \"center\",\n    justifySelf: \"end\",\n  },\n\n  // Radio glyph\n  radioOuter: {\n    ...boxModel,\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    transitionProperty: \"border-color\",\n    transitionDuration: \"150ms\",\n  },\n  radioDot: {\n    ...boxModel,\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.accentSolid,\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Checkbox glyph\n  checkboxOuter: {\n    ...boxModel,\n    display: \"grid\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    placeContent: \"center\",\n    ...shorthands.borderRadius(\"4px\"),\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentContrast,\n    transitionProperty: \"background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  checkboxCheck: {\n    ...boxModel,\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    opacity: 0,\n    transitionProperty: \"opacity\",\n    transitionDuration: \"150ms\",\n  },\n\n  // Switch glyph\n  switchTrack: {\n    ...boxModel,\n    display: \"inline-flex\",\n    height: \"1.25rem\",\n    width: \"2.125rem\",\n    flexShrink: 0,\n    alignItems: \"center\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    backgroundColor: tokens.grayA3,\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n  },\n  switchThumb: {\n    ...boxModel,\n    display: \"block\",\n    width: \"1rem\",\n    height: \"1rem\",\n    transform: \"translateX(1px)\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.grayContrast,\n    // v1 shadow-xs; no shadow tokens in this package.\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n  },\n})\n\n// ── Control Glyphs ─────────────────────────────────────────────────────────\n\nconst CheckIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n  </svg>\n)\n\nconst RadioGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.radioOuter}\n      {...{ [SLOT_ATTR]: \"option-card-radio-outer\" }}\n    >\n      <span\n        className={styles.radioDot}\n        {...{ [SLOT_ATTR]: \"option-card-radio-dot\" }}\n      />\n    </span>\n  )\n}\n\nconst CheckboxGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.checkboxOuter}\n      {...{ [SLOT_ATTR]: \"option-card-checkbox-outer\" }}\n    >\n      <CheckIcon\n        className={styles.checkboxCheck}\n        {...{ [SLOT_ATTR]: \"option-card-checkbox-check\" }}\n      />\n    </span>\n  )\n}\n\nconst SwitchGlyph = () => {\n  const styles = useStyles()\n  return (\n    <span\n      className={styles.switchTrack}\n      {...{ [SLOT_ATTR]: \"option-card-switch-track\" }}\n    >\n      <span\n        className={styles.switchThumb}\n        {...{ [SLOT_ATTR]: \"option-card-switch-thumb\" }}\n      />\n    </span>\n  )\n}\n\n// ── OptionCardGroup ────────────────────────────────────────────────────────\n\nexport type OptionCardGroupProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Root\n> & {\n  layout?: OptionCardLayout\n}\n\nexport const OptionCardGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  OptionCardGroupProps\n>(function OptionCardGroup(\n  { className, layout = DEFAULT_LAYOUT, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <OptionCardGroupContext.Provider value={{ type: props.type, layout }}>\n      <ToggleGroupPrimitive.Root\n        ref={ref}\n        data-slot=\"option-card-group\"\n        {...{ [SLOT_ATTR]: \"option-card-group\" }}\n        data-layout={layout}\n        {...(props.type === \"single\" ? { role: \"radiogroup\" } : {})}\n        className={mergeClasses(styles.group, styles[layout], className)}\n        {...props}\n      />\n    </OptionCardGroupContext.Provider>\n  )\n})\n\n// ── OptionCardControl ──────────────────────────────────────────────────────\n\nexport type OptionCardControlProps = React.ComponentProps<\"span\"> & {\n  type?: OptionCardControlType\n}\n\nexport const OptionCardControl = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardControlProps\n>(function OptionCardControl({ className, type, ...props }, ref) {\n  const styles = useStyles()\n  const card = React.useContext(OptionCardContext)\n  const register = card?.registerType\n\n  React.useEffect(() => {\n    if (type && register) register(type)\n  }, [type, register])\n\n  const resolved = type ?? card?.controlType ?? \"checkbox\"\n  if (resolved === \"none\") return null\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-control\"\n      {...{ [SLOT_ATTR]: \"option-card-control\" }}\n      className={mergeClasses(styles.control, className)}\n      {...props}\n    >\n      {resolved === \"radio\" ? (\n        <RadioGlyph />\n      ) : resolved === \"switch\" ? (\n        <SwitchGlyph />\n      ) : (\n        <CheckboxGlyph />\n      )}\n    </span>\n  )\n})\n\n// ── OptionCardMedia ────────────────────────────────────────────────────────\n\nexport type OptionCardMediaVariant = \"icon\" | \"illustration\"\n\nexport type OptionCardMediaProps = React.ComponentProps<\"span\"> & {\n  variant?: OptionCardMediaVariant\n}\n\nexport const OptionCardMedia = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardMediaProps\n>(function OptionCardMedia({ className, variant = \"icon\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"option-card-media\"\n      {...{ [SLOT_ATTR]: \"option-card-media\" }}\n      data-variant={variant}\n      className={mergeClasses(\n        styles.mediaRoot,\n        variant === \"illustration\"\n          ? styles.mediaIllustration\n          : styles.mediaIcon,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardTitle ────────────────────────────────────────────────────────\n\nexport type OptionCardTitleProps = React.ComponentProps<\"span\">\n\nexport const OptionCardTitle = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardTitleProps\n>(function OptionCardTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-title\"\n      {...{ [SLOT_ATTR]: \"option-card-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardDescription ──────────────────────────────────────────────────\n\nexport type OptionCardDescriptionProps = React.ComponentProps<\"span\">\n\nexport const OptionCardDescription = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardDescriptionProps\n>(function OptionCardDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-description\"\n      {...{ [SLOT_ATTR]: \"option-card-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\n// ── OptionCardContent ──────────────────────────────────────────────────────\n\nexport type OptionCardContentProps = React.ComponentProps<\"span\">\n\nconst hasControl = (children: React.ReactNode) =>\n  React.Children.toArray(children).some(\n    (c) => React.isValidElement(c) && c.type === OptionCardControl\n  )\n\nexport const OptionCardContent = React.forwardRef<\n  HTMLSpanElement,\n  OptionCardContentProps\n>(function OptionCardContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"option-card-content\"\n      {...{ [SLOT_ATTR]: \"option-card-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    >\n      {children}\n      {!hasControl(children) && <OptionCardControl />}\n    </span>\n  )\n})\n\n// ── OptionCard ─────────────────────────────────────────────────────────────\n\nexport type OptionCardProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onChange\" | \"title\"\n> & {\n  /** Value of this option. Required inside an {@link OptionCardGroup}. */\n  value?: string\n  /** Controlled selected state for a standalone (group-less) card. */\n  pressed?: boolean\n  /** Uncontrolled default selected state for a standalone card. */\n  defaultPressed?: boolean\n  /** Fired when a standalone card is toggled. */\n  onPressedChange?: (pressed: boolean) => void\n}\n\nconst isPart = (node: React.ReactNode, ...parts: React.ElementType[]) =>\n  React.isValidElement(node) && parts.includes(node.type as React.ElementType)\n\nexport const OptionCard = React.forwardRef<HTMLButtonElement, OptionCardProps>(\n  function OptionCard(\n    {\n      className,\n      children,\n      value,\n      pressed,\n      defaultPressed,\n      onPressedChange,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const group = React.useContext(OptionCardGroupContext)\n    const inGroup = group !== null\n\n    const fallbackId = React.useId()\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      inGroup &&\n      value === undefined\n    ) {\n      console.warn(MISSING_VALUE_WARNING)\n    }\n\n    const [internalPressed, setInternalPressed] = React.useState(\n      defaultPressed ?? false\n    )\n    const isControlled = pressed !== undefined\n    const currentPressed = isControlled ? pressed : internalPressed\n    const handlePressedChange = (next: boolean) => {\n      if (!isControlled) setInternalPressed(next)\n      onPressedChange?.(next)\n    }\n\n    const groupControlType: OptionCardControlType = inGroup\n      ? group.type === \"multiple\"\n        ? \"checkbox\"\n        : \"radio\"\n      : \"checkbox\"\n    const [controlType, setControlType] =\n      React.useState<OptionCardControlType>(groupControlType)\n    const ctx = React.useMemo<OptionCardContextValue>(\n      () => ({ controlType, registerType: setControlType }),\n      [controlType]\n    )\n\n    const childArray = React.Children.toArray(children)\n    const hasContentChild = childArray.some((c) => isPart(c, OptionCardContent))\n    const media = childArray.filter((c) => isPart(c, OptionCardMedia))\n    const rest = childArray.filter((c) => !isPart(c, OptionCardMedia))\n    const content = hasContentChild ? (\n      rest\n    ) : (\n      <OptionCardContent>\n        <OptionCardTitle>{rest}</OptionCardTitle>\n      </OptionCardContent>\n    )\n\n    const body = (\n      <>\n        {media}\n        {content}\n      </>\n    )\n\n    if (inGroup) {\n      return (\n        <OptionCardContext.Provider value={ctx}>\n          <ToggleGroupPrimitive.Item\n            ref={ref}\n            data-slot=\"option-card\"\n            {...{ [SLOT_ATTR]: \"option-card\" }}\n            value={value ?? fallbackId}\n            className={mergeClasses(styles.card, className)}\n            {...props}\n          >\n            {body}\n          </ToggleGroupPrimitive.Item>\n        </OptionCardContext.Provider>\n      )\n    }\n\n    const standaloneRole = controlType === \"switch\" ? \"switch\" : \"checkbox\"\n\n    return (\n      <OptionCardContext.Provider value={ctx}>\n        <TogglePrimitive.Root\n          ref={ref}\n          data-slot=\"option-card\"\n          {...{ [SLOT_ATTR]: \"option-card\" }}\n          pressed={currentPressed}\n          onPressedChange={handlePressedChange}\n          role={standaloneRole}\n          aria-checked={currentPressed}\n          aria-pressed={undefined}\n          className={mergeClasses(styles.card, className)}\n          {...props}\n        >\n          {body}\n        </TogglePrimitive.Root>\n      </OptionCardContext.Provider>\n    )\n  }\n)\n"],"names":["DEFAULT_LAYOUT","MISSING_VALUE_WARNING","OptionCardGroupContext","React","OptionCardContext","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingGroup1","nativeControl","tokens.spacingElement3","tokens.radiusLg","tokens.grayA6","tokens.textSm","tokens.leadingSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.accentSoft","SLOT_ATTR","tokens.accentSolid","tokens.accentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","tokens.leadingXs","tokens.grayA11","tokens.accentA7","tokens.accentContrast","tokens.grayA3","tokens.grayContrast","CheckIcon","props","jsx","RadioGlyph","styles","CheckboxGlyph","SwitchGlyph","OptionCardGroup","className","layout","ref","ToggleGroupPrimitive.Root","mergeClasses","OptionCardControl","type","card","register","resolved","OptionCardMedia","variant","OptionCardTitle","OptionCardDescription","hasControl","children","c","OptionCardContent","jsxs","isPart","node","parts","OptionCard","value","pressed","defaultPressed","onPressedChange","group","inGroup","fallbackId","internalPressed","setInternalPressed","isControlled","currentPressed","handlePressedChange","next","groupControlType","controlType","setControlType","ctx","childArray","hasContentChild","media","rest","body","Fragment","ToggleGroupPrimitive.Item","standaloneRole","TogglePrimitive.Root"],"mappings":"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"}

package/dist/components/pill/pill.js

@@ -1,14 +1,15 @@
-import { jsxs as w, jsx as z } from "react/jsx-runtime";
-import * as O from "react";
-import { mergeClasses as R, SLOT_ATTR as k, shorthands as L } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as N } from "../../styles/make-styles.js";
-import { spacingGroup2 as g, spacingElement1 as v, accentA8 as T, radiusMd as E, spacingElement2 as I, fontWeightBold as P, leadingXs as A, textXs as B } from "../../tokens/index.js";
-import { useZenithPaletteTokensFor as C } from "../../tokens/use-palette-tokens.js";
-import { ClearButton as F } from "../../lib/clear-button.js";
-import { NS as D } from "../../tokens/core.meta.generated.js";
-import { NS as G } from "../../tokens/palette.generated.js";
-import { isCoreFamily as W } from "../../packages/tokens/dist/install.js";
-const Y = [
+import { jsxs as z, jsx as O } from "react/jsx-runtime";
+import * as R from "react";
+import { mergeClasses as k, SLOT_ATTR as L, shorthands as N } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as T } from "../../styles/make-styles.js";
+import { boxModel as c } from "../../styles/host-reset.js";
+import { spacingGroup2 as v, spacingElement1 as u, accentA8 as E, radiusMd as I, spacingElement2 as P, fontWeightBold as A, leadingXs as B, textXs as C } from "../../tokens/index.js";
+import { useZenithPaletteTokensFor as F } from "../../tokens/use-palette-tokens.js";
+import { ClearButton as D } from "../../lib/clear-button.js";
+import { NS as G } from "../../tokens/core.meta.generated.js";
+import { NS as W } from "../../tokens/palette.generated.js";
+import { isCoreFamily as _ } from "../../packages/tokens/dist/install.js";
+const te = [
   "blue",
   "sky",
   "mint",
@@ -28,44 +29,45 @@ const Y = [
   "warning",
   "success",
   "error"
-], p = "--zenith-pill-bg", d = "--zenith-pill-fg", h = "--zenith-pill-bd", a = "--zenith-pill-hov", u = (e) => W(e) ? D : G, t = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, _ = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, j = {
+], p = "--zenith-pill-bg", d = "--zenith-pill-fg", m = "--zenith-pill-bd", a = "--zenith-pill-hov", S = (e) => _(e) ? G : W, t = (e, o) => `var(--zenith-${S(e)}-${e}-${o})`, j = (e, o) => `var(--zenith-${S(e)}-${e}-${o})`, H = {
   soft: (e) => ({
     [p]: t(e, "soft"),
     [d]: t(e, "light"),
-    [h]: "transparent",
+    [m]: "transparent",
     [a]: t(e, "soft-hover")
   }),
   solid: (e) => ({
     [p]: t(e, "solid"),
     [d]: t(e, "contrast"),
-    [h]: "transparent",
+    [m]: "transparent",
     [a]: t(e, "solid-hover")
   }),
   surface: (e) => ({
     [p]: t(e, "surface"),
     [d]: t(e, "light"),
-    [h]: _(e, "a6"),
+    [m]: j(e, "a6"),
     [a]: t(e, "surface-hover")
   })
-}, H = N({
+}, M = T({
   root: {
+    ...c,
     display: "inline-flex",
     alignItems: "center",
     // v1 `h-6` — a fixed height, not a minimum.
     height: "1.5rem",
-    gap: v,
+    gap: u,
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontSize: B,
-    lineHeight: A,
-    fontWeight: P,
-    paddingInline: I,
-    borderRadius: E,
+    fontSize: C,
+    lineHeight: B,
+    fontWeight: A,
+    paddingInline: P,
+    borderRadius: I,
     transitionProperty: "color, box-shadow, background-color",
     // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one
     // custom property; `border` and a later `borderColor` would both survive.
-    ...L.border("1px", "solid", `var(${h})`),
+    ...N.border("1px", "solid", `var(${m})`),
     // The whole point: one rule each, colour supplied per instance.
     backgroundColor: `var(${p})`,
     color: `var(${d})`,
@@ -73,7 +75,7 @@ const Y = [
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: T
+      outlineColor: E
     },
     // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.
     "& > svg": {
@@ -92,36 +94,38 @@ const Y = [
     ":hover": { backgroundColor: `var(${a})` }
   },
   hasRemove: {
+    ...c,
     // v1's `pr-1` when a clear button is present.
-    paddingRight: v
+    paddingRight: u
   },
   disabled: {
     pointerEvents: "none"
   },
   removeSize: {
+    ...c,
     // v1's `size-4` on the composed ClearButton.
-    width: g,
-    height: g
+    width: v,
+    height: v
   }
-}), ee = O.forwardRef(function({
+}), oe = R.forwardRef(function({
   className: o,
-  color: S = "accent",
-  variant: y = "soft",
+  color: y = "accent",
+  variant: b = "soft",
   disabled: r,
-  onRemove: m,
+  onRemove: h,
   onClick: i,
-  children: b,
-  ...x
-}, $) {
-  const n = H(), c = r ? "gray" : S;
-  C(c);
-  const s = !!i && !r, f = j[y](c);
-  return s || delete f[a], /* @__PURE__ */ w(
+  children: x,
+  ...$
+}, w) {
+  const n = M(), f = r ? "gray" : y;
+  F(f);
+  const s = !!i && !r, g = H[b](f);
+  return s || delete g[a], /* @__PURE__ */ z(
     "span",
     {
-      ref: $,
+      ref: w,
       "data-slot": "pill",
-      [k]: "pill",
+      [L]: "pill",
       "data-disabled": r || void 0,
       role: s ? "button" : void 0,
       tabIndex: s ? 0 : void 0,
@@ -129,24 +133,24 @@ const Y = [
       onKeyDown: s ? (l) => {
         (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i == null || i(l));
       } : void 0,
-      className: R(
+      className: k(
         n.root,
         s && n.interactive,
-        m && n.hasRemove,
+        h && n.hasRemove,
         r && n.disabled,
         o
       ),
-      style: { ...f },
-      ...x,
+      style: { ...g },
+      ...$,
       children: [
-        b,
-        m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
+        x,
+        h && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
         // fallback all live in the lib, not inline.
-        /* @__PURE__ */ z(
-          F,
+        /* @__PURE__ */ O(
+          D,
           {
             className: n.removeSize,
-            onClick: m,
+            onClick: h,
             disabled: r
           }
         )
@@ -155,7 +159,7 @@ const Y = [
   );
 });
 export {
-  Y as PILL_COLORS,
-  ee as Pill
+  te as PILL_COLORS,
+  oe as Pill
 };
 //# sourceMappingURL=pill.js.map

package/dist/components/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/** Pill — same colour-matrix collapse as Badge, plus a hover background. */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n  // A decorative family can still arrive from an expression the build cannot see, so this has to\n  // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useZenithPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/** Pill — same colour-matrix collapse as Badge, plus a hover background. */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    ...boxModel,\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    ...boxModel,\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n  // A decorative family can still arrive from an expression the build cannot see, so this has to\n  // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useZenithPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","boxModel","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}

package/dist/components/popover/popover.js

@@ -1,26 +1,38 @@
 import { jsx as r } from "react/jsx-runtime";
 import * as e from "react";
-import { Root as g, Anchor as v, Content as y, Portal as P, Trigger as b } from "../../vendor/.bun/@radix-ui_react-popover@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-popover/dist/index.js";
-import { SLOT_ATTR as s, mergeClasses as h, shorthands as p } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as x } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as R } from "../density-provider/density-provider.js";
-import { makeZenithStyles as A } from "../../styles/make-styles.js";
-import { spacingElement2 as i, grayA12 as T, body as C, spacingGroup2 as N, grayA1 as w, radiusXl as D } from "../../tokens/index.js";
-const S = A({
+import { Root as P, Anchor as x, Content as b, Portal as h, Trigger as R } from "../../vendor/.bun/@radix-ui_react-popover@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-popover/dist/index.js";
+import { SLOT_ATTR as s, mergeClasses as f, shorthands as m } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as A } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as T } from "../density-provider/density-provider.js";
+import { makeZenithStyles as C } from "../../styles/make-styles.js";
+import { boxModel as l, nativeControl as N } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as D } from "../../styles/overlay-layer.js";
+import { spacingElement2 as i, grayA12 as w, body as X, spacingGroup2 as S, grayA1 as Y, radiusXl as _ } from "../../tokens/index.js";
+const u = C({
+  // For the bare native `<button>` a Trigger/Close renders. Not applied under `asChild`, where the
+  // child owns its own element and two atom sets would race for the same properties.
+  nativeTrigger: {
+    ...N
+  },
   popup: {
-    backgroundColor: C,
-    color: T,
+    ...l,
+    backgroundColor: X,
+    color: w,
     transformOrigin: "var(--radix-popover-content-transform-origin)",
-    ...p.borderRadius(D),
-    ...p.border("1px", "solid", w),
+    ...m.borderRadius(_),
+    ...m.border("1px", "solid", Y),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
+    zIndex: D,
     "@media (prefers-reduced-motion: reduce)": {
       animationDuration: "0.01ms",
       animationIterationCount: "1",
       "&[data-state='open']": {
         animationDuration: "0.01ms"
+      },
+      "&[data-state='closed']": {
+        animationDuration: "0.01ms"
       }
     },
     "&[data-state='open']": {
@@ -77,27 +89,32 @@ const S = A({
     }
   },
   popupPadding: {
-    ...p.padding(N)
+    ...l,
+    ...m.padding(S)
   }
-}), O = e.forwardRef(
+}), j = e.forwardRef(
   function(o, t) {
-    return /* @__PURE__ */ r(g, { "data-slot": "popover", ...o });
+    return /* @__PURE__ */ r(P, { "data-slot": "popover", ...o });
   }
-), j = e.forwardRef(function({ className: o, ...t }, a) {
+), G = e.forwardRef(function({ className: o, ...t }, a) {
+  const p = u();
   return /* @__PURE__ */ r(
-    b,
+    R,
     {
       ref: a,
       "data-slot": "popover-trigger",
       [s]: "popover-trigger",
-      className: o,
+      className: f(
+        !t.asChild && p.nativeTrigger,
+        o
+      ),
       ...t
     }
   );
-}), E = e.forwardRef(
+}), M = e.forwardRef(
   function(o, t) {
     return /* @__PURE__ */ r(
-      P,
+      h,
       {
         "data-slot": "popover-portal",
         [s]: "popover-portal",
@@ -105,9 +122,9 @@ const S = A({
       }
     );
   }
-), G = e.forwardRef(function({ className: o, ...t }, a) {
+), V = e.forwardRef(function({ className: o, ...t }, a) {
   return /* @__PURE__ */ r(
-    v,
+    x,
     {
       ref: a,
       "data-slot": "popover-anchor",
@@ -116,32 +133,32 @@ const S = A({
       ...t
     }
   );
-}), I = e.forwardRef(function({ className: o, align: t = "center", sideOffset: a = 4, flush: d = !1, ...f }, l) {
-  const m = S(), c = R(), u = x();
+}), q = e.forwardRef(function({ className: o, align: t = "center", sideOffset: a = 4, flush: p = !1, ...g }, v) {
+  const c = u(), d = T(), y = A();
   return /* @__PURE__ */ r(
-    y,
+    b,
     {
-      ref: l,
+      ref: v,
       "data-slot": "popover-content",
       [s]: "popover-content",
-      ...c !== void 0 ? { "data-density": c } : {},
-      ...u,
+      ...d !== void 0 ? { "data-density": d } : {},
+      ...y,
       align: t,
       sideOffset: a,
-      className: h(
-        m.popup,
-        !d && m.popupPadding,
+      className: f(
+        c.popup,
+        !p && c.popupPadding,
         o
       ),
-      ...f
+      ...g
     }
   );
 });
 export {
-  O as Popover,
-  G as PopoverAnchor,
-  I as PopoverContent,
-  E as PopoverPortal,
-  j as PopoverTrigger
+  j as Popover,
+  V as PopoverAnchor,
+  q as PopoverContent,
+  M as PopoverPortal,
+  G as PopoverTrigger
 };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  popup: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    transformOrigin: \"var(--radix-popover-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      animationDuration: \"0.01ms\",\n      animationIterationCount: \"1\",\n      \"&[data-state='open']\": {\n        animationDuration: \"0.01ms\",\n      },\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  popupPadding: {\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n})\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(\n  function Popover(props, _ref) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n  }\n)\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>\n\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      {...{ [SLOT_ATTR]: \"popover-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverPortalProps = React.ComponentProps<\n  typeof PopoverPrimitive.Portal\n>\n\nexport const PopoverPortal = React.forwardRef<HTMLElement, PopoverPortalProps>(\n  function PopoverPortal(props, _ref) {\n    return (\n      <PopoverPrimitive.Portal\n        data-slot=\"popover-portal\"\n        {...{ [SLOT_ATTR]: \"popover-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type PopoverAnchorProps = React.ComponentProps<\n  typeof PopoverPrimitive.Anchor\n>\n\nexport const PopoverAnchor = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Anchor>,\n  PopoverAnchorProps\n>(function PopoverAnchor({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Anchor\n      ref={ref}\n      data-slot=\"popover-anchor\"\n      {...{ [SLOT_ATTR]: \"popover-anchor\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverContentProps = React.ComponentProps<\n  typeof PopoverPrimitive.Content\n> & {\n  flush?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, flush = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      {...appearance}\n      align={align}\n      sideOffset={sideOffset}\n      className={mergeClasses(\n        styles.popup,\n        !flush && styles.popupPadding,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusXl","tokens.grayA1","tokens.spacingElement2","tokens.spacingGroup2","Popover","React","props","_ref","PopoverPrimitive.Root","PopoverTrigger","className","ref","jsx","PopoverPrimitive.Trigger","SLOT_ATTR","PopoverPortal","PopoverPrimitive.Portal","PopoverAnchor","PopoverPrimitive.Anchor","PopoverContent","align","sideOffset","flush","styles","override","useDensity","appearance","useAppearanceAttributes","PopoverPrimitive.Content","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport { OVERLAY_Z_INDEX } from \"../../styles/overlay-layer\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  // For the bare native `<button>` a Trigger/Close renders. Not applied under `asChild`, where the\n  // child owns its own element and two atom sets would race for the same properties.\n  nativeTrigger: {\n    ...nativeControl,\n  },\n  popup: {\n    ...boxModel,\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    transformOrigin: \"var(--radix-popover-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    zIndex: OVERLAY_Z_INDEX,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      animationDuration: \"0.01ms\",\n      animationIterationCount: \"1\",\n      \"&[data-state='open']\": {\n        animationDuration: \"0.01ms\",\n      },\n      \"&[data-state='closed']\": {\n        animationDuration: \"0.01ms\",\n      },\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  popupPadding: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n})\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(\n  function Popover(props, _ref) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n  }\n)\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>\n\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      {...{ [SLOT_ATTR]: \"popover-trigger\" }}\n      className={mergeClasses(\n        !props.asChild && styles.nativeTrigger,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverPortalProps = React.ComponentProps<\n  typeof PopoverPrimitive.Portal\n>\n\nexport const PopoverPortal = React.forwardRef<HTMLElement, PopoverPortalProps>(\n  function PopoverPortal(props, _ref) {\n    return (\n      <PopoverPrimitive.Portal\n        data-slot=\"popover-portal\"\n        {...{ [SLOT_ATTR]: \"popover-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type PopoverAnchorProps = React.ComponentProps<\n  typeof PopoverPrimitive.Anchor\n>\n\nexport const PopoverAnchor = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Anchor>,\n  PopoverAnchorProps\n>(function PopoverAnchor({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Anchor\n      ref={ref}\n      data-slot=\"popover-anchor\"\n      {...{ [SLOT_ATTR]: \"popover-anchor\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverContentProps = React.ComponentProps<\n  typeof PopoverPrimitive.Content\n> & {\n  flush?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, flush = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      {...appearance}\n      align={align}\n      sideOffset={sideOffset}\n      className={mergeClasses(\n        styles.popup,\n        !flush && styles.popupPadding,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","nativeControl","boxModel","tokens.body","tokens.grayA12","shorthands","tokens.radiusXl","tokens.grayA1","OVERLAY_Z_INDEX","tokens.spacingElement2","tokens.spacingGroup2","Popover","React","props","_ref","PopoverPrimitive.Root","PopoverTrigger","className","ref","styles","jsx","PopoverPrimitive.Trigger","SLOT_ATTR","mergeClasses","PopoverPortal","PopoverPrimitive.Portal","PopoverAnchor","PopoverPrimitive.Anchor","PopoverContent","align","sideOffset","flush","override","useDensity","appearance","useAppearanceAttributes","PopoverPrimitive.Content"],"mappings":"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"}