@exxatdesignux/ui 0.2.19 → 0.3.0

package/dist/components/ui/selection-tile-grid.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { RadioGroupProps } from './radio-group.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+import './label.js';
+
+interface SelectionTileOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Font Awesome icon class without prefix (e.g. `fa-table`); rendered with `fa-light`. Ignored when `leading` is set. */
+    icon?: string;
+    /** Custom graphic (SVG, swatch, etc.) instead of `icon`. */
+    leading?: React.ReactNode;
+}
+/** Shared surface classes for icon+label tiles (Properties view type, Export format, etc.).
+ *
+ * `aspect-square` + horizontal padding keeps every tile a uniform square regardless of how
+ * many tiles are in the row — without it, the last row of a `grid-cols-N` grid (e.g. 3 tiles
+ * in a 4-col grid for the Properties view selector) renders the same width per cell but the
+ * eye reads them as inconsistent when the row's empty trailing cell shifts visual rhythm.
+ * Two-line labels (e.g. "List & details", "Tree & details") still fit because the icon
+ * column is only ~18px and the square grows with the cell. */
+declare function selectionTileClassNames(selected: boolean): string;
+/** Preview box only — label rendered below (Settings appearance pattern). */
+declare function selectionTilePreviewClassNames(selected: boolean): string;
+interface SelectionTileGridProps<T extends string> {
+    /** Section caption above the grid (e.g. “View type”). */
+    sectionLabel?: string;
+    options: readonly SelectionTileOption<T>[];
+    columns?: 2 | 3 | 4;
+    value: T;
+    onValueChange: (value: T) => void;
+    /** `radio` — Form / RadioGroup; `button` — toggle buttons with aria-pressed. */
+    interaction: "radio" | "button";
+    /** Prefix for radio ids (`${idPrefix}-${value}`). */
+    idPrefix?: string;
+    /** Forwarded to `RadioGroup` when `interaction="radio"` (sr-only inputs; affects focus ring / state tokens). */
+    itemVariant?: RadioGroupProps["itemVariant"];
+    itemSize?: RadioGroupProps["itemSize"];
+    itemMotion?: RadioGroupProps["itemMotion"];
+    className?: string;
+    /**
+     * `inside` — label in the bordered tile (default). `below` — label under the preview
+     * (matches system settings: preview box + caption outside).
+     */
+    labelPlacement?: "inside" | "below";
+}
+declare function SelectionTileGrid<T extends string>({ sectionLabel, options, columns, value, onValueChange, interaction, idPrefix, className, labelPlacement, itemVariant, itemSize, itemMotion, }: SelectionTileGridProps<T>): react_jsx_runtime.JSX.Element;
+
+export { SelectionTileGrid, type SelectionTileGridProps, type SelectionTileOption, selectionTileClassNames, selectionTilePreviewClassNames };

package/dist/components/ui/selection-tile-grid.js

