@kanzo-tech/ui 0.11.0 → 0.12.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/use-async-collection.d.ts

@@ -0,0 +1,57 @@
+import { CollectionItem, ListCollection } from '@ark-ui/react/collection';
+export interface AsyncCollectionOptions<T extends CollectionItem> {
+    /**
+     * Candidates for `query`. Called with an empty query on mount, so a list can be offered before
+     * anything is typed. `signal` aborts when a newer query starts; pass it to `fetch`.
+     */
+    load: (query: string, signal: AbortSignal | undefined) => Promise<T[]>;
+    /** @default `item.value` */
+    itemToValue?: (item: T) => string;
+    /** @default `item.label` */
+    itemToString?: (item: T) => string;
+    /**
+     * How long typing must pause before `load` runs, in milliseconds.
+     *
+     * @default 250
+     */
+    debounce?: number;
+    initialItems?: T[];
+}
+export interface AsyncCollection<T extends CollectionItem> {
+    /** What to hand a `Combobox`, `Select` or `Listbox`. Rebuilt when a load lands. */
+    collection: ListCollection<T>;
+    /** Wire this to `onInputValueChange`: `(d) => setQuery(d.inputValue)`. */
+    setQuery: (query: string) => void;
+    /** A request is in flight. The previous items stay in `collection` until it lands. */
+    loading: boolean;
+    /** The last request landed and offered nothing. False while loading. */
+    empty: boolean;
+    /** The last request failed. The previous items stay in `collection`. */
+    error: unknown;
+    reload: () => void;
+    /**
+     * The label of a value this hook has ever offered, and `undefined` for one it has not.
+     *
+     * It is not a cache: a selected value's label exists only in the batch that offered it, and
+     * the next keystroke replaces the batch, so without it a chosen item reads as its raw value
+     * again the moment the user types.
+     */
+    labelOf: (value: string) => string | undefined;
+}
+/**
+ * Items fetched as the user types: a debounced query, a request that aborts when a newer one
+ * starts, and the loading, empty and error states of the last one.
+ *
+ * The machine is Ark's `useAsyncList`; this adds the pause before it runs, the collection a
+ * `Combobox` wants, and `labelOf`. Filtering is the server's — the `Combobox` machine never mutates
+ * the collection it is given.
+ *
+ * @example
+ * const { collection, setQuery, loading } = useAsyncCollection({ load });
+ * <Combobox collection={collection} onInputValueChange={(d) => setQuery(d.inputValue)}>
+ */
+export declare function useAsyncCollection<T extends CollectionItem = {
+    label: string;
+    value: string;
+}>(options: AsyncCollectionOptions<T>): AsyncCollection<T>;
+//# sourceMappingURL=use-async-collection.d.ts.map

package/dist/lib/use-async-collection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-async-collection.d.ts","sourceRoot":"","sources":["../../src/lib/use-async-collection.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc;IAC9D;;;OAGG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACvE,4BAA4B;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,cAAc;IACvD,mFAAmF;IACnF,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sFAAsF;IACtF,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAChD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAC5F,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GACjC,eAAe,CAAC,CAAC,CAAC,CAmDpB"}

package/dist/lib/use-async-collection.js

@@ -0,0 +1,43 @@
+"use client";
+import { useAsyncList as S, createListCollection as w } from "@ark-ui/react/collection";
+import { useRef as u, useEffect as m, useState as x, useMemo as L } from "react";
+function C(d) {
+  const { debounce: f = 250, initialItems: g, itemToString: o, itemToValue: n, load: c } = d, l = u(c);
+  m(() => {
+    l.current = c;
+  });
+  const [p, T] = x(/* @__PURE__ */ new Map()), e = S({
+    autoReload: !0,
+    initialItems: g,
+    load: async ({ filterText: t, signal: i }) => ({ items: await l.current(t, i) }),
+    onSuccess: ({ items: t }) => T((i) => {
+      const a = new Map(i);
+      for (const r of t)
+        a.set(
+          n ? n(r) : String(r.value),
+          o ? o(r) : String(r.label)
+        );
+      return a;
+    })
+  }), s = u(void 0);
+  m(() => () => clearTimeout(s.current), []);
+  const { setFilterText: b } = e, y = (t) => {
+    clearTimeout(s.current), s.current = setTimeout(() => b(t), f);
+  };
+  return {
+    collection: L(
+      () => w({ items: e.items, itemToValue: n, itemToString: o }),
+      [e.items, n, o]
+    ),
+    setQuery: y,
+    loading: e.loading,
+    empty: !e.loading && e.items.length === 0,
+    error: e.error,
+    reload: e.reload,
+    labelOf: (t) => p.get(t)
+  };
+}
+export {
+  C as useAsyncCollection
+};
+//# sourceMappingURL=use-async-collection.js.map

