@invergent/ui-sdk 0.0.0-stage → 2.19.1

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart.tsx"],"names":["config"],"mappings":"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","file":"chart.js","sourcesContent":["import * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"./lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n  initialDimension?: {\n    width: number\n    height: number\n  }\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer\n          initialDimension={initialDimension}\n        >\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TooltipValueType,\n      TooltipNameType\n    >,\n    \"accessibilityLayer\"\n  >) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? (config[label]?.label ?? label)\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-sm ring-1 ring-foreground/10\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === \"number\"\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n  hideIcon?: boolean\n  nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"]}

package/dist/checkbox.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var radixUi = require('radix-ui');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: chunk6YHDDRIM_cjs.cn(
+        // The Work console's checkbox: 16px, 4px corners, a foreground/30 edge,
+        // amber with a black tick once checked. The ::after overlay carries
+        // a usable hit area round the small box.
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-foreground/30 bg-transparent transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-amber-500 dark:aria-invalid:border-destructive/50 data-checked:border-amber-500 data-checked:bg-amber-500 data-checked:text-black",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3 [&>svg]:stroke-3",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.CheckIcon,
+            {}
+          )
+        }
+      )
+    }
+  );
+}
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=checkbox.cjs.map
+//# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox.tsx"],"names":["jsx","CheckboxPrimitive","cn","CheckIcon"],"mappings":";;;;;;;AAMA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwD;AACtD,EAAA,uBACEA,cAAA;AAAA,IAACC,gBAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,SAAA,EAAWC,oBAAA;AAAA;AAAA;AAAA;AAAA,QAIT,qkBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA;AAAA,QAACC,gBAAA,CAAkB,SAAA;AAAA,QAAlB;AAAA,UACC,WAAA,EAAU,oBAAA;AAAA,UACV,SAAA,EAAU,wFAAA;AAAA,UAEV,QAAA,kBAAAD,cAAA;AAAA,YAACG,qBAAA;AAAA,YAAA;AAAA;AACD;AAAA;AACF;AAAA,GACF;AAEJ","file":"checkbox.cjs","sourcesContent":["import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        // The Work console's checkbox: 16px, 4px corners, a foreground/30 edge,\n        // amber with a black tick once checked. The ::after overlay carries\n        // a usable hit area round the small box.\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-foreground/30 bg-transparent transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-amber-500 dark:aria-invalid:border-destructive/50 data-checked:border-amber-500 data-checked:bg-amber-500 data-checked:text-black\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3 [&>svg]:stroke-3\"\n      >\n        <CheckIcon\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"]}

package/dist/checkbox.d.cts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Checkbox as Checkbox$1 } from 'radix-ui';
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };

package/dist/checkbox.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Checkbox as Checkbox$1 } from 'radix-ui';
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof Checkbox$1.Root>): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };

package/dist/checkbox.js

@@ -0,0 +1,39 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { Checkbox as Checkbox$1 } from 'radix-ui';
+import { CheckIcon } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        // The Work console's checkbox: 16px, 4px corners, a foreground/30 edge,
+        // amber with a black tick once checked. The ::after overlay carries
+        // a usable hit area round the small box.
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-foreground/30 bg-transparent transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-amber-500 dark:aria-invalid:border-destructive/50 data-checked:border-amber-500 data-checked:bg-amber-500 data-checked:text-black",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3 [&>svg]:stroke-3",
+          children: /* @__PURE__ */ jsx(
+            CheckIcon,
+            {}
+          )
+        }
+      )
+    }
+  );
+}
+
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox.tsx"],"names":["CheckboxPrimitive"],"mappings":";;;;;AAMA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwD;AACtD,EAAA,uBACE,GAAA;AAAA,IAACA,UAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA;AAAA,QAIT,qkBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACA,UAAA,CAAkB,SAAA;AAAA,QAAlB;AAAA,UACC,WAAA,EAAU,oBAAA;AAAA,UACV,SAAA,EAAU,wFAAA;AAAA,UAEV,QAAA,kBAAA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA;AACD;AAAA;AACF;AAAA,GACF;AAEJ","file":"checkbox.js","sourcesContent":["import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        // The Work console's checkbox: 16px, 4px corners, a foreground/30 edge,\n        // amber with a black tick once checked. The ::after overlay carries\n        // a usable hit area round the small box.\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-foreground/30 bg-transparent transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-amber-500 dark:aria-invalid:border-destructive/50 data-checked:border-amber-500 data-checked:bg-amber-500 data-checked:text-black\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3 [&>svg]:stroke-3\"\n      >\n        <CheckIcon\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"]}

