@kanzo-tech/ui 0.11.0 → 0.13.0

package/dist/simples/field.js

@@ -1,11 +1,11 @@
-import { jsx as o, 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 w = m, g = u({
+const V = m, g = f({
   base: [
     "group/field",
     "w-full",
@@ -42,86 +42,102 @@ const w = m, g = u({
     orientation: "vertical",
     reverse: !1
   }
-}), y = (a) => {
-  const { orientation: t = "vertical", reverse: e = !1, className: l, slot: s, ...c } = a;
-  return /* @__PURE__ */ o(
+}), 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 }), l),
-      "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, ...l } = a;
-  return /* @__PURE__ */ o(
+  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
       ),
-      ...l,
-      "data-slot": e ?? "field-set"
+      ...o,
+      "data-slot": t ?? "field-set"
     }
   );
 }, T = (a) => {
-  const { variant: t = "legend", className: e, slot: l, ...s } = a;
-  return /* @__PURE__ */ o(
+  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": l ?? "field-legend"
+      "data-slot": o ?? "field-legend"
     }
   );
-}, E = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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
-      ),
-      ...l,
-      "data-slot": e ?? "field-group"
+      className: l(x({ columns: e }), t),
+      ...s,
+      "data-slot": o ?? "field-group"
     }
   );
-}, H = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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
       ),
-      ...l,
-      "data-slot": e ?? "field-content"
+      ...o,
+      "data-slot": t ?? "field-content"
     }
   );
-}, L = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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,23 +145,23 @@ const w = 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
       ),
-      ...l,
-      "data-slot": e ?? "field-label"
+      ...o,
+      "data-slot": t ?? "field-label"
     }
   );
-}, R = (a) => {
-  const { className: t, children: e, slot: l, fallback: s, ...c } = a;
-  return /* @__PURE__ */ o(
+}, 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
       ),
-      fallback: s == null ? null : /* @__PURE__ */ o(
+      fallback: s == null ? null : /* @__PURE__ */ r(
         "span",
         {
           className: "select-none font-normal text-muted-foreground text-sm",
@@ -154,32 +170,32 @@ const w = m, g = u({
         }
       ),
       ...c,
-      "data-slot": l ?? "field-required-indicator",
-      children: e ?? "*"
+      "data-slot": o ?? "field-required-indicator",
+      children: t ?? "*"
     }
   );
-}, q = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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
       ),
-      ...l,
-      "data-slot": e ?? "field-title"
+      ...o,
+      "data-slot": t ?? "field-title"
     }
   );
-}, z = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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",
@@ -187,107 +203,121 @@ const w = 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
       ),
-      ...l,
-      "data-slot": e ?? "field-description"
+      ...o,
+      "data-slot": t ?? "field-description"
     }
   );
-}, j = (a) => {
-  const { className: t, children: e, slot: l, ...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": l ?? "field-separator",
+      "data-slot": o ?? "field-separator",
       children: [
-        /* @__PURE__ */ o(p, { className: "absolute inset-0 top-1/2" }),
-        !!e && /* @__PURE__ */ o(
+        /* @__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, ...l } = a;
-  return /* @__PURE__ */ o(
+}, 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),
-      ...l,
-      "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, ...l } = a;
-  return /* @__PURE__ */ o(
+  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
       ),
-      ...l,
-      "data-slot": e ?? "field-error"
+      ...o,
+      "data-slot": t ?? "field-error"
     }
   );
-}, V = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, D = (a) => {
+  const { className: e, slot: t, ...o } = a;
+  return /* @__PURE__ */ r(
     n.HelperText,
     {
-      className: r("text-muted-foreground text-sm", t),
-      ...l,
-      "data-slot": e ?? "field-set-helper"
+      className: l("text-muted-foreground text-sm", e),
+      ...o,
+      "data-slot": t ?? "field-set-helper"
     }
   );
-}, D = (a) => {
-  const { className: t, slot: e, ...l } = a;
-  return /* @__PURE__ */ o(
+}, $ = (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
       ),
-      ...l,
-      "data-slot": e ?? "field-set-error"
+      ...o,
+      "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,
-  w 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\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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"}
+{"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/input-group.d.ts

@@ -6,21 +6,21 @@ import { Input } from './input';
 import { Textarea } from './textarea';
 declare const inpuGroupVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], {
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface InputGroupProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof inpuGroupVariants> {

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/simples/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAqDrB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAYhD,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;qDA8C3B,CAAC;AAEH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,QAAA,MAAM,wBAAwB;;QAUxB;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;qDAQP,CAAC;AAEH,UAAU,qBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAgB7C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAiBxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAmB7C,CAAC"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/simples/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAoCrB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAYhD,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;qDA8C3B,CAAC;AAEH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,QAAA,MAAM,wBAAwB;;QAUxB;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;qDAWP,CAAC;AAEH,UAAU,qBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAgB7C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAoBxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAmB7C,CAAC"}