@krizaka/ui 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/progress.js

@@ -0,0 +1,85 @@
+// src/progress/progress.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var progress = tv({
+  slots: {
+    root: "relative",
+    track: "",
+    indicator: "",
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+  },
+  variants: {
+    variant: {
+      bar: {
+        root: "w-full overflow-hidden rounded-full bg-surface-3",
+        indicator: "kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none data-[state=indeterminate]:w-2/5"
+      },
+      ring: {
+        root: "inline-flex shrink-0 items-center justify-center",
+        track: "stroke-border-default",
+        indicator: "stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none"
+      }
+    },
+    size: { sm: {}, md: {}, lg: {} }
+  },
+  compoundVariants: [
+    { variant: "bar", size: "sm", class: { root: "h-1" } },
+    { variant: "bar", size: "md", class: { root: "h-2" } },
+    { variant: "bar", size: "lg", class: { root: "h-3" } },
+    { variant: "ring", size: "sm", class: { root: "h-10 w-10" } },
+    { variant: "ring", size: "md", class: { root: "h-20 w-20" } },
+    { variant: "ring", size: "lg", class: { root: "h-36 w-36" } }
+  ],
+  defaultVariants: { variant: "bar", size: "md" }
+});
+var STROKE = { sm: 12, md: 9, lg: 7 };
+function Progress({ variant = "bar", size = "md", value, max = 100, label, valueText, className, children, ...props }) {
+  const s = progress({ variant, size });
+  const known = typeof value === "number" && Number.isFinite(value);
+  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
+  const percent = Math.round(ratio * 100);
+  const state = !known ? "indeterminate" : ratio >= 1 ? "complete" : "loading";
+  const aria = {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": known ? 0 : void 0,
+    "aria-valuemax": known ? max : void 0,
+    "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
+    "aria-valuetext": known ? valueText ?? `${percent}%` : valueText,
+    "data-state": state,
+    "data-value": known ? value : void 0,
+    "data-variant": variant
+  };
+  if (variant === "ring") {
+    const stroke = STROKE[size];
+    const r = 50 - stroke / 2;
+    return /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className }), ...props, children: [
+      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "50",
+            cy: "50",
+            r,
+            fill: "none",
+            strokeWidth: stroke,
+            strokeLinecap: "round",
+            pathLength: 100,
+            strokeDasharray: 100,
+            strokeDashoffset: known ? 100 - percent : 75,
+            "data-state": state,
+            className: s.indicator()
+          }
+        )
+      ] }),
+      children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ...aria, className: s.root({ className }), ...props, children: /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }) });
+}
+export {
+  Progress,
+  progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({ variant = \"bar\", size = \"md\", value, max = 100, label, valueText, className, children, ...props }: ProgressProps) {\n  const s = progress({ variant, size });\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": known ? (valueText ?? `${percent}%`) : valueText,\n    \"data-state\": state,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  return (\n    <div {...aria} className={s.root({ className })} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/radio-group.d.ts

@@ -0,0 +1,77 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { RadioGroup as RadioGroup$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const radioGroup: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            dot?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    item: string;
+    dot: string;
+    label: string;
+    card: string;
+}>>;
+type RadioGroupRootProps = React.ComponentProps<typeof RadioGroup$1.Root> & {
+    /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */
+    label?: string;
+    /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */
+    invalid?: boolean;
+};
+/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form. */
+declare function RadioGroupRoot({ label, invalid, className, ...props }: RadioGroupRootProps): React.JSX.Element;
+type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroup$1.Item>, "children"> & {
+    /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */
+    children?: React.ReactNode;
+};
+/** A radio: a dot, and its words when given. */
+declare function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps): React.JSX.Element;
+/** A whole card as the radio: its content is the radio's name. `data-state="checked"` styles the chosen one. */
+declare function RadioGroupCard({ className, ...props }: React.ComponentProps<typeof RadioGroup$1.Item>): React.JSX.Element;
+/** `RadioGroup.Root/Item/Card`. */
+declare const RadioGroup: {
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioGroupItem;
+    Card: typeof RadioGroupCard;
+};
+
+export { RadioGroup, RadioGroupCard, RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootProps, radioGroup };

package/dist/radio-group.js

@@ -0,0 +1,48 @@
+"use client";
+
+// src/radio-group/radio-group.tsx
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var radioGroup = tv({
+  slots: {
+    root: "grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap",
+    item: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent aria-invalid:border-danger",
+    dot: "h-2.5 w-2.5 rounded-full bg-accent",
+    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60",
+    card: "relative flex min-w-0 flex-col items-start gap-1 rounded-xl border border-border-default bg-surface-1 p-3 text-left text-sm text-fg transition-colors hover:border-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-sm"
+  }
+});
+var s = radioGroup();
+function RadioGroupRoot({ label, invalid, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "aria-label": label,
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid ? "" : void 0,
+      className: s.root({ className }),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({ className, children, ...props }) {
+  const item = /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, { className: s.item({ className: children ? "mt-0.5" : className }), ...props, children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: s.dot() }) });
+  if (!children) return item;
+  return /* @__PURE__ */ jsxs("label", { className: s.label({ className }), children: [
+    item,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+function RadioGroupCard({ className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, { className: s.card({ className }), ...props });
+}
+var RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard };
+export {
+  RadioGroup,
+  RadioGroupCard,
+  RadioGroupItem,
+  RadioGroupRoot,
+  radioGroup
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio-group/radio-group.tsx"],"sourcesContent":["// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Two looks: `RadioGroup.Item` (a dot and its words) and `RadioGroup.Card` (a whole card\n// is the radio: an amount, a pack, a payment method, a plan).\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent aria-invalid:border-danger\",\n    dot: \"h-2.5 w-2.5 rounded-full bg-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n    card:\n      \"relative flex min-w-0 flex-col items-start gap-1 rounded-xl border border-border-default bg-surface-1 p-3 text-left text-sm text-fg transition-colors \" +\n      \"hover:border-border-strong focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft \" +\n      \"data-[state=checked]:shadow-sm\",\n  },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form. */\nexport function RadioGroupRoot({ label, invalid, className, ...props }: RadioGroupRootProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name. `data-state=\"checked\"` styles the chosen one. */\nexport function RadioGroupCard({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.card({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard };\n"],"mappings":";;;AAGA,SAAS,cAAc,2BAA2B;AAElD,SAAS,UAAU;AA8Bf,cAwBA,YAxBA;AA5BG,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MACE;AAAA,EAIJ;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAUd,SAAS,eAAe,EAAE,OAAO,SAAS,WAAW,GAAG,MAAM,GAAwB;AAC3F,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,MAAM,GAAwB;AACrF,QAAM,OACJ,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC,GAAI,GAAG,OAC/F,8BAAC,oBAAoB,WAApB,EAA8B,WAAW,EAAE,IAAI,GAAG,GACrD;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;AAGO,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA0D;AAC7G,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChF;AAGO,IAAM,aAAa,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,eAAe;","names":[]}

package/dist/separator.d.ts

@@ -0,0 +1,24 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { Separator as Separator$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const separatorVariants: tailwind_variants.TVReturnType<{
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined, "shrink-0 bg-border-default", {
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    orientation: {
+        horizontal: "h-px w-full";
+        vertical: "h-full w-px self-stretch";
+    };
+}, undefined>>;
+type SeparatorProps = React.ComponentProps<typeof Separator$1.Root>;
+declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): React.JSX.Element;
+
+export { Separator, type SeparatorProps, separatorVariants };

package/dist/separator.js

@@ -0,0 +1,17 @@
+// src/separator/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var separatorVariants = tv({
+  base: "shrink-0 bg-border-default",
+  variants: { orientation: { horizontal: "h-px w-full", vertical: "h-full w-px self-stretch" } },
+  defaultVariants: { orientation: "horizontal" }
+});
+function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+  return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, { orientation, decorative, className: separatorVariants({ orientation, className }), ...props });
+}
+export {
+  Separator,
+  separatorVariants
+};
+//# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/separator/separator.tsx"],"sourcesContent":["// Server-safe. A line between groups: decorative by default (hidden from assistive technology), or a real\n// `role=\"separator\"` with `decorative={false}`.\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const separatorVariants = tv({\n  base: \"shrink-0 bg-border-default\",\n  variants: { orientation: { horizontal: \"h-px w-full\", vertical: \"h-full w-px self-stretch\" } },\n  defaultVariants: { orientation: \"horizontal\" },\n});\n\nexport type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root>;\n\nexport function Separator({ orientation = \"horizontal\", decorative = true, className, ...props }: SeparatorProps) {\n  return <SeparatorPrimitive.Root orientation={orientation} decorative={decorative} className={separatorVariants({ orientation, className })} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,aAAa,0BAA0B;AAEhD,SAAS,UAAU;AAWV;AATF,IAAM,oBAAoB,GAAG;AAAA,EAClC,MAAM;AAAA,EACN,UAAU,EAAE,aAAa,EAAE,YAAY,eAAe,UAAU,2BAA2B,EAAE;AAAA,EAC7F,iBAAiB,EAAE,aAAa,aAAa;AAC/C,CAAC;AAIM,SAAS,UAAU,EAAE,cAAc,cAAc,aAAa,MAAM,WAAW,GAAG,MAAM,GAAmB;AAChH,SAAO,oBAAC,mBAAmB,MAAnB,EAAwB,aAA0B,YAAwB,WAAW,kBAAkB,EAAE,aAAa,UAAU,CAAC,GAAI,GAAG,OAAO;AACzJ;","names":[]}

package/dist/slider.d.ts

@@ -0,0 +1,88 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { Slider as Slider$1 } from 'radix-ui';
+import * as React from 'react';
+
+declare const slider: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            value?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            value?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    value: string;
+    control: string;
+    track: string;
+    range: string;
+    thumb: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            value?: tailwind_variants.ClassValue;
+            control?: tailwind_variants.ClassValue;
+            track?: tailwind_variants.ClassValue;
+            range?: tailwind_variants.ClassValue;
+            thumb?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    value: string;
+    control: string;
+    track: string;
+    range: string;
+    thumb: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    value: string;
+    control: string;
+    track: string;
+    range: string;
+    thumb: string;
+}>>;
+type SliderValue = number | [number, number];
+type SliderProps<V extends SliderValue = number> = Omit<React.ComponentProps<typeof Slider$1.Root>, "value" | "defaultValue" | "onValueChange" | "onValueCommit" | "children"> & {
+    /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    /** Called once the drag or the key press ends. */
+    onValueCommit?: (value: V) => void;
+    /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */
+    label: string;
+    /** For a range: each thumb's own name (["Minimum", "Maximum"]), passed translated. */
+    thumbLabels?: [string, string];
+    /** The value as words (aria-valuetext) and as shown: "1.5×", "−12 %", "3 min". */
+    formatValue?: (value: number) => string;
+    /** Shows the label and the value above the track. Without it, `label` only names the thumb. */
+    showLabel?: boolean;
+    /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */
+    origin?: number;
+};
+/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */
+declare function Slider<V extends SliderValue = number>({ value, defaultValue, onValueChange, onValueCommit, label, thumbLabels, formatValue, showLabel, origin, min, max, className, ...props }: SliderProps<V>): React.JSX.Element;
+
+export { Slider, type SliderProps, type SliderValue, slider };

package/dist/slider.js

@@ -0,0 +1,82 @@
+"use client";
+
+// src/slider/slider.tsx
+import { Slider as SliderPrimitive } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slider = tv({
+  slots: {
+    root: "flex flex-col gap-2",
+    header: "flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary",
+    value: "font-mono text-[11px] tabular-nums text-fg-secondary",
+    control: "relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40",
+    track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3",
+    range: "absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2",
+    thumb: "block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing"
+  }
+});
+var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : v;
+function Slider({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  label,
+  thumbLabels,
+  formatValue = String,
+  showLabel,
+  origin,
+  min = 0,
+  max = 100,
+  className,
+  ...props
+}) {
+  const s = slider();
+  const range = Array.isArray(value ?? defaultValue);
+  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);
+  const current = toArray(value) ?? inner;
+  const out = (next) => range ? next : next[0];
+  const pct = (v) => (v - min) / (max - min || 1) * 100;
+  const fill = origin !== void 0 && !range ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { id: `${id}-label`, children: label }),
+      /* @__PURE__ */ jsx("span", { className: s.value(), "aria-hidden": true, children: current.map(formatValue).join(" \u2013 ") })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        min,
+        max,
+        value: current,
+        onValueChange: (next) => {
+          if (value === void 0) setInner(next);
+          onValueChange?.(out(next));
+        },
+        onValueCommit: onValueCommit && ((next) => onValueCommit(out(next))),
+        className: s.control(),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: s.track(), children: fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }) }),
+          current.map((v, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": range ? thumbLabels?.[i] ?? label : showLabel ? void 0 : label,
+              "aria-labelledby": !range && showLabel ? `${id}-label` : void 0,
+              "aria-valuetext": formatValue(v),
+              className: s.thumb()
+            },
+            i
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Slider,
+  slider
+};
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs. The words arrive as props: `label` names the thumb(s), `formatValue` gives the aria-valuetext and the value\n// shown next to a visible label.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40\",\n    track: \"relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3\",\n    range: \"absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2\",\n    thumb:\n      \"block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] \" +\n      \"focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing\",\n  },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  defaultValue?: V;\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */\n  origin?: number;\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  origin,\n  min = 0,\n  max = 100,\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider();\n  const range = Array.isArray(value ?? defaultValue);\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range\n      ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` }\n      : undefined;\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAAU;AAyEX,SACE,KADF;AAvED,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SACE;AAAA,IACF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OACE;AAAA,EAEJ;AACF,CAAC;AA0BD,IAAM,UAAU,CAAC,MAAgC,MAAM,SAAY,SAAY,OAAO,MAAM,WAAW,CAAC,CAAC,IAAI;AAGtG,SAAS,OAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,IAAI,OAAO;AACjB,QAAM,QAAQ,MAAM,QAAQ,SAAS,YAAY;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,MAAM,QAAQ,YAAY,KAAK,CAAC,GAAG,CAAC;AAC7E,QAAM,UAAU,QAAQ,KAAK,KAAK;AAClC,QAAM,MAAM,CAAC,SAAoB,QAAQ,OAAO,KAAK,CAAC;AACtD,QAAM,MAAM,CAAC,OAAgB,IAAI,QAAQ,MAAM,OAAO,KAAM;AAC5D,QAAM,OACJ,WAAW,UAAa,CAAC,QACrB,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,IAChH;AACN,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,cAAY,QAAQ,KAAK,QAC7D;AAAA,iBACC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,0BAAC,UAAK,IAAI,GAAG,EAAE,UAAW,iBAAM;AAAA,MAChC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAG,eAAW,MACpC,kBAAQ,IAAI,WAAW,EAAE,KAAK,UAAK,GACtC;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe,CAAC,SAAS;AACvB,cAAI,UAAU,OAAW,UAAS,IAAI;AACtC,0BAAgB,IAAI,IAAI,CAAC;AAAA,QAC3B;AAAA,QACA,eAAe,kBAAkB,CAAC,SAAS,cAAc,IAAI,IAAI,CAAC;AAAA,QAClE,WAAW,EAAE,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GACvC,iBAAO,oBAAC,UAAK,eAAY,IAAG,WAAW,EAAE,MAAM,GAAG,OAAO,MAAM,IAAK,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG,GACpH;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,MACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,QAAS,cAAc,CAAC,KAAK,QAAS,YAAY,SAAY;AAAA,cAC1E,mBAAiB,CAAC,SAAS,YAAY,GAAG,EAAE,WAAW;AAAA,cACvD,kBAAgB,YAAY,CAAC;AAAA,cAC7B,WAAW,EAAE,MAAM;AAAA;AAAA,YAJd;AAAA,UAKP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/stat.d.ts