package/dist/chip.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TONE = {
+  ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
+  bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  muted: "bg-foreground/[0.06] text-muted-foreground"
+};
+var chipVariants = classVarianceAuthority.cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      tone: TONE,
+      size: {
+        sm: "px-2 py-0.5 text-[11.5px]",
+        default: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: { tone: "muted", size: "default" }
+  }
+);
+function Chip({
+  tone = "muted",
+  size = "default",
+  onRemove,
+  removeLabel = "Remove",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      className: chunk6YHDDRIM_cjs.cn(chipVariants({ tone, size }), onRemove && "pr-1", className),
+      ...props,
+      children: [
+        children,
+        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: onRemove,
+            "aria-label": removeLabel,
+            className: "relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-2.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TonePill({
+  tone,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tone, size: "sm", className, children });
+}
+function TagPill({
+  label,
+  onRemove,
+  size = "xs",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chip,
+    {
+      size: size === "xs" ? "default" : "lg",
+      onRemove,
+      removeLabel: `Remove tag ${label}`,
+      className: chunk6YHDDRIM_cjs.cn("font-normal", className),
+      children: label
+    }
+  );
+}
+
+exports.Chip = Chip;
+exports.TONE = TONE;
+exports.TagPill = TagPill;
+exports.TonePill = TonePill;
+exports.chipVariants = chipVariants;
+//# sourceMappingURL=chip.cjs.map
+//# sourceMappingURL=chip.cjs.map

