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

package/dist/components/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sources":["../../../src/components/list/list.tsx"],"sourcesContent":["import * as React from \"react\"\nimport {\n  DndContext,\n  DragOverlay,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n  type DraggableAttributes,\n  type DraggableSyntheticListeners,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n  arrayMove,\n  useSortable,\n} from \"@dnd-kit/sortable\"\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\nexport type ListDensity = \"compact\" | \"relaxed\"\nexport type ListItemStatus = \"default\" | \"error\" | \"warning\" | \"success\"\n\n// ── Icons ──────────────────────────────────────────────────────────────────\n\nconst GripVerticalIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst WarningIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\" />\n    <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n    <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n  </svg>\n)\n\nconst CheckCircleIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" />\n    <polyline points=\"22 4 12 14.01 9 11.01\" />\n  </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    {...props}\n  >\n    <polyline points=\"9 18 15 12 9 6\" />\n  </svg>\n)\n\n// ── Styles ─────────────────────────────────────────────────────────────────\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    width: \"100%\",\n    listStyleType: \"none\",\n    flexDirection: \"column\",\n    ...shorthands.gap(0),\n    ...shorthands.padding(0),\n    ...shorthands.margin(0),\n  },\n\n  // ListItem base\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    color: tokens.grayA12,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"& > svg\": {\n      flexShrink: 0,\n    },\n  },\n\n  // Density variants\n  itemCompact: {\n    minHeight: \"2rem\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.padding(tokens.spacingElement1, tokens.spacingElement2),\n    fontSize: tokens.textSm,\n    \"& > svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  itemRelaxed: {\n    minHeight: \"2.5rem\",\n    // v1 gap-3 is 0.75rem.\n    ...shorthands.gap(tokens.spacingElement3),\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n    fontSize: tokens.textSm,\n    \"& > svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n\n  // Status variants\n  statusDefault: {},\n  statusError: {\n    backgroundColor: tokens.semErrorSoft,\n    color: tokens.semErrorDefault,\n  },\n  statusWarning: {\n    backgroundColor: tokens.semWarningSoft,\n    color: tokens.semWarningDefault,\n  },\n  statusSuccess: {\n    backgroundColor: tokens.semSuccessSoft,\n    color: tokens.semSuccessDefault,\n  },\n\n  // Striped variant (only neutral rows)\n  stripedEven: {\n    \"&:nth-child(even)\": {\n      backgroundColor: tokens.grayA2,\n    },\n  },\n\n  // Interactive hovers\n  interactiveDefault: {\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n  },\n  interactiveError: {\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoftHover,\n    },\n  },\n  interactiveWarning: {\n    \":hover\": {\n      backgroundColor: tokens.semWarningSoftHover,\n    },\n  },\n  interactiveSuccess: {\n    \":hover\": {\n      backgroundColor: tokens.semSuccessSoftHover,\n    },\n  },\n\n  // Sortable modifiers\n  sortableItem: {\n    cursor: \"grab\",\n    touchAction: \"none\",\n    \":active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  itemDragging: {\n    opacity: 0.4,\n  },\n\n  // Index gutter\n  indexBase: {\n    display: \"flex\",\n    flexShrink: 0,\n    userSelect: \"none\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    alignSelf: \"stretch\",\n    borderTopLeftRadius: tokens.radiusMd,\n    borderBottomLeftRadius: tokens.radiusMd,\n    backgroundColor: tokens.grayA2,\n    textAlign: \"center\",\n    color: tokens.grayA11,\n    fontVariantNumeric: \"tabular-nums\",\n  },\n  indexCompact: {\n    marginTop: `-${tokens.spacingElement1}`,\n    marginBottom: `-${tokens.spacingElement1}`,\n    marginLeft: `-${tokens.spacingElement2}`,\n    minWidth: \"1.5rem\",\n    paddingLeft: \"0.375rem\",\n    paddingRight: \"0.375rem\",\n  },\n  indexRelaxed: {\n    marginTop: `-${tokens.spacingElement2}`,\n    marginBottom: `-${tokens.spacingElement2}`,\n    marginLeft: \"-0.75rem\",\n    minWidth: \"1.75rem\",\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n  },\n\n  // Content\n  content: {\n    display: \"flex\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    \"& > svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n    },\n  },\n\n  // Actions\n  actions: {\n    position: \"relative\",\n    zIndex: 10,\n    display: \"flex\",\n    flexShrink: 0,\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n\n  // Text\n  text: {\n    display: \"flex\",\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    flexDirection: \"column\",\n    ...shorthands.gap(\"0.125rem\"),\n  },\n\n  // Description\n  description: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textXs,\n    color: tokens.grayA11,\n  },\n\n  // Drag handle button\n  dragHandle: {\n    position: \"relative\",\n    zIndex: 10,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n    ...shorthands.padding(0),\n    \":hover\": {\n      color: tokens.grayA11,\n    },\n    \":active\": {\n      cursor: \"grabbing\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n\n  // Drop indicator line\n  dropIndicator: {\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    zIndex: 10,\n    height: \"0.125rem\",\n    transformOrigin: \"center\",\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.semAccentSolid,\n    animationName: {\n      from: {\n        transform: \"scaleX(0)\",\n        opacity: 0,\n      },\n      to: {\n        transform: \"scaleX(1)\",\n        opacity: 1,\n      },\n    },\n    animationDuration: \"160ms\",\n    animationTimingFunction: \"ease-out\",\n  },\n  dropIndicatorTop: {\n    top: \"-0.125rem\",\n  },\n  dropIndicatorBottom: {\n    bottom: \"-0.125rem\",\n  },\n\n  // DragOverlay ghost\n  dragOverlayItem: {\n    transformOrigin: \"center\",\n    transform: \"scale(0.95)\",\n    cursor: \"grabbing\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    backgroundColor: \"rgb(255 255 255 / 55%)\",\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    backdropFilter: \"blur(12px)\",\n    animationName: {\n      from: { transform: \"scale(1)\" },\n      to: { transform: \"scale(0.95)\" },\n    },\n    animationDuration: \"160ms\",\n    animationTimingFunction: \"ease-out\",\n    \":hover\": {\n      backgroundColor: \"rgb(255 255 255 / 55%)\",\n    },\n  },\n\n  // Group\n  group: {\n    listStyleType: \"none\",\n  },\n  groupTrigger: {\n    cursor: \"pointer\",\n    textAlign: \"left\",\n    fontWeight: tokens.fontWeightMedium,\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n  },\n  groupChevron: {\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    color: tokens.grayA10,\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  groupChevronOpen: {\n    transform: \"rotate(90deg)\",\n  },\n  groupTriggerText: {\n    minWidth: 0,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  standaloneGroupLabel: {\n    marginTop: tokens.spacingGroup2,\n    display: \"block\",\n    listStyleType: \"none\",\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement3),\n    fontSize: tokens.textSm,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n    \"&:first-child\": {\n      marginTop: 0,\n    },\n  },\n  groupContentList: {\n    paddingLeft: tokens.spacingGroup2,\n  },\n  collapseWrapper: {\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    \"&[data-state='open']\": {\n      gridTemplateRows: \"1fr\",\n    },\n  },\n  collapseWrapperOpen: {\n    gridTemplateRows: \"1fr\",\n  },\n  collapseInner: {\n    minHeight: 0,\n    overflow: \"hidden\",\n  },\n\n  // Status icons\n  statusIconError: {\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    color: tokens.semErrorLight,\n  },\n  statusIconWarning: {\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    color: tokens.semWarningLight,\n  },\n  statusIconSuccess: {\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    color: tokens.semSuccessLight,\n  },\n})\n\n// ── Status Icons Helper ────────────────────────────────────────────────────\n\nconst StatusIcon = ({ status }: { status: ListItemStatus }) => {\n  const styles = useStyles()\n  if (status === \"error\") {\n    return <WarningIcon className={styles.statusIconError} />\n  }\n  if (status === \"warning\") {\n    return <WarningIcon className={styles.statusIconWarning} />\n  }\n  if (status === \"success\") {\n    return <CheckCircleIcon className={styles.statusIconSuccess} />\n  }\n  return null\n}\n\n// ── Context ────────────────────────────────────────────────────────────────\n\ntype ListContextValue = {\n  density: ListDensity\n  striped: boolean\n  showIndex: boolean\n  sortable: boolean\n}\n\nconst ListContext = React.createContext<ListContextValue>({\n  density: \"relaxed\",\n  striped: false,\n  showIndex: false,\n  sortable: false,\n})\n\nconst useListContext = () => React.useContext(ListContext)\n\n// ── List ───────────────────────────────────────────────────────────────────\n\nexport type ListProps = Omit<React.ComponentProps<\"ol\">, \"onReorder\"> & {\n  /** Row density. Default: \"relaxed\" */\n  density?: ListDensity\n  /** Alternating background on neutral rows. Default: false */\n  striped?: boolean\n  /** Show a 1-based position number on each item. Default: false */\n  showIndex?: boolean\n  /** Enable drag-and-drop reordering. Each `ListItem` must have a `value`. */\n  sortable?: boolean\n  /** Called with the new order of `ListItem` values after a drag. */\n  onReorder?: (values: string[]) => void\n}\n\nexport const List = React.forwardRef<HTMLOListElement, ListProps>(function List(\n  {\n    className,\n    density = \"relaxed\",\n    striped = false,\n    showIndex = false,\n    sortable = false,\n    onReorder,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  const items = React.Children.toArray(children).filter(\n    React.isValidElement\n  ) as React.ReactElement<ListItemProps>[]\n\n  const indexedItems = items.map((child, index) =>\n    child.type === ListItem ? React.cloneElement(child, { index }) : child\n  )\n\n  const sortableItems = items.filter((child) => child.type === ListItem)\n  const values = sortableItems\n    .map((child) => child.props.value)\n    .filter((v): v is string => typeof v === \"string\")\n\n  const [activeId, setActiveId] = React.useState<string | null>(null)\n  const activeIndex = activeId ? values.indexOf(activeId) : -1\n  const activeItem =\n    activeId != null\n      ? sortableItems.find((child) => child.props.value === activeId)\n      : undefined\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 3 } }),\n    useSensor(KeyboardSensor)\n  )\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setActiveId(event.active.id as string)\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    setActiveId(null)\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n\n    const oldIndex = values.indexOf(active.id as string)\n    const newIndex = values.indexOf(over.id as string)\n    if (oldIndex === -1 || newIndex === -1) return\n\n    onReorder?.(arrayMove(values, oldIndex, newIndex))\n  }\n\n  const listElement = (\n    <ol\n      ref={ref}\n      data-slot=\"list\"\n      {...{ [SLOT_ATTR]: \"list\" }}\n      data-density={density}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    >\n      {indexedItems}\n    </ol>\n  )\n\n  return (\n    <ListContext.Provider value={{ density, striped, showIndex, sortable }}>\n      {sortable ? (\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          onDragCancel={() => setActiveId(null)}\n        >\n          <SortableContext\n            items={values}\n            strategy={verticalListSortingStrategy}\n          >\n            {listElement}\n          </SortableContext>\n          <DragOverlay>\n            {activeItem ? (\n              <ListItemBody\n                value={activeItem.props.value}\n                status={activeItem.props.status}\n                index={activeIndex}\n                className={styles.dragOverlayItem}\n              >\n                {activeItem.props.children}\n              </ListItemBody>\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      ) : (\n        listElement\n      )}\n    </ListContext.Provider>\n  )\n})\n\n// ── ListItemActions ────────────────────────────────────────────────────────\n\nexport type ListItemActionsProps = React.ComponentProps<\"span\">\n\nexport const ListItemActions = React.forwardRef<\n  HTMLSpanElement,\n  ListItemActionsProps\n>(function ListItemActions({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"list-item-actions\"\n      {...{ [SLOT_ATTR]: \"list-item-actions\" }}\n      onPointerDown={(e) => e.stopPropagation()}\n      className={mergeClasses(styles.actions, className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n})\n\n// ── ListItemText ───────────────────────────────────────────────────────────\n\nexport type ListItemTextProps = React.ComponentProps<\"span\">\n\nexport const ListItemText = React.forwardRef<\n  HTMLSpanElement,\n  ListItemTextProps\n>(function ListItemText({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"list-item-text\"\n      {...{ [SLOT_ATTR]: \"list-item-text\" }}\n      className={mergeClasses(styles.text, className)}\n      {...props}\n    />\n  )\n})\n\n// ── ListItemDescription ────────────────────────────────────────────────────\n\nexport type ListItemDescriptionProps = React.ComponentProps<\"span\">\n\nexport const ListItemDescription = React.forwardRef<\n  HTMLSpanElement,\n  ListItemDescriptionProps\n>(function ListItemDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"list-item-description\"\n      {...{ [SLOT_ATTR]: \"list-item-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\n// ── ListItemBody ───────────────────────────────────────────────────────────\n\nexport type ListItemProps = React.ComponentProps<\"li\"> & {\n  /** Stable id used for drag-and-drop. Required when the `List` is `sortable`. */\n  value?: string\n  /** System status. Tints the row and shows a trailing status icon. */\n  status?: ListItemStatus\n  /** Injected by `List` — the 0-based position. */\n  index?: number\n}\n\ntype ListItemBodyProps = ListItemProps & {\n  setNodeRef?: (node: HTMLElement | null) => void\n  setActivatorNodeRef?: (node: HTMLElement | null) => void\n  style?: React.CSSProperties\n  isDragging?: boolean\n  /** Insertion indicator edge while another item is dragged over this one. */\n  dropEdge?: \"top\" | \"bottom\" | null\n  /** dnd-kit listeners — pointer activation goes on the row, keyboard on the handle. */\n  listeners?: DraggableSyntheticListeners\n  /** dnd-kit a11y attributes for the keyboard drag handle. */\n  attributes?: DraggableAttributes\n}\n\nconst ListItemBody = React.forwardRef<HTMLLIElement, ListItemBodyProps>(\n  function ListItemBody(\n    {\n      className,\n      value,\n      status = \"default\",\n      index,\n      children,\n      setNodeRef,\n      setActivatorNodeRef,\n      style,\n      isDragging,\n      dropEdge,\n      listeners,\n      attributes,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const styles = useStyles()\n    const { density, striped, showIndex, sortable } = useListContext()\n    const interactive = sortable && !isDragging\n\n    const childArray = React.Children.toArray(children)\n    const actionsSlot = childArray.find(\n      (child): child is React.ReactElement =>\n        React.isValidElement(child) && child.type === ListItemActions\n    )\n    const contentChildren = childArray.filter((child) => child !== actionsSlot)\n\n    // Combined ref for dnd-kit setNodeRef + caller's forwardedRef\n    const handleRef = React.useCallback(\n      (node: HTMLLIElement | null) => {\n        setNodeRef?.(node)\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node)\n        } else if (forwardedRef) {\n          ;(\n            forwardedRef as React.MutableRefObject<HTMLLIElement | null>\n          ).current = node\n        }\n      },\n      [setNodeRef, forwardedRef]\n    )\n\n    const statusStyle =\n      status === \"error\"\n        ? styles.statusError\n        : status === \"warning\"\n          ? styles.statusWarning\n          : status === \"success\"\n            ? styles.statusSuccess\n            : styles.statusDefault\n\n    const interactiveStyle = interactive\n      ? status === \"error\"\n        ? styles.interactiveError\n        : status === \"warning\"\n          ? styles.interactiveWarning\n          : status === \"success\"\n            ? styles.interactiveSuccess\n            : styles.interactiveDefault\n      : undefined\n\n    const densityStyle =\n      density === \"compact\" ? styles.itemCompact : styles.itemRelaxed\n\n    return (\n      <li\n        ref={handleRef}\n        style={style}\n        data-slot=\"list-item\"\n        {...{ [SLOT_ATTR]: \"list-item\" }}\n        data-status={status}\n        data-value={value}\n        onPointerDown={\n          sortable\n            ? (listeners?.onPointerDown as\n                | React.PointerEventHandler<HTMLLIElement>\n                | undefined)\n            : undefined\n        }\n        className={mergeClasses(\n          styles.item,\n          densityStyle,\n          statusStyle,\n          striped && status === \"default\" && styles.stripedEven,\n          interactiveStyle,\n          sortable && styles.sortableItem,\n          isDragging && styles.itemDragging,\n          className\n        )}\n        {...props}\n      >\n        {dropEdge && (\n          <span\n            data-slot=\"list-drop-indicator\"\n            {...{ [SLOT_ATTR]: \"list-drop-indicator\" }}\n            aria-hidden=\"true\"\n            className={mergeClasses(\n              styles.dropIndicator,\n              dropEdge === \"top\"\n                ? styles.dropIndicatorTop\n                : styles.dropIndicatorBottom\n            )}\n          />\n        )}\n\n        {showIndex && (\n          <span\n            data-slot=\"list-item-index\"\n            {...{ [SLOT_ATTR]: \"list-item-index\" }}\n            aria-hidden=\"true\"\n            className={mergeClasses(\n              styles.indexBase,\n              density === \"compact\" ? styles.indexCompact : styles.indexRelaxed\n            )}\n          >\n            {(index ?? 0) + 1}\n          </span>\n        )}\n\n        <span\n          data-slot=\"list-item-content\"\n          {...{ [SLOT_ATTR]: \"list-item-content\" }}\n          className={styles.content}\n        >\n          {contentChildren}\n        </span>\n\n        <StatusIcon status={status} />\n\n        {actionsSlot}\n\n        {sortable && (\n          <button\n            ref={setActivatorNodeRef}\n            type=\"button\"\n            aria-label={`Drag to reorder ${value ?? \"item\"}`}\n            className={styles.dragHandle}\n            {...attributes}\n            onKeyDown={\n              listeners?.onKeyDown as\n                | React.KeyboardEventHandler<HTMLButtonElement>\n                | undefined\n            }\n          >\n            <GripVerticalIcon />\n          </button>\n        )}\n      </li>\n    )\n  }\n)\n\n// ── SortableListItem ───────────────────────────────────────────────────────\n\nconst SortableListItem = React.forwardRef<HTMLLIElement, ListItemProps>(\n  function SortableListItem(props, ref) {\n    const fallbackId = React.useId()\n\n    if (process.env.NODE_ENV !== \"production\" && props.value === undefined) {\n      console.warn(\n        \"List: a sortable `ListItem` is missing a `value`. \" +\n          \"Give each sortable item a unique `value` so it can be reordered — \" +\n          \"items without one are excluded from `onReorder`.\"\n      )\n    }\n\n    const {\n      attributes,\n      listeners,\n      setNodeRef,\n      setActivatorNodeRef,\n      isDragging,\n      isOver,\n      activeIndex,\n      overIndex,\n    } = useSortable({\n      id: props.value ?? fallbackId,\n      animateLayoutChanges: () => false,\n    })\n\n    const dropEdge: \"top\" | \"bottom\" | null =\n      isOver && !isDragging && activeIndex !== -1\n        ? activeIndex < overIndex\n          ? \"bottom\"\n          : \"top\"\n        : null\n\n    return (\n      <ListItemBody\n        ref={ref}\n        {...props}\n        setNodeRef={setNodeRef}\n        setActivatorNodeRef={setActivatorNodeRef}\n        isDragging={isDragging}\n        dropEdge={dropEdge}\n        listeners={listeners}\n        attributes={attributes}\n      />\n    )\n  }\n)\n\n// ── ListItem ───────────────────────────────────────────────────────────────\n\nexport const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(\n  function ListItem(props, ref) {\n    const { sortable } = useListContext()\n\n    if (sortable) {\n      return <SortableListItem ref={ref} {...props} />\n    }\n\n    return <ListItemBody ref={ref} {...props} />\n  }\n)\n\n// ── ListGroup ──────────────────────────────────────────────────────────────\n\ntype ListGroupContextValue = {\n  open: boolean\n  setOpen: (open: boolean) => void\n  contentId: string\n}\n\nconst ListGroupContext = React.createContext<ListGroupContextValue | null>(null)\n\nexport type ListGroupProps = Omit<React.ComponentProps<\"li\">, \"onChange\"> & {\n  /** Controlled open state of the collapsible group. */\n  open?: boolean\n  /** Initial open state when uncontrolled. Default: false */\n  defaultOpen?: boolean\n  /** Called when the group is expanded or collapsed. */\n  onOpenChange?: (open: boolean) => void\n}\n\nexport const ListGroup = React.forwardRef<HTMLLIElement, ListGroupProps>(\n  function ListGroup(\n    {\n      open: openProp,\n      defaultOpen = false,\n      onOpenChange,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n    const open = openProp ?? uncontrolledOpen\n    const contentId = React.useId()\n\n    const setOpen = (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next)\n      onOpenChange?.(next)\n    }\n\n    return (\n      <ListGroupContext.Provider value={{ open, setOpen, contentId }}>\n        <li\n          ref={ref}\n          data-slot=\"list-group\"\n          {...{ [SLOT_ATTR]: \"list-group\" }}\n          data-state={open ? \"open\" : \"closed\"}\n          className={mergeClasses(styles.group, className)}\n          {...props}\n        >\n          {children}\n        </li>\n      </ListGroupContext.Provider>\n    )\n  }\n)\n\n// ── ListGroupLabel ─────────────────────────────────────────────────────────\n\nexport type ListGroupLabelProps = React.ComponentProps<\"button\"> & {\n  asListItem?: boolean\n}\n\nexport const ListGroupLabel = React.forwardRef<\n  HTMLElement,\n  ListGroupLabelProps\n>(function ListGroupLabel({ className, children, ...props }, ref) {\n  const styles = useStyles()\n  const group = React.useContext(ListGroupContext)\n  const { density } = useListContext()\n\n  if (group) {\n    const densityStyle =\n      density === \"compact\" ? styles.itemCompact : styles.itemRelaxed\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-slot=\"list-group-trigger\"\n        {...{ [SLOT_ATTR]: \"list-group-trigger\" }}\n        aria-expanded={group.open}\n        aria-controls={group.contentId}\n        onClick={() => group.setOpen(!group.open)}\n        className={mergeClasses(\n          styles.item,\n          densityStyle,\n          styles.interactiveDefault,\n          styles.groupTrigger,\n          className\n        )}\n        {...props}\n      >\n        <ChevronRightIcon\n          className={mergeClasses(\n            styles.groupChevron,\n            group.open && styles.groupChevronOpen\n          )}\n        />\n        <span className={styles.groupTriggerText}>{children}</span>\n      </button>\n    )\n  }\n\n  return (\n    <li\n      ref={ref as React.Ref<HTMLLIElement>}\n      data-slot=\"list-group-label\"\n      {...{ [SLOT_ATTR]: \"list-group-label\" }}\n      className={mergeClasses(styles.standaloneGroupLabel, className)}\n    >\n      {children}\n    </li>\n  )\n})\n\n// ── ListGroupContent ───────────────────────────────────────────────────────\n\nexport type ListGroupContentProps = React.ComponentProps<\"ul\">\n\nexport const ListGroupContent = React.forwardRef<\n  HTMLUListElement,\n  ListGroupContentProps\n>(function ListGroupContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n  const group = React.useContext(ListGroupContext)\n\n  const items = (\n    <ul\n      ref={ref}\n      data-slot=\"list-group-content\"\n      {...{ [SLOT_ATTR]: \"list-group-content\" }}\n      className={mergeClasses(styles.list, styles.groupContentList, className)}\n      {...props}\n    >\n      {children}\n    </ul>\n  )\n\n  if (!group) return items\n\n  return (\n    <div\n      id={group.contentId}\n      data-state={group.open ? \"open\" : \"closed\"}\n      className={mergeClasses(\n        styles.collapseWrapper,\n        group.open && styles.collapseWrapperOpen\n      )}\n    >\n      <div className={styles.collapseInner}>{items}</div>\n    </div>\n  )\n})\n"],"names":["GripVerticalIcon","props","jsxs","jsx","WarningIcon","CheckCircleIcon","ChevronRightIcon","useStyles","makeVoltStyles","shorthands","tokens.radiusMd","tokens.grayA12","tokens.spacingElement2","tokens.spacingElement1","tokens.textSm","tokens.spacingElement3","tokens.semErrorSoft","tokens.semErrorDefault","tokens.semWarningSoft","tokens.semWarningDefault","tokens.semSuccessSoft","tokens.semSuccessDefault","tokens.grayA2","tokens.semAccentSoft","tokens.semErrorSoftHover","tokens.semWarningSoftHover","tokens.semSuccessSoftHover","tokens.grayA11","tokens.textXs","tokens.grayA8","tokens.accentA8","tokens.semAccentSolid","tokens.grayA5","tokens.fontWeightMedium","tokens.grayA10","tokens.spacingGroup2","tokens.fontWeightSemibold","tokens.semErrorLight","tokens.semWarningLight","tokens.semSuccessLight","StatusIcon","status","styles","ListContext","React","useListContext","List","className","density","striped","showIndex","sortable","onReorder","children","ref","items","indexedItems","child","index","ListItem","sortableItems","values","v","activeId","setActiveId","activeIndex","activeItem","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","handleDragEnd","active","over","oldIndex","newIndex","arrayMove","listElement","SLOT_ATTR","mergeClasses","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","DragOverlay","ListItemBody","ListItemActions","e","ListItemText","ListItemDescription","value","setNodeRef","setActivatorNodeRef","style","isDragging","dropEdge","listeners","attributes","forwardedRef","interactive","childArray","actionsSlot","contentChildren","handleRef","node","statusStyle","interactiveStyle","densityStyle","SortableListItem","fallbackId","isOver","overIndex","useSortable","ListGroupContext","ListGroup","openProp","defaultOpen","onOpenChange","uncontrolledOpen","setUncontrolledOpen","open","contentId","setOpen","next","ListGroupLabel","group","ListGroupContent"],"mappings":"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"}