package/dist/lib/use-async-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-async-collection.js","sources":["../../src/lib/use-async-collection.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type CollectionItem,\n  createListCollection,\n  type ListCollection,\n  useAsyncList,\n} from \"@ark-ui/react/collection\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nexport interface AsyncCollectionOptions<T extends CollectionItem> {\n  /**\n   * Candidates for `query`. Called with an empty query on mount, so a list can be offered before\n   * anything is typed. `signal` aborts when a newer query starts; pass it to `fetch`.\n   */\n  load: (query: string, signal: AbortSignal | undefined) => Promise<T[]>;\n  /** @default `item.value` */\n  itemToValue?: (item: T) => string;\n  /** @default `item.label` */\n  itemToString?: (item: T) => string;\n  /**\n   * How long typing must pause before `load` runs, in milliseconds.\n   *\n   * @default 250\n   */\n  debounce?: number;\n  initialItems?: T[];\n}\n\nexport interface AsyncCollection<T extends CollectionItem> {\n  /** What to hand a `Combobox`, `Select` or `Listbox`. Rebuilt when a load lands. */\n  collection: ListCollection<T>;\n  /** Wire this to `onInputValueChange`: `(d) => setQuery(d.inputValue)`. */\n  setQuery: (query: string) => void;\n  /** A request is in flight. The previous items stay in `collection` until it lands. */\n  loading: boolean;\n  /** The last request landed and offered nothing. False while loading. */\n  empty: boolean;\n  /** The last request failed. The previous items stay in `collection`. */\n  error: unknown;\n  reload: () => void;\n  /**\n   * The label of a value this hook has ever offered, and `undefined` for one it has not.\n   *\n   * It is not a cache: a selected value's label exists only in the batch that offered it, and\n   * the next keystroke replaces the batch, so without it a chosen item reads as its raw value\n   * again the moment the user types.\n   */\n  labelOf: (value: string) => string | undefined;\n}\n\n/**\n * Items fetched as the user types: a debounced query, a request that aborts when a newer one\n * starts, and the loading, empty and error states of the last one.\n *\n * The machine is Ark's `useAsyncList`; this adds the pause before it runs, the collection a\n * `Combobox` wants, and `labelOf`. Filtering is the server's — the `Combobox` machine never mutates\n * the collection it is given.\n *\n * @example\n * const { collection, setQuery, loading } = useAsyncCollection({ load });\n * <Combobox collection={collection} onInputValueChange={(d) => setQuery(d.inputValue)}>\n */\nexport function useAsyncCollection<T extends CollectionItem = { label: string; value: string }>(\n  options: AsyncCollectionOptions<T>\n): AsyncCollection<T> {\n  const { debounce = 250, initialItems, itemToString, itemToValue, load } = options;\n\n  // `load` is usually an inline closure, and Ark reads it when the request starts rather than when\n  // the machine is created; the ref is what keeps a caller from having to memoise it.\n  const latest = useRef(load);\n  useEffect(() => {\n    latest.current = load;\n  });\n\n  const [labels, setLabels] = useState<ReadonlyMap<string, string>>(new Map());\n\n  const list = useAsyncList<T, never>({\n    autoReload: true,\n    initialItems,\n    load: async ({ filterText, signal }) => ({ items: await latest.current(filterText, signal) }),\n    onSuccess: ({ items }) =>\n      setLabels((known) => {\n        const next = new Map(known);\n        for (const item of items) {\n          next.set(\n            itemToValue ? itemToValue(item) : String((item as { value: unknown }).value),\n            itemToString ? itemToString(item) : String((item as { label: unknown }).label)\n          );\n        }\n        return next;\n      }),\n  });\n\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n  const { setFilterText } = list;\n  const setQuery = (query: string) => {\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setFilterText(query), debounce);\n  };\n\n  const collection = useMemo(\n    () => createListCollection<T>({ items: list.items, itemToValue, itemToString }),\n    [list.items, itemToValue, itemToString]\n  );\n\n  return {\n    collection,\n    setQuery,\n    loading: list.loading,\n    empty: !list.loading && list.items.length === 0,\n    error: list.error,\n    reload: list.reload,\n    labelOf: (value) => labels.get(value),\n  };\n}\n"],"names":[],"mappings":";;;AA+DO;AAGL;AAKA;AACE;AAAiB;AAGnB;AAEoC;AACtB;AACZ;AACyF;AAGrF;AACA;AACE;AAAK;AACwE;AACE;AAGjF;AAAO;AACR;AAIL;AACA;AAEE;AAC+D;AAQjE;AAAO;AALY;AAC6D;AACxC;AAAA;AAKtC;AACc;AACgC;AAClC;AACC;AACuB;AAExC;;;;"}

package/dist/lib/use-debounced-commit.d.ts

@@ -0,0 +1,28 @@
+export interface DebouncedCommit<T> {
+    /** What the control shows: the last thing typed until the value it commits to comes back. */
+    draft: T;
+    /** A keystroke. Updates `draft` now and commits after `delay`, restarting the wait each time. */
+    change: (next: T) => void;
+    /** Commits a pending draft immediately. Call it on blur; it does nothing when nothing is pending. */
+    flush: () => void;
+    /** Commits `next` now and drops anything pending — a pick supersedes typing. */
+    commit: (next: T) => void;
+}
+/**
+ * A control that keeps what is being typed to itself and tells its owner once typing pauses.
+ *
+ * For an owner that is expensive to write to — a form model that revalidates, a request, a
+ * document that re-renders — and a control that would otherwise write on every keystroke. `draft`
+ * follows `value` whenever nothing is pending, so a change made elsewhere (a reset, another
+ * editor) still lands in the control, and a change made while the user is typing does not.
+ *
+ * Nothing is committed on unmount: a cleanup that commits also commits in Strict Mode's
+ * mount–unmount–mount, and the owner then hears a value nobody typed. `flush` on blur is what
+ * keeps the last characters from being lost when the control goes away before the timer fires.
+ *
+ * @example
+ * const { draft, change, flush } = useDebouncedCommit(value, onChange);
+ * <input value={draft} onChange={(e) => change(e.target.value)} onBlur={flush} />
+ */
+export declare function useDebouncedCommit<T>(value: T, onCommit: (next: T) => void, delay?: number): DebouncedCommit<T>;
+//# sourceMappingURL=use-debounced-commit.d.ts.map

package/dist/lib/use-debounced-commit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-commit.d.ts","sourceRoot":"","sources":["../../src/lib/use-debounced-commit.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,6FAA6F;IAC7F,KAAK,EAAE,CAAC,CAAC;IACT,iGAAiG;IACjG,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,qGAAqG;IACrG,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gFAAgF;IAChF,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAC3B,KAAK,SAAM,GACV,eAAe,CAAC,CAAC,CAAC,CAsCpB"}

package/dist/lib/use-debounced-commit.js

@@ -0,0 +1,26 @@
+"use client";
+import { useState as T, useRef as f, useEffect as d } from "react";
+function b(r, o, l = 250) {
+  const [e, u] = T({ draft: r, dirty: !1, seen: r });
+  Object.is(e.seen, r) || u({ draft: e.dirty ? e.draft : r, dirty: e.dirty, seen: r });
+  const a = f(o);
+  d(() => {
+    a.current = o;
+  });
+  const n = f(void 0), t = f(null);
+  d(() => () => clearTimeout(n.current), []);
+  const s = (c) => {
+    clearTimeout(n.current), t.current = null, u((i) => ({ ...i, draft: c, dirty: !1 })), a.current(c);
+  }, m = (c) => {
+    u((i) => ({ ...i, draft: c, dirty: !0 })), t.current = { value: c }, clearTimeout(n.current), n.current = setTimeout(() => {
+      t.current && s(t.current.value);
+    }, l);
+  }, y = () => {
+    t.current && s(t.current.value);
+  };
+  return { draft: e.draft, change: m, flush: y, commit: s };
+}
+export {
+  b as useDebouncedCommit
+};
+//# sourceMappingURL=use-debounced-commit.js.map