package/dist/chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip.tsx"],"names":["cva","jsxs","cn","jsx","XIcon"],"mappings":";;;;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAeA,0BAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,oBAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,sCACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAWD,oBAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/chip.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type Tone = "ok" | "warn" | "bad" | "muted";
+declare const TONE: Record<Tone, string>;
+declare const chipVariants: (props?: ({
+    tone?: Tone | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Chip({ tone, size, onRemove, removeLabel, className, children, ...props }: React.ComponentProps<"span"> & {
+    tone?: Tone;
+    size?: "sm" | "default" | "lg";
+    /** Shows an × that calls this. */
+    onRemove?: () => void;
+    /** The ×'s accessible name. */
+    removeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+/** A status chip ("Active", "Paused") in one of the tones. */
+declare function TonePill({ tone, className, children, }: {
+    tone?: Tone;
+    className?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** A tag, removable when `onRemove` is given. */
+declare function TagPill({ label, onRemove, size, className, }: {
+    label: string;
+    onRemove?: () => void;
+    size?: "xs" | "sm";
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Chip, TONE, TagPill, type Tone, TonePill, chipVariants };

package/dist/chip.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type Tone = "ok" | "warn" | "bad" | "muted";
+declare const TONE: Record<Tone, string>;
+declare const chipVariants: (props?: ({
+    tone?: Tone | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Chip({ tone, size, onRemove, removeLabel, className, children, ...props }: React.ComponentProps<"span"> & {
+    tone?: Tone;
+    size?: "sm" | "default" | "lg";
+    /** Shows an × that calls this. */
+    onRemove?: () => void;
+    /** The ×'s accessible name. */
+    removeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+/** A status chip ("Active", "Paused") in one of the tones. */
+declare function TonePill({ tone, className, children, }: {
+    tone?: Tone;
+    className?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** A tag, removable when `onRemove` is given. */
+declare function TagPill({ label, onRemove, size, className, }: {
+    label: string;
+    onRemove?: () => void;
+    size?: "xs" | "sm";
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Chip, TONE, TagPill, type Tone, TonePill, chipVariants };

package/dist/chip.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONE = {
+  ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+  warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
+  bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  muted: "bg-foreground/[0.06] text-muted-foreground"
+};
+var chipVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      tone: TONE,
+      size: {
+        sm: "px-2 py-0.5 text-[11.5px]",
+        default: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: { tone: "muted", size: "default" }
+  }
+);
+function Chip({
+  tone = "muted",
+  size = "default",
+  onRemove,
+  removeLabel = "Remove",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      className: cn(chipVariants({ tone, size }), onRemove && "pr-1", className),
+      ...props,
+      children: [
+        children,
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: onRemove,
+            "aria-label": removeLabel,
+            className: "relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-2.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TonePill({
+  tone,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", className, children });
+}
+function TagPill({
+  label,
+  onRemove,
+  size = "xs",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: size === "xs" ? "default" : "lg",
+      onRemove,
+      removeLabel: `Remove tag ${label}`,
+      className: cn("font-normal", className),
+      children: label
+    }
+  );
+}
+
+export { Chip, TONE, TagPill, TonePill, chipVariants };
+//# sourceMappingURL=chip.js.map
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/choice-card.cjs

@@ -0,0 +1,127 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var choiceCardVariants = classVarianceAuthority.cva(
+  "group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        default: "flex-col gap-3 rounded-[12px] p-4",
+        sm: "flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2"
+      },
+      selected: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { size: "default", selected: true, className: "border-amber-500 bg-amber-500/[0.06]" },
+      {
+        size: "default",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]"
+      },
+      {
+        size: "sm",
+        selected: true,
+        className: "border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70"
+      },
+      {
+        size: "sm",
+        selected: false,
+        className: "border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20"
+      }
+    ],
+    defaultVariants: { size: "default", selected: false }
+  }
+);
+function ChoiceCard({
+  title,
+  description,
+  meta,
+  icon,
+  selected,
+  size = "default",
+  className,
+  children,
+  ...props
+}) {
+  if (size === "sm") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "choice-card",
+        "data-size": size,
+        "aria-pressed": selected,
+        className: chunk6YHDDRIM_cjs.cn(choiceCardVariants({ size, selected }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk6YHDDRIM_cjs.cn(
+                "flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4",
+                selected ? "bg-amber-500 text-black" : "bg-foreground/[0.07] text-muted-foreground"
+              ),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-1 sm:contents", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk6YHDDRIM_cjs.cn(
+                  "text-[14px] font-medium sm:text-[13px]",
+                  selected ? "text-foreground" : "text-foreground/85"
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "choice-card",
+      "data-size": size,
+      "aria-pressed": selected,
+      className: chunk6YHDDRIM_cjs.cn(choiceCardVariants({ size, selected }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full items-start gap-3", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[14px] font-semibold text-foreground", children: title }),
+            meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70", children: meta })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: chunk6YHDDRIM_cjs.cn(
+                "flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors",
+                selected ? "border-amber-500 bg-amber-500 text-black" : "border-foreground/20 text-transparent"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3", strokeWidth: 3 })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground", children: description }),
+        children
+      ]
+    }
+  );
+}
+
+exports.ChoiceCard = ChoiceCard;
+exports.choiceCardVariants = choiceCardVariants;
+//# sourceMappingURL=choice-card.cjs.map
+//# sourceMappingURL=choice-card.cjs.map

package/dist/choice-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice-card.tsx"],"names":["cva","jsxs","cn","jsx","CheckIcon"],"mappings":"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","file":"choice-card.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's selectable option cards.\n//   default — the library pickers (skills, knowledge bases): a 12px card with\n//             an icon tile, title, description and a round check; picked, it\n//             takes an amber border and wash.\n//   sm      — the exclusive mode cards (pricing model): tighter, the icon\n//             tile itself turns amber, the border gets an amber ring; on a\n//             phone each lies as a row, from `sm` up as a column.\n// A toggle button (aria-pressed): pressing picks or unpicks it. For a set\n// where exactly one is picked, have onClick select it and leave it pressed.\nconst choiceCardVariants = cva(\n  \"group/choice-card flex border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        default: \"flex-col gap-3 rounded-[12px] p-4\",\n        sm: \"flex-row items-start gap-3 rounded-[10px] p-3.5 sm:flex-col sm:gap-2\",\n      },\n      selected: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { size: \"default\", selected: true, className: \"border-amber-500 bg-amber-500/[0.06]\" },\n      {\n        size: \"default\",\n        selected: false,\n        className:\n          \"border-foreground/[0.08] bg-foreground/[0.02] hover:border-foreground/20 hover:bg-foreground/[0.04]\",\n      },\n      {\n        size: \"sm\",\n        selected: true,\n        className: \"border-amber-500/70 bg-amber-500/[0.08] ring-1 ring-amber-500/70\",\n      },\n      {\n        size: \"sm\",\n        selected: false,\n        className: \"border-foreground/[0.08] bg-foreground/[0.02] pointer-fine:hover:border-foreground/20\",\n      },\n    ],\n    defaultVariants: { size: \"default\", selected: false },\n  }\n)\n\nfunction ChoiceCard({\n  title,\n  description,\n  meta,\n  icon,\n  selected,\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"title\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** A line under the title (an id, a trigger), in mono. */\n  meta?: React.ReactNode\n  /** The tile's content: an icon, or an initial. */\n  icon?: React.ReactNode\n  selected: boolean\n  size?: \"default\" | \"sm\"\n}) {\n  if (size === \"sm\") {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"choice-card\"\n        data-size={size}\n        aria-pressed={selected}\n        className={cn(choiceCardVariants({ size, selected }), className)}\n        {...props}\n      >\n        {icon && (\n          <span\n            className={cn(\n              \"flex size-7 shrink-0 items-center justify-center rounded-[7px] [&_svg:not([class*='size-'])]:size-4\",\n              selected\n                ? \"bg-amber-500 text-black\"\n                : \"bg-foreground/[0.07] text-muted-foreground\"\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <span className=\"flex min-w-0 flex-col gap-1 sm:contents\">\n          <span\n            className={cn(\n              \"text-[14px] font-medium sm:text-[13px]\",\n              selected ? \"text-foreground\" : \"text-foreground/85\"\n            )}\n          >\n            {title}\n          </span>\n          {description && (\n            <span className=\"text-[12.5px] leading-[1.4] text-muted-foreground sm:text-[12px]\">\n              {description}\n            </span>\n          )}\n          {children}\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"choice-card\"\n      data-size={size}\n      aria-pressed={selected}\n      className={cn(choiceCardVariants({ size, selected }), className)}\n      {...props}\n    >\n      <span className=\"flex w-full items-start gap-3\">\n        {icon && (\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-[9px] border border-foreground/10 bg-foreground/[0.04] text-[13px] font-semibold text-foreground [&_svg:not([class*='size-'])]:size-4\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-[14px] font-semibold text-foreground\">\n            {title}\n          </span>\n          {meta && (\n            <span className=\"mt-0.5 block truncate font-mono text-[11px] text-muted-foreground/70\">\n              {meta}\n            </span>\n          )}\n        </span>\n        <span\n          aria-hidden={true}\n          className={cn(\n            \"flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected\n              ? \"border-amber-500 bg-amber-500 text-black\"\n              : \"border-foreground/20 text-transparent\"\n          )}\n        >\n          <CheckIcon className=\"size-3\" strokeWidth={3} />\n        </span>\n      </span>\n      {description && (\n        <span className=\"line-clamp-2 text-[12.5px] leading-relaxed text-muted-foreground\">\n          {description}\n        </span>\n      )}\n      {children}\n    </button>\n  )\n}\n\nexport { ChoiceCard, choiceCardVariants }\n"]}

package/dist/choice-card.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+declare const choiceCardVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChoiceCard({ title, description, meta, icon, selected, size, className, children, ...props }: Omit<React.ComponentProps<"button">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A line under the title (an id, a trigger), in mono. */
+    meta?: React.ReactNode;
+    /** The tile's content: an icon, or an initial. */
+    icon?: React.ReactNode;
+    selected: boolean;
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+
+export { ChoiceCard, choiceCardVariants };

package/dist/choice-card.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+declare const choiceCardVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ChoiceCard({ title, description, meta, icon, selected, size, className, children, ...props }: Omit<React.ComponentProps<"button">, "title"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** A line under the title (an id, a trigger), in mono. */
+    meta?: React.ReactNode;
+    /** The tile's content: an icon, or an initial. */
+    icon?: React.ReactNode;
+    selected: boolean;
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+
+export { ChoiceCard, choiceCardVariants };