@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

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

@@ -0,0 +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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 = makeVoltStyles({\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    ...shorthands.border(\"1px\", \"solid\", \"currentColor\"),\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.375rem\"),\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\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.semAccentSoft,\n      ...shorthands.borderColor(tokens.accentA8),\n    },\n    [`&[data-state='on'] [${SLOT_ATTR}=\"option-card-radio-outer\"]`]: {\n      ...shorthands.borderColor(tokens.semAccentSolid),\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.semAccentSolid,\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.semAccentSolid,\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.semAccentSoft,\n    color: tokens.semAccentLight,\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    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.semAccentSoft,\n    transitionProperty: \"border-color\",\n    transitionDuration: \"150ms\",\n  },\n  radioDot: {\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    borderRadius: \"9999px\",\n    backgroundColor: tokens.semAccentSolid,\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.semAccentSoft,\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","makeVoltStyles","shorthands","tokens.spacingGroup1","tokens.spacingElement3","tokens.radiusLg","tokens.textSm","tokens.fontWeightNormal","tokens.grayA12","tokens.accentA8","tokens.semAccentSoft","SLOT_ATTR","tokens.semAccentSolid","tokens.semAccentLight","tokens.spacingElement2","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.textXs","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.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * Pill — same colour-matrix collapse as Badge, plus a hover background.
+ *
+ * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string
+ * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and
+ * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour
+ * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four
+ * custom properties, the component sets those inline from the `color` prop, and a single `:hover`
+ * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth
+ * of rules cover all 19 x 3 combinations.
+ */
+declare const COLORS: readonly ["blue", "sky", "mint", "lime", "green", "teal", "cyan", "indigo", "purple", "pink", "red", "orange", "yellow", "bronze", "gray", "accent", "warning", "success", "error"];
+export type PillColor = (typeof COLORS)[number];
+export type PillVariant = "soft" | "solid" | "surface";
+export type PillProps = Omit<React.ComponentProps<"span">, "color"> & {
+    color?: PillColor;
+    /**
+     * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.
+     * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.
+     */
+    variant?: PillVariant;
+    disabled?: boolean;
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const Pill: React.ForwardRefExoticComponent<Omit<PillProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { COLORS as PILL_COLORS };

package/dist/components/pill/pill.js

@@ -0,0 +1,159 @@
+import { jsxs as $, jsx as O } from "react/jsx-runtime";
+import * as R from "react";
+import { shorthands as k } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as L } from "../../renderer/contract.js";
+import { makeVoltStyles as T } from "../../styles/make-styles.js";
+import { spacingGroup2 as v, spacingElement1 as h, accentA8 as E, radiusMd as I, spacingElement2 as P, fontWeightBold as z, textXs as A } from "../../tokens/index.js";
+import { ensurePaletteTokens as B } from "../../tokens/install.js";
+import { ClearButton as N } from "../../lib/clear-button.js";
+import { NS as g } from "../../tokens/core.generated.js";
+import { mergeClasses as C } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const J = [
+  "blue",
+  "sky",
+  "mint",
+  "lime",
+  "green",
+  "teal",
+  "cyan",
+  "indigo",
+  "purple",
+  "pink",
+  "red",
+  "orange",
+  "yellow",
+  "bronze",
+  "gray",
+  "accent",
+  "warning",
+  "success",
+  "error"
+], p = "--volt2-pill-bg", d = "--volt2-pill-fg", c = "--volt2-pill-bd", l = "--volt2-pill-hov", t = (o, e) => `var(--volt2-${g}-sem-${o}-${e})`, D = (o, e) => `var(--volt2-${g}-${o}-${e})`, G = {
+  soft: (o) => ({
+    [p]: t(o, "soft"),
+    [d]: t(o, "light"),
+    [c]: "transparent",
+    [l]: t(o, "soft-hover")
+  }),
+  solid: (o) => ({
+    [p]: t(o, "solid"),
+    [d]: t(o, "contrast"),
+    [c]: "transparent",
+    [l]: t(o, "solid-hover")
+  }),
+  surface: (o) => ({
+    [p]: t(o, "surface"),
+    [d]: t(o, "light"),
+    [c]: D(o, "a6"),
+    [l]: t(o, "surface-hover")
+  })
+}, V = T({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    // v1 `h-6` — a fixed height, not a minimum.
+    height: "1.5rem",
+    gap: h,
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    overflow: "hidden",
+    fontSize: A,
+    fontWeight: z,
+    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.
+    ...k.border("1px", "solid", `var(${c})`),
+    // The whole point: one rule each, colour supplied per instance.
+    backgroundColor: `var(${p})`,
+    color: `var(${d})`,
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: E
+    },
+    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.
+    "& > svg": {
+      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no
+      // business describing a dimension. The scale has no size family — noted rather than faked.
+      width: "1rem",
+      height: "1rem",
+      flexShrink: 0,
+      pointerEvents: "none"
+    }
+  },
+  interactive: {
+    cursor: "pointer",
+    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant
+    // by VARIANT_SLOTS — never per-colour hover rules.
+    ":hover": { backgroundColor: `var(${l})` }
+  },
+  hasRemove: {
+    // v1's `pr-1` when a clear button is present.
+    paddingRight: h
+  },
+  disabled: {
+    pointerEvents: "none"
+  },
+  removeSize: {
+    // v1's `size-4` on the composed ClearButton.
+    width: v,
+    height: v
+  }
+}), Q = R.forwardRef(function({
+  className: e,
+  color: u = "accent",
+  variant: y = "soft",
+  disabled: r,
+  onRemove: m,
+  onClick: i,
+  children: S,
+  ...b
+}, x) {
+  B();
+  const n = V(), w = r ? "gray" : u, s = !!i && !r, f = G[y](w);
+  return s || delete f[l], /* @__PURE__ */ $(
+    "span",
+    {
+      ref: x,
+      "data-slot": "pill",
+      [L]: "pill",
+      "data-disabled": r || void 0,
+      role: s ? "button" : void 0,
+      tabIndex: s ? 0 : void 0,
+      onClick: i,
+      onKeyDown: s ? (a) => {
+        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), i == null || i(a));
+      } : void 0,
+      className: C(
+        n.root,
+        s && n.interactive,
+        m && n.hasRemove,
+        r && n.disabled,
+        e
+      ),
+      style: { ...f },
+      ...b,
+      children: [
+        S,
+        m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
+        // fallback all live in the lib, not inline.
+        /* @__PURE__ */ O(
+          N,
+          {
+            className: n.removeSize,
+            onClick: m,
+            disabled: r
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  J as PILL_COLORS,
+  Q as Pill
+};
+//# sourceMappingURL=pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS } from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\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 = \"--volt2-pill-bg\"\nconst FG = \"--volt2-pill-fg\"\nconst BD = \"--volt2-pill-bd\"\nconst HOV = \"--volt2-pill-hov\"\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--volt2-${NS}-${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 = makeVoltStyles({\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    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  // A decorative family can arrive from an expression the build cannot see, so the palette has to\n  // be present whenever this component renders at all.\n  ensurePaletteTokens()\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  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","semantic","color","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.spacingElement1","tokens.textXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","ensurePaletteTokens","styles","resolvedColor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+export declare const Popover: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverProps & React.RefAttributes<HTMLElement>>;
+export type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type PopoverPortalProps = React.ComponentProps<typeof PopoverPrimitive.Portal>;
+export declare const PopoverPortal: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverPortalProps & React.RefAttributes<HTMLElement>>;
+export type PopoverAnchorProps = React.ComponentProps<typeof PopoverPrimitive.Anchor>;
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content> & {
+    flush?: boolean;
+};
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/popover/popover.js

@@ -0,0 +1,138 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "react";
+import { Root as d, Anchor as u, Content as g, Portal as v, Trigger as y } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { shorthands as i } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../renderer/contract.js";
+import { makeVoltStyles as P } from "../../styles/make-styles.js";
+import { spacingGroup2 as x, grayA1 as b, spacingElement2 as p, grayA12 as h, body as R, radiusXl as T } from "../../tokens/index.js";
+import { mergeClasses as A } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const N = P({
+  popup: {
+    backgroundColor: R,
+    color: h,
+    transformOrigin: "var(--radix-popover-content-transform-origin)",
+    ...i.borderRadius(T),
+    ...i.border("1px", "solid", b),
+    // v1 shadow-md
+    boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
+    outlineStyle: "none",
+    "&[data-state='open']": {
+      animationName: {
+        from: { opacity: 0, transform: "scale(0.95)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='open'][data-side='bottom']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(-${p}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='left']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(${p}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='right']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(-${p}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='top']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(${p}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { opacity: 1, transform: "scale(1)" },
+        to: { opacity: 0, transform: "scale(0.95)" }
+      },
+      animationDuration: "100ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  popupPadding: {
+    ...i.padding(x)
+  }
+}), k = e.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ r(d, { "data-slot": "popover", ...o });
+  }
+), z = e.forwardRef(function({ className: o, ...t }, a) {
+  return /* @__PURE__ */ r(
+    y,
+    {
+      ref: a,
+      "data-slot": "popover-trigger",
+      [s]: "popover-trigger",
+      className: o,
+      ...t
+    }
+  );
+}), D = e.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ r(
+      v,
+      {
+        "data-slot": "popover-portal",
+        [s]: "popover-portal",
+        ...o
+      }
+    );
+  }
+), F = e.forwardRef(function({ className: o, ...t }, a) {
+  return /* @__PURE__ */ r(
+    u,
+    {
+      ref: a,
+      "data-slot": "popover-anchor",
+      [s]: "popover-anchor",
+      className: o,
+      ...t
+    }
+  );
+}), O = e.forwardRef(function({ className: o, align: t = "center", sideOffset: a = 4, flush: c = !1, ...f }, l) {
+  const m = N();
+  return /* @__PURE__ */ r(
+    g,
+    {
+      ref: l,
+      "data-slot": "popover-content",
+      [s]: "popover-content",
+      align: t,
+      sideOffset: a,
+      className: A(
+        m.popup,
+        !c && m.popupPadding,
+        o
+      ),
+      ...f
+    }
+  );
+});
+export {
+  k as Popover,
+  F as PopoverAnchor,
+  O as PopoverContent,
+  D as PopoverPortal,
+  z as PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\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    \"&[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\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\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","makeVoltStyles","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","PopoverPrimitive.Content","mergeClasses"],"mappings":"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"}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+export type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item>;
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/radio/radio.js

@@ -0,0 +1,138 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import * as c from "react";
+import { Root as h, Item as b, Indicator as x } from "../../node_modules/@radix-ui/react-radio-group/dist/index.js";
+import { shorthands as t } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../renderer/contract.js";
+import { makeVoltStyles as C } from "../../styles/make-styles.js";
+import { errorA8 as l, accentA7 as k, semAccentContrast as m, errorA10 as w, semErrorSoft as y, grayA3 as u, semAccentSolid as R, accentA8 as v, accentA12 as A, semAccentSoft as S, spacingElement3 as I } from "../../tokens/index.js";
+import { mergeClasses as p } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const j = c.forwardRef(
+  function(o, r) {
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: r,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...o,
+        children: /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" })
+      }
+    );
+  }
+), f = C({
+  group: {
+    display: "grid",
+    ...t.gap(I)
+  },
+  item: {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    aspectRatio: "1 / 1",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    borderRadius: "9999px",
+    ...t.border("1px", "solid", k),
+    backgroundColor: S,
+    color: A,
+    // Tailwind `shadow-xs` — literal per CONVENTIONS B7
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "color, box-shadow",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":focus-visible": {
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: v
+    },
+    "&[data-disabled]": {
+      cursor: "not-allowed",
+      backgroundColor: u,
+      ...t.borderColor("transparent")
+    },
+    "&[data-state='checked']": {
+      backgroundColor: R,
+      color: m
+    },
+    "&[data-state='checked'][data-disabled]": {
+      backgroundColor: u
+    },
+    "&[aria-invalid='true'], &[data-invalid]": {
+      backgroundColor: y,
+      ...t.borderColor(l),
+      outlineColor: l
+    },
+    "&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]": {
+      backgroundColor: w,
+      ...t.borderColor("transparent")
+    }
+  },
+  indicator: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  },
+  icon: {
+    color: m,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "0.5rem",
+    height: "0.5rem",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none"
+  }
+}), W = c.forwardRef(function({ className: o, ...r }, i) {
+  const a = f();
+  return /* @__PURE__ */ e(
+    h,
+    {
+      ref: i,
+      "data-slot": "radio-group",
+      [s]: "radio-group",
+      className: p(a.group, o),
+      ...r
+    }
+  );
+}), B = c.forwardRef(function({ className: o, children: r, ...i }, a) {
+  const n = f();
+  return /* @__PURE__ */ g(
+    b,
+    {
+      ref: a,
+      "data-slot": "radio-group-item",
+      [s]: "radio-group-item",
+      className: p(n.item, o),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(
+          x,
+          {
+            "data-slot": "radio-group-indicator",
+            [s]: "radio-group-indicator",
+            className: n.indicator,
+            children: /* @__PURE__ */ e(j, { className: n.icon })
+          }
+        ),
+        r
+      ]
+    }
+  );
+});
+export {
+  W as RadioGroup,
+  B as RadioGroupItem
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeVoltStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.accentA12,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.semErrorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.semAccentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeVoltStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.semAccentSoft","tokens.accentA12","tokens.accentA8","tokens.grayA3","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semErrorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":";;;;;;;;AAQA,MAAMA,IAAaC,EAAM;AAAA,EACvB,SAAoBC,GAAOC,GAAK;AAC9B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAGD;AAAA,QAEJ,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AACF,GAEMG,IAAYC,EAAe;AAAA,EAC/B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAGC,EAAW,IAAIC,CAAsB;AAAA,EAAA;AAAA,EAE1C,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAGD,EAAW,OAAO,OAAO,SAASE,CAAe;AAAA,IACpD,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA;AAAAA,IAEP,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,IAAO;AAAA,IAEvB,oBAAoB;AAAA,MAClB,QAAQ;AAAA,MACR,iBAAiBC;AAAAA,MACjB,GAAGN,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,IAEzC,2BAA2B;AAAA,MACzB,iBAAiBO;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,0CAA0C;AAAA,MACxC,iBAAiBF;AAAAA,IAAO;AAAA,IAE1B,2CAA2C;AAAA,MACzC,iBAAiBG;AAAAA,MACjB,GAAGT,EAAW,YAAYU,CAAc;AAAA,MACxC,cAAcA;AAAAA,IAAO;AAAA,IAEvB,uFACE;AAAA,MACE,iBAAiBC;AAAAA,MACjB,GAAGX,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,EACzC;AAAA,EAEJ,WAAW;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAOQ;AAAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EAAA;AAEnB,CAAC,GAMYI,IAAalB,EAAM,WAG9B,SAAoB,EAAE,WAAAmB,GAAW,GAAGlB,EAAA,GAASC,GAAK;AAClD,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACC,KAAAnB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,OAAOD,CAAS;AAAA,MAC9C,GAAGlB;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMYuB,IAAiBxB,EAAM,WAGlC,SAAwB,EAAE,WAAAmB,GAAW,UAAAM,GAAU,GAAGxB,EAAA,GAASC,GAAK;AAChE,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAzB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMD,CAAS;AAAA,MAC7C,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACyB;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACN,CAAS,GAAG;AAAA,YACnB,WAAWF,EAAO;AAAA,YAElB,UAAA,gBAAAjB,EAACJ,GAAA,EAAW,WAAWqB,EAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAErCK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}