package/dist/lib/use-debounced-commit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-commit.js","sources":["../../src/lib/use-debounced-commit.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nexport interface DebouncedCommit<T> {\n  /** What the control shows: the last thing typed until the value it commits to comes back. */\n  draft: T;\n  /** A keystroke. Updates `draft` now and commits after `delay`, restarting the wait each time. */\n  change: (next: T) => void;\n  /** Commits a pending draft immediately. Call it on blur; it does nothing when nothing is pending. */\n  flush: () => void;\n  /** Commits `next` now and drops anything pending — a pick supersedes typing. */\n  commit: (next: T) => void;\n}\n\n/**\n * A control that keeps what is being typed to itself and tells its owner once typing pauses.\n *\n * For an owner that is expensive to write to — a form model that revalidates, a request, a\n * document that re-renders — and a control that would otherwise write on every keystroke. `draft`\n * follows `value` whenever nothing is pending, so a change made elsewhere (a reset, another\n * editor) still lands in the control, and a change made while the user is typing does not.\n *\n * Nothing is committed on unmount: a cleanup that commits also commits in Strict Mode's\n * mount–unmount–mount, and the owner then hears a value nobody typed. `flush` on blur is what\n * keeps the last characters from being lost when the control goes away before the timer fires.\n *\n * @example\n * const { draft, change, flush } = useDebouncedCommit(value, onChange);\n * <input value={draft} onChange={(e) => change(e.target.value)} onBlur={flush} />\n */\nexport function useDebouncedCommit<T>(\n  value: T,\n  onCommit: (next: T) => void,\n  delay = 250\n): DebouncedCommit<T> {\n  const [state, setState] = useState({ draft: value, dirty: false, seen: value });\n\n  // Adopt the owner's value during render rather than in an effect, so the control never paints\n  // a frame of the old value — and only when the user is not mid-word.\n  if (!Object.is(state.seen, value)) {\n    setState({ draft: state.dirty ? state.draft : value, dirty: state.dirty, seen: value });\n  }\n\n  const latest = useRef(onCommit);\n  useEffect(() => {\n    latest.current = onCommit;\n  });\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const pending = useRef<{ value: T } | null>(null);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  const commit = (next: T) => {\n    clearTimeout(timer.current);\n    pending.current = null;\n    setState((s) => ({ ...s, draft: next, dirty: false }));\n    latest.current(next);\n  };\n\n  const change = (next: T) => {\n    setState((s) => ({ ...s, draft: next, dirty: true }));\n    pending.current = { value: next };\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      if (pending.current) commit(pending.current.value);\n    }, delay);\n  };\n\n  const flush = () => {\n    if (pending.current) commit(pending.current.value);\n  };\n\n  return { draft: state.draft, change, flush, commit };\n}\n"],"names":[],"mappings":";;AA+BO;AAKL;AAIA;AAIA;AACA;AACE;AAAiB;AAEnB;AAEA;AAEA;AACE;AAGmB;AAInB;AAIE;AAAiD;AAC3C;AAIR;AAAiD;AAGnD;AACF;;;;"}

package/dist/shark-parity.divergences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shark-parity.divergences.d.ts","sourceRoot":"","sources":["../src/shark-parity.divergences.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIvD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA6BtD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUvD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAUhG,CAAC;AA+DF;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmCrD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2BlD,CAAC;AAaF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS;IACxC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CAClC,EAsHA,CAAC"}
+{"version":3,"file":"shark-parity.divergences.d.ts","sourceRoot":"","sources":["../src/shark-parity.divergences.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAIvD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA4BtD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUvD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAUhG,CAAC;AA+DF;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmCrD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2BlD,CAAC;AAaF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS;IACxC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CAClC,EAsHA,CAAC"}

package/dist/simples/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/simples/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,QAAQ,EAET,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAWtE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBAqB1D,CAAC;AAEF,UAAU,oBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EACpE,UAAU;CAAG;AAEjB,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA0B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAqBxE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBA8B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,mBAGrC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,sBAK1D,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/simples/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,QAAQ,EAET,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAMlD,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAiBtE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBAqB1D,CAAC;AAEF,UAAU,oBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EACpE,UAAU;CAAG;AAEjB,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA0B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAqBxE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,sBA8B1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,sBAW5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,mBAGrC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,sBAK1D,CAAC"}

package/dist/simples/date-picker.js

@@ -1,68 +1,74 @@
+"use client";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useDatePickerContext as m, DatePicker as n } from "@ark-ui/react/date-picker";
-import { Portal as g } from "@ark-ui/react/portal";
-import { CalendarIcon as k, ClockIcon as h } from "lucide-react";
+import { useDatePickerContext as m, DatePicker as i } from "@ark-ui/react/date-picker";
+import { useFieldContext as g } from "@ark-ui/react/field";
+import { Portal as k } from "@ark-ui/react/portal";
+import { CalendarIcon as h, ClockIcon as P } from "lucide-react";
 import { cn as s } from "../lib/cn.js";
-import { Button as f } from "./button.js";
-import { Calendar as P, CalendarPresetTrigger as x } from "./calendar.js";
-import { InputGroup as l, InputGroupInput as d, InputGroupAddon as p, InputGroupButton as C } from "./input-group.js";
-const y = m, G = (t) => {
-  const { positioning: r = { placement: "top" }, slot: o, ...a } = t;
+import { Button as x } from "./button.js";
+import { Calendar as f, CalendarPresetTrigger as C } from "./calendar.js";
+import { InputGroup as d, InputGroupInput as l, InputGroupAddon as p, InputGroupButton as v } from "./input-group.js";
+const j = m, V = (r) => {
+  const { positioning: a = { placement: "top" }, slot: n, ...o } = r, t = g();
   return /* @__PURE__ */ e(
-    P,
+    f,
     {
+      disabled: t == null ? void 0 : t.disabled,
       inline: !1,
-      positioning: r,
-      ...a,
-      slot: o ?? "date-picker"
+      invalid: t == null ? void 0 : t.invalid,
+      positioning: a,
+      readOnly: t == null ? void 0 : t.readOnly,
+      required: t == null ? void 0 : t.required,
+      ...o,
+      slot: n ?? "date-picker"
     }
   );
-}, j = (t) => {
-  const { className: r, children: o, slot: a, ...i } = t;
-  return /* @__PURE__ */ e(n.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ e(
-    n.Trigger,
+}, q = (r) => {
+  const { className: a, children: n, slot: o, ...t } = r;
+  return /* @__PURE__ */ e(i.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ e(
+    i.Trigger,
     {
       className: s(
         "justify-start",
         "text-start data-placeholder-shown:[&>span]:text-muted-foreground",
         "active:scale-100",
         "[&_svg:not([class*='text-'])]:opacity-64",
-        r
+        a
       ),
-      ...i,
-      "data-slot": a ?? "date-picker-trigger",
-      children: o
+      ...t,
+      "data-slot": o ?? "date-picker-trigger",
+      children: n
     }
   ) });
-}, V = (t) => {
-  const { size: r, className: o, slot: a, ...i } = t;
-  return /* @__PURE__ */ e(n.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ c(l, { size: r, children: [
-    /* @__PURE__ */ e(n.Input, { asChild: !0, ...i, children: /* @__PURE__ */ e(d, { slot: a ?? "date-picker-input" }) }),
-    /* @__PURE__ */ e(p, { align: "inline-end", children: /* @__PURE__ */ e(C, { asChild: !0, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ e(n.Trigger, { asChild: !0, children: /* @__PURE__ */ e(f, { slot: "date-picker-trigger", variant: "ghost", children: /* @__PURE__ */ e(k, { "aria-hidden": !0, className: "text-muted-foreground" }) }) }) }) })
+}, B = (r) => {
+  const { size: a, className: n, slot: o, ...t } = r;
+  return /* @__PURE__ */ e(i.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ c(d, { size: a, children: [
+    /* @__PURE__ */ e(i.Input, { asChild: !0, ...t, children: /* @__PURE__ */ e(l, { slot: o ?? "date-picker-input" }) }),
+    /* @__PURE__ */ e(p, { align: "inline-end", children: /* @__PURE__ */ e(v, { asChild: !0, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e(x, { slot: "date-picker-trigger", variant: "ghost", children: /* @__PURE__ */ e(h, { "aria-hidden": !0, className: "text-muted-foreground" }) }) }) }) })
   ] }) });
-}, B = (t) => {
-  const { id: r, value: o, defaultValue: a, className: i, ...u } = t;
-  return /* @__PURE__ */ c(l, { ...u, children: [
-    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(h, {}) }),
+}, O = (r) => {
+  const { id: a, value: n, defaultValue: o, className: t, ...u } = r;
+  return /* @__PURE__ */ c(d, { ...u, children: [
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(P, {}) }),
     /* @__PURE__ */ e(
-      d,
+      l,
       {
         className: s(
           "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
-          i
+          t
         ),
-        defaultValue: a,
-        id: r,
+        defaultValue: o,
+        id: a,
         step: "1",
         type: "time",
-        value: o
+        value: n
       }
     )
   ] });
-}, A = (t) => {
-  const { className: r, slot: o, ...a } = t;
-  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(n.Positioner, { "data-slot": "date-picker-positioner", children: /* @__PURE__ */ e(
-    n.Content,
+}, A = (r) => {
+  const { className: a, slot: n, ...o } = r;
+  return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(i.Positioner, { "data-slot": "date-picker-positioner", children: /* @__PURE__ */ e(
+    i.Content,
     {
       className: s(
         "[--cell-size:--spacing(8)]",
@@ -78,40 +84,40 @@ const y = m, G = (t) => {
         "data-[state=closed]:animate-out data-[state=open]:animate-in",
         "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
         "motion-reduce:animate-none!",
-        r
+        a
       ),
-      ...a,
-      "data-slot": o ?? "date-picker-content"
+      ...o,
+      "data-slot": n ?? "date-picker-content"
     }
   ) }) });
-}, _ = (t) => {
-  const { className: r, slot: o, ...a } = t;
+}, F = (r) => {
+  const { className: a, slot: n, ...o } = r;
   return /* @__PURE__ */ e(
-    n.ValueText,
+    i.ValueText,
     {
-      className: s("font-medium text-sm", r),
-      ...a,
-      "data-slot": o ?? "date-picker-value"
+      className: s("font-medium text-sm", a),
+      ...o,
+      "data-slot": n ?? "date-picker-value"
     }
   );
-}, $ = ({
-  slot: t,
-  ...r
+}, _ = ({
+  slot: r,
+  ...a
 }) => /* @__PURE__ */ e(
-  x,
+  C,
   {
-    ...r,
-    slot: t ?? "date-picker-preset-trigger"
+    ...a,
+    slot: r ?? "date-picker-preset-trigger"
   }
 );
 export {
-  G as DatePicker,
+  V as DatePicker,
   A as DatePickerContent,
-  V as DatePickerInput,
-  $ as DatePickerPresetTrigger,
-  B as DatePickerTimer,
-  j as DatePickerTrigger,
-  _ as DatePickerValue,
-  y as useDatePicker
+  B as DatePickerInput,
+  _ as DatePickerPresetTrigger,
+  O as DatePickerTimer,
+  q as DatePickerTrigger,
+  F as DatePickerValue,
+  j as useDatePicker
 };
 //# sourceMappingURL=date-picker.js.map

package/dist/simples/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../src/simples/date-picker.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDatePicker,\n  useDatePickerContext,\n} from \"@ark-ui/react/date-picker\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport {\n  Calendar,\n  CalendarPresetTrigger,\n} from \"./calendar\";\nimport type { Input, InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useDatePicker = useDatePickerContext;\n\nexport const DatePicker = (props: React.ComponentProps<typeof Calendar>) => {\n  const { positioning = { placement: \"top\" }, slot, ...rest } = props;\n\n  return (\n    <Calendar\n      inline={false}\n      positioning={positioning}\n      {...rest}\n      slot={slot ?? \"date-picker\"}\n    />\n  );\n};\n\nexport const DatePickerTrigger = (\n  props: React.ComponentProps<typeof ArkDatePicker.Trigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <ArkDatePicker.Trigger\n        className={cn(\n          \"justify-start\",\n          \"text-start data-placeholder-shown:[&>span]:text-muted-foreground\",\n          \"active:scale-100\",\n          \"[&_svg:not([class*='text-'])]:opacity-64\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"date-picker-trigger\"}\n      >\n        {children}\n      </ArkDatePicker.Trigger>\n    </ArkDatePicker.Control>\n  );\n};\n\ninterface DatePickerInputProps\n  extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, \"size\">,\n    InputProps {}\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const { size, className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDatePicker.Input asChild {...rest}>\n          <InputGroupInput slot={slot ?? \"date-picker-input\"} />\n        </ArkDatePicker.Input>\n\n        <InputGroupAddon align=\"inline-end\">\n          {/* One size for the chain, and it used to declare two: the outer `InputGroupButton` asked\n              for `icon-sm` and the inner `Button` — which exists only because Ark's Trigger needs a\n              child to hand its props to — overrode it with `icon-md`. The outer one is the size a\n              control inside a group has, so the inner declares none. */}\n          <InputGroupButton asChild size=\"icon-sm\" variant=\"ghost\">\n            <ArkDatePicker.Trigger asChild>\n              <Button slot=\"date-picker-trigger\" variant=\"ghost\">\n                <CalendarIcon aria-hidden className=\"text-muted-foreground\" />\n              </Button>\n            </ArkDatePicker.Trigger>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nexport const DatePickerTimer = (props: React.ComponentProps<typeof Input>) => {\n  const { id, value, defaultValue, className, ...rest } = props;\n\n  return (\n    <InputGroup {...rest}>\n      <InputGroupAddon>\n        <ClockIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        className={cn(\n          \"[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\",\n          className\n        )}\n        defaultValue={defaultValue}\n        id={id}\n        step=\"1\"\n        type=\"time\"\n        value={value}\n      />\n    </InputGroup>\n  );\n};\n\nexport const DatePickerContent = (\n  props: React.ComponentProps<typeof ArkDatePicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkDatePicker.Positioner data-slot=\"date-picker-positioner\">\n        <ArkDatePicker.Content\n          className={cn(\n            \"[--cell-size:--spacing(8)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"w-fit min-w-72\",\n            \"p-3\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"date-picker-content\"}\n        />\n      </ArkDatePicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerValue = (\n  props: React.ComponentProps<typeof ArkDatePicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"date-picker-value\"}\n    />\n  );\n};\n\nexport const DatePickerPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => (\n  <CalendarPresetTrigger\n    {...rest}\n    slot={slot ?? \"date-picker-preset-trigger\"}\n  />\n);\n"],"names":["useDatePicker","useDatePickerContext","DatePicker","props","positioning","slot","rest","jsx","Calendar","DatePickerTrigger","className","children","ArkDatePicker","cn","DatePickerInput","size","jsxs","InputGroup","InputGroupInput","InputGroupAddon","InputGroupButton","Button","CalendarIcon","DatePickerTimer","id","value","defaultValue","ClockIcon","DatePickerContent","Portal","DatePickerValue","DatePickerPresetTrigger","CalendarPresetTrigger"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","sources":["../../src/simples/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  DatePicker as ArkDatePicker,\n  useDatePickerContext,\n} from \"@ark-ui/react/date-picker\";\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport {\n  Calendar,\n  CalendarPresetTrigger,\n} from \"./calendar\";\nimport type { Input, InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useDatePicker = useDatePickerContext;\n\n// Ark's `useDatePicker` reads no `useFieldContext` (it takes environment and locale only), so a\n// `Field disabled` greyed the input while the popover still opened and a click still wrote a value.\n// Bridged here the way `RadioGroup` does it: state flags only, explicit props win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before the machine sees it.\nexport const DatePicker = (props: React.ComponentProps<typeof Calendar>) => {\n  const { positioning = { placement: \"top\" }, slot, ...rest } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <Calendar\n      disabled={field?.disabled}\n      inline={false}\n      invalid={field?.invalid}\n      positioning={positioning}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      {...rest}\n      slot={slot ?? \"date-picker\"}\n    />\n  );\n};\n\nexport const DatePickerTrigger = (\n  props: React.ComponentProps<typeof ArkDatePicker.Trigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <ArkDatePicker.Trigger\n        className={cn(\n          \"justify-start\",\n          \"text-start data-placeholder-shown:[&>span]:text-muted-foreground\",\n          \"active:scale-100\",\n          \"[&_svg:not([class*='text-'])]:opacity-64\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"date-picker-trigger\"}\n      >\n        {children}\n      </ArkDatePicker.Trigger>\n    </ArkDatePicker.Control>\n  );\n};\n\ninterface DatePickerInputProps\n  extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, \"size\">,\n    InputProps {}\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const { size, className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDatePicker.Input asChild {...rest}>\n          <InputGroupInput slot={slot ?? \"date-picker-input\"} />\n        </ArkDatePicker.Input>\n\n        <InputGroupAddon align=\"inline-end\">\n          {/* One size for the chain, and it used to declare two: the outer `InputGroupButton` asked\n              for `icon-sm` and the inner `Button` — which exists only because Ark's Trigger needs a\n              child to hand its props to — overrode it with `icon-md`. The outer one is the size a\n              control inside a group has, so the inner declares none. */}\n          <InputGroupButton asChild size=\"icon-sm\" variant=\"ghost\">\n            <ArkDatePicker.Trigger asChild>\n              <Button slot=\"date-picker-trigger\" variant=\"ghost\">\n                <CalendarIcon aria-hidden className=\"text-muted-foreground\" />\n              </Button>\n            </ArkDatePicker.Trigger>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nexport const DatePickerTimer = (props: React.ComponentProps<typeof Input>) => {\n  const { id, value, defaultValue, className, ...rest } = props;\n\n  return (\n    <InputGroup {...rest}>\n      <InputGroupAddon>\n        <ClockIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        className={cn(\n          \"[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\",\n          className\n        )}\n        defaultValue={defaultValue}\n        id={id}\n        step=\"1\"\n        type=\"time\"\n        value={value}\n      />\n    </InputGroup>\n  );\n};\n\nexport const DatePickerContent = (\n  props: React.ComponentProps<typeof ArkDatePicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkDatePicker.Positioner data-slot=\"date-picker-positioner\">\n        <ArkDatePicker.Content\n          className={cn(\n            \"[--cell-size:--spacing(8)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"w-fit min-w-72\",\n            \"p-3\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"date-picker-content\"}\n        />\n      </ArkDatePicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerValue = (\n  props: React.ComponentProps<typeof ArkDatePicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"date-picker-value\"}\n    />\n  );\n};\n\nexport const DatePickerPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => (\n  <CalendarPresetTrigger\n    {...rest}\n    slot={slot ?? \"date-picker-preset-trigger\"}\n  />\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwBO;AAOL;AAIA;AACE;AAAC;AAAA;AACkB;AACT;AACQ;AAChB;AACiB;AACA;AACb;AACU;AAAA;AAGpB;AAKE;AAEA;AAEI;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAIT;AAOE;AAEA;AAGM;AAEA;AAcA;AAIR;AAGE;AAEA;AAEI;AAEA;AACA;AAAC;AAAA;AACY;AACT;AACA;AAAA;AAEF;AACA;AACK;AACA;AACL;AAAA;AAAA;AAIR;AAKE;AAEA;AAGM;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAK7B;AAKE;AAEA;AACE;AAAe;AAAd;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAEwC;AACtC;AAEF;AACE;AAAC;AAAA;AACK;AACU;AAChB;;;;;;;;;;;"}

package/dist/simples/field.d.ts

@@ -43,7 +43,14 @@ interface FieldLegendProps extends React.ComponentProps<typeof ArkFieldset.Legen
     variant?: "legend" | "label";
 }
 export declare const FieldLegend: (props: FieldLegendProps) => React.JSX.Element;
-export declare const FieldGroup: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+interface FieldGroupProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * Lay the fields out in a grid: one to four equal columns, or `"auto"` to fit as many as the
+     * width allows. Omitted, they stack. A field that should span the row takes `col-span-full`.
+     */
+    columns?: 1 | 2 | 3 | 4 | "auto";
+}
+export declare const FieldGroup: (props: FieldGroupProps) => React.JSX.Element;
 export declare const FieldContent: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
 export declare const FieldLabel: (props: React.ComponentProps<typeof ArkField.Label>) => React.JSX.Element;
 /**
@@ -56,7 +63,33 @@ export declare const FieldRequiredIndicator: (props: React.ComponentProps<typeof
 export declare const FieldTitle: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
 export declare const FieldDescription: (props: React.ComponentProps<typeof ark.p>) => React.JSX.Element;
 export declare const FieldSeparator: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
-export declare const FieldHelper: (props: React.ComponentProps<typeof ArkField.HelperText>) => React.JSX.Element;
+declare const fieldHelperVariants: import('tailwind-variants').TVReturnType<{
+    tone: {
+        muted: string;
+        info: string;
+        warning: string;
+    };
+}, undefined, "text-sm", {
+    tone: {
+        muted: string;
+        info: string;
+        warning: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    tone: {
+        muted: string;
+        info: string;
+        warning: string;
+    };
+}, undefined, "text-sm", unknown, unknown, undefined>>;
+interface FieldHelperProps extends React.ComponentProps<typeof ArkField.HelperText>, VariantProps<typeof fieldHelperVariants> {
+}
+/**
+ * The one message wired into the control's `aria-describedby`, and there is one per `Field`: Ark
+ * gives every `HelperText` the same id, so a second would collide. A warning beside a description
+ * is therefore this part with a `tone` for the warning and `FieldDescription` for the description.
+ */
+export declare const FieldHelper: (props: FieldHelperProps) => React.JSX.Element;
 export declare const FieldError: (props: React.ComponentProps<typeof ArkField.ErrorText>) => React.JSX.Element;
 export declare const FieldSetHelper: (props: React.ComponentProps<typeof ArkFieldset.HelperText>) => React.JSX.Element;
 export declare const FieldSetError: (props: React.ComponentProps<typeof ArkFieldset.ErrorText>) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/simples/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EACL,KAAK,IAAI,QAAQ,EAElB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,QAAQ,+CAAqB,CAAC;AAE3C,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAqCjB,CAAC;AAEH,UAAU,UACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,EAChD,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAWtC,CAAC;AAEF,eAAO,MAAM,QAAQ,GACnB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBAiBrD,CAAC;AAEF,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,MAAM,CAAC;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAgBlD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAgBrE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAevE,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,sBAoBnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,iBAAiB,CAAC,sBA2B/D,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAgBrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,sBAmBzE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAiCzE,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,UAAU,CAAC,sBAWxD,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,sBAcvD,CAAC;AAOF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,sBAW3D,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,sBAc1D,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/simples/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EACL,KAAK,IAAI,QAAQ,EAElB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,QAAQ,+CAAqB,CAAC;AAE3C,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAqCjB,CAAC;AAEH,UAAU,UACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,EAChD,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAWtC,CAAC;AAEF,eAAO,MAAM,QAAQ,GACnB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBAiBrD,CAAC;AAEF,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,MAAM,CAAC;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAgBlD,CAAC;AA0BF,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACpE;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAUhD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAevE,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,sBAoBnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,iBAAiB,CAAC,sBA2B/D,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAgBrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,sBAmBzE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAiCzE,CAAC;AAEF,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;sDAavB,CAAC;AAEH,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,UAAU,CAAC,EACtD,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAWlD,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,sBAcvD,CAAC;AAOF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,UAAU,CAAC,sBAW3D,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,sBAc1D,CAAC"}