@@ -0,0 +1,347 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React2 from 'react';
+import { Label as Label$1, RadioGroup as RadioGroup$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Label = React2.forwardRef(function Label2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var radioGroupItemVariants = cva(
+  [
+    "group/radio-group-item peer relative flex shrink-0 aspect-square rounded-full border border-input",
+    "outline-none transition-[color,box-shadow,transform,background-color,border-color] duration-150",
+    "motion-reduce:transition-none",
+    "group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:data-[state=checked]:border-primary",
+    "dark:bg-input/15 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary"
+        ].join(" "),
+        outline: [
+          "bg-background",
+          "data-[state=checked]:border-primary data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:ring-2 data-[state=checked]:ring-primary/25"
+        ].join(" "),
+        secondary: [
+          "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground"
+        ].join(" "),
+        success: [
+          "data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground"
+        ].join(" "),
+        destructive: [
+          "data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground"
+        ].join(" "),
+        warning: [
+          "data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950"
+        ].join(" "),
+        muted: [
+          "data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground"
+        ].join(" ")
+      },
+      size: {
+        sm: "size-3.5 min-h-3.5 min-w-3.5 max-h-3.5 max-w-3.5",
+        default: "size-4 min-h-4 min-w-4 max-h-4 max-w-4",
+        lg: "size-5 min-h-5 min-w-5 max-h-5 max-w-5"
+      },
+      motion: {
+        none: "",
+        pop: [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]"
+        ].join(" "),
+        glow: "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
+        "pop-glow": [
+          "motion-safe:active:scale-95",
+          "data-[state=checked]:motion-safe:scale-[1.04]",
+          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      motion: "none"
+    }
+  }
+);
+var radioIndicatorDotVariants = cva(
+  "pointer-events-none absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-foreground",
+        outline: "bg-primary",
+        secondary: "bg-secondary-foreground",
+        success: "bg-primary-foreground",
+        destructive: "bg-destructive-foreground",
+        warning: "bg-amber-950",
+        muted: "bg-foreground"
+      },
+      size: {
+        sm: "size-1.5",
+        default: "size-2",
+        lg: "size-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var radioIndicatorWrapperVariants = cva("relative flex size-full items-center justify-center", {
+  variants: {
+    motion: {
+      none: "",
+      pop: "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150",
+      glow: "",
+      "pop-glow": "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150"
+    }
+  },
+  defaultVariants: { motion: "none" }
+});
+var RadioGroupItemChromeContext = React2.createContext({});
+function RadioGroup({
+  className,
+  itemVariant,
+  itemSize,
+  itemMotion,
+  ...props
+}) {
+  const ctx = React2.useMemo(
+    () => ({ itemVariant, itemSize, itemMotion }),
+    [itemVariant, itemSize, itemMotion]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupItemChromeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RadioGroup$1.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid w-full gap-2", className),
+      ...props
+    }
+  ) });
+}
+var RadioGroupItem = React2.forwardRef(function RadioGroupItem2({ className, variant: variantProp, size: sizeProp, motion: motionProp, ...props }, ref) {
+  const ctx = React2.useContext(RadioGroupItemChromeContext);
+  const variant = variantProp ?? ctx.itemVariant;
+  const size = sizeProp ?? ctx.itemSize;
+  const motion = motionProp ?? ctx.itemMotion ?? "none";
+  const vResolved = variant ?? "default";
+  const sResolved = size ?? "default";
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1.Item,
+    {
+      ref,
+      "data-slot": "radio-group-item",
+      "data-variant": vResolved,
+      "data-motion": motion,
+      className: cn(radioGroupItemVariants({ variant, size, motion }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroup$1.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: radioIndicatorWrapperVariants({ motion }),
+          children: /* @__PURE__ */ jsx("span", { className: radioIndicatorDotVariants({ variant: vResolved, size: sResolved }) })
+        }
+      )
+    }
+  );
+});
+function selectionTileClassNames(selected) {
+  return cn(
+    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border px-2 py-3 text-xs leading-tight transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    selected ? "border-brand bg-brand/5 text-foreground font-medium shadow-sm" : "border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground"
+  );
+}
+function selectionTilePreviewClassNames(selected) {
+  return cn(
+    "relative box-border flex aspect-square w-full max-w-full flex-col rounded-lg border p-1 transition-colors",
+    selected ? "border-brand bg-brand/5 shadow-sm" : "border-border bg-background hover:border-border/80"
+  );
+}
+function SelectionTileGraphic({
+  option,
+  selected
+}) {
+  if (option.leading != null) {
+    return /* @__PURE__ */ jsx("span", { className: "flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center", children: option.leading });
+  }
+  if (option.icon) {
+    return /* @__PURE__ */ jsx(
+      "i",
+      {
+        className: cn(
+          "fa-light shrink-0 text-[18px] leading-none",
+          option.icon,
+          selected && "text-brand"
+        ),
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return null;
+}
+function SelectionTileLabelText({
+  option
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "text-center leading-tight", children: option.label });
+}
+function SelectionTileCaptionBelow({
+  option,
+  selected,
+  ariaHidden = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "max-w-full px-0.5 text-center text-xs leading-tight",
+        selected ? "font-medium text-foreground" : "text-muted-foreground"
+      ),
+      ...ariaHidden ? { "aria-hidden": true } : {},
+      children: option.label
+    }
+  );
+}
+function SelectionTileGrid({
+  sectionLabel,
+  options,
+  columns = 4,
+  value,
+  onValueChange,
+  interaction,
+  idPrefix = "tile",
+  className,
+  labelPlacement = "inside",
+  itemVariant,
+  itemSize,
+  itemMotion
+}) {
+  const gridClass = cn(
+    "gap-2",
+    columns === 2 && "grid grid-cols-2",
+    columns === 3 && "grid grid-cols-3",
+    columns === 4 && "grid grid-cols-4"
+  );
+  if (interaction === "radio") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      sectionLabel ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value,
+          onValueChange: (v) => onValueChange(v),
+          className: gridClass,
+          itemVariant,
+          itemSize,
+          itemMotion,
+          children: options.map((opt) => {
+            const selected = value === opt.value;
+            const id = `${idPrefix}-${opt.value}`;
+            if (labelPlacement === "below") {
+              return /* @__PURE__ */ jsxs(
+                Label,
+                {
+                  htmlFor: id,
+                  className: cn(
+                    "flex min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: [
+                      /* @__PURE__ */ jsx(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
+                      /* @__PURE__ */ jsx("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(SelectionTileCaptionBelow, { option: opt, selected })
+                  ]
+                },
+                opt.value
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              Label,
+              {
+                htmlFor: id,
+                className: cn(
+                  "cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none",
+                  selectionTileClassNames(selected)
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
+                  /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }),
+                  /* @__PURE__ */ jsx(SelectionTileLabelText, { option: opt })
+                ]
+              },
+              opt.value
+            );
+          })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    sectionLabel ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
+    /* @__PURE__ */ jsx("div", { className: gridClass, children: options.map((opt) => {
+      const selected = value === opt.value;
+      if (labelPlacement === "below") {
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": opt.label,
+            "aria-pressed": selected,
+            onClick: () => onValueChange(opt.value),
+            className: "flex min-w-0 flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: /* @__PURE__ */ jsx("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }) }) }),
+              /* @__PURE__ */ jsx(SelectionTileCaptionBelow, { option: opt, selected, ariaHidden: true })
+            ]
+          },
+          opt.value
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": opt.label,
+          "aria-pressed": selected,
+          onClick: () => onValueChange(opt.value),
+          className: selectionTileClassNames(selected),
+          children: [
+            /* @__PURE__ */ jsx(SelectionTileGraphic, { option: opt, selected }),
+            /* @__PURE__ */ jsx(SelectionTileLabelText, { option: opt })
+          ]
+        },
+        opt.value
+      );
+    }) })
+  ] });
+}
+
+export { SelectionTileGrid, selectionTileClassNames, selectionTilePreviewClassNames };
+//# sourceMappingURL=selection-tile-grid.js.map
+//# sourceMappingURL=selection-tile-grid.js.map