@@ -0,0 +1,75 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const stat: tailwind_variants.TVReturnType<{
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}, undefined, {
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    trend: {
+        up: {
+            trend: string;
+        };
+        down: {
+            trend: string;
+        };
+        flat: {
+            trend: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    meta: string;
+    trend: string;
+    hint: string;
+}>>;
+type StatTrend = "up" | "down" | "flat";
+type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** A line under the value: the period, the comparison. */
+    hint?: React.ReactNode;
+    /** The direction of the change; its arrow is decorative. */
+    trend?: StatTrend;
+    /** The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. */
+    trendLabel?: React.ReactNode;
+};
+declare function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps): React.JSX.Element;
+
+export { Stat, type StatProps, type StatTrend, stat };

package/dist/stat.js

@@ -0,0 +1,42 @@
+// src/stat/stat.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stat = tv({
+  slots: {
+    root: "flex min-w-0 flex-col gap-1",
+    label: "text-xs font-semibold uppercase tracking-wider text-fg-secondary",
+    value: "font-display text-2xl font-black tabular-nums text-fg",
+    meta: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs",
+    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries
+    // the direction's colour.
+    trend: "inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0",
+    hint: "text-fg-secondary"
+  },
+  variants: {
+    trend: {
+      up: { trend: "[&>svg]:text-success" },
+      down: { trend: "[&>svg]:text-danger" },
+      flat: { trend: "[&>svg]:text-fg-secondary" }
+    }
+  }
+});
+var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
+function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
+  const s = stat({ trend });
+  return /* @__PURE__ */ jsxs("div", { "data-trend": trend, className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: s.label(), children: label }),
+    /* @__PURE__ */ jsx("p", { className: s.value(), children: value }),
+    (trendLabel || hint) && /* @__PURE__ */ jsxs("p", { className: s.meta(), children: [
+      trend && trendLabel && /* @__PURE__ */ jsxs("span", { className: s.trend(), children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: ARROW[trend] }) }),
+        trendLabel
+      ] }),
+      hint && /* @__PURE__ */ jsx("span", { className: s.hint(), children: hint })
+    ] })
+  ] });
+}
+export {
+  Stat,
+  stat
+};
+//# sourceMappingURL=stat.js.map

package/dist/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AAyCb,cAKM,YALN;AAvCC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAazH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,WAAW,GAAG,MAAM,GAAc;AAC9F,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,KAEJ;AAEJ;","names":[]}