@gerege-systems/ui 0.11.2

package/dist-lib/components/ui/Progress.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef, SVGProps } from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+export interface ProgressProps extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
+    /** 0–`max` (default 100). Clamped. Omit for indeterminate. */
+    value?: number | null;
+    /** Bar height. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual tone. Use `success`/`danger` to colour-code completion state. */
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
+/**
+ * Linear progress bar.
+ *
+ * @example
+ *   <Progress value={uploadPct} aria-label="Upload progress" />
+ *   <Progress aria-label="Loading" /> // indeterminate
+ *
+ * @do Always pair Progress with an `aria-label` describing what is progressing.
+ * @dont Use a Progress for an unknown-completion task — use a Spinner.
+ */
+export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface ProgressCircleProps extends SVGProps<SVGSVGElement> {
+    /** 0–100. Omit for indeterminate. */
+    value?: number;
+    /** `sm` 24 / `md` 36 / `lg` 48, or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number;
+    /** Stroke thickness. */
+    thickness?: number;
+    /** Visible label for screen readers. */
+    'aria-label': string;
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
+/**
+ * Circular progress ring. Pairs with a numeric label for percentage-style
+ * indicators.
+ *
+ * @example
+ *   <ProgressCircle value={72} aria-label="Storage used" />
+ */
+export declare const ProgressCircle: import('react').ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist-lib/components/ui/Progress.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as c, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import * as u from "@radix-ui/react-progress";
+import { cn as m } from "../../lib/utils.js";
+const b = { sm: "h-1", md: "h-1.5", lg: "h-2" }, v = {
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger"
+}, w = h(
+  function({ className: o, value: s, max: t = 100, size: l = "md", tone: d = "accent", ...f }, g) {
+    const e = s == null || Number.isNaN(s), r = t > 0 ? t : 100, n = e ? 0 : Math.min(r, Math.max(0, s)), a = n / r * 100;
+    return /* @__PURE__ */ c(
+      u.Root,
+      {
+        ref: g,
+        value: e ? void 0 : n,
+        max: r,
+        className: m(
+          "bg-background-muted relative w-full overflow-hidden rounded-full",
+          b[l],
+          o
+        ),
+        ...f,
+        children: /* @__PURE__ */ c(
+          u.Indicator,
+          {
+            className: m(
+              "h-full w-full flex-1 transition-transform",
+              v[d],
+              e && "animate-progress-indeterminate origin-left"
+            ),
+            "data-motion-keep": e ? "" : void 0,
+            style: e ? void 0 : { transform: `translateX(-${100 - a}%)` }
+          }
+        )
+      }
+    );
+  }
+);
+w.displayName = "Progress";
+const x = { sm: 24, md: 36, lg: 48 }, y = {
+  accent: "stroke-accent",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  danger: "stroke-danger"
+}, M = h(
+  function({ value: o, size: s = "md", thickness: t = 3, className: l, tone: d = "accent", ...f }, g) {
+    const e = typeof s == "number" ? s : x[s], r = o === void 0 || Number.isNaN(o), n = r ? 0 : Math.min(100, Math.max(0, o)), a = (e - t) / 2, i = 2 * Math.PI * a, k = r ? 0 : i - n / 100 * i;
+    return /* @__PURE__ */ N(
+      "svg",
+      {
+        ref: g,
+        width: e,
+        height: e,
+        viewBox: `0 0 ${e} ${e}`,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": r ? void 0 : n,
+        "data-motion-keep": r ? "" : void 0,
+        className: m("shrink-0", r && "animate-spin", l),
+        ...f,
+        children: [
+          /* @__PURE__ */ c(
+            "circle",
+            {
+              cx: e / 2,
+              cy: e / 2,
+              r: a,
+              strokeWidth: t,
+              className: "stroke-background-muted fill-none"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "circle",
+            {
+              cx: e / 2,
+              cy: e / 2,
+              r: a,
+              strokeWidth: t,
+              strokeLinecap: "round",
+              strokeDasharray: i,
+              strokeDashoffset: r ? i * 0.7 : k,
+              className: m(y[d], "fill-none transition-[stroke-dashoffset]"),
+              transform: `rotate(-90 ${e / 2} ${e / 2})`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+M.displayName = "ProgressCircle";
+export {
+  w as Progress,
+  M as ProgressCircle
+};
+//# sourceMappingURL=Progress.js.map

package/dist-lib/components/ui/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../src/components/ui/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type SVGProps } from 'react';\nimport * as ProgressPrimitive from '@radix-ui/react-progress';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Linear — bar that fills left-to-right.\n *  Circular — SVG ring. Both support determinate (value 0..100) and\n *  indeterminate (`value` omitted) states.\n * --------------------------------------------------------------------------- */\n\nexport interface ProgressProps extends Omit<\n  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n  'value'\n> {\n  /** 0–`max` (default 100). Clamped. Omit for indeterminate. */\n  value?: number | null;\n  /** Bar height. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Visual tone. Use `success`/`danger` to colour-code completion state. */\n  tone?: 'accent' | 'success' | 'warning' | 'danger';\n}\n\nconst heightMap = { sm: 'h-1', md: 'h-1.5', lg: 'h-2' } as const;\nconst fillTone = {\n  accent: 'bg-accent',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n} as const;\n\n/**\n * Linear progress bar.\n *\n * @example\n *   <Progress value={uploadPct} aria-label=\"Upload progress\" />\n *   <Progress aria-label=\"Loading\" /> // indeterminate\n *\n * @do Always pair Progress with an `aria-label` describing what is progressing.\n * @dont Use a Progress for an unknown-completion task — use a Spinner.\n */\nexport const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(\n  function Progress({ className, value, max = 100, size = 'md', tone = 'accent', ...props }, ref) {\n    const indeterminate = value === undefined || value === null || Number.isNaN(value);\n    const safeMax = max > 0 ? max : 100;\n    const clamped = indeterminate ? 0 : Math.min(safeMax, Math.max(0, value as number));\n    const pct = (clamped / safeMax) * 100;\n    return (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={indeterminate ? undefined : clamped}\n        max={safeMax}\n        className={cn(\n          'bg-background-muted relative w-full overflow-hidden rounded-full',\n          heightMap[size],\n          className,\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn(\n            'h-full w-full flex-1 transition-transform',\n            fillTone[tone],\n            indeterminate && 'animate-progress-indeterminate origin-left',\n          )}\n          data-motion-keep={indeterminate ? '' : undefined}\n          style={indeterminate ? undefined : { transform: `translateX(-${100 - pct}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    );\n  },\n);\nProgress.displayName = 'Progress';\n\nexport interface ProgressCircleProps extends SVGProps<SVGSVGElement> {\n  /** 0–100. Omit for indeterminate. */\n  value?: number;\n  /** `sm` 24 / `md` 36 / `lg` 48, or an explicit pixel size. */\n  size?: 'sm' | 'md' | 'lg' | number;\n  /** Stroke thickness. */\n  thickness?: number;\n  /** Visible label for screen readers. */\n  'aria-label': string;\n  tone?: 'accent' | 'success' | 'warning' | 'danger';\n}\n\nconst circleSize = { sm: 24, md: 36, lg: 48 } as const;\n\nconst circleTone = {\n  accent: 'stroke-accent',\n  success: 'stroke-success',\n  warning: 'stroke-warning',\n  danger: 'stroke-danger',\n} as const;\n\n/**\n * Circular progress ring. Pairs with a numeric label for percentage-style\n * indicators.\n *\n * @example\n *   <ProgressCircle value={72} aria-label=\"Storage used\" />\n */\nexport const ProgressCircle = forwardRef<SVGSVGElement, ProgressCircleProps>(\n  function ProgressCircle(\n    { value, size: sizeProp = 'md', thickness = 3, className, tone = 'accent', ...props },\n    ref,\n  ) {\n    const size = typeof sizeProp === 'number' ? sizeProp : circleSize[sizeProp];\n    const isIndeterminate = value === undefined || Number.isNaN(value);\n    const clamped = isIndeterminate ? 0 : Math.min(100, Math.max(0, value as number));\n    const radius = (size - thickness) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = isIndeterminate ? 0 : circumference - (clamped / 100) * circumference;\n\n    return (\n      <svg\n        ref={ref}\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={isIndeterminate ? undefined : clamped}\n        data-motion-keep={isIndeterminate ? '' : undefined}\n        className={cn('shrink-0', isIndeterminate && 'animate-spin', className)}\n        {...props}\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={thickness}\n          className=\"stroke-background-muted fill-none\"\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={thickness}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={isIndeterminate ? circumference * 0.7 : offset}\n          className={cn(circleTone[tone], 'fill-none transition-[stroke-dashoffset]')}\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        />\n      </svg>\n    );\n  },\n);\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":["heightMap","fillTone","Progress","forwardRef","className","value","max","size","tone","props","ref","indeterminate","safeMax","clamped","pct","jsx","ProgressPrimitive","cn","circleSize","circleTone","ProgressCircle","sizeProp","thickness","isIndeterminate","radius","circumference","offset","jsxs"],"mappings":"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"}

package/dist-lib/components/ui/RadioGroup.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    /** Lay out the radios vertically (default) or horizontally. Also drives arrow-key navigation. */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'asChild'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    hideLabel?: boolean;
+}
+/**
+ * One radio option with inline label + description.
+ *
+ * @example
+ *   <RadioGroup defaultValue="weekly">
+ *     <RadioItem value="daily" label="Daily" description="Every morning at 9am" />
+ *     <RadioItem value="weekly" label="Weekly" description="Monday mornings" />
+ *     <RadioItem value="never" label="Never" />
+ *   </RadioGroup>
+ *
+ * @do Pair every RadioItem with a label — naked radios are unreachable for
+ *      screen reader users.
+ * @dont Use RadioGroup for binary choices — use Switch.
+ */
+export declare const RadioItem: import('react').ForwardRefExoticComponent<RadioItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist-lib/components/ui/RadioGroup.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as f, useId as h } from "react";
+import * as d from "@radix-ui/react-radio-group";
+import { cn as i } from "../../lib/utils.js";
+const y = f(
+  function({ className: a, orientation: r = "vertical", ...o }, t) {
+    return /* @__PURE__ */ e(
+      d.Root,
+      {
+        ref: t,
+        orientation: r,
+        className: i(
+          "flex gap-3",
+          r === "vertical" ? "flex-col" : "flex-row flex-wrap",
+          a
+        ),
+        ...o
+      }
+    );
+  }
+);
+y.displayName = "RadioGroup";
+const N = f(
+  function({
+    className: a,
+    label: r,
+    description: o,
+    hideLabel: t,
+    id: m,
+    disabled: l,
+    "aria-describedby": b,
+    ...p
+  }, x) {
+    const v = h(), s = m ?? v, n = o ? `${s}-desc` : void 0, g = [n, b].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ c("div", { className: i("flex items-start gap-2.5", a), children: [
+      /* @__PURE__ */ e(
+        d.Item,
+        {
+          ref: x,
+          id: s,
+          disabled: l,
+          "aria-describedby": g,
+          className: i(
+            "bg-card relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
+            // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.
+            'before:absolute before:-inset-1.5 before:rounded-full before:content-[""]',
+            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+            "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "data-[state=checked]:border-accent",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "border-border-input aria-invalid:border-danger"
+          ),
+          ...p,
+          children: /* @__PURE__ */ e(d.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "bg-accent size-2 rounded-full", "aria-hidden": !0 }) })
+        }
+      ),
+      r && /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ e(
+          "label",
+          {
+            htmlFor: s,
+            className: i(
+              "text-foreground text-sm select-none",
+              l && "cursor-not-allowed opacity-50",
+              t && "sr-only"
+            ),
+            children: r
+          }
+        ),
+        o && /* @__PURE__ */ e("p", { id: n, className: "text-foreground-subtle text-xs", children: o })
+      ] })
+    ] });
+  }
+);
+N.displayName = "RadioItem";
+export {
+  y as RadioGroup,
+  N as RadioItem
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist-lib/components/ui/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/ui/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { cn } from '@/lib/utils';\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /** Lay out the radios vertically (default) or horizontally. Also drives arrow-key navigation. */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const RadioGroup = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(\n  function RadioGroup({ className, orientation = 'vertical', ...props }, ref) {\n    return (\n      <RadioGroupPrimitive.Root\n        ref={ref}\n        orientation={orientation}\n        className={cn(\n          'flex gap-3',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\nexport interface RadioItemProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n  'asChild'\n> {\n  label?: ReactNode;\n  description?: ReactNode;\n  hideLabel?: boolean;\n}\n\n/**\n * One radio option with inline label + description.\n *\n * @example\n *   <RadioGroup defaultValue=\"weekly\">\n *     <RadioItem value=\"daily\" label=\"Daily\" description=\"Every morning at 9am\" />\n *     <RadioItem value=\"weekly\" label=\"Weekly\" description=\"Monday mornings\" />\n *     <RadioItem value=\"never\" label=\"Never\" />\n *   </RadioGroup>\n *\n * @do Pair every RadioItem with a label — naked radios are unreachable for\n *      screen reader users.\n * @dont Use RadioGroup for binary choices — use Switch.\n */\nexport const RadioItem = forwardRef<ElementRef<typeof RadioGroupPrimitive.Item>, RadioItemProps>(\n  function RadioItem(\n    {\n      className,\n      label,\n      description,\n      hideLabel,\n      id,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n    const describedBy = [descId, ariaDescribedby].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <div className={cn('flex items-start gap-2.5', className)}>\n        <RadioGroupPrimitive.Item\n          ref={ref}\n          id={fieldId}\n          disabled={disabled}\n          aria-describedby={describedBy}\n          className={cn(\n            'bg-card relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border',\n            // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.\n            'before:absolute before:-inset-1.5 before:rounded-full before:content-[\"\"]',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'data-[state=checked]:border-accent',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            'border-border-input aria-invalid:border-danger',\n          )}\n          {...props}\n        >\n          <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <span className=\"bg-accent size-2 rounded-full\" aria-hidden />\n          </RadioGroupPrimitive.Indicator>\n        </RadioGroupPrimitive.Item>\n\n        {label && (\n          <div className=\"flex flex-col gap-0.5\">\n            <label\n              htmlFor={fieldId}\n              className={cn(\n                'text-foreground text-sm select-none',\n                disabled && 'cursor-not-allowed opacity-50',\n                hideLabel && 'sr-only',\n              )}\n            >\n              {label}\n            </label>\n            {description && (\n              <p id={descId} className=\"text-foreground-subtle text-xs\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nRadioItem.displayName = 'RadioItem';\n"],"names":["RadioGroup","forwardRef","className","orientation","props","ref","jsx","RadioGroupPrimitive","cn","RadioItem","label","description","hideLabel","id","disabled","ariaDescribedby","autoId","useId","fieldId","descId","describedBy","jsxs"],"mappings":";;;;;AAiBO,MAAMA,IAAaC;AAAA,EACxB,SAAoB,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,GAAK;AAC1E,WACE,gBAAAC;AAAA,MAACC,EAAoB;AAAA,MAApB;AAAA,QACC,KAAAF;AAAA,QACA,aAAAF;AAAA,QACA,WAAWK;AAAA,UACT;AAAA,UACAL,MAAgB,aAAa,aAAa;AAAA,UAC1CD;AAAA,QAAA;AAAA,QAED,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAJ,EAAW,cAAc;AAyBlB,MAAMS,IAAYR;AAAA,EACvB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAQ;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGX;AAAA,EAAA,GAELC,GACA;AACA,UAAMW,IAASC,EAAA,GACTC,IAAUL,KAAMG,GAChBG,IAASR,IAAc,GAAGO,CAAO,UAAU,QAC3CE,IAAc,CAACD,GAAQJ,CAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAE3E,6BACG,OAAA,EAAI,WAAWP,EAAG,4BAA4BN,CAAS,GACtD,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,KAAAF;AAAA,UACA,IAAIa;AAAA,UACJ,UAAAJ;AAAA,UACA,oBAAkBM;AAAA,UAClB,WAAWZ;AAAA,YACT;AAAA;AAAA,YAEA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAGJ;AAAA,UAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,oCACvC,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,iCAAgC,eAAW,GAAA,CAAC,EAAA,CAC9D;AAAA,QAAA;AAAA,MAAA;AAAA,MAGDI,KACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,gBAAAf;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAASY;AAAA,YACT,WAAWV;AAAA,cACT;AAAA,cACAM,KAAY;AAAA,cACZF,KAAa;AAAA,YAAA;AAAA,YAGd,UAAAF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,KACC,gBAAAL,EAAC,KAAA,EAAE,IAAIa,GAAQ,WAAU,kCACtB,UAAAR,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAF,EAAU,cAAc;"}

package/dist-lib/components/ui/RelativeTime.d.ts

@@ -0,0 +1,19 @@
+import { TimeHTMLAttributes } from 'react';
+import { FormatDateOptions } from '../../lib/format.js';
+export interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    /** The instant to describe. */
+    date: Date | number | string;
+    /** Reference "now". Default `Date.now()` at render — pass one for stable SSR/tests. */
+    now?: Date | number;
+    /** Options for the absolute `title` (tooltip). */
+    absolute?: FormatDateOptions;
+}
+/**
+ * `<time>` showing "5 min ago" with the absolute timestamp as `title` and a
+ * machine-readable `dateTime`. Strings come from `UiStrings.relativeTime`.
+ * Beyond 30 days it falls back to the absolute date so text never goes stale.
+ *
+ * @example
+ *   <RelativeTime date={post.createdAt} />
+ */
+export declare const RelativeTime: import('react').ForwardRefExoticComponent<RelativeTimeProps & import('react').RefAttributes<HTMLTimeElement>>;

package/dist-lib/components/ui/RelativeTime.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as N } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { formatDate as v } from "../../lib/format.js";
+import { formatString as a } from "../../lib/strings.js";
+import { useStrings as M } from "../../hooks/use-strings.js";
+import { cn as b } from "../../lib/utils.js";
+const f = 6e4, c = 60 * f, m = 24 * c, R = h(function({ date: n, now: o, absolute: d, className: g, ...p }, T) {
+  const t = M().relativeTime, s = n instanceof Date ? n : new Date(n), D = o === void 0 ? Date.now() : o instanceof Date ? o.getTime() : o, l = s.getTime() - D, e = Math.abs(l), r = l > 0, u = v(s, d);
+  let i;
+  return e < f ? i = t.justNow : e < c ? i = a(r ? t.inMinutes : t.minutesAgo, {
+    n: Math.round(e / f)
+  }) : e < m ? i = a(r ? t.inHours : t.hoursAgo, {
+    n: Math.round(e / c)
+  }) : e < 30 * m ? i = a(r ? t.inDays : t.daysAgo, { n: Math.round(e / m) }) : i = u, /* @__PURE__ */ N(
+    "time",
+    {
+      ref: T,
+      dateTime: Number.isNaN(s.getTime()) ? void 0 : s.toISOString(),
+      title: u,
+      className: b("tabular", g),
+      ...p,
+      children: i
+    }
+  );
+});
+R.displayName = "RelativeTime";
+export {
+  R as RelativeTime
+};
+//# sourceMappingURL=RelativeTime.js.map

package/dist-lib/components/ui/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sources":["../../../src/components/ui/RelativeTime.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type TimeHTMLAttributes } from 'react';\nimport { formatDate, type FormatDateOptions } from '@/lib/format';\nimport { formatString } from '@/lib/strings';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cn } from '@/lib/utils';\n\nexport interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {\n  /** The instant to describe. */\n  date: Date | number | string;\n  /** Reference \"now\". Default `Date.now()` at render — pass one for stable SSR/tests. */\n  now?: Date | number;\n  /** Options for the absolute `title` (tooltip). */\n  absolute?: FormatDateOptions;\n}\n\nconst MIN = 60_000;\nconst HOUR = 60 * MIN;\nconst DAY = 24 * HOUR;\n\n/**\n * `<time>` showing \"5 min ago\" with the absolute timestamp as `title` and a\n * machine-readable `dateTime`. Strings come from `UiStrings.relativeTime`.\n * Beyond 30 days it falls back to the absolute date so text never goes stale.\n *\n * @example\n *   <RelativeTime date={post.createdAt} />\n */\nexport const RelativeTime = forwardRef<HTMLTimeElement, RelativeTimeProps>(function RelativeTime(\n  { date, now, absolute, className, ...props },\n  ref,\n) {\n  const strings = useStrings().relativeTime;\n  const d = date instanceof Date ? date : new Date(date);\n  const ref_ = now === undefined ? Date.now() : now instanceof Date ? now.getTime() : now;\n  const diff = d.getTime() - ref_;\n  const abs = Math.abs(diff);\n  const future = diff > 0;\n  const title = formatDate(d, absolute);\n\n  let label: string;\n  if (abs < MIN) label = strings.justNow;\n  else if (abs < HOUR)\n    label = formatString(future ? strings.inMinutes : strings.minutesAgo, {\n      n: Math.round(abs / MIN),\n    });\n  else if (abs < DAY)\n    label = formatString(future ? strings.inHours : strings.hoursAgo, {\n      n: Math.round(abs / HOUR),\n    });\n  else if (abs < 30 * DAY)\n    label = formatString(future ? strings.inDays : strings.daysAgo, { n: Math.round(abs / DAY) });\n  else label = title;\n\n  return (\n    <time\n      ref={ref}\n      dateTime={Number.isNaN(d.getTime()) ? undefined : d.toISOString()}\n      title={title}\n      className={cn('tabular', className)}\n      {...props}\n    >\n      {label}\n    </time>\n  );\n});\nRelativeTime.displayName = 'RelativeTime';\n"],"names":["MIN","HOUR","DAY","RelativeTime","forwardRef","date","now","absolute","className","props","ref","strings","useStrings","d","ref_","diff","abs","future","title","formatDate","label","formatString","jsx","cn"],"mappings":";;;;;;;AAiBA,MAAMA,IAAM,KACNC,IAAO,KAAKD,GACZE,IAAM,KAAKD,GAUJE,IAAeC,EAA+C,SACzE,EAAE,MAAAC,GAAM,KAAAC,GAAK,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GACrCC,GACA;AACA,QAAMC,IAAUC,IAAa,cACvBC,IAAIR,aAAgB,OAAOA,IAAO,IAAI,KAAKA,CAAI,GAC/CS,IAAOR,MAAQ,SAAY,KAAK,QAAQA,aAAe,OAAOA,EAAI,QAAA,IAAYA,GAC9ES,IAAOF,EAAE,QAAA,IAAYC,GACrBE,IAAM,KAAK,IAAID,CAAI,GACnBE,IAASF,IAAO,GAChBG,IAAQC,EAAWN,GAAGN,CAAQ;AAEpC,MAAIa;AACJ,SAAIJ,IAAMhB,IAAKoB,IAAQT,EAAQ,UACtBK,IAAMf,IACbmB,IAAQC,EAAaJ,IAASN,EAAQ,YAAYA,EAAQ,YAAY;AAAA,IACpE,GAAG,KAAK,MAAMK,IAAMhB,CAAG;AAAA,EAAA,CACxB,IACMgB,IAAMd,IACbkB,IAAQC,EAAaJ,IAASN,EAAQ,UAAUA,EAAQ,UAAU;AAAA,IAChE,GAAG,KAAK,MAAMK,IAAMf,CAAI;AAAA,EAAA,CACzB,IACMe,IAAM,KAAKd,IAClBkB,IAAQC,EAAaJ,IAASN,EAAQ,SAASA,EAAQ,SAAS,EAAE,GAAG,KAAK,MAAMK,IAAMd,CAAG,GAAG,IACzFkB,IAAQF,GAGX,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,UAAU,OAAO,MAAMG,EAAE,SAAS,IAAI,SAAYA,EAAE,YAAA;AAAA,MACpD,OAAAK;AAAA,MACA,WAAWK,EAAG,WAAWf,CAAS;AAAA,MACjC,GAAGC;AAAA,MAEH,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDjB,EAAa,cAAc;"}

package/dist-lib/components/ui/ScrollArea.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef } from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+/**
+ * Custom scroll container with consistent styled scrollbars across OS / browsers.
+ * Use when the default OS scrollbar would visually clash (sidebars, command
+ * palettes, code panes). Falls back to native scroll inside the viewport.
+ *
+ * @example
+ *   <ScrollArea className="h-64 rounded-md border border-border">
+ *     <div className="p-3">…long content…</div>
+ *   </ScrollArea>
+ */
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Accessible name of the viewport (a focusable `group` so keyboard users
+     * can scroll it). Defaults to `strings.scrollArea.region`.
+     */
+    viewportLabel?: string;
+}
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ScrollBar: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/ScrollArea.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import * as o from "@radix-ui/react-scroll-area";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as m } from "../../hooks/use-strings.js";
+const p = s(
+  function({ className: e, children: r, viewportLabel: a, ...i }, f) {
+    const u = m();
+    return /* @__PURE__ */ d(
+      o.Root,
+      {
+        ref: f,
+        className: n("relative overflow-hidden", e),
+        ...i,
+        children: [
+          /* @__PURE__ */ l(
+            o.Viewport,
+            {
+              role: "group",
+              "aria-label": a ?? u.scrollArea.region,
+              tabIndex: 0,
+              className: n(
+                "h-full w-full rounded-[inherit]",
+                "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+              ),
+              children: r
+            }
+          ),
+          /* @__PURE__ */ l(t, {}),
+          /* @__PURE__ */ l(o.Corner, {})
+        ]
+      }
+    );
+  }
+);
+p.displayName = "ScrollArea";
+const t = s(function({ className: e, orientation: r = "vertical", ...a }, i) {
+  return /* @__PURE__ */ l(
+    o.ScrollAreaScrollbar,
+    {
+      ref: i,
+      orientation: r,
+      className: n(
+        "flex touch-none transition-colors duration-[var(--duration-fast)] select-none",
+        r === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+        r === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ l(o.ScrollAreaThumb, { className: "bg-border-strong relative flex-1 rounded-full" })
+    }
+  );
+});
+t.displayName = "ScrollBar";
+export {
+  p as ScrollArea,
+  t as ScrollBar
+};
+//# sourceMappingURL=ScrollArea.js.map

package/dist-lib/components/ui/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ui/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/**\n * Custom scroll container with consistent styled scrollbars across OS / browsers.\n * Use when the default OS scrollbar would visually clash (sidebars, command\n * palettes, code panes). Falls back to native scroll inside the viewport.\n *\n * @example\n *   <ScrollArea className=\"h-64 rounded-md border border-border\">\n *     <div className=\"p-3\">…long content…</div>\n *   </ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Accessible name of the viewport (a focusable `group` so keyboard users\n   * can scroll it). Defaults to `strings.scrollArea.region`.\n   */\n  viewportLabel?: string;\n}\n\nexport const ScrollArea = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\n  function ScrollArea({ className, children, viewportLabel, ...props }, ref) {\n    const strings = useStrings();\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          role=\"group\"\n          aria-label={viewportLabel ?? strings.scrollArea.region}\n          tabIndex={0}\n          className={cn(\n            'h-full w-full rounded-[inherit]',\n            'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          )}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollBar />\n        <ScrollAreaPrimitive.Corner />\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport const ScrollBar = forwardRef<\n  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(function ScrollBar({ className, orientation = 'vertical', ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-colors duration-[var(--duration-fast)] select-none',\n        orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-px',\n        orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border-strong relative flex-1 rounded-full\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\nScrollBar.displayName = 'ScrollBar';\n"],"names":["ScrollArea","forwardRef","className","children","viewportLabel","props","ref","strings","useStrings","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;;;;AAyBO,MAAMA,IAAaC;AAAA,EACxB,SAAoB,EAAE,WAAAC,GAAW,UAAAC,GAAU,eAAAC,GAAe,GAAGC,EAAA,GAASC,GAAK;AACzE,UAAMC,IAAUC,EAAA;AAChB,WACE,gBAAAC;AAAA,MAACC,EAAoB;AAAA,MAApB;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAG,4BAA4BT,CAAS;AAAA,QAClD,GAAGG;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAACF,EAAoB;AAAA,YAApB;AAAA,cACC,MAAK;AAAA,cACL,cAAYN,KAAiBG,EAAQ,WAAW;AAAA,cAChD,UAAU;AAAA,cACV,WAAWI;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEFU,GAAA,EAAU;AAAA,UACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlC;AACF;AACAV,EAAW,cAAc;AAElB,MAAMa,IAAYZ,EAGvB,SAAmB,EAAE,WAAAC,GAAW,aAAAY,IAAc,YAAY,GAAGT,EAAA,GAASC,GAAK;AAC3E,SACE,gBAAAM;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAJ;AAAA,MACA,aAAAQ;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCZ;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEJ,UAAA,gBAAAO,EAACF,EAAoB,iBAApB,EAAoC,WAAU,gDAAA,CAAgD;AAAA,IAAA;AAAA,EAAA;AAGrG,CAAC;AACDG,EAAU,cAAc;"}

package/dist-lib/components/ui/Select.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const Select: import('react').FC<SelectPrimitive.SelectProps>;
+export declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface SelectTriggerProps extends Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'> {
+    /**
+     * Placeholder shown when no value is selected. Also used as the trigger's
+     * accessible name when no `aria-label` / `aria-labelledby` / `id` (external
+     * `<Label htmlFor>`) is supplied — `role="combobox"` takes no name from
+     * its content.
+     */
+    placeholder?: string;
+    /** Trigger height — matches Input sizes. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual tone — `error` swaps the border + ring to danger. */
+    tone?: 'default' | 'error';
+}
+export declare const SelectTrigger: import('react').ForwardRefExoticComponent<SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectScrollUpButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface SelectItemProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    /** Icon shown to the left of the label. */
+    leadingIcon?: ReactNode;
+}
+export declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/** Optional grouping with a label header. Pure composition over Radix Group + Label. */
+export interface SelectGroupProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+    label?: ReactNode;
+}
+export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Compose `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` for a
+ * single-choice picker. Keyboard, type-ahead, and ARIA come from Radix.
+ *
+ * @example Basic
+ *   <Select onValueChange={setStatus}>
+ *     <SelectTrigger placeholder="Status" />
+ *     <SelectContent>
+ *       <SelectItem value="open">Open</SelectItem>
+ *       <SelectItem value="closed">Closed</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *
+ * @example Grouped
+ *   <SelectContent>
+ *     <SelectGroup label="People">
+ *       <SelectItem value="anu">Anu</SelectItem>
+ *       <SelectItem value="bat">Bat</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup label="Bots">
+ *       <SelectItem value="robo">Robo</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ *
+ * @do Use `placeholder` on the trigger when there is no default value.
+ * @dont Use Select for more than ~12 options — switch to `Combobox`.
+ */

package/dist-lib/components/ui/Select.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import * as a from "@radix-ui/react-select";
+import { Check as S, ChevronDown as x, ChevronUp as v, ChevronsUpDown as N } from "../../icons/index.js";
+import { cn as c } from "../../lib/utils.js";
+import { useStrings as y } from "../../hooks/use-strings.js";
+const G = a.Root, L = a.Value, w = l(function({ className: r, placeholder: o, size: e = "md", tone: i = "default", ...n }, g) {
+  const b = y(), h = !!(n["aria-label"] || n["aria-labelledby"] || n.id);
+  return /* @__PURE__ */ d(
+    a.Trigger,
+    {
+      ref: g,
+      "aria-label": h ? void 0 : o ?? b.select.placeholder,
+      className: c(
+        "bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-lg md:text-sm",
+        "[&>span]:min-w-0 [&>span]:truncate",
+        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+        "outline-none",
+        "focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[placeholder]:text-foreground-subtle",
+        e === "sm" && "h-8 px-2.5",
+        e === "md" && "h-9 px-3",
+        e === "lg" && "h-10 px-3.5",
+        i === "default" ? "border-border-input focus-visible:border-accent focus-visible:ring-ring" : "border-danger focus-visible:border-danger focus-visible:ring-danger",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ t(a.Value, { placeholder: o }),
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(N, { className: "text-foreground-subtle size-4 shrink-0", "aria-hidden": !0 }) })
+      ]
+    }
+  );
+});
+w.displayName = "SelectTrigger";
+const u = "flex h-6 cursor-default items-center justify-center text-foreground-subtle", m = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(a.ScrollUpButton, { ref: e, className: c(u, r), ...o, children: /* @__PURE__ */ t(v, { className: "size-4", "aria-hidden": !0 }) });
+});
+m.displayName = "SelectScrollUpButton";
+const p = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(a.ScrollDownButton, { ref: e, className: c(u, r), ...o, children: /* @__PURE__ */ t(x, { className: "size-4", "aria-hidden": !0 }) });
+});
+p.displayName = "SelectScrollDownButton";
+const B = l(function({ className: r, children: o, position: e = "popper", ...i }, n) {
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ d(
+    a.Content,
+    {
+      ref: n,
+      position: e,
+      className: c(
+        "z-[var(--z-popover)] max-h-96 min-w-[var(--radix-select-trigger-width)]",
+        "border-border bg-popover text-popover-foreground overflow-hidden rounded-lg border",
+        "shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        e === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        r
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ t(m, {}),
+        /* @__PURE__ */ t(a.Viewport, { className: "p-1", children: o }),
+        /* @__PURE__ */ t(p, {})
+      ]
+    }
+  ) });
+});
+B.displayName = "SelectContent";
+const f = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(
+    a.Label,
+    {
+      ref: e,
+      className: c("text-foreground-subtle px-2 py-1.5 text-xs font-medium", r),
+      ...o
+    }
+  );
+});
+f.displayName = "SelectLabel";
+const C = l(
+  function({ className: r, children: o, leadingIcon: e, ...i }, n) {
+    return /* @__PURE__ */ d(
+      a.Item,
+      {
+        ref: n,
+        className: c(
+          "relative flex w-full cursor-default items-center gap-2 select-none",
+          "text-foreground rounded-sm px-2 py-1.5 pr-8 text-sm outline-none",
+          "data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          r
+        ),
+        ...i,
+        children: [
+          e && /* @__PURE__ */ t("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: e }),
+          /* @__PURE__ */ t(a.ItemText, { children: o }),
+          /* @__PURE__ */ t("span", { className: "absolute right-2 flex items-center justify-center", children: /* @__PURE__ */ t(a.ItemIndicator, { children: /* @__PURE__ */ t(S, { className: "text-accent size-4", "aria-hidden": !0 }) }) })
+        ]
+      }
+    );
+  }
+);
+C.displayName = "SelectItem";
+const z = l(function({ className: r, ...o }, e) {
+  return /* @__PURE__ */ t(
+    a.Separator,
+    {
+      ref: e,
+      className: c("bg-border -mx-1 my-1 h-px", r),
+      ...o
+    }
+  );
+});
+z.displayName = "SelectSeparator";
+const I = l(
+  function({ label: r, children: o, ...e }, i) {
+    return /* @__PURE__ */ d(a.Group, { ref: i, ...e, children: [
+      r && /* @__PURE__ */ t(f, { children: r }),
+      o
+    ] });
+  }
+);
+I.displayName = "SelectGroup";
+export {
+  G as Select,
+  B as SelectContent,
+  I as SelectGroup,
+  C as SelectItem,
+  f as SelectLabel,
+  p as SelectScrollDownButton,
+  m as SelectScrollUpButton,
+  z as SelectSeparator,
+  w as SelectTrigger,
+  L as SelectValue
+};
+//# sourceMappingURL=Select.js.map