package/dist/components/ui/selection-tile-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/label.tsx","../../../src/components/ui/radio-group.tsx","../../../src/components/ui/selection-tile-grid.tsx"],"names":["React","Label","LabelPrimitive","jsx","RadioGroupPrimitive","RadioGroupItem"],"mappings":"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","file":"selection-tile-grid.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function Label({ className, ...props }, ref) {\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport { Label }\n","\"use client\"\n\n/**\n * Radio group — Radix `RadioGroup` + `RadioGroupItem` with Exxat styling.\n *\n * Aligned with Shadcn Studio radio-group guidance (see shadcnstudio.com/docs/components/radio-group):\n *   • Visual variants: default, outline, secondary, success, destructive, warning, muted\n *   • Sizes: sm, default, lg (outer ring + inner dot scale together)\n *   • Motion: none | pop | glow | pop-glow — `motion-safe` / `motion-reduce` (WCAG 2.3.3)\n *   • Optional group defaults: `<RadioGroup itemVariant=\"outline\" itemSize=\"sm\">` so items inherit\n *   • Per-item overrides: `<RadioGroupItem variant=\"success\" />`\n *   • Forms: `aria-invalid`, `disabled`, hit slop (`after:`); pair with `RadioGroupLabel` + `htmlFor` / `id`\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./label\"\n\n// ── Item chrome (variants / sizes / motion) ─────────────────────────────────\n\nconst radioGroupItemVariants = cva(\n  [\n    \"group/radio-group-item peer relative flex shrink-0 aspect-square rounded-full border border-input\",\n    \"outline-none transition-[color,box-shadow,transform,background-color,border-color] duration-150\",\n    \"motion-reduce:transition-none\",\n    \"group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2\",\n    \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:data-[state=checked]:border-primary\",\n    \"dark:bg-input/15 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n  ].join(\" \"),\n  {\n    variants: {\n      variant: {\n        default: [\n          \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary\",\n        ].join(\" \"),\n        outline: [\n          \"bg-background\",\n          \"data-[state=checked]:border-primary data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:ring-2 data-[state=checked]:ring-primary/25\",\n        ].join(\" \"),\n        secondary: [\n          \"data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground\",\n        ].join(\" \"),\n        success: [\n          \"data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground\",\n        ].join(\" \"),\n        destructive: [\n          \"data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground\",\n        ].join(\" \"),\n        warning: [\n          \"data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950\",\n        ].join(\" \"),\n        muted: [\n          \"data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground\",\n        ].join(\" \"),\n      },\n      size: {\n        sm: \"size-3.5 min-h-3.5 min-w-3.5 max-h-3.5 max-w-3.5\",\n        default: \"size-4 min-h-4 min-w-4 max-h-4 max-w-4\",\n        lg: \"size-5 min-h-5 min-w-5 max-h-5 max-w-5\",\n      },\n      motion: {\n        none: \"\",\n        pop: [\n          \"motion-safe:active:scale-95\",\n          \"data-[state=checked]:motion-safe:scale-[1.04]\",\n        ].join(\" \"),\n        glow: \"data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35\",\n        \"pop-glow\": [\n          \"motion-safe:active:scale-95\",\n          \"data-[state=checked]:motion-safe:scale-[1.04]\",\n          \"data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35\",\n        ].join(\" \"),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      motion: \"none\",\n    },\n  }\n)\n\nconst radioIndicatorDotVariants = cva(\n  \"pointer-events-none absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary-foreground\",\n        outline: \"bg-primary\",\n        secondary: \"bg-secondary-foreground\",\n        success: \"bg-primary-foreground\",\n        destructive: \"bg-destructive-foreground\",\n        warning: \"bg-amber-950\",\n        muted: \"bg-foreground\",\n      },\n      size: {\n        sm: \"size-1.5\",\n        default: \"size-2\",\n        lg: \"size-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst radioIndicatorWrapperVariants = cva(\"relative flex size-full items-center justify-center\", {\n  variants: {\n    motion: {\n      none: \"\",\n      pop: \"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150\",\n      glow: \"\",\n      \"pop-glow\": \"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150\",\n    },\n  },\n  defaultVariants: { motion: \"none\" },\n})\n\ntype ItemChrome = {\n  itemVariant?: VariantProps<typeof radioGroupItemVariants>[\"variant\"]\n  itemSize?: VariantProps<typeof radioGroupItemVariants>[\"size\"]\n  itemMotion?: VariantProps<typeof radioGroupItemVariants>[\"motion\"]\n}\n\nconst RadioGroupItemChromeContext = React.createContext<ItemChrome>({})\n\n// ── RadioGroup root ─────────────────────────────────────────────────────────\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> &\n  ItemChrome\n\nfunction RadioGroup({\n  className,\n  itemVariant,\n  itemSize,\n  itemMotion,\n  ...props\n}: RadioGroupProps) {\n  const ctx = React.useMemo(\n    () => ({ itemVariant, itemSize, itemMotion }),\n    [itemVariant, itemSize, itemMotion],\n  )\n  return (\n    <RadioGroupItemChromeContext.Provider value={ctx}>\n      <RadioGroupPrimitive.Root\n        data-slot=\"radio-group\"\n        className={cn(\"grid w-full gap-2\", className)}\n        {...props}\n      />\n    </RadioGroupItemChromeContext.Provider>\n  )\n}\n\n// ── RadioGroupItem ──────────────────────────────────────────────────────────\n\nexport type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> &\n  VariantProps<typeof radioGroupItemVariants>\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem(\n  { className, variant: variantProp, size: sizeProp, motion: motionProp, ...props },\n  ref,\n) {\n  const ctx = React.useContext(RadioGroupItemChromeContext)\n  const variant = variantProp ?? ctx.itemVariant\n  const size = sizeProp ?? ctx.itemSize\n  const motion = motionProp ?? ctx.itemMotion ?? \"none\"\n  const vResolved = variant ?? \"default\"\n  const sResolved = size ?? \"default\"\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      data-variant={vResolved}\n      data-motion={motion}\n      className={cn(radioGroupItemVariants({ variant, size, motion }), className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className={radioIndicatorWrapperVariants({ motion })}\n      >\n        <span className={radioIndicatorDotVariants({ variant: vResolved, size: sResolved })} />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\n\n// ── Label helper (touch-friendly row with peer-disabled) ────────────────────\n\nexport type RadioGroupLabelProps = React.ComponentPropsWithRef<typeof Label>\n\nfunction RadioGroupLabel({ className, ...props }: RadioGroupLabelProps) {\n  return (\n    <Label\n      data-slot=\"radio-group-label\"\n      className={cn(\n        \"inline-flex min-h-11 cursor-pointer select-none items-center gap-2 py-1 -my-1 text-sm font-medium leading-snug\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-60\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { RadioGroup, RadioGroupItem, RadioGroupLabel, radioGroupItemVariants }\n","\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./label\"\nimport { RadioGroup, RadioGroupItem, type RadioGroupProps } from \"./radio-group\"\n\nexport interface SelectionTileOption<T extends string = string> {\n  value: T\n  label: string\n  /** Font Awesome icon class without prefix (e.g. `fa-table`); rendered with `fa-light`. Ignored when `leading` is set. */\n  icon?: string\n  /** Custom graphic (SVG, swatch, etc.) instead of `icon`. */\n  leading?: React.ReactNode\n}\n\n/** Shared surface classes for icon+label tiles (Properties view type, Export format, etc.).\n *\n * `aspect-square` + horizontal padding keeps every tile a uniform square regardless of how\n * many tiles are in the row — without it, the last row of a `grid-cols-N` grid (e.g. 3 tiles\n * in a 4-col grid for the Properties view selector) renders the same width per cell but the\n * eye reads them as inconsistent when the row's empty trailing cell shifts visual rhythm.\n * Two-line labels (e.g. \"List & details\", \"Tree & details\") still fit because the icon\n * column is only ~18px and the square grows with the cell. */\nexport function selectionTileClassNames(selected: boolean) {\n  return cn(\n    \"flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border px-2 py-3 text-xs leading-tight transition-colors\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n    selected\n      ? \"border-brand bg-brand/5 text-foreground font-medium shadow-sm\"\n      : \"border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground\",\n  )\n}\n\n/** Preview box only — label rendered below (Settings appearance pattern). */\nexport function selectionTilePreviewClassNames(selected: boolean) {\n  return cn(\n    \"relative box-border flex aspect-square w-full max-w-full flex-col rounded-lg border p-1 transition-colors\",\n    selected\n      ? \"border-brand bg-brand/5 shadow-sm\"\n      : \"border-border bg-background hover:border-border/80\",\n  )\n}\n\nfunction SelectionTileGraphic<T extends string>({\n  option,\n  selected,\n}: {\n  option: SelectionTileOption<T>\n  selected: boolean\n}) {\n  if (option.leading != null) {\n    return (\n      <span className=\"flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center\">\n        {option.leading}\n      </span>\n    )\n  }\n  if (option.icon) {\n    return (\n      <i\n        className={cn(\n          \"fa-light shrink-0 text-[18px] leading-none\",\n          option.icon,\n          selected && \"text-brand\",\n        )}\n        aria-hidden=\"true\"\n      />\n    )\n  }\n  return null\n}\n\nfunction SelectionTileLabelText<T extends string>({\n  option,\n}: {\n  option: SelectionTileOption<T>\n}) {\n  return <span className=\"text-center leading-tight\">{option.label}</span>\n}\n\nexport interface SelectionTileGridProps<T extends string> {\n  /** Section caption above the grid (e.g. “View type”). */\n  sectionLabel?: string\n  options: readonly SelectionTileOption<T>[]\n  columns?: 2 | 3 | 4\n  value: T\n  onValueChange: (value: T) => void\n  /** `radio` — Form / RadioGroup; `button` — toggle buttons with aria-pressed. */\n  interaction: \"radio\" | \"button\"\n  /** Prefix for radio ids (`${idPrefix}-${value}`). */\n  idPrefix?: string\n  /** Forwarded to `RadioGroup` when `interaction=\"radio\"` (sr-only inputs; affects focus ring / state tokens). */\n  itemVariant?: RadioGroupProps[\"itemVariant\"]\n  itemSize?: RadioGroupProps[\"itemSize\"]\n  itemMotion?: RadioGroupProps[\"itemMotion\"]\n  className?: string\n  /**\n   * `inside` — label in the bordered tile (default). `below` — label under the preview\n   * (matches system settings: preview box + caption outside).\n   */\n  labelPlacement?: \"inside\" | \"below\"\n}\n\n/**\n * Icon tile grid for single selection — matches Properties “View type” and Export “File format” patterns.\n */\nfunction SelectionTileCaptionBelow<T extends string>({\n  option,\n  selected,\n  ariaHidden = false,\n}: {\n  option: SelectionTileOption<T>\n  selected: boolean\n  /** When the parent `button` already has `aria-label` (avoids duplicate SR output). */\n  ariaHidden?: boolean\n}) {\n  return (\n    <span\n      className={cn(\n        \"max-w-full px-0.5 text-center text-xs leading-tight\",\n        selected ? \"font-medium text-foreground\" : \"text-muted-foreground\",\n      )}\n      {...(ariaHidden ? { \"aria-hidden\": true as const } : {})}\n    >\n      {option.label}\n    </span>\n  )\n}\n\nexport function SelectionTileGrid<T extends string>({\n  sectionLabel,\n  options,\n  columns = 4,\n  value,\n  onValueChange,\n  interaction,\n  idPrefix = \"tile\",\n  className,\n  labelPlacement = \"inside\",\n  itemVariant,\n  itemSize,\n  itemMotion,\n}: SelectionTileGridProps<T>) {\n  const gridClass = cn(\n    \"gap-2\",\n    columns === 2 && \"grid grid-cols-2\",\n    columns === 3 && \"grid grid-cols-3\",\n    columns === 4 && \"grid grid-cols-4\",\n  )\n\n  if (interaction === \"radio\") {\n    return (\n      <div className={className}>\n        {sectionLabel ? (\n          <p className=\"mb-2 text-xs font-medium text-muted-foreground\">{sectionLabel}</p>\n        ) : null}\n        <RadioGroup\n          value={value}\n          onValueChange={v => onValueChange(v as T)}\n          className={gridClass}\n          itemVariant={itemVariant}\n          itemSize={itemSize}\n          itemMotion={itemMotion}\n        >\n          {options.map(opt => {\n            const selected = value === opt.value\n            const id = `${idPrefix}-${opt.value}`\n            if (labelPlacement === \"below\") {\n              return (\n                <Label\n                  key={opt.value}\n                  htmlFor={id}\n                  className={cn(\n                    \"flex min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background\",\n                  )}\n                >\n                  <span className={cn(\"flex w-full justify-center\", selectionTilePreviewClassNames(selected))}>\n                    <RadioGroupItem value={opt.value} id={id} className=\"sr-only\" />\n                    <span className=\"flex min-h-0 w-full min-w-0 flex-1 items-center justify-center\">\n                      <SelectionTileGraphic option={opt} selected={selected} />\n                    </span>\n                  </span>\n                  <SelectionTileCaptionBelow option={opt} selected={selected} />\n                </Label>\n              )\n            }\n            return (\n              <Label\n                key={opt.value}\n                htmlFor={id}\n                className={cn(\n                  \"cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none\",\n                  selectionTileClassNames(selected),\n                )}\n              >\n                <RadioGroupItem value={opt.value} id={id} className=\"sr-only\" />\n                <SelectionTileGraphic option={opt} selected={selected} />\n                <SelectionTileLabelText option={opt} />\n              </Label>\n            )\n          })}\n        </RadioGroup>\n      </div>\n    )\n  }\n\n  return (\n    <div className={className}>\n      {sectionLabel ? (\n        <p className=\"mb-2 text-xs font-medium text-muted-foreground\">{sectionLabel}</p>\n      ) : null}\n      <div className={gridClass}>\n        {options.map(opt => {\n          const selected = value === opt.value\n          if (labelPlacement === \"below\") {\n            return (\n              <button\n                key={opt.value}\n                type=\"button\"\n                aria-label={opt.label}\n                aria-pressed={selected}\n                onClick={() => onValueChange(opt.value)}\n                className=\"flex min-w-0 flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n              >\n                <span className={cn(\"flex w-full justify-center\", selectionTilePreviewClassNames(selected))}>\n                  <span className=\"flex min-h-0 w-full min-w-0 flex-1 items-center justify-center\">\n                    <SelectionTileGraphic option={opt} selected={selected} />\n                  </span>\n                </span>\n                <SelectionTileCaptionBelow option={opt} selected={selected} ariaHidden />\n              </button>\n            )\n          }\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              aria-label={opt.label}\n              aria-pressed={selected}\n              onClick={() => onValueChange(opt.value)}\n              className={selectionTileClassNames(selected)}\n            >\n              <SelectionTileGraphic option={opt} selected={selected} />\n              <SelectionTileLabelText option={opt} />\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/ui/separator.d.ts

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

package/dist/components/ui/separator.js

@@ -0,0 +1,33 @@
+"use client";
+import { Separator as Separator$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };
+//# sourceMappingURL=separator.js.map
+//# sourceMappingURL=separator.js.map

package/dist/components/ui/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/separator.tsx"],"names":["SeparatorPrimitive"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAAyD;AACvD,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,IAAA;AAAA,IAAnB;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,UAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,sKAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"separator.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"]}

package/dist/components/ui/sheet.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Dialog } from 'radix-ui';
+
+declare function Sheet({ ...props }: React.ComponentProps<typeof Dialog.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof Dialog.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, showOverlay, ...props }: React.ComponentProps<typeof Dialog.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+    showOverlay?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>): react_jsx_runtime.JSX.Element;
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };