@kanzo-tech/ui 0.10.0 → 0.11.0

package/dist/simples/field.js

@@ -1,11 +1,11 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
 import { ark as d } from "@ark-ui/react/factory";
 import { useFieldContext as m, Field as i } from "@ark-ui/react/field";
 import { Fieldset as n } from "@ark-ui/react/fieldset";
 import { tv as u } from "tailwind-variants";
 import { cn as r } from "../lib/cn.js";
 import { Separator as p } from "./separator.js";
-const k = m, g = u({
+const w = m, g = u({
   base: [
     "group/field",
     "w-full",
@@ -43,19 +43,19 @@ const k = m, g = u({
     reverse: !1
   }
 }), y = (a) => {
-  const { orientation: t = "vertical", reverse: e = !1, className: o, slot: s, ...c } = a;
-  return /* @__PURE__ */ l(
+  const { orientation: t = "vertical", reverse: e = !1, className: l, slot: s, ...c } = a;
+  return /* @__PURE__ */ o(
     i.Root,
     {
-      className: r(g({ orientation: t, reverse: e }), o),
+      className: r(g({ orientation: t, reverse: e }), l),
       "data-orientation": t,
       ...c,
       "data-slot": s ?? "field"
     }
   );
 }, S = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     n.Root,
     {
       className: r(
@@ -65,13 +65,13 @@ const k = m, g = u({
         "dark:data-invalid:text-destructive-foreground",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-set"
     }
   );
 }, T = (a) => {
-  const { variant: t = "legend", className: e, slot: o, ...s } = a;
-  return /* @__PURE__ */ l(
+  const { variant: t = "legend", className: e, slot: l, ...s } = a;
+  return /* @__PURE__ */ o(
     n.Legend,
     {
       className: r(
@@ -82,12 +82,12 @@ const k = m, g = u({
       ),
       "data-variant": t,
       ...s,
-      "data-slot": o ?? "field-legend"
+      "data-slot": l ?? "field-legend"
     }
   );
 }, E = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     d.div,
     {
       className: r(
@@ -97,13 +97,13 @@ const k = m, g = u({
         "*:data-[slot=field-group]:gap-4",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-group"
     }
   );
 }, H = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     d.div,
     {
       className: r(
@@ -112,13 +112,13 @@ const k = m, g = u({
         "leading-snug",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-content"
     }
   );
 }, L = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     i.Label,
     {
       className: r(
@@ -131,13 +131,13 @@ const k = m, g = u({
         "dark:has-data-[state=checked]:bg-primary/10",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-label"
     }
   );
 }, R = (a) => {
-  const { className: t, children: e, slot: o, ...s } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, children: e, slot: l, fallback: s, ...c } = a;
+  return /* @__PURE__ */ o(
     i.RequiredIndicator,
     {
       "aria-hidden": !0,
@@ -145,14 +145,22 @@ const k = m, g = u({
         "select-none text-destructive-foreground text-sm",
         t
       ),
-      ...s,
-      "data-slot": o ?? "field-required-indicator",
+      fallback: s == null ? null : /* @__PURE__ */ o(
+        "span",
+        {
+          className: "select-none font-normal text-muted-foreground text-sm",
+          "data-slot": "field-optional-indicator",
+          children: s
+        }
+      ),
+      ...c,
+      "data-slot": l ?? "field-required-indicator",
       children: e ?? "*"
     }
   );
 }, q = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     d.div,
     {
       className: r(
@@ -162,13 +170,13 @@ const k = m, g = u({
         "group-data-[disabled=true]/field:opacity-64",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-title"
     }
   );
 }, z = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     d.p,
     {
       className: r(
@@ -181,12 +189,12 @@ const k = m, g = u({
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-description"
     }
   );
 }, j = (a) => {
-  const { className: t, children: e, slot: o, ...s } = a;
+  const { className: t, children: e, slot: l, ...s } = a;
   return /* @__PURE__ */ f(
     d.div,
     {
@@ -199,10 +207,10 @@ const k = m, g = u({
       ),
       "data-content": !!e,
       ...s,
-      "data-slot": o ?? "field-separator",
+      "data-slot": l ?? "field-separator",
       children: [
-        /* @__PURE__ */ l(p, { className: "absolute inset-0 top-1/2" }),
-        !!e && /* @__PURE__ */ l(
+        /* @__PURE__ */ o(p, { className: "absolute inset-0 top-1/2" }),
+        !!e && /* @__PURE__ */ o(
           "span",
           {
             className: r(
@@ -219,48 +227,48 @@ const k = m, g = u({
     }
   );
 }, C = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     i.HelperText,
     {
       className: r("text-muted-foreground text-sm", t),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-helper"
     }
   );
 }, I = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     i.ErrorText,
     {
       className: r(
         "font-normal text-destructive-foreground text-sm",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-error"
     }
   );
 }, V = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     n.HelperText,
     {
       className: r("text-muted-foreground text-sm", t),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-set-helper"
     }
   );
 }, D = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: t, slot: e, ...l } = a;
+  return /* @__PURE__ */ o(
     n.ErrorText,
     {
       className: r(
         "font-normal text-destructive-foreground text-sm",
         t
       ),
-      ...o,
+      ...l,
       "data-slot": e ?? "field-set-error"
     }
   );
@@ -280,6 +288,6 @@ export {
   D as FieldSetError,
   V as FieldSetHelper,
   q as FieldTitle,
-  k as useField
+  w as useField
 };
 //# sourceMappingURL=field.js.map

package/dist/simples/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../src/simples/field.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Field as ArkField,\n  useFieldContext as useArkFieldContext,\n} from \"@ark-ui/react/field\";\nimport { Fieldset as ArkFieldset } from \"@ark-ui/react/fieldset\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Separator } from \"./separator\";\n\nexport const useField = useArkFieldContext;\n\nconst fieldVariants = tv({\n  base: [\n    \"group/field\",\n    \"w-full\",\n    \"flex gap-2\",\n    \"data-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n  ],\n  variants: {\n    orientation: {\n      vertical: [\"flex-col *:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"*:data-[slot=field-label]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        \"@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto\",\n        \"@md/field-group:*:data-[slot=field-label]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n    reverse: {\n      true: [\n        \"data-[orientation=horizontal]:flex-row-reverse\",\n        \"data-[orientation=vertical]:flex-col-reverse\",\n        \"data-[orientation=responsive]:flex-col-reverse\",\n        \"data-[orientation=responsive]:@md/field-group:flex-row-reverse\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    reverse: false,\n  },\n});\n\ninterface FieldProps\n  extends React.ComponentProps<typeof ArkField.Root>,\n    VariantProps<typeof fieldVariants> {}\n\nexport const Field = (props: FieldProps) => {\n  const { orientation = \"vertical\", reverse = false, className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Root\n      className={cn(fieldVariants({ orientation, reverse }), className)}\n      data-orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"field\"}\n    />\n  );\n};\n\nexport const FieldSet = (\n  props: React.ComponentProps<typeof ArkFieldset.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Root\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        \"data-invalid:text-destructive-foreground\",\n        \"dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set\"}\n    />\n  );\n};\n\ninterface FieldLegendProps\n  extends React.ComponentProps<typeof ArkFieldset.Legend> {\n  /**\n   * The variant of the legend.\n   */\n  variant?: \"legend\" | \"label\";\n}\n\nexport const FieldLegend = (props: FieldLegendProps) => {\n  const { variant = \"legend\", className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Legend\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      data-variant={variant}\n      {...rest}\n      data-slot={slot ?? \"field-legend\"}\n    />\n  );\n};\n\nexport const FieldGroup = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-group @container/field-group\",\n        \"flex w-full flex-col gap-4\",\n        \"data-[data-slot=checkbox-group]:gap-3\",\n        \"*:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-group\"}\n    />\n  );\n};\n\nexport const FieldContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-content\",\n        \"flex flex-1 flex-col gap-1.5\",\n        \"leading-snug\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-content\"}\n    />\n  );\n};\n\nexport const FieldLabel = (\n  props: React.ComponentProps<typeof ArkField.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Label\n      className={cn(\n        \"group/field-label peer/field-label\",\n        \"select-none font-medium text-sm leading-snug\",\n        \"flex w-fit gap-1\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        \"group-data-disabled/field:opacity-64\",\n        \"dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-label\"}\n    />\n  );\n};\n\nexport const FieldRequiredIndicator = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkField.RequiredIndicator\n      aria-hidden\n      className={cn(\n        \"select-none text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-required-indicator\"}\n    >\n      {children ?? \"*\"}\n    </ArkField.RequiredIndicator>\n  );\n};\n\nexport const FieldTitle = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"w-fit\",\n        \"flex items-center gap-2\",\n        \"font-medium text-sm leading-snug\",\n        \"group-data-[disabled=true]/field:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-title\"}\n    />\n  );\n};\n\nexport const FieldDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\n        \"pointer-events-none\",\n        \"font-normal text-muted-foreground text-sm leading-normal\",\n        \"group-has-data-[orientation=horizontal]/field:text-balance\",\n        \"@md/field-group:group-data-[orientation=responsive]/field:text-balance\",\n        \"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5\",\n        \"in-[[data-slot=field]:has([data-slot=radio-group-item])]:ms-6 in-[[data-slot=field]:has([data-slot=radio-group-item])]:-mt-1.5!\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-description\"}\n    />\n  );\n};\n\nexport const FieldSeparator = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative\",\n        \"h-5\",\n        \"-my-2 group-data-[variant=outline]/field-group:-mb-2\",\n        \"text-sm\",\n        className\n      )}\n      data-content={!!children}\n      {...rest}\n      data-slot={slot ?? \"field-separator\"}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n\n      {!!children && (\n        <span\n          className={cn(\n            \"relative block\",\n            \"w-fit\",\n            \"mx-auto px-2\",\n            \"bg-background\",\n            \"text-muted-foreground text-sm\"\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </ark.div>\n  );\n};\n\nexport const FieldHelper = (\n  props: React.ComponentProps<typeof ArkField.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-helper\"}\n    />\n  );\n};\n\nexport const FieldError = (\n  props: React.ComponentProps<typeof ArkField.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-error\"}\n    />\n  );\n};\n\n// The two below look like copies of the two above and are not: these are the fieldset machine's\n// message parts, describing the whole `FieldSet`, while `FieldHelper` / `FieldError` come from the\n// field machine and describe one control. Same typography, different scope — and a `FieldSet` needs\n// its own, because a group-level message wired to a single field is announced on the wrong control.\n\nexport const FieldSetHelper = (\n  props: React.ComponentProps<typeof ArkFieldset.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-set-helper\"}\n    />\n  );\n};\n\nexport const FieldSetError = (\n  props: React.ComponentProps<typeof ArkFieldset.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set-error\"}\n    />\n  );\n};\n"],"names":["useField","useArkFieldContext","fieldVariants","tv","Field","props","orientation","reverse","className","slot","rest","jsx","ArkField","cn","FieldSet","ArkFieldset","FieldLegend","variant","FieldGroup","ark","FieldContent","FieldLabel","FieldRequiredIndicator","children","FieldTitle","FieldDescription","FieldSeparator","jsxs","Separator","FieldHelper","FieldError","FieldSetHelper","FieldSetError"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../src/simples/field.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Field as ArkField,\n  useFieldContext as useArkFieldContext,\n} from \"@ark-ui/react/field\";\nimport { Fieldset as ArkFieldset } from \"@ark-ui/react/fieldset\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Separator } from \"./separator\";\n\nexport const useField = useArkFieldContext;\n\nconst fieldVariants = tv({\n  base: [\n    \"group/field\",\n    \"w-full\",\n    \"flex gap-2\",\n    \"data-invalid:text-destructive-foreground\",\n    \"dark:data-invalid:text-destructive-foreground\",\n  ],\n  variants: {\n    orientation: {\n      vertical: [\"flex-col *:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"*:data-[slot=field-label]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        \"@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto\",\n        \"@md/field-group:*:data-[slot=field-label]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n    reverse: {\n      true: [\n        \"data-[orientation=horizontal]:flex-row-reverse\",\n        \"data-[orientation=vertical]:flex-col-reverse\",\n        \"data-[orientation=responsive]:flex-col-reverse\",\n        \"data-[orientation=responsive]:@md/field-group:flex-row-reverse\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    reverse: false,\n  },\n});\n\ninterface FieldProps\n  extends React.ComponentProps<typeof ArkField.Root>,\n    VariantProps<typeof fieldVariants> {}\n\nexport const Field = (props: FieldProps) => {\n  const { orientation = \"vertical\", reverse = false, className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Root\n      className={cn(fieldVariants({ orientation, reverse }), className)}\n      data-orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"field\"}\n    />\n  );\n};\n\nexport const FieldSet = (\n  props: React.ComponentProps<typeof ArkFieldset.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Root\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        \"data-invalid:text-destructive-foreground\",\n        \"dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set\"}\n    />\n  );\n};\n\ninterface FieldLegendProps\n  extends React.ComponentProps<typeof ArkFieldset.Legend> {\n  /**\n   * The variant of the legend.\n   */\n  variant?: \"legend\" | \"label\";\n}\n\nexport const FieldLegend = (props: FieldLegendProps) => {\n  const { variant = \"legend\", className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.Legend\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      data-variant={variant}\n      {...rest}\n      data-slot={slot ?? \"field-legend\"}\n    />\n  );\n};\n\nexport const FieldGroup = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-group @container/field-group\",\n        \"flex w-full flex-col gap-4\",\n        \"data-[data-slot=checkbox-group]:gap-3\",\n        \"*:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-group\"}\n    />\n  );\n};\n\nexport const FieldContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"group/field-content\",\n        \"flex flex-1 flex-col gap-1.5\",\n        \"leading-snug\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-content\"}\n    />\n  );\n};\n\nexport const FieldLabel = (\n  props: React.ComponentProps<typeof ArkField.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Label\n      className={cn(\n        \"group/field-label peer/field-label\",\n        \"select-none font-medium text-sm leading-snug\",\n        \"flex w-fit gap-1\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5\",\n        \"group-data-disabled/field:opacity-64\",\n        \"dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-label\"}\n    />\n  );\n};\n\n/**\n * The `*` of a required field and, through Ark's `fallback`, what an optional one says instead —\n * one part, so a form marks one of the two and never both. The asterisk is hidden from assistive\n * tech because the control's `required` already announces it; the fallback is not, because nothing\n * else says a field is optional. Its text is the host's: this library ships no product copy.\n */\nexport const FieldRequiredIndicator = (\n  props: React.ComponentProps<typeof ArkField.RequiredIndicator>\n) => {\n  const { className, children, slot, fallback, ...rest } = props;\n\n  return (\n    <ArkField.RequiredIndicator\n      aria-hidden\n      className={cn(\n        \"select-none text-destructive-foreground text-sm\",\n        className\n      )}\n      fallback={\n        fallback == null ? null : (\n          <span\n            className=\"select-none font-normal text-muted-foreground text-sm\"\n            data-slot=\"field-optional-indicator\"\n          >\n            {fallback}\n          </span>\n        )\n      }\n      {...rest}\n      data-slot={slot ?? \"field-required-indicator\"}\n    >\n      {children ?? \"*\"}\n    </ArkField.RequiredIndicator>\n  );\n};\n\nexport const FieldTitle = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"w-fit\",\n        \"flex items-center gap-2\",\n        \"font-medium text-sm leading-snug\",\n        \"group-data-[disabled=true]/field:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-title\"}\n    />\n  );\n};\n\nexport const FieldDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\n        \"pointer-events-none\",\n        \"font-normal text-muted-foreground text-sm leading-normal\",\n        \"group-has-data-[orientation=horizontal]/field:text-balance\",\n        \"@md/field-group:group-data-[orientation=responsive]/field:text-balance\",\n        \"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5\",\n        \"in-[[data-slot=field]:has([data-slot=radio-group-item])]:ms-6 in-[[data-slot=field]:has([data-slot=radio-group-item])]:-mt-1.5!\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-description\"}\n    />\n  );\n};\n\nexport const FieldSeparator = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"relative\",\n        \"h-5\",\n        \"-my-2 group-data-[variant=outline]/field-group:-mb-2\",\n        \"text-sm\",\n        className\n      )}\n      data-content={!!children}\n      {...rest}\n      data-slot={slot ?? \"field-separator\"}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n\n      {!!children && (\n        <span\n          className={cn(\n            \"relative block\",\n            \"w-fit\",\n            \"mx-auto px-2\",\n            \"bg-background\",\n            \"text-muted-foreground text-sm\"\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </ark.div>\n  );\n};\n\nexport const FieldHelper = (\n  props: React.ComponentProps<typeof ArkField.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-helper\"}\n    />\n  );\n};\n\nexport const FieldError = (\n  props: React.ComponentProps<typeof ArkField.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-error\"}\n    />\n  );\n};\n\n// The two below look like copies of the two above and are not: these are the fieldset machine's\n// message parts, describing the whole `FieldSet`, while `FieldHelper` / `FieldError` come from the\n// field machine and describe one control. Same typography, different scope — and a `FieldSet` needs\n// its own, because a group-level message wired to a single field is announced on the wrong control.\n\nexport const FieldSetHelper = (\n  props: React.ComponentProps<typeof ArkFieldset.HelperText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.HelperText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"field-set-helper\"}\n    />\n  );\n};\n\nexport const FieldSetError = (\n  props: React.ComponentProps<typeof ArkFieldset.ErrorText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkFieldset.ErrorText\n      className={cn(\n        \"font-normal text-destructive-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"field-set-error\"}\n    />\n  );\n};\n"],"names":["useField","useArkFieldContext","fieldVariants","tv","Field","props","orientation","reverse","className","slot","rest","jsx","ArkField","cn","FieldSet","ArkFieldset","FieldLegend","variant","FieldGroup","ark","FieldContent","FieldLabel","FieldRequiredIndicator","children","fallback","FieldTitle","FieldDescription","FieldSeparator","jsxs","Separator","FieldHelper","FieldError","FieldSetHelper","FieldSetError"],"mappings":"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"}

package/dist/simples/floating-panel.js

@@ -43,7 +43,7 @@ function D({
         "flex overflow-hidden",
         // `Popover`'s surface, at `Popover`'s radius and its shadow token. This was `rounded-lg`
         // and a flat `shadow-lg` — a step below every panel here and a different lift from the one
-        // the floating surfaces share. Same cause as `StatTile`: no Shark file, so no guard, and
+        // the floating surfaces share. No Shark file, so no guard, and
         // `shark-parity.test.ts` reads names rather than classes.
         //
         // The `/95` and the blur stay: this panel floats over content a reader is still looking at,

package/dist/simples/floating-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-panel.js","sources":["../../src/simples/floating-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * FloatingPanel — a glass surface meant to float over other content (a canvas, a map, a graph),\n * with an optional drag-to-resize edge. It owns the surface (elevated `--popover` tint, blur,\n * border, shadow, rounded) and the resize behaviour; the CALLER owns where it floats (position it\n * with `className`, e.g. `absolute inset-y-2 end-2`) and what it holds.\n *\n *   <div className=\"relative\">\n *     <Canvas />\n *     <FloatingPanel className=\"absolute inset-y-2 end-2\" defaultWidth={360}>\n *       <FloatingPanelResizeHandle side=\"start\" />\n *       <div className=\"min-w-0 flex-1\">…</div>\n *     </FloatingPanel>\n *   </div>\n *\n * Width is controllable (`width` + `onWidthChange`) or uncontrolled (`defaultWidth`), clamped to\n * `minWidth`/`maxWidth`. Drop a {@link FloatingPanelResizeHandle} inside to expose a drag edge;\n * omit it for a fixed-width panel.\n */\n\ninterface FloatingPanelContextValue {\n  startResize: (event: React.PointerEvent, direction: 1 | -1) => void;\n}\n\nconst FloatingPanelContext = React.createContext<FloatingPanelContextValue | null>(null);\n\nexport interface FloatingPanelProps extends React.ComponentProps<\"div\"> {\n  /** Controlled width in px. Omit to run uncontrolled from `defaultWidth`. */\n  width?: number;\n  /** Initial width when uncontrolled. @default 320 */\n  defaultWidth?: number;\n  /** Called with the clamped width on every resize step. */\n  onWidthChange?: (width: number) => void;\n  /** @default 240 */\n  minWidth?: number;\n  /** @default 640 */\n  maxWidth?: number;\n}\n\nexport function FloatingPanel({\n  width: controlledWidth,\n  defaultWidth = 320,\n  onWidthChange,\n  minWidth = 240,\n  maxWidth = 640,\n  className,\n  style,\n  children,\n  slot,\n  ...rest\n}: FloatingPanelProps) {\n  const [uncontrolledWidth, setUncontrolledWidth] = React.useState(defaultWidth);\n  const width = controlledWidth ?? uncontrolledWidth;\n\n  // The latest width, read inside the long-lived pointer handlers without re-binding them.\n  const widthRef = React.useRef(width);\n  widthRef.current = width;\n\n  const setWidth = React.useCallback(\n    (next: number) => {\n      const clamped = Math.max(minWidth, Math.min(maxWidth, next));\n      if (controlledWidth == null) setUncontrolledWidth(clamped);\n      onWidthChange?.(clamped);\n    },\n    [controlledWidth, minWidth, maxWidth, onWidthChange],\n  );\n\n  const dragRef = React.useRef<{ startX: number; startWidth: number; direction: 1 | -1 } | null>(null);\n\n  const startResize = React.useCallback(\n    (event: React.PointerEvent, direction: 1 | -1) => {\n      event.preventDefault();\n      dragRef.current = { startX: event.clientX, startWidth: widthRef.current, direction };\n      const onMove = (moveEvent: PointerEvent) => {\n        const drag = dragRef.current;\n        if (!drag) return;\n        // A start-edge handle grows the panel as the pointer moves left (direction -1); an\n        // end-edge handle grows it moving right (direction 1).\n        setWidth(drag.startWidth + (moveEvent.clientX - drag.startX) * drag.direction);\n      };\n      const onUp = () => {\n        dragRef.current = null;\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n    },\n    [setWidth],\n  );\n\n  const context = React.useMemo<FloatingPanelContextValue>(() => ({ startResize }), [startResize]);\n\n  return (\n    <div\n      className={cn(\n        \"flex overflow-hidden\",\n        // `Popover`'s surface, at `Popover`'s radius and its shadow token. This was `rounded-lg`\n        // and a flat `shadow-lg` — a step below every panel here and a different lift from the one\n        // the floating surfaces share. Same cause as `StatTile`: no Shark file, so no guard, and\n        // `shark-parity.test.ts` reads names rather than classes.\n        //\n        // The `/95` and the blur stay: this panel floats over content a reader is still looking at,\n        // which a popover does not. It is the one place the translucency is the point.\n        \"rounded-xl border bg-popover/95 text-popover-foreground shadow-lg/5 backdrop-blur-sm\",\n        className,\n      )}\n      style={{ width, ...style }}\n      {...rest}\n      data-slot={slot ?? \"floating-panel\"}\n    >\n      <FloatingPanelContext.Provider value={context}>{children}</FloatingPanelContext.Provider>\n    </div>\n  );\n}\n\nexport interface FloatingPanelResizeHandleProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Which edge the handle sits on. `\"start\"` (the default) puts it at the leading edge and\n   * renders first; `\"end\"` puts it at the trailing edge and renders last. It only affects the\n   * drag direction and flex order — position the panel itself with the parent's `className`.\n   * @default \"start\"\n   */\n  side?: \"start\" | \"end\";\n}\n\nexport function FloatingPanelResizeHandle({\n  side = \"start\",\n  className,\n  slot,\n  ...rest\n}: FloatingPanelResizeHandleProps) {\n  const context = React.useContext(FloatingPanelContext);\n\n  return (\n    <div\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"w-1.5 shrink-0 cursor-col-resize touch-none transition-colors\",\n        // The handle's backdrop is not unknown — it is the panel it lives in, `bg-popover`. So the\n        // ladder can be named: rest is the panel surface, hover is step 4 and active is step 5.\n        // Measured over popover, rest→hover is ΔE 6.02 in light and 3.95 in dark and hover→active\n        // 3.96 and 4.61; the dilution gave 5.11/4.38 and 4.87/4.18 for the same two moves, so this\n        // is not a visibility fix — it is the same three steps written with their names.\n        \"hover:bg-secondary active:bg-accent\",\n        side === \"end\" && \"order-last\",\n        className,\n      )}\n      data-side={side}\n      onPointerDown={(event) => context?.startResize(event, side === \"start\" ? -1 : 1)}\n      role=\"separator\"\n      {...rest}\n      data-slot={slot ?? \"floating-panel-resize-handle\"}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AA4BA;AAeO;AAAuB;AACrB;AACQ;AACf;AACW;AACA;AACX;AACA;AACA;AACA;AAEF;AACE;AAKA;AAEA;AAAuB;AAEnB;AACA;AACgB;AAClB;AACmD;AAK3B;AAEtB;AAEA;AACE;AACA;AAG6E;AAG7E;AAE8C;AAEhD;AAC2C;AAC7C;AACS;AAKX;AACE;AAAC;AAAA;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAAA;AAEiB;AACf;AACe;AAEsC;AAAA;AAG/D;AAYO;AAAmC;AACjC;AACP;AACA;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACkB;AACN;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACkB;AAClB;AAAA;AAES;AACmE;AACzE;AACD;AACe;AAAA;AAGzB;;;;;"}
+{"version":3,"file":"floating-panel.js","sources":["../../src/simples/floating-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * FloatingPanel — a glass surface meant to float over other content (a canvas, a map, a graph),\n * with an optional drag-to-resize edge. It owns the surface (elevated `--popover` tint, blur,\n * border, shadow, rounded) and the resize behaviour; the CALLER owns where it floats (position it\n * with `className`, e.g. `absolute inset-y-2 end-2`) and what it holds.\n *\n *   <div className=\"relative\">\n *     <Canvas />\n *     <FloatingPanel className=\"absolute inset-y-2 end-2\" defaultWidth={360}>\n *       <FloatingPanelResizeHandle side=\"start\" />\n *       <div className=\"min-w-0 flex-1\">…</div>\n *     </FloatingPanel>\n *   </div>\n *\n * Width is controllable (`width` + `onWidthChange`) or uncontrolled (`defaultWidth`), clamped to\n * `minWidth`/`maxWidth`. Drop a {@link FloatingPanelResizeHandle} inside to expose a drag edge;\n * omit it for a fixed-width panel.\n */\n\ninterface FloatingPanelContextValue {\n  startResize: (event: React.PointerEvent, direction: 1 | -1) => void;\n}\n\nconst FloatingPanelContext = React.createContext<FloatingPanelContextValue | null>(null);\n\nexport interface FloatingPanelProps extends React.ComponentProps<\"div\"> {\n  /** Controlled width in px. Omit to run uncontrolled from `defaultWidth`. */\n  width?: number;\n  /** Initial width when uncontrolled. @default 320 */\n  defaultWidth?: number;\n  /** Called with the clamped width on every resize step. */\n  onWidthChange?: (width: number) => void;\n  /** @default 240 */\n  minWidth?: number;\n  /** @default 640 */\n  maxWidth?: number;\n}\n\nexport function FloatingPanel({\n  width: controlledWidth,\n  defaultWidth = 320,\n  onWidthChange,\n  minWidth = 240,\n  maxWidth = 640,\n  className,\n  style,\n  children,\n  slot,\n  ...rest\n}: FloatingPanelProps) {\n  const [uncontrolledWidth, setUncontrolledWidth] = React.useState(defaultWidth);\n  const width = controlledWidth ?? uncontrolledWidth;\n\n  // The latest width, read inside the long-lived pointer handlers without re-binding them.\n  const widthRef = React.useRef(width);\n  widthRef.current = width;\n\n  const setWidth = React.useCallback(\n    (next: number) => {\n      const clamped = Math.max(minWidth, Math.min(maxWidth, next));\n      if (controlledWidth == null) setUncontrolledWidth(clamped);\n      onWidthChange?.(clamped);\n    },\n    [controlledWidth, minWidth, maxWidth, onWidthChange],\n  );\n\n  const dragRef = React.useRef<{ startX: number; startWidth: number; direction: 1 | -1 } | null>(null);\n\n  const startResize = React.useCallback(\n    (event: React.PointerEvent, direction: 1 | -1) => {\n      event.preventDefault();\n      dragRef.current = { startX: event.clientX, startWidth: widthRef.current, direction };\n      const onMove = (moveEvent: PointerEvent) => {\n        const drag = dragRef.current;\n        if (!drag) return;\n        // A start-edge handle grows the panel as the pointer moves left (direction -1); an\n        // end-edge handle grows it moving right (direction 1).\n        setWidth(drag.startWidth + (moveEvent.clientX - drag.startX) * drag.direction);\n      };\n      const onUp = () => {\n        dragRef.current = null;\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n    },\n    [setWidth],\n  );\n\n  const context = React.useMemo<FloatingPanelContextValue>(() => ({ startResize }), [startResize]);\n\n  return (\n    <div\n      className={cn(\n        \"flex overflow-hidden\",\n        // `Popover`'s surface, at `Popover`'s radius and its shadow token. This was `rounded-lg`\n        // and a flat `shadow-lg` — a step below every panel here and a different lift from the one\n        // the floating surfaces share. No Shark file, so no guard, and\n        // `shark-parity.test.ts` reads names rather than classes.\n        //\n        // The `/95` and the blur stay: this panel floats over content a reader is still looking at,\n        // which a popover does not. It is the one place the translucency is the point.\n        \"rounded-xl border bg-popover/95 text-popover-foreground shadow-lg/5 backdrop-blur-sm\",\n        className,\n      )}\n      style={{ width, ...style }}\n      {...rest}\n      data-slot={slot ?? \"floating-panel\"}\n    >\n      <FloatingPanelContext.Provider value={context}>{children}</FloatingPanelContext.Provider>\n    </div>\n  );\n}\n\nexport interface FloatingPanelResizeHandleProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Which edge the handle sits on. `\"start\"` (the default) puts it at the leading edge and\n   * renders first; `\"end\"` puts it at the trailing edge and renders last. It only affects the\n   * drag direction and flex order — position the panel itself with the parent's `className`.\n   * @default \"start\"\n   */\n  side?: \"start\" | \"end\";\n}\n\nexport function FloatingPanelResizeHandle({\n  side = \"start\",\n  className,\n  slot,\n  ...rest\n}: FloatingPanelResizeHandleProps) {\n  const context = React.useContext(FloatingPanelContext);\n\n  return (\n    <div\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"w-1.5 shrink-0 cursor-col-resize touch-none transition-colors\",\n        // The handle's backdrop is not unknown — it is the panel it lives in, `bg-popover`. So the\n        // ladder can be named: rest is the panel surface, hover is step 4 and active is step 5.\n        // Measured over popover, rest→hover is ΔE 6.02 in light and 3.95 in dark and hover→active\n        // 3.96 and 4.61; the dilution gave 5.11/4.38 and 4.87/4.18 for the same two moves, so this\n        // is not a visibility fix — it is the same three steps written with their names.\n        \"hover:bg-secondary active:bg-accent\",\n        side === \"end\" && \"order-last\",\n        className,\n      )}\n      data-side={side}\n      onPointerDown={(event) => context?.startResize(event, side === \"start\" ? -1 : 1)}\n      role=\"separator\"\n      {...rest}\n      data-slot={slot ?? \"floating-panel-resize-handle\"}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AA4BA;AAeO;AAAuB;AACrB;AACQ;AACf;AACW;AACA;AACX;AACA;AACA;AACA;AAEF;AACE;AAKA;AAEA;AAAuB;AAEnB;AACA;AACgB;AAClB;AACmD;AAK3B;AAEtB;AAEA;AACE;AACA;AAG6E;AAG7E;AAE8C;AAEhD;AAC2C;AAC7C;AACS;AAKX;AACE;AAAC;AAAA;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAAA;AAEiB;AACf;AACe;AAEsC;AAAA;AAG/D;AAYO;AAAmC;AACjC;AACP;AACA;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACkB;AACN;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACkB;AAClB;AAAA;AAES;AACmE;AACzE;AACD;AACe;AAAA;AAGzB;;;;;"}

package/dist/simples/stat.d.ts

@@ -0,0 +1,45 @@
+import { ark } from '@ark-ui/react/factory';
+import { Card } from './card';
+export interface StatRootProps extends React.ComponentProps<typeof Card> {
+    /** The status family, written to `data-variant` and read by `StatIndicator`. */
+    variant?: "default" | "success" | "info" | "warning" | "destructive";
+}
+/**
+ * One dashboard number. A `Card`, so `asChild` makes the anchor *be* the tile — one tab stop, and
+ * the router seam. The link styles key on the element (`[a&]`, as `Badge` does) rather than on a
+ * prop, so they cannot disagree with what was rendered.
+ */
+export declare const StatRoot: (props: StatRootProps) => import("react").JSX.Element;
+export declare const StatIndicator: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+/** Sentence case, no trailing colon. */
+export declare const StatLabel: (props: React.ComponentProps<typeof ark.span>) => import("react").JSX.Element;
+export interface StatValueProps extends React.ComponentProps<typeof ark.div> {
+    /** Swaps the figure for a skeleton of its size, so the tile does not jump when it lands. */
+    loading?: boolean;
+}
+/**
+ * The figure, as the host formats it — `FormatNumber` with `notation="compact"` is the dashboard
+ * reading. Proportional figures on purpose: a lone headline number is not a column to align.
+ */
+export declare const StatValue: (props: StatValueProps) => import("react").JSX.Element;
+export interface StatDeltaProps extends React.ComponentProps<typeof ark.div> {
+    /** Signed change. Its sign draws the direction icon; with `goodWhenUp`, it picks the colour. */
+    value: number;
+    /**
+     * Against the magnitude, before the comparison — `"%"`, `"pp"`, `"ms"`. "+8.2 vs last week" is a
+     * different claim from "+8.2% vs last week".
+     */
+    unit?: string;
+    /** Whether a rise is good. Two more failed runs and two more members are both `+2`. @default true */
+    goodWhenUp?: boolean;
+}
+/** The comparison period is the children: `<StatDelta value={4.2} unit="%">vs last month</StatDelta>`. */
+export declare const StatDelta: (props: StatDeltaProps) => import("react").JSX.Element;
+export interface StatTrendProps extends Omit<React.ComponentProps<typeof ark.svg>, "values"> {
+    /** About a dozen points, oldest first. Fewer than two draws nothing. */
+    values: readonly number[];
+}
+/** A sparkline with its last value marked — unlabelled, because a reader who needs the values needs a chart. */
+export declare const StatTrend: (props: StatTrendProps) => import("react").JSX.Element | null;
+export declare const StatDescription: (props: React.ComponentProps<typeof ark.p>) => import("react").JSX.Element;
+//# sourceMappingURL=stat.d.ts.map

package/dist/simples/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/simples/stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAK5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACtE,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;CACtE;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAkB5C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAoBxE,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,gCAarE,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IAC1E,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAgB9C,CAAC;AAcF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IAC1E,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,0GAA0G;AAC1G,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAsB9C,CAAC;AAGF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC;IAC1F,wEAAwE;IACxE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED,gHAAgH;AAChH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,uCAqC9C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,gCAUxE,CAAC"}

package/dist/simples/stat.js

@@ -0,0 +1,155 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { ark as d } from "@ark-ui/react/factory";
+import { FormatNumber as w } from "@ark-ui/react/format";
+import { MinusIcon as k, TrendingDownIcon as S, TrendingUpIcon as y } from "lucide-react";
+import { tv as D } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { Card as I } from "./card.js";
+import { Skeleton as _ } from "./skeleton.js";
+const V = (a) => {
+  const { variant: t = "default", className: s, slot: e, ...n } = a;
+  return /* @__PURE__ */ o(
+    I,
+    {
+      className: i(
+        "group/stat [--space:--spacing(4)] px-(--space)",
+        // Indicator and label share the first row; the value and the trend share the second.
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-0 gap-y-1",
+        "outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring",
+        "[a&]:hover:border-primary/40",
+        s
+      ),
+      "data-variant": t,
+      ...n,
+      slot: e ?? "stat-root"
+    }
+  );
+}, W = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.div,
+    {
+      "aria-hidden": !0,
+      className: i(
+        "col-start-1 me-2 shrink-0 rounded-full p-1.5 [&_svg]:size-3.5",
+        // The soft status pair `Badge` measured: step-11 ink on a 7% wash.
+        "bg-muted text-muted-foreground",
+        "group-data-[variant=success]/stat:bg-success/7 group-data-[variant=success]/stat:text-success-foreground",
+        "group-data-[variant=info]/stat:bg-info/7 group-data-[variant=info]/stat:text-info-foreground",
+        "group-data-[variant=warning]/stat:bg-warning/7 group-data-[variant=warning]/stat:text-warning-foreground",
+        "group-data-[variant=destructive]/stat:bg-destructive/7 group-data-[variant=destructive]/stat:text-destructive-foreground",
+        t
+      ),
+      ...e,
+      "data-slot": s ?? "stat-indicator"
+    }
+  );
+}, B = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.span,
+    {
+      className: i(
+        "col-start-2 col-end-[-1] truncate font-medium text-muted-foreground text-sm",
+        t
+      ),
+      ...e,
+      "data-slot": s ?? "stat-label"
+    }
+  );
+}, R = (a) => {
+  const { loading: t = !1, className: s, children: e, slot: n, ...r } = a;
+  return /* @__PURE__ */ o(
+    d.div,
+    {
+      "aria-busy": t || void 0,
+      className: i(
+        "col-start-1 col-end-3 pt-2 font-semibold text-2xl text-foreground leading-none tracking-tight",
+        s
+      ),
+      ...r,
+      "data-slot": n ?? "stat-value",
+      children: t ? /* @__PURE__ */ o(_, { className: "h-6 w-20" }) : e
+    }
+  );
+}, $ = D({
+  base: "col-span-full flex items-center gap-1 font-medium text-xs [&_svg]:size-3.5 [&_svg]:shrink-0",
+  variants: {
+    // Step-11 ink: a delta is 12px text and owes 4.5:1, which the step-9 fill does not reach.
+    tone: {
+      good: "text-success-foreground",
+      bad: "text-destructive-foreground",
+      flat: "text-muted-foreground"
+    }
+  }
+}), X = (a) => {
+  const { value: t, unit: s, goodWhenUp: e = !0, className: n, children: r, slot: c, ...m } = a, l = t > 0 ? "up" : t < 0 ? "down" : "flat", g = l === "flat" ? "flat" : l === "up" === e ? "good" : "bad", u = { up: y, down: S, flat: k }[l];
+  return /* @__PURE__ */ v(
+    d.div,
+    {
+      className: i($({ tone: g }), n),
+      "data-direction": l,
+      ...m,
+      "data-slot": c ?? "stat-delta",
+      children: [
+        /* @__PURE__ */ o(u, { "aria-hidden": !0 }),
+        /* @__PURE__ */ v("span", { children: [
+          /* @__PURE__ */ o(w, { maximumFractionDigits: 1, signDisplay: "exceptZero", value: t }),
+          s
+        ] }),
+        r != null && /* @__PURE__ */ o("span", { className: "font-normal text-muted-foreground", children: r })
+      ]
+    }
+  );
+}, Y = (a) => {
+  const { values: t, className: s, slot: e, ...n } = a;
+  if (t.length < 2) return null;
+  const r = 72, c = 22, m = Math.min(...t), l = Math.max(...t) - m || 1, g = r / (t.length - 1), u = t.map((p, f) => [f * g, c - (p - m) / l * c]), x = u.map(([p, f], b) => `${b ? "L" : "M"}${p.toFixed(1)},${f.toFixed(1)}`).join(" "), [h, N] = u[u.length - 1] ?? [0, 0];
+  return /* @__PURE__ */ v(
+    d.svg,
+    {
+      "aria-hidden": !0,
+      className: i("col-start-3 ms-3 self-end overflow-visible", s),
+      height: c,
+      viewBox: `0 0 ${r} ${c}`,
+      width: r,
+      ...n,
+      "data-slot": e ?? "stat-trend",
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            className: "text-muted-foreground",
+            d: x,
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ o("circle", { className: "fill-primary", cx: h, cy: N, r: 2.5 })
+      ]
+    }
+  );
+}, Z = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.p,
+    {
+      className: i("col-span-full text-muted-foreground text-sm", t),
+      ...e,
+      "data-slot": s ?? "stat-description"
+    }
+  );
+};
+export {
+  X as StatDelta,
+  Z as StatDescription,
+  W as StatIndicator,
+  B as StatLabel,
+  V as StatRoot,
+  Y as StatTrend,
+  R as StatValue
+};
+//# sourceMappingURL=stat.js.map

package/dist/simples/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sources":["../../src/simples/stat.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { FormatNumber } from \"@ark-ui/react/format\";\nimport { MinusIcon, TrendingDownIcon, TrendingUpIcon } from \"lucide-react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"./card\";\nimport { Skeleton } from \"./skeleton\";\n\nexport interface StatRootProps extends React.ComponentProps<typeof Card> {\n  /** The status family, written to `data-variant` and read by `StatIndicator`. */\n  variant?: \"default\" | \"success\" | \"info\" | \"warning\" | \"destructive\";\n}\n\n/**\n * One dashboard number. A `Card`, so `asChild` makes the anchor *be* the tile — one tab stop, and\n * the router seam. The link styles key on the element (`[a&]`, as `Badge` does) rather than on a\n * prop, so they cannot disagree with what was rendered.\n */\nexport const StatRoot = (props: StatRootProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <Card\n      className={cn(\n        \"group/stat [--space:--spacing(4)] px-(--space)\",\n        // Indicator and label share the first row; the value and the trend share the second.\n        \"grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-0 gap-y-1\",\n        \"outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[a&]:hover:border-primary/40\",\n        className\n      )}\n      data-variant={variant}\n      {...rest}\n      slot={slot ?? \"stat-root\"}\n    />\n  );\n};\n\nexport const StatIndicator = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      aria-hidden\n      className={cn(\n        \"col-start-1 me-2 shrink-0 rounded-full p-1.5 [&_svg]:size-3.5\",\n        // The soft status pair `Badge` measured: step-11 ink on a 7% wash.\n        \"bg-muted text-muted-foreground\",\n        \"group-data-[variant=success]/stat:bg-success/7 group-data-[variant=success]/stat:text-success-foreground\",\n        \"group-data-[variant=info]/stat:bg-info/7 group-data-[variant=info]/stat:text-info-foreground\",\n        \"group-data-[variant=warning]/stat:bg-warning/7 group-data-[variant=warning]/stat:text-warning-foreground\",\n        \"group-data-[variant=destructive]/stat:bg-destructive/7 group-data-[variant=destructive]/stat:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-indicator\"}\n    />\n  );\n};\n\n/** Sentence case, no trailing colon. */\nexport const StatLabel = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"col-start-2 col-end-[-1] truncate font-medium text-muted-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-label\"}\n    />\n  );\n};\n\nexport interface StatValueProps extends React.ComponentProps<typeof ark.div> {\n  /** Swaps the figure for a skeleton of its size, so the tile does not jump when it lands. */\n  loading?: boolean;\n}\n\n/**\n * The figure, as the host formats it — `FormatNumber` with `notation=\"compact\"` is the dashboard\n * reading. Proportional figures on purpose: a lone headline number is not a column to align.\n */\nexport const StatValue = (props: StatValueProps) => {\n  const { loading = false, className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      aria-busy={loading || undefined}\n      className={cn(\n        \"col-start-1 col-end-3 pt-2 font-semibold text-2xl text-foreground leading-none tracking-tight\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-value\"}\n    >\n      {loading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </ark.div>\n  );\n};\n\nconst statDeltaVariants = tv({\n  base: \"col-span-full flex items-center gap-1 font-medium text-xs [&_svg]:size-3.5 [&_svg]:shrink-0\",\n  variants: {\n    // Step-11 ink: a delta is 12px text and owes 4.5:1, which the step-9 fill does not reach.\n    tone: {\n      good: \"text-success-foreground\",\n      bad: \"text-destructive-foreground\",\n      flat: \"text-muted-foreground\",\n    },\n  },\n});\n\nexport interface StatDeltaProps extends React.ComponentProps<typeof ark.div> {\n  /** Signed change. Its sign draws the direction icon; with `goodWhenUp`, it picks the colour. */\n  value: number;\n  /**\n   * Against the magnitude, before the comparison — `\"%\"`, `\"pp\"`, `\"ms\"`. \"+8.2 vs last week\" is a\n   * different claim from \"+8.2% vs last week\".\n   */\n  unit?: string;\n  /** Whether a rise is good. Two more failed runs and two more members are both `+2`. @default true */\n  goodWhenUp?: boolean;\n}\n\n/** The comparison period is the children: `<StatDelta value={4.2} unit=\"%\">vs last month</StatDelta>`. */\nexport const StatDelta = (props: StatDeltaProps) => {\n  const { value, unit, goodWhenUp = true, className, children, slot, ...rest } = props;\n  const direction = value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n  const tone = direction === \"flat\" ? \"flat\" : (direction === \"up\") === goodWhenUp ? \"good\" : \"bad\";\n  // Never colour alone: the icon carries the direction and the sign carries it in text.\n  const Icon = { up: TrendingUpIcon, down: TrendingDownIcon, flat: MinusIcon }[direction];\n\n  return (\n    <ark.div\n      className={cn(statDeltaVariants({ tone }), className)}\n      data-direction={direction}\n      {...rest}\n      data-slot={slot ?? \"stat-delta\"}\n    >\n      <Icon aria-hidden />\n      <span>\n        <FormatNumber maximumFractionDigits={1} signDisplay=\"exceptZero\" value={value} />\n        {unit}\n      </span>\n      {children != null && <span className=\"font-normal text-muted-foreground\">{children}</span>}\n    </ark.div>\n  );\n};\n\n// `values` is also an SVG animation attribute, meaningless on an `<svg>`; the series takes the name.\nexport interface StatTrendProps extends Omit<React.ComponentProps<typeof ark.svg>, \"values\"> {\n  /** About a dozen points, oldest first. Fewer than two draws nothing. */\n  values: readonly number[];\n}\n\n/** A sparkline with its last value marked — unlabelled, because a reader who needs the values needs a chart. */\nexport const StatTrend = (props: StatTrendProps) => {\n  const { values, className, slot, ...rest } = props;\n  if (values.length < 2) return null;\n\n  const w = 72;\n  const h = 22;\n  const min = Math.min(...values);\n  const range = Math.max(...values) - min || 1;\n  const step = w / (values.length - 1);\n  const points = values.map((v, i) => [i * step, h - ((v - min) / range) * h] as const);\n  const d = points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${x.toFixed(1)},${y.toFixed(1)}`).join(\" \");\n  const [lastX, lastY] = points[points.length - 1] ?? [0, 0];\n\n  return (\n    <ark.svg\n      aria-hidden\n      className={cn(\"col-start-3 ms-3 self-end overflow-visible\", className)}\n      height={h}\n      viewBox={`0 0 ${w} ${h}`}\n      width={w}\n      {...rest}\n      data-slot={slot ?? \"stat-trend\"}\n    >\n      {/* A 1.5px trend line is a graphical object carrying information, so it owes 3:1. Diluted it\n          measured 2.91:1 on the light page (3.33–3.35 in dark); step 11 solid is 9.19 and 8.52. */}\n      <path\n        className=\"text-muted-foreground\"\n        d={d}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      />\n      <circle className=\"fill-primary\" cx={lastX} cy={lastY} r={2.5} />\n    </ark.svg>\n  );\n};\n\nexport const StatDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\"col-span-full text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"stat-description\"}\n    />\n  );\n};\n"],"names":["StatRoot","props","variant","className","slot","rest","jsx","Card","cn","StatIndicator","ark","StatLabel","StatValue","loading","children","Skeleton","statDeltaVariants","tv","StatDelta","value","unit","goodWhenUp","direction","tone","Icon","TrendingUpIcon","TrendingDownIcon","MinusIcon","jsxs","FormatNumber","StatTrend","values","w","h","min","range","step","points","v","i","d","x","y","lastX","lastY","StatDescription"],"mappings":"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"}

package/dist/table/actions-column.d.ts

@@ -0,0 +1,20 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface ActionsColumnOptions<TData> {
+    /** Visually hidden header text, so the column is not an empty `<th>`. Default "Actions". */
+    headerLabel?: string;
+    /** Column id. Default "actions". */
+    id?: string;
+    /** aria-label for a row's trigger. It names the row — the icon has no text to borrow. */
+    label: (row: Row<TData>) => string;
+    /** The row's menu items — `MenuItem`, `MenuSeparator`, `MenuGroup`. `null` renders no trigger. */
+    menu: (row: Row<TData>) => ReactNode;
+}
+/**
+ * A trailing row-menu column. A row with nothing permitted gets no trigger rather than an empty
+ * menu. The trigger and the menu both stop click propagation so neither fires
+ * `DataTableContent`'s `onRowClick` — the menu too, because a portal's events bubble through the
+ * React tree to the row regardless of where the DOM put them.
+ */
+export declare function actionsColumn<TData>(options: ActionsColumnOptions<TData>): ColumnDef<TData, unknown>;
+//# sourceMappingURL=actions-column.d.ts.map