@kanzo-tech/ui 0.10.0 → 0.12.0

package/dist/simples/field.js

@@ -1,11 +1,11 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { jsx as r, jsxs as u } 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 { tv as f } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
 import { Separator as p } from "./separator.js";
-const k = m, g = u({
+const V = m, g = f({
   base: [
     "group/field",
     "w-full",
@@ -42,86 +42,102 @@ const k = m, g = u({
     orientation: "vertical",
     reverse: !1
   }
-}), y = (a) => {
-  const { orientation: t = "vertical", reverse: e = !1, className: o, slot: s, ...c } = a;
-  return /* @__PURE__ */ l(
+}), H = (a) => {
+  const { orientation: e = "vertical", reverse: t = !1, className: o, slot: s, ...c } = a;
+  return /* @__PURE__ */ r(
     i.Root,
     {
-      className: r(g({ orientation: t, reverse: e }), o),
-      "data-orientation": t,
+      className: l(g({ orientation: e, reverse: t }), o),
+      "data-orientation": e,
       ...c,
       "data-slot": s ?? "field"
     }
   );
 }, S = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     n.Root,
     {
-      className: r(
+      className: l(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
         "data-invalid:text-destructive-foreground",
         "dark:data-invalid:text-destructive-foreground",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-set"
+      "data-slot": t ?? "field-set"
     }
   );
 }, T = (a) => {
-  const { variant: t = "legend", className: e, slot: o, ...s } = a;
-  return /* @__PURE__ */ l(
+  const { variant: e = "legend", className: t, slot: o, ...s } = a;
+  return /* @__PURE__ */ r(
     n.Legend,
     {
-      className: r(
+      className: l(
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        e
+        t
       ),
-      "data-variant": t,
+      "data-variant": e,
       ...s,
       "data-slot": o ?? "field-legend"
     }
   );
-}, E = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, x = f({
+  base: [
+    "group/field-group @container/field-group",
+    "w-full gap-4",
+    "data-[data-slot=checkbox-group]:gap-3",
+    "*:data-[slot=field-group]:gap-4"
+  ],
+  variants: {
+    // A closed set of counts, each a whole class, so a caller overrides one per breakpoint with a
+    // class of its own — `columns={1} className="sm:grid-cols-2"`. It was a `--columns` custom
+    // property written to `style`, as `RadioGroup` does, and an inline property beats every class,
+    // so that override was the one thing it could not express.
+    columns: {
+      stack: "flex flex-col",
+      1: "grid grid-cols-1",
+      2: "grid grid-cols-2",
+      3: "grid grid-cols-3",
+      4: "grid grid-cols-4",
+      auto: "grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))]"
+    }
+  },
+  defaultVariants: { columns: "stack" }
+}), E = (a) => {
+  const { columns: e = "stack", className: t, slot: o, ...s } = a;
+  return /* @__PURE__ */ r(
     d.div,
     {
-      className: r(
-        "group/field-group @container/field-group",
-        "flex w-full flex-col gap-4",
-        "data-[data-slot=checkbox-group]:gap-3",
-        "*:data-[slot=field-group]:gap-4",
-        t
-      ),
-      ...o,
-      "data-slot": e ?? "field-group"
+      className: l(x({ columns: e }), t),
+      ...s,
+      "data-slot": o ?? "field-group"
     }
   );
-}, H = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, L = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     d.div,
     {
-      className: r(
+      className: l(
         "group/field-content",
         "flex flex-1 flex-col gap-1.5",
         "leading-snug",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-content"
+      "data-slot": t ?? "field-content"
     }
   );
-}, L = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, R = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     i.Label,
     {
-      className: r(
+      className: l(
         "group/field-label peer/field-label",
         "select-none font-medium text-sm leading-snug",
         "flex w-fit gap-1",
@@ -129,49 +145,57 @@ const k = m, g = u({
         "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5",
         "group-data-disabled/field:opacity-64",
         "dark:has-data-[state=checked]:bg-primary/10",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-label"
+      "data-slot": t ?? "field-label"
     }
   );
-}, R = (a) => {
-  const { className: t, children: e, slot: o, ...s } = a;
-  return /* @__PURE__ */ l(
+}, q = (a) => {
+  const { className: e, children: t, slot: o, fallback: s, ...c } = a;
+  return /* @__PURE__ */ r(
     i.RequiredIndicator,
     {
       "aria-hidden": !0,
-      className: r(
+      className: l(
         "select-none text-destructive-foreground text-sm",
-        t
+        e
       ),
-      ...s,
+      fallback: s == null ? null : /* @__PURE__ */ r(
+        "span",
+        {
+          className: "select-none font-normal text-muted-foreground text-sm",
+          "data-slot": "field-optional-indicator",
+          children: s
+        }
+      ),
+      ...c,
       "data-slot": o ?? "field-required-indicator",
-      children: e ?? "*"
+      children: t ?? "*"
     }
   );
-}, q = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, z = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     d.div,
     {
-      className: r(
+      className: l(
         "w-fit",
         "flex items-center gap-2",
         "font-medium text-sm leading-snug",
         "group-data-[disabled=true]/field:opacity-64",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-title"
+      "data-slot": t ?? "field-title"
     }
   );
-}, z = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, j = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     d.p,
     {
-      className: r(
+      className: l(
         "pointer-events-none",
         "font-normal text-muted-foreground text-sm leading-normal",
         "group-has-data-[orientation=horizontal]/field:text-balance",
@@ -179,107 +203,121 @@ const k = m, g = u({
         "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
         "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!",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-description"
+      "data-slot": t ?? "field-description"
     }
   );
-}, j = (a) => {
-  const { className: t, children: e, slot: o, ...s } = a;
-  return /* @__PURE__ */ f(
+}, C = (a) => {
+  const { className: e, children: t, slot: o, ...s } = a;
+  return /* @__PURE__ */ u(
     d.div,
     {
-      className: r(
+      className: l(
         "relative",
         "h-5",
         "-my-2 group-data-[variant=outline]/field-group:-mb-2",
         "text-sm",
-        t
+        e
       ),
-      "data-content": !!e,
+      "data-content": !!t,
       ...s,
       "data-slot": o ?? "field-separator",
       children: [
-        /* @__PURE__ */ l(p, { className: "absolute inset-0 top-1/2" }),
-        !!e && /* @__PURE__ */ l(
+        /* @__PURE__ */ r(p, { className: "absolute inset-0 top-1/2" }),
+        !!t && /* @__PURE__ */ r(
           "span",
           {
-            className: r(
+            className: l(
               "relative block",
               "w-fit",
               "mx-auto px-2",
               "bg-background",
               "text-muted-foreground text-sm"
             ),
-            children: e
+            children: t
           }
         )
       ]
     }
   );
-}, C = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, v = f({
+  base: "text-sm",
+  variants: {
+    // `muted` is what a helper always was. The two others are for a message that is neither
+    // guidance nor an error: a warning the value survives, or a note about what it will do. They
+    // are text colours and nothing else — a message that must block belongs in `FieldError`.
+    tone: {
+      muted: "text-muted-foreground",
+      info: "text-info-foreground",
+      warning: "text-warning-foreground"
+    }
+  },
+  defaultVariants: { tone: "muted" }
+}), G = (a) => {
+  const { tone: e = "muted", className: t, slot: o, ...s } = a;
+  return /* @__PURE__ */ r(
     i.HelperText,
     {
-      className: r("text-muted-foreground text-sm", t),
-      ...o,
-      "data-slot": e ?? "field-helper"
+      className: l(v({ tone: e }), t),
+      "data-tone": e,
+      ...s,
+      "data-slot": o ?? "field-helper"
     }
   );
 }, I = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     i.ErrorText,
     {
-      className: r(
+      className: l(
         "font-normal text-destructive-foreground text-sm",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-error"
+      "data-slot": t ?? "field-error"
     }
   );
-}, V = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, D = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     n.HelperText,
     {
-      className: r("text-muted-foreground text-sm", t),
+      className: l("text-muted-foreground text-sm", e),
       ...o,
-      "data-slot": e ?? "field-set-helper"
+      "data-slot": t ?? "field-set-helper"
     }
   );
-}, D = (a) => {
-  const { className: t, slot: e, ...o } = a;
-  return /* @__PURE__ */ l(
+}, $ = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     n.ErrorText,
     {
-      className: r(
+      className: l(
         "font-normal text-destructive-foreground text-sm",
-        t
+        e
       ),
       ...o,
-      "data-slot": e ?? "field-set-error"
+      "data-slot": t ?? "field-set-error"
     }
   );
 };
 export {
-  y as Field,
-  H as FieldContent,
-  z as FieldDescription,
+  H as Field,
+  L as FieldContent,
+  j as FieldDescription,
   I as FieldError,
   E as FieldGroup,
-  C as FieldHelper,
-  L as FieldLabel,
+  G as FieldHelper,
+  R as FieldLabel,
   T as FieldLegend,
-  R as FieldRequiredIndicator,
-  j as FieldSeparator,
+  q as FieldRequiredIndicator,
+  C as FieldSeparator,
   S as FieldSet,
-  D as FieldSetError,
-  V as FieldSetHelper,
-  q as FieldTitle,
-  k as useField
+  $ as FieldSetError,
+  D as FieldSetHelper,
+  z as FieldTitle,
+  V 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\nconst fieldGroupVariants = tv({\n  base: [\n    \"group/field-group @container/field-group\",\n    \"w-full gap-4\",\n    \"data-[data-slot=checkbox-group]:gap-3\",\n    \"*:data-[slot=field-group]:gap-4\",\n  ],\n  variants: {\n    // A closed set of counts, each a whole class, so a caller overrides one per breakpoint with a\n    // class of its own — `columns={1} className=\"sm:grid-cols-2\"`. It was a `--columns` custom\n    // property written to `style`, as `RadioGroup` does, and an inline property beats every class,\n    // so that override was the one thing it could not express.\n    columns: {\n      stack: \"flex flex-col\",\n      1: \"grid grid-cols-1\",\n      2: \"grid grid-cols-2\",\n      3: \"grid grid-cols-3\",\n      4: \"grid grid-cols-4\",\n      auto: \"grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))]\",\n    },\n  },\n  defaultVariants: { columns: \"stack\" },\n});\n\ninterface FieldGroupProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * Lay the fields out in a grid: one to four equal columns, or `\"auto\"` to fit as many as the\n   * width allows. Omitted, they stack. A field that should span the row takes `col-span-full`.\n   */\n  columns?: 1 | 2 | 3 | 4 | \"auto\";\n}\n\nexport const FieldGroup = (props: FieldGroupProps) => {\n  const { columns = \"stack\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(fieldGroupVariants({ columns }), className)}\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\nconst fieldHelperVariants = tv({\n  base: \"text-sm\",\n  variants: {\n    // `muted` is what a helper always was. The two others are for a message that is neither\n    // guidance nor an error: a warning the value survives, or a note about what it will do. They\n    // are text colours and nothing else — a message that must block belongs in `FieldError`.\n    tone: {\n      muted: \"text-muted-foreground\",\n      info: \"text-info-foreground\",\n      warning: \"text-warning-foreground\",\n    },\n  },\n  defaultVariants: { tone: \"muted\" },\n});\n\ninterface FieldHelperProps\n  extends React.ComponentProps<typeof ArkField.HelperText>,\n    VariantProps<typeof fieldHelperVariants> {}\n\n/**\n * The one message wired into the control's `aria-describedby`, and there is one per `Field`: Ark\n * gives every `HelperText` the same id, so a second would collide. A warning beside a description\n * is therefore this part with a `tone` for the warning and `FieldDescription` for the description.\n */\nexport const FieldHelper = (props: FieldHelperProps) => {\n  const { tone = \"muted\", className, slot, ...rest } = props;\n\n  return (\n    <ArkField.HelperText\n      className={cn(fieldHelperVariants({ tone }), className)}\n      data-tone={tone}\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","fieldGroupVariants","FieldGroup","columns","ark","FieldContent","FieldLabel","FieldRequiredIndicator","children","fallback","FieldTitle","FieldDescription","FieldSeparator","jsxs","Separator","fieldHelperVariants","FieldHelper","tone","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/locale.d.ts

@@ -0,0 +1,4 @@
+import { LocaleProvider as ArkLocaleProvider } from '@ark-ui/react/locale';
+export declare const LocaleProvider: (props: React.ComponentProps<typeof ArkLocaleProvider>) => import("react").JSX.Element;
+export declare const useLocale: () => import('@ark-ui/react').UseLocaleContext;
+//# sourceMappingURL=locale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../../src/simples/locale.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,IAAI,iBAAiB,EAEpC,MAAM,sBAAsB,CAAC;AAO9B,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,gCAClB,CAAC;AAGtC,eAAO,MAAM,SAAS,gDAAmB,CAAC"}

package/dist/simples/locale.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useLocaleContext as r, LocaleProvider as c } from "@ark-ui/react/locale";
+const s = (o) => /* @__PURE__ */ e(c, { ...o }), i = r;
+export {
+  s as LocaleProvider,
+  i as useLocale
+};
+//# sourceMappingURL=locale.js.map

package/dist/simples/locale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.js","sources":["../../src/simples/locale.tsx"],"sourcesContent":["import {\n  LocaleProvider as ArkLocaleProvider,\n  useLocaleContext,\n} from \"@ark-ui/react/locale\";\n\n// Transparent, like `ClientOnly`: Ark's provider renders `children` and no element, so there is no\n// DOM node to slot. What it sets is the `locale` and `dir` every Ark machine below it formats and\n// mirrors by — `Format`, `DatePicker`, `useFilter`, the number and date inputs — which is why a\n// product that is not in `en-US` puts one at its root. It translates nothing: the words a\n// component draws are props on the component, written by the host.\nexport const LocaleProvider = (\n  props: React.ComponentProps<typeof ArkLocaleProvider>\n) => <ArkLocaleProvider {...props} />;\n\n// Shark's name for Ark's `useLocaleContext`, by the same rule as every other context alias here.\nexport const useLocale = useLocaleContext;\n"],"names":["LocaleProvider","props","jsx","ArkLocaleProvider","useLocale","useLocaleContext"],"mappings":";;AAUO,MAAMA,IAAiB,CAC5BC,MACG,gBAAAC,EAACC,GAAA,EAAmB,GAAGF,EAAA,CAAO,GAGtBG,IAAYC;"}

package/dist/simples/segment-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment-group.d.ts","sourceRoot":"","sources":["../../src/simples/segment-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,KAAK,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAsDpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBA4BzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,sBAW7D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,sBA8B9D,CAAC"}
+{"version":3,"file":"segment-group.d.ts","sourceRoot":"","sources":["../../src/simples/segment-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,KAAK,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,iBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA4DpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBA4BzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,sBAW7D,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,sBA8B9D,CAAC"}