package/dist/components/option-card/option-card.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+/** The trailing control glyph an {@link OptionCard} shows for its selected state. */
+export type OptionCardControlType = "radio" | "checkbox" | "switch" | "none";
+export type OptionCardLayout = "grid" | "row" | "column";
+export type OptionCardGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> & {
+    layout?: OptionCardLayout;
+};
+export declare const OptionCardGroup: React.ForwardRefExoticComponent<(Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement> & {
+    layout?: OptionCardLayout;
+}, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement> & {
+    layout?: OptionCardLayout;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export type OptionCardControlProps = React.ComponentProps<"span"> & {
+    type?: OptionCardControlType;
+};
+export declare const OptionCardControl: React.ForwardRefExoticComponent<Omit<OptionCardControlProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type OptionCardMediaVariant = "icon" | "illustration";
+export type OptionCardMediaProps = React.ComponentProps<"span"> & {
+    variant?: OptionCardMediaVariant;
+};
+export declare const OptionCardMedia: React.ForwardRefExoticComponent<Omit<OptionCardMediaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type OptionCardTitleProps = React.ComponentProps<"span">;
+export declare const OptionCardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type OptionCardDescriptionProps = React.ComponentProps<"span">;
+export declare const OptionCardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type OptionCardContentProps = React.ComponentProps<"span">;
+export declare const OptionCardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type OptionCardProps = Omit<React.ComponentProps<"button">, "onChange" | "title"> & {
+    /** Value of this option. Required inside an {@link OptionCardGroup}. */
+    value?: string;
+    /** Controlled selected state for a standalone (group-less) card. */
+    pressed?: boolean;
+    /** Uncontrolled default selected state for a standalone card. */
+    defaultPressed?: boolean;
+    /** Fired when a standalone card is toggled. */
+    onPressedChange?: (pressed: boolean) => void;
+};
+export declare const OptionCard: React.ForwardRefExoticComponent<Omit<OptionCardProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,454 @@
+import { jsx as t, jsxs as q, Fragment as H } from "react/jsx-runtime";
+import * as n from "react";
+import { Root as J } from "../../node_modules/@radix-ui/react-toggle/dist/index.js";
+import { Item as K, Root as Q } from "../../node_modules/@radix-ui/react-toggle-group/dist/index.js";
+import { shorthands as s } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as r } from "../../renderer/contract.js";
+import { makeVoltStyles as tt } from "../../styles/make-styles.js";
+import { accentA7 as I, semAccentSolid as f, accentA8 as G, grayContrast as ot, grayA3 as rt, accentContrast as et, semAccentSoft as C, grayA11 as nt, fontWeightNormal as D, textXs as it, fontWeightSemibold as at, spacingElement1 as P, spacingElement2 as st, semAccentLight as ct, grayA12 as dt, textSm as lt, radiusLg as W, spacingElement3 as E, spacingGroup1 as pt } from "../../tokens/index.js";
+import { mergeClasses as h } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const ut = "grid", ht = "OptionCard: a card inside an OptionCardGroup is missing a `value`. Give each card a unique `value` so it can be selected and controlled.", F = n.createContext(null), k = n.createContext(
+  null
+), p = tt({
+  // Group layouts
+  group: {
+    // The GROUP only lays out. v1's group base class is literally "" -- every border, padding and
+    // interaction style below used to live here, copied from v1's CARD class onto the wrong element,
+    // while `styles.card` and `styles[layout]` were read but never declared. See make-styles.ts for
+    // why tsc accepted that for as long as it did.
+    display: "grid",
+    ...s.gap(pt)
+  },
+  // v1: grid-cols-[repeat(auto-fit,minmax(200px,1fr))]
+  grid: {
+    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
+  },
+  // v1: grid-flow-col auto-cols-fr -- equal-width columns in one non-wrapping row, so options read
+  // as equal-weight peers regardless of their content.
+  row: {
+    gridAutoFlow: "column",
+    gridAutoColumns: "minmax(0, 1fr)"
+  },
+  // v1: plain `grid` with no template. One column, stacked.
+  column: {},
+  card: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    // v1 gap-3 = 0.75rem. No token: the semantic scale has no 0.75rem step.
+    ...s.gap(E),
+    overflow: "hidden",
+    ...s.borderRadius(W),
+    ...s.border("1px", "solid", "currentColor"),
+    ...s.paddingInline(E),
+    ...s.paddingBlock("0.375rem"),
+    textAlign: "left",
+    fontSize: lt,
+    fontWeight: D,
+    color: dt,
+    backgroundColor: "transparent",
+    transitionProperty: "color, background-color, border-color, box-shadow",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    cursor: "pointer",
+    userSelect: "none",
+    height: "auto",
+    minWidth: "0",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: G
+    },
+    ":disabled, &[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "&[data-state='on']": {
+      backgroundColor: C,
+      ...s.borderColor(G)
+    },
+    [`&[data-state='on'] [${r}="option-card-radio-outer"]`]: {
+      ...s.borderColor(f)
+    },
+    [`&[data-state='on'] [${r}="option-card-radio-dot"]`]: {
+      opacity: 1
+    },
+    [`&[data-state='on'] [${r}="option-card-checkbox-outer"]`]: {
+      ...s.borderColor("transparent"),
+      backgroundColor: f
+    },
+    [`&[data-state='on'] [${r}="option-card-checkbox-check"]`]: {
+      opacity: 1
+    },
+    [`&[data-state='on'] [${r}="option-card-switch-track"]`]: {
+      backgroundColor: f
+    },
+    [`&[data-state='on'] [${r}="option-card-switch-thumb"]`]: {
+      transform: "translateX(calc(100% - 1px))"
+    }
+  },
+  // Media
+  mediaRoot: {
+    flexShrink: 0
+  },
+  mediaIcon: {
+    display: "grid",
+    width: "2.5rem",
+    height: "2.5rem",
+    placeContent: "center",
+    alignSelf: "start",
+    ...s.borderRadius(W),
+    backgroundColor: C,
+    color: ct,
+    "& svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    }
+  },
+  mediaIllustration: {
+    position: "relative",
+    aspectRatio: "1 / 1",
+    alignSelf: "stretch",
+    overflow: "hidden",
+    "& svg": {
+      position: "absolute",
+      ...s.inset(0),
+      width: "100%",
+      height: "100%"
+    },
+    "& img": {
+      position: "absolute",
+      ...s.inset(0),
+      width: "100%",
+      height: "100%",
+      objectFit: "contain"
+    }
+  },
+  // Content
+  content: {
+    display: "grid",
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    gridAutoRows: "min-content",
+    alignItems: "center",
+    columnGap: st,
+    paddingTop: P,
+    paddingBottom: P,
+    [`&:has([${r}="option-card-control"])`]: {
+      gridTemplateColumns: "1fr auto"
+    }
+  },
+  // Title
+  title: {
+    gridColumnStart: 1,
+    gridRowStart: 1,
+    minWidth: 0,
+    alignSelf: "center",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: at
+  },
+  // Description
+  description: {
+    gridColumnStart: 1,
+    gridRowStart: 2,
+    minWidth: 0,
+    overflowWrap: "break-word",
+    fontSize: it,
+    fontWeight: D,
+    color: nt
+  },
+  // Control
+  control: {
+    gridColumnStart: 2,
+    gridRowStart: 1,
+    alignSelf: "center",
+    justifySelf: "end"
+  },
+  // Radio glyph
+  radioOuter: {
+    display: "grid",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    placeContent: "center",
+    borderRadius: "9999px",
+    ...s.border("1px", "solid", I),
+    backgroundColor: C,
+    transitionProperty: "border-color",
+    transitionDuration: "150ms"
+  },
+  radioDot: {
+    width: "0.5rem",
+    height: "0.5rem",
+    borderRadius: "9999px",
+    backgroundColor: f,
+    opacity: 0,
+    transitionProperty: "opacity",
+    transitionDuration: "150ms"
+  },
+  // Checkbox glyph
+  checkboxOuter: {
+    display: "grid",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    placeContent: "center",
+    ...s.borderRadius("4px"),
+    ...s.border("1px", "solid", I),
+    backgroundColor: C,
+    color: et,
+    transitionProperty: "background-color, border-color",
+    transitionDuration: "150ms"
+  },
+  checkboxCheck: {
+    width: "0.75rem",
+    height: "0.75rem",
+    opacity: 0,
+    transitionProperty: "opacity",
+    transitionDuration: "150ms"
+  },
+  // Switch glyph
+  switchTrack: {
+    display: "inline-flex",
+    height: "1.25rem",
+    width: "2.125rem",
+    flexShrink: 0,
+    alignItems: "center",
+    borderRadius: "9999px",
+    ...s.border("1px", "solid", "transparent"),
+    backgroundColor: rt,
+    transitionProperty: "background-color",
+    transitionDuration: "150ms"
+  },
+  switchThumb: {
+    display: "block",
+    width: "1rem",
+    height: "1rem",
+    transform: "translateX(1px)",
+    borderRadius: "9999px",
+    backgroundColor: ot,
+    // v1 shadow-xs; no shadow tokens in this package.
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "transform",
+    transitionDuration: "150ms"
+  }
+}), mt = (o) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    ...o,
+    children: /* @__PURE__ */ t("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" })
+  }
+), gt = () => {
+  const o = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: o.radioOuter,
+      [r]: "option-card-radio-outer",
+      children: /* @__PURE__ */ t(
+        "span",
+        {
+          className: o.radioDot,
+          [r]: "option-card-radio-dot"
+        }
+      )
+    }
+  );
+}, ft = () => {
+  const o = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: o.checkboxOuter,
+      [r]: "option-card-checkbox-outer",
+      children: /* @__PURE__ */ t(
+        mt,
+        {
+          className: o.checkboxCheck,
+          [r]: "option-card-checkbox-check"
+        }
+      )
+    }
+  );
+}, Ct = () => {
+  const o = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      className: o.switchTrack,
+      [r]: "option-card-switch-track",
+      children: /* @__PURE__ */ t(
+        "span",
+        {
+          className: o.switchThumb,
+          [r]: "option-card-switch-thumb"
+        }
+      )
+    }
+  );
+}, Nt = n.forwardRef(function({ className: i, layout: e = ut, ...a }, c) {
+  const d = p();
+  return /* @__PURE__ */ t(F.Provider, { value: { type: a.type, layout: e }, children: /* @__PURE__ */ t(
+    Q,
+    {
+      ref: c,
+      "data-slot": "option-card-group",
+      [r]: "option-card-group",
+      "data-layout": e,
+      ...a.type === "single" ? { role: "radiogroup" } : {},
+      className: h(d.group, d[e], i),
+      ...a
+    }
+  ) });
+}), V = n.forwardRef(function({ className: i, type: e, ...a }, c) {
+  const d = p(), l = n.useContext(k), m = l == null ? void 0 : l.registerType;
+  n.useEffect(() => {
+    e && m && m(e);
+  }, [e, m]);
+  const g = e ?? (l == null ? void 0 : l.controlType) ?? "checkbox";
+  return g === "none" ? null : /* @__PURE__ */ t(
+    "span",
+    {
+      ref: c,
+      "aria-hidden": "true",
+      "data-slot": "option-card-control",
+      [r]: "option-card-control",
+      className: h(d.control, i),
+      ...a,
+      children: g === "radio" ? /* @__PURE__ */ t(gt, {}) : g === "switch" ? /* @__PURE__ */ t(Ct, {}) : /* @__PURE__ */ t(ft, {})
+    }
+  );
+}), L = n.forwardRef(function({ className: i, variant: e = "icon", ...a }, c) {
+  const d = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: c,
+      "aria-hidden": "true",
+      "data-slot": "option-card-media",
+      [r]: "option-card-media",
+      "data-variant": e,
+      className: h(
+        d.mediaRoot,
+        e === "illustration" ? d.mediaIllustration : d.mediaIcon,
+        i
+      ),
+      ...a
+    }
+  );
+}), bt = n.forwardRef(function({ className: i, ...e }, a) {
+  const c = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: a,
+      "data-slot": "option-card-title",
+      [r]: "option-card-title",
+      className: h(c.title, i),
+      ...e
+    }
+  );
+}), It = n.forwardRef(function({ className: i, ...e }, a) {
+  const c = p();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: a,
+      "data-slot": "option-card-description",
+      [r]: "option-card-description",
+      className: h(c.description, i),
+      ...e
+    }
+  );
+}), xt = (o) => n.Children.toArray(o).some(
+  (i) => n.isValidElement(i) && i.type === V
+), $ = n.forwardRef(function({ className: i, children: e, ...a }, c) {
+  const d = p();
+  return /* @__PURE__ */ q(
+    "span",
+    {
+      ref: c,
+      "data-slot": "option-card-content",
+      [r]: "option-card-content",
+      className: h(d.content, i),
+      ...a,
+      children: [
+        e,
+        !xt(e) && /* @__PURE__ */ t(V, {})
+      ]
+    }
+  );
+}), w = (o, ...i) => n.isValidElement(o) && i.includes(o.type), Gt = n.forwardRef(
+  function({
+    className: i,
+    children: e,
+    value: a,
+    pressed: c,
+    defaultPressed: d,
+    onPressedChange: l,
+    ...m
+  }, g) {
+    const S = p(), R = n.useContext(F), b = R !== null, _ = n.useId();
+    process.env.NODE_ENV !== "production" && b && a === void 0 && console.warn(ht);
+    const [j, B] = n.useState(
+      d ?? !1
+    ), v = c !== void 0, O = v ? c : j, M = (u) => {
+      v || B(u), l == null || l(u);
+    }, z = b ? R.type === "multiple" ? "checkbox" : "radio" : "checkbox", [x, U] = n.useState(z), T = n.useMemo(
+      () => ({ controlType: x, registerType: U }),
+      [x]
+    ), y = n.Children.toArray(e), X = y.some((u) => w(u, $)), Y = y.filter((u) => w(u, L)), A = y.filter((u) => !w(u, L)), N = /* @__PURE__ */ q(H, { children: [
+      Y,
+      X ? A : /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(bt, { children: A }) })
+    ] });
+    if (b)
+      return /* @__PURE__ */ t(k.Provider, { value: T, children: /* @__PURE__ */ t(
+        K,
+        {
+          ref: g,
+          "data-slot": "option-card",
+          [r]: "option-card",
+          value: a ?? _,
+          className: h(S.card, i),
+          ...m,
+          children: N
+        }
+      ) });
+    const Z = x === "switch" ? "switch" : "checkbox";
+    return /* @__PURE__ */ t(k.Provider, { value: T, children: /* @__PURE__ */ t(
+      J,
+      {
+        ref: g,
+        "data-slot": "option-card",
+        [r]: "option-card",
+        pressed: O,
+        onPressedChange: M,
+        role: Z,
+        "aria-checked": O,
+        "aria-pressed": void 0,
+        className: h(S.card, i),
+        ...m,
+        children: N
+      }
+    ) });
+  }
+);
+export {
+  Gt as OptionCard,
+  $ as OptionCardContent,
+  V as OptionCardControl,
+  It as OptionCardDescription,
+  Nt as OptionCardGroup,
+  L as OptionCardMedia,
+  bt as OptionCardTitle
+};
+//# sourceMappingURL=option-card.js.map