@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/FacetFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetFilter.js","sources":["../../src/simples/FacetFilter.tsx"],"sourcesContent":["\"use client\";\n\nimport { createListCollection } from \"@ark-ui/react/collection\";\nimport { useFilter } from \"@ark-ui/react/locale\";\nimport { ListFilterIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Badge } from \"./badge\";\nimport { Button } from \"./button\";\nimport {\n  Listbox,\n  ListboxContent,\n  ListboxEmpty,\n  ListboxInput,\n  ListboxItem,\n  ListboxItemIndicator,\n  ListboxItemText,\n} from \"./listbox\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { Separator } from \"./separator\";\n\nexport interface FacetFilterItem {\n  value: string;\n  label?: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** Rows behind this value, drawn at the row's end. */\n  count?: number;\n}\n\nexport interface FacetFilterProps\n  extends Omit<React.ComponentProps<typeof Button>, \"children\" | \"onSelect\"> {\n  /** Trigger label. */\n  label?: React.ReactNode;\n  /** The values on offer. */\n  items: readonly FacetFilterItem[];\n  /** The values currently filtered on. */\n  value: readonly string[];\n  onValueChange: (next: string[]) => void;\n  /** Tick any number of values. `false` keeps at most one ticked. */\n  multiple?: boolean;\n  /**\n   * Draw a filter field above the list, narrowing the rows on offer.\n   *\n   * Deliberately a prop and never a count threshold: the caller knows whether the column is\n   * `provider` or `subject_uri`, and a control that grows a search field once the crossfilter\n   * pushes it past *n* values reshapes itself under the cursor.\n   *\n   * @default false\n   */\n  searchable?: boolean;\n  /** Placeholder for the `searchable` field. */\n  searchPlaceholder?: string;\n  /** Accessible name for the `searchable` field. */\n  searchLabel?: string;\n  /** Shown when the `searchable` query excludes every row. Not the same state as `empty`. */\n  searchEmpty?: React.ReactNode;\n  /** Shown when there is nothing to offer. */\n  empty?: React.ReactNode;\n  /** A footnote under the list — a truncation notice, a hint. */\n  note?: React.ReactNode;\n  /** Class for the popover surface; `className` styles the trigger. */\n  contentClassName?: string;\n}\n\n/**\n * The surface behind every facet filter: a trigger that reports its own count, a listbox of\n * values, and a way out.\n *\n * A filter is **a value**, not a command, so this is a listbox and not a menu of checkbox items.\n * Where the values come from and\n * where the choice goes are the caller's: TanStack facets on one side of this library, a Mosaic\n * clause on the other. What is *not* the caller's are the two rules below, which both adapters\n * had independently rediscovered, and which are invisible until they bite — and which both have to\n * survive `searchable`, because a query that hides a ticked row takes the untick with it.\n */\nexport const FacetFilter = (props: FacetFilterProps) => {\n  const {\n    label,\n    items,\n    value,\n    onValueChange,\n    multiple = true,\n    searchable = false,\n    searchPlaceholder = \"Filter values…\",\n    searchLabel = \"Filter values\",\n    searchEmpty = \"No matching values.\",\n    empty = \"No values.\",\n    note,\n    className,\n    contentClassName,\n    size = \"sm\",\n    variant = \"outline\",\n    slot,\n    ...rest\n  } = props;\n\n  const [query, setQuery] = useState(\"\");\n  const fieldRef = useRef<HTMLInputElement>(null);\n  // Locale-aware, \"base\" sensitivity: case and accents do not block a match, which is what a\n  // user typing `coruna` at a list containing `A Coruña` expects. Same call `Combobox` makes.\n  //\n  // The options object is hoisted, not inlined, because `useFilter` memoises on it by identity —\n  // an inline literal hands back a fresh `contains` every render, which rebuilds the collection\n  // every render, which makes the listbox re-sync its highlight in a microtask while you are still\n  // typing. The visible symptom is dropped keystrokes, and it points nowhere near here.\n  const { contains } = useFilter(FILTER_SENSITIVITY);\n\n  const entries = useMemo(() => {\n    const listed = new Map(items.map((item) => [item.value, item]));\n    // A ticked value that another filter has since faceted away stays listed — otherwise it sits\n    // in the filter with nothing to untick, and the only way out is a reload.\n    for (const chosen of value) {\n      if (!listed.has(chosen)) listed.set(chosen, { value: chosen });\n    }\n    // Sorted by label, never by count: ordering by frequency reshuffles the list under the cursor\n    // every time another filter moves, so you tick the row that took the place of the one you read.\n    return [...listed.values()].sort((a, b) =>\n      facetLabel(a).localeCompare(facetLabel(b))\n    );\n  }, [items, value]);\n\n  const trimmed = searchable ? query.trim() : \"\";\n\n  const visible = useMemo(() => {\n    if (!trimmed) return entries;\n    const ticked = new Set(value);\n    // A ticked value is never hidden by the query: unticking it is the only way back out, and a\n    // filter you cannot undo from the surface that set it needs a reload.\n    return entries.filter(\n      (item) => ticked.has(item.value) || contains(facetLabel(item), trimmed)\n    );\n  }, [contains, entries, trimmed, value]);\n\n  // Built from what is drawn, not from what was offered: Ark navigates the collection, so an item\n  // filtered out of the DOM but left in here is a row the arrow keys highlight and nobody can see.\n  const collection = useMemo(\n    () =>\n      createListCollection({\n        items: visible,\n        itemToValue: (item) => item.value,\n        itemToString: facetLabel,\n      }),\n    [visible]\n  );\n\n  const chosen = [...value];\n  // Two empty states, and they are not the same news. `empty` means the facet offers nothing —\n  // still loading, or a column with no values under the current crossfilter. `searchEmpty` means\n  // your query excluded everything the facet did offer, which clears itself when you retype.\n  const queryExcludedAll = visible.length === 0 && entries.length > 0;\n\n  return (\n    // Not modal, unlike our `Popover` default. A filter is judged by what changes behind it, and a\n    // modal popover marks the rest of the page `aria-hidden` — so the table you are filtering\n    // becomes unreadable to a screen reader at the exact moment it is being filtered.\n    //\n    // The query resets with the surface, because `Popover` unmounts its content on exit: the\n    // input's DOM value goes with it while this state would not, leaving a reopened filter showing\n    // every row from a query it still believes in.\n    //\n    // `initialFocusEl` aims the popover's opening focus at the field when there is one. Zag's\n    // default lands on the content itself, and it lands *late* — so a first keystroke typed\n    // straight after opening goes to the list as typeahead, and the focus then moves out from\n    // under the caret. Pointing it at the field makes \"open it and start typing\" work, which is\n    // the only reason a filter field is there.\n    <Popover\n      initialFocusEl={searchable ? () => fieldRef.current : undefined}\n      modal={false}\n      onOpenChange={() => setQuery(\"\")}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          className={className}\n          size={size}\n          variant={variant}\n          {...rest}\n          slot={slot ?? \"facet-filter\"}\n        >\n          <ListFilterIcon />\n          {label}\n          {chosen.length > 0 && (\n            <Badge size=\"xs\" variant=\"secondary\">\n              {chosen.length}\n            </Badge>\n          )}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        className={cn(\"w-56 p-1\", contentClassName)}\n        slot=\"facet-filter-content\"\n      >\n        {/* No `deselectable`, deliberately. Zag's listbox binds Escape to VALUE.CLEAR when it is\n            set, and calls `stopPropagation()` doing so — which wipes the filter *and* swallows the\n            key the popover needed to dismiss. Escape must close a popover; it must not silently\n            discard what you filtered. Leaving it off also matches `Select`, where clicking the\n            chosen option does not unchoose it either: clearing is what the clear affordance below\n            is for. See the pinned tests in `listbox.test.tsx`. */}\n        <Listbox\n          collection={collection}\n          onValueChange={(details) => onValueChange(details.value)}\n          selectionMode={multiple ? \"multiple\" : \"single\"}\n          value={chosen}\n        >\n          {searchable && (\n            // `autoHighlight` is Ark's, off by default and worth turning on here: it re-highlights\n            // the first row of the collection every time the collection changes, so typing leaves\n            // the top match under Enter instead of requiring an ArrowDown first. `keyboardPriority`\n            // stays \"caret\" — Home/End belong to the text you are editing.\n            <ListboxInput\n              aria-label={searchLabel}\n              autoHighlight\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder={searchPlaceholder}\n              ref={fieldRef}\n              size=\"sm\"\n              value={query}\n            />\n          )}\n\n          <ListboxContent className=\"max-h-72 overflow-y-auto\">\n            {visible.map((item) => {\n              const Icon = item.icon;\n\n              return (\n                <ListboxItem item={item} key={item.value}>\n                  {Icon && <Icon />}\n                  <ListboxItemText>{item.label ?? item.value}</ListboxItemText>\n                  {item.count !== undefined && (\n                    <span className=\"text-muted-foreground text-xs tabular-nums\">\n                      {item.count}\n                    </span>\n                  )}\n                  <ListboxItemIndicator />\n                </ListboxItem>\n              );\n            })}\n\n            <ListboxEmpty>{queryExcludedAll ? searchEmpty : empty}</ListboxEmpty>\n          </ListboxContent>\n        </Listbox>\n\n        {note && (\n          <p\n            className=\"px-2 py-1.5 text-muted-foreground text-xs\"\n            data-slot=\"facet-filter-note\"\n          >\n            {note}\n          </p>\n        )}\n\n        {/* Clearing is a command, so it is a button and not a row of the listbox — putting it in\n            the list would make \"clear\" look like one more value you can filter on. */}\n        {chosen.length > 0 && (\n          <>\n            <Separator className=\"my-1\" />\n            <Button\n              className=\"w-full justify-center\"\n              slot=\"facet-filter-clear\"\n              onClick={() => onValueChange([])}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              Clear filter\n            </Button>\n          </>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nconst FILTER_SENSITIVITY = { sensitivity: \"base\" } as const;\n\nconst facetLabel = (item: FacetFilterItem) =>\n  typeof item.label === \"string\" ? item.label : item.value;\n"],"names":[],"mappings":";;;;;;;;;;;;AA4EO;AACL;AAAM;AACJ;AACA;AACA;AACA;AACW;AACE;AACO;AACN;AACA;AACN;AACR;AACA;AACA;AACO;AACG;AACV;AACG;AAeH;AAGA;AACE;AAIF;AAA4B;AACe;AAAA;AAO3C;AACA;AAGA;AAAe;AACyD;AAAA;AAMvD;AAEM;AACZ;AACqB;AACd;AACf;AACK;AASV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcE;AAAC;AAAA;AACuD;AAC/C;AACwB;AAE/B;AACE;AAAC;AAAA;AACC;AACA;AACA;AACI;AACU;AAEd;AAAgB;AACf;AAIC;AAAA;AAAA;AAGN;AAEA;AAAC;AAAA;AAC2C;AACrC;AAQL;AAAA;AAAC;AAAA;AACC;AACuD;AAChB;AAChC;AAEN;AAAA;AAAA;AAAA;AAAA;AAKC;AAAC;AAAA;AACa;AACC;AACmC;AACnC;AACR;AACA;AACE;AAAA;AAAA;AAKR;AACC;AAEA;AAEK;AAAc;AAC4B;AAIzC;AAEoB;AACxB;AAEH;AAEqD;AACxD;AAAA;AAAA;AAAA;AAIA;AAAC;AAAA;AACW;AACA;AAET;AAAA;AAAA;AAQD;AAA4B;AAC5B;AAAC;AAAA;AACW;AACL;AAC0B;AAC1B;AACG;AACT;AAAA;AAAA;AAGH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AAGN;;;;"}

package/dist/simples/FieldArray.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export interface FieldArrayProps {
+    /** Rows to render. The consumer owns the count — it may include not-yet-committed rows. */
+    count: number;
+    /**
+     * Stable key for row `index`.
+     *
+     * NOT optional, and never the bare index. A row that is only a UI placeholder must
+     * already carry the key it will have once committed; if the key changes on commit,
+     * React remounts the input and the user loses focus and caret mid-typing.
+     */
+    rowKey: (index: number) => string;
+    children: (index: number) => ReactNode;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    /** Hide "Add" — e.g. a maximum was reached, or the field is read-only. Default true. */
+    canAdd?: boolean;
+    /** Hide every remove control. Default true. */
+    canRemove?: boolean;
+    addLabel?: ReactNode;
+    /** Accessible name for each row's remove control. Default "Remove". */
+    removeLabel?: string;
+    /**
+     * Row cross-axis alignment. "center" suits single-line controls; "start" suits rows
+     * whose content is a block (a nested form, a textarea).
+     */
+    align?: "center" | "start";
+    className?: string;
+}
+/**
+ * The repeatable-rows layout: N rows, a remove control per row, and an add control below.
+ *
+ * Deliberately stateless and unaware of cardinality — it renders exactly `count` rows and
+ * reports intent. Whoever owns the data decides what "add" means and whether another row
+ * is allowed, which is what lets the same component sit on top of a form library, a plain
+ * array, or a graph.
+ */
+export declare function FieldArray({ count, rowKey, children, onAdd, onRemove, canAdd, canRemove, addLabel, removeLabel, align, className, }: FieldArrayProps): import("react").JSX.Element;
+export declare namespace FieldArray {
+    var displayName: string;
+}
+//# sourceMappingURL=FieldArray.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldArray.d.ts","sourceRoot":"","sources":["../../src/simples/FieldArray.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACvC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAa,EACb,SAAgB,EAChB,QAAgB,EAChB,WAAsB,EACtB,KAAgB,EAChB,SAAS,GACV,EAAE,eAAe,+BA+CjB;yBA3De,UAAU"}

package/dist/simples/FieldArray.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { XIcon as v, PlusIcon as y } from "lucide-react";
+import { cn as i } from "../lib/cn.js";
+import { Button as l } from "./button.js";
+function N({
+  count: o,
+  rowKey: c,
+  children: n,
+  onAdd: m,
+  onRemove: d,
+  canAdd: f = !0,
+  canRemove: p = !0,
+  addLabel: x = "Add",
+  removeLabel: h = "Remove",
+  align: s = "center",
+  className: u
+}) {
+  const t = [];
+  for (let e = 0; e < o; e++)
+    t.push(
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: i(
+            "flex gap-2",
+            s === "center" ? "items-center" : "items-start"
+          ),
+          "data-slot": "field-array-row",
+          children: [
+            /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: n(e) }),
+            p && /* @__PURE__ */ r(
+              l,
+              {
+                "aria-label": h,
+                className: s === "start" ? "mt-0.5" : void 0,
+                onClick: () => d(e),
+                size: "icon-sm",
+                variant: "ghost",
+                children: /* @__PURE__ */ r(v, {})
+              }
+            )
+          ]
+        },
+        c(e)
+      )
+    );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i("flex flex-col gap-2", u),
+      "data-slot": "field-array",
+      children: [
+        t,
+        f && /* @__PURE__ */ a(
+          l,
+          {
+            className: "self-start",
+            onClick: m,
+            size: "sm",
+            variant: "secondary",
+            children: [
+              /* @__PURE__ */ r(y, {}),
+              x
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+N.displayName = "FieldArray";
+export {
+  N as FieldArray
+};
+//# sourceMappingURL=FieldArray.js.map

package/dist/simples/FieldArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldArray.js","sources":["../../src/simples/FieldArray.tsx"],"sourcesContent":["\"use client\";\n\nimport { PlusIcon, XIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { Button } from \"./button.js\";\n\nexport interface FieldArrayProps {\n  /** Rows to render. The consumer owns the count — it may include not-yet-committed rows. */\n  count: number;\n  /**\n   * Stable key for row `index`.\n   *\n   * NOT optional, and never the bare index. A row that is only a UI placeholder must\n   * already carry the key it will have once committed; if the key changes on commit,\n   * React remounts the input and the user loses focus and caret mid-typing.\n   */\n  rowKey: (index: number) => string;\n  children: (index: number) => ReactNode;\n  onAdd: () => void;\n  onRemove: (index: number) => void;\n  /** Hide \"Add\" — e.g. a maximum was reached, or the field is read-only. Default true. */\n  canAdd?: boolean;\n  /** Hide every remove control. Default true. */\n  canRemove?: boolean;\n  addLabel?: ReactNode;\n  /** Accessible name for each row's remove control. Default \"Remove\". */\n  removeLabel?: string;\n  /**\n   * Row cross-axis alignment. \"center\" suits single-line controls; \"start\" suits rows\n   * whose content is a block (a nested form, a textarea).\n   */\n  align?: \"center\" | \"start\";\n  className?: string;\n}\n\n/**\n * The repeatable-rows layout: N rows, a remove control per row, and an add control below.\n *\n * Deliberately stateless and unaware of cardinality — it renders exactly `count` rows and\n * reports intent. Whoever owns the data decides what \"add\" means and whether another row\n * is allowed, which is what lets the same component sit on top of a form library, a plain\n * array, or a graph.\n */\nexport function FieldArray({\n  count,\n  rowKey,\n  children,\n  onAdd,\n  onRemove,\n  canAdd = true,\n  canRemove = true,\n  addLabel = \"Add\",\n  removeLabel = \"Remove\",\n  align = \"center\",\n  className,\n}: FieldArrayProps) {\n  const rows = [];\n  for (let index = 0; index < count; index++) {\n    rows.push(\n      <div\n        className={cn(\n          \"flex gap-2\",\n          align === \"center\" ? \"items-center\" : \"items-start\"\n        )}\n        data-slot=\"field-array-row\"\n        key={rowKey(index)}\n      >\n        <div className=\"min-w-0 flex-1\">{children(index)}</div>\n        {canRemove && (\n          <Button\n            aria-label={removeLabel}\n            className={align === \"start\" ? \"mt-0.5\" : undefined}\n            onClick={() => onRemove(index)}\n            size=\"icon-sm\"\n            variant=\"ghost\"\n          >\n            <XIcon />\n          </Button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2\", className)}\n      data-slot=\"field-array\"\n    >\n      {rows}\n      {canAdd && (\n        <Button\n          className=\"self-start\"\n          onClick={onAdd}\n          size=\"sm\"\n          variant=\"secondary\"\n        >\n          <PlusIcon />\n          {addLabel}\n        </Button>\n      )}\n    </div>\n  );\n}\nFieldArray.displayName = \"FieldArray\";\n"],"names":["FieldArray"],"mappings":";;;;;AA4CO;AAAoB;AACzB;AACA;AACA;AACA;AACA;AACS;AACG;AACD;AACG;AACN;AAEV;AACE;AACA;AACE;AAAK;AACH;AAAC;AAAA;AACY;AACT;AACsC;AAAA;AAE9B;AAGV;AAAiD;AAE/C;AAAC;AAAA;AACa;AAC8B;AACb;AACxB;AACG;AAED;AAAA;AAAA;AACT;AAAA;AAZe;AAAA;AAkBvB;AACE;AAAC;AAAA;AAC+C;AACpC;AAET;AAAA;AAEC;AAAC;AAAA;AACW;AACD;AACJ;AACG;AAER;AAAU;AACT;AAAA;AAAA;AAAA;AACH;AAAA;AAIR;AACAA;;;;"}

package/dist/simples/Link.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Link — a token-styled anchor, and the only component in the library emitting
+ * `data-slot="link"`. `variant` picks the treatment; a router link takes the same treatment by
+ * spreading `linkVariants()` onto it. (Generic layout stays in the product via Tailwind — the DS
+ * ships no `Flex`/`Box`/`Grid`.)
+ *
+ * `linkVariants` is module-level and deliberately not on the barrel, which is where every other
+ * recipe with no cross-module importer sits: exported, a variant object freezes a class list as
+ * API. `index.test.ts` pins that.
+ */
+export declare const linkVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        subtle: string;
+        plain: string;
+    };
+}, undefined, "rounded-sm underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", {
+    variant: {
+        default: string;
+        subtle: string;
+        plain: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        subtle: string;
+        plain: string;
+    };
+}, undefined, "rounded-sm underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", unknown, unknown, undefined>>;
+export interface LinkProps extends React.ComponentProps<"a">, VariantProps<typeof linkVariants> {
+}
+export declare function Link({ variant, className, ref, slot, ...rest }: LinkProps): React.JSX.Element;
+export declare namespace Link {
+    var displayName: string;
+}
+//# sourceMappingURL=Link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/simples/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;wJAUvB,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;CAAG;AAElG,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,qBAEzE;yBAFe,IAAI"}

package/dist/simples/Link.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { tv as a } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
+const s = a({
+  base: "rounded-sm underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "text-primary hover:underline",
+      subtle: "text-muted-foreground hover:text-foreground hover:underline",
+      plain: "text-inherit no-underline hover:underline"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+function u({ variant: n, className: e, ref: r, slot: i, ...t }) {
+  return /* @__PURE__ */ o("a", { ref: r, className: l(s({ variant: n }), e), ...t, "data-slot": i ?? "link" });
+}
+u.displayName = "Link";
+export {
+  u as Link,
+  s as linkVariants
+};
+//# sourceMappingURL=Link.js.map

package/dist/simples/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../src/simples/Link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Link — a token-styled anchor, and the only component in the library emitting\n * `data-slot=\"link\"`. `variant` picks the treatment; a router link takes the same treatment by\n * spreading `linkVariants()` onto it. (Generic layout stays in the product via Tailwind — the DS\n * ships no `Flex`/`Box`/`Grid`.)\n *\n * `linkVariants` is module-level and deliberately not on the barrel, which is where every other\n * recipe with no cross-module importer sits: exported, a variant object freezes a class list as\n * API. `index.test.ts` pins that.\n */\nexport const linkVariants = tv({\n  base: \"rounded-sm underline-offset-4 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring\",\n  variants: {\n    variant: {\n      default: \"text-primary hover:underline\",\n      subtle: \"text-muted-foreground hover:text-foreground hover:underline\",\n      plain: \"text-inherit no-underline hover:underline\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\nexport interface LinkProps extends React.ComponentProps<\"a\">, VariantProps<typeof linkVariants> {}\n\nexport function Link({ variant, className, ref, slot, ...rest }: LinkProps) {\n  return <a ref={ref} className={cn(linkVariants({ variant }), className)} {...rest} data-slot={slot ?? \"link\"} />;\n}\nLink.displayName = \"Link\";\n"],"names":["linkVariants","tv","Link","variant","className","ref","slot","rest","cn"],"mappings":";;;;AAcO,MAAMA,IAAeC,EAAG;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB,EAAE,SAAS,UAAA;AAC9B,CAAC;AAIM,SAASC,EAAK,EAAE,SAAAC,GAAS,WAAAC,GAAW,KAAAC,GAAK,MAAAC,GAAM,GAAGC,KAAmB;AAC1E,2BAAQ,KAAA,EAAE,KAAAF,GAAU,WAAWG,EAAGR,EAAa,EAAE,SAAAG,EAAA,CAAS,GAAGC,CAAS,GAAI,GAAGG,GAAM,aAAWD,KAAQ,QAAQ;AAChH;AACAJ,EAAK,cAAc;"}

package/dist/simples/accordion.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as ArkAccordion } from '@ark-ui/react/accordion';
+import { default as React } from 'react';
+export declare const useAccordion: () => import('@ark-ui/react').UseAccordionContext;
+export declare const Accordion: (props: React.ComponentProps<typeof ArkAccordion.Root>) => React.JSX.Element;
+export declare const AccordionItem: (props: React.ComponentProps<typeof ArkAccordion.Item>) => React.JSX.Element;
+export declare const AccordionItemTrigger: (props: React.ComponentProps<typeof ArkAccordion.ItemTrigger>) => React.JSX.Element;
+export declare const AccordionItemContent: (props: React.ComponentProps<typeof ArkAccordion.ItemContent>) => React.JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/simples/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,YAAY,EAE1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,mDAAsB,CAAC;AAEhD,eAAO,MAAM,SAAS,GACpB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAWtD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,sBAWtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBA0B7D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,WAAW,CAAC,sBAqB7D,CAAC"}

package/dist/simples/accordion.js

@@ -0,0 +1,78 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useAccordionContext as d, Accordion as a } from "@ark-ui/react/accordion";
+import { ChevronDownIcon as m } from "lucide-react";
+import { cn as s } from "../lib/cn.js";
+const f = d, x = (t) => {
+  const { className: o, slot: e, ...n } = t;
+  return /* @__PURE__ */ r(
+    a.Root,
+    {
+      className: s("group/accordion", o),
+      ...n,
+      "data-slot": e ?? "accordion"
+    }
+  );
+}, h = (t) => {
+  const { className: o, slot: e, ...n } = t;
+  return /* @__PURE__ */ r(
+    a.Item,
+    {
+      className: s("border-b last:border-b-0", o),
+      ...n,
+      "data-slot": e ?? "accordion-item"
+    }
+  );
+}, N = (t) => {
+  const { className: o, children: e, slot: n, ...i } = t;
+  return /* @__PURE__ */ c(
+    a.ItemTrigger,
+    {
+      className: s(
+        "flex w-full items-center justify-between gap-4",
+        "py-4 text-start font-medium text-sm",
+        "cursor-pointer transition-all hover:underline",
+        "rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        o
+      ),
+      ...i,
+      "data-slot": n ?? "accordion-item-trigger",
+      children: [
+        e,
+        /* @__PURE__ */ r(
+          a.ItemIndicator,
+          {
+            className: "data-[state=open]:[&_svg]:rotate-180",
+            "data-slot": "accordion-item-indicator",
+            children: /* @__PURE__ */ r(m, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none!" })
+          }
+        )
+      ]
+    }
+  );
+}, b = (t) => {
+  const { className: o, children: e, slot: n, ...i } = t;
+  return /* @__PURE__ */ r(
+    a.ItemContent,
+    {
+      className: s(
+        "overflow-hidden",
+        "transition-[height] duration-200",
+        "data-[state=open]:animate-expand",
+        "data-[state=closed]:animate-collapse",
+        "motion-reduce:animate-none! motion-reduce:transition-none!"
+      ),
+      ...i,
+      "data-slot": n ?? "accordion-item-content",
+      children: /* @__PURE__ */ r("div", { className: s("pb-4 text-muted-foreground text-sm", o), children: e })
+    }
+  );
+};
+export {
+  x as Accordion,
+  h as AccordionItem,
+  b as AccordionItemContent,
+  N as AccordionItemTrigger,
+  f as useAccordion
+};
+//# sourceMappingURL=accordion.js.map

package/dist/simples/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../src/simples/accordion.tsx"],"sourcesContent":["import {\n  Accordion as ArkAccordion,\n  useAccordionContext,\n} from \"@ark-ui/react/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useAccordion = useAccordionContext;\n\nexport const Accordion = (\n  props: React.ComponentProps<typeof ArkAccordion.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkAccordion.Root\n      className={cn(\"group/accordion\", className)}\n      {...rest}\n      data-slot={slot ?? \"accordion\"}\n    />\n  );\n};\n\nexport const AccordionItem = (\n  props: React.ComponentProps<typeof ArkAccordion.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkAccordion.Item\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...rest}\n      data-slot={slot ?? \"accordion-item\"}\n    />\n  );\n};\n\nexport const AccordionItemTrigger = (\n  props: React.ComponentProps<typeof ArkAccordion.ItemTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkAccordion.ItemTrigger\n      className={cn(\n        \"flex w-full items-center justify-between gap-4\",\n        \"py-4 text-start font-medium text-sm\",\n        \"cursor-pointer transition-all hover:underline\",\n        \"rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"accordion-item-trigger\"}\n    >\n      {children}\n      <ArkAccordion.ItemIndicator\n        className=\"data-[state=open]:[&_svg]:rotate-180\"\n        data-slot=\"accordion-item-indicator\"\n      >\n        <ChevronDownIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none!\" />\n      </ArkAccordion.ItemIndicator>\n    </ArkAccordion.ItemTrigger>\n  );\n};\n\nexport const AccordionItemContent = (\n  props: React.ComponentProps<typeof ArkAccordion.ItemContent>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkAccordion.ItemContent\n      className={cn(\n        \"overflow-hidden\",\n        \"transition-[height] duration-200\",\n        \"data-[state=open]:animate-expand\",\n        \"data-[state=closed]:animate-collapse\",\n        \"motion-reduce:animate-none! motion-reduce:transition-none!\"\n      )}\n      {...rest}\n      data-slot={slot ?? \"accordion-item-content\"}\n    >\n      <div className={cn(\"pb-4 text-muted-foreground text-sm\", className)}>\n        {children}\n      </div>\n    </ArkAccordion.ItemContent>\n  );\n};\n"],"names":["useAccordion","useAccordionContext","Accordion","props","className","slot","rest","jsx","ArkAccordion","cn","AccordionItem","AccordionItemTrigger","children","jsxs","ChevronDownIcon","AccordionItemContent"],"mappings":";;;;AAQO,MAAMA,IAAeC,GAEfC,IAAY,CACvBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC,EAAG,mBAAmBL,CAAS;AAAA,MACzC,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAgB,CAC3BP,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC,EAAG,4BAA4BL,CAAS;AAAA,MAClD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAuB,CAClCR,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAQ,GAAU,MAAAP,GAAM,GAAGC,MAASH;AAE/C,SACE,gBAAAU;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAO;AAAA,QACD,gBAAAL;AAAA,UAACC,EAAa;AAAA,UAAb;AAAA,YACC,WAAU;AAAA,YACV,aAAU;AAAA,YAEV,UAAA,gBAAAD,EAACO,GAAA,EAAgB,WAAU,yGAAA,CAAyG;AAAA,UAAA;AAAA,QAAA;AAAA,MACtI;AAAA,IAAA;AAAA,EAAA;AAGN,GAEaC,IAAuB,CAClCZ,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAQ,GAAU,MAAAP,GAAM,GAAGC,MAASH;AAE/C,SACE,gBAAAI;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGH;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,4BAAC,OAAA,EAAI,WAAWI,EAAG,sCAAsCL,CAAS,GAC/D,UAAAQ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/simples/action-bar.d.ts

@@ -0,0 +1,101 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { Badge } from './badge';
+import { Separator } from './separator';
+interface ActionBarPositioning {
+    /**
+     * The gutter from the edge in pixels.
+     *
+     * The bar is `fixed` to the VIEWPORT bottom, so the gutter is measured from the window edge
+     * and knows nothing about your layout: over a `ShellFooter` (or any other bottom region) the
+     * default 16px lands the bar ON TOP of it. Raise the gutter past the region's height —
+     * `gutter: "calc(var(--footer-height) + 16px)"` — or render the actions inside the footer
+     * instead.
+     *
+     * @default '16px'
+     */
+    gutter?: string;
+    /**
+     * The placement of the action bar.
+     *
+     * @default "bottom"
+     */
+    placement?: "bottom" | "bottom-start" | "bottom-end";
+}
+interface ActionBarContextValue {
+    /**
+     * The open state of the action bar
+     */
+    isOpen?: boolean;
+    /**
+     * Whether to lazy mount the action bar
+     */
+    lazyMount?: boolean;
+    /**
+     * The function to call when the action bar is closed
+     */
+    onClose?: () => void;
+    /**
+     * The function to call when the action bar is opened
+     */
+    onOpen?: () => void;
+    /**
+     * The positioning of the action bar.
+     */
+    positioning: ActionBarPositioning;
+    /**
+     * The function to call when the action bar is mounted
+     */
+    unmountOnExit?: boolean;
+}
+export interface ActionBarProps extends Pick<ActionBarContextValue, "lazyMount" | "unmountOnExit"> {
+    /**
+     * Whether to close the action bar when the Escape key is pressed.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * The default open state of the action bar.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The function to call when the open state of the action bar changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The open state of the action bar.
+     */
+    open?: boolean;
+    /**
+     * Placement and gutter of the action bar.
+     */
+    positioning?: ActionBarContextValue["positioning"];
+}
+export declare const ActionBar: (props: React.PropsWithChildren<ActionBarProps>) => React.JSX.Element;
+export interface ActionBarTriggerProps extends React.ComponentProps<typeof ark.button> {
+}
+export declare const ActionBarTrigger: (props: ActionBarTriggerProps) => React.JSX.Element;
+export interface ActionBarContentProps extends React.ComponentProps<typeof ark.div> {
+}
+export declare const ActionBarContent: (props: ActionBarContentProps) => React.JSX.Element;
+export interface ActionBarSeparatorProps extends React.ComponentProps<typeof Separator> {
+}
+export declare const ActionBarSeparator: (props: ActionBarSeparatorProps) => React.JSX.Element;
+export interface ActionBarCloseProps extends React.ComponentProps<typeof ark.button> {
+}
+export declare const ActionBarClose: (props: ActionBarCloseProps) => React.JSX.Element;
+export interface ActionBarValueProps extends React.ComponentProps<typeof Badge> {
+    /**
+     * The number of items selected
+     */
+    count: number;
+    /**
+     * The label of the selection trigger
+     */
+    label?: string;
+}
+export declare const ActionBarValue: (props: ActionBarValueProps) => React.JSX.Element;
+export declare const ActionBarBody: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=action-bar.d.ts.map

package/dist/simples/action-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.d.ts","sourceRoot":"","sources":["../../src/simples/action-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,UAAU,oBAAoB;IAC5B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC;CACtD;AAED,UAAU,qBAAqB;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,oBAAoB,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAKD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,eAAe,CAAC;IAClE;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;CACpD;AAID,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,sBAyEvE,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAyBF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;CAAG;AAEjD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBA0C5D,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC;CAAG;AAEnD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,sBAWhE,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,MAAM,CAAC;CAAG;AAEpD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA0BxD,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC;IAC1C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAaxD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAaxE,CAAC"}

package/dist/simples/action-bar.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { Portal as N } from "@ark-ui/react";
+import { ark as m } from "@ark-ui/react/factory";
+import { Presence as C } from "@ark-ui/react/presence";
+import l from "react";
+import { tv as k } from "tailwind-variants";
+import { cn as u } from "../lib/cn.js";
+import { Badge as E } from "./badge.js";
+import { Separator as O } from "./separator.js";
+const g = l.createContext(null);
+g.displayName = "ActionBarContext";
+const P = { placement: "bottom", gutter: "16px" }, R = (t) => {
+  const {
+    open: e,
+    defaultOpen: o = !1,
+    closeOnEscape: r = !0,
+    positioning: s,
+    lazyMount: n = !0,
+    unmountOnExit: i = !0,
+    onOpenChange: a,
+    ...d
+  } = t, [f, b] = l.useState(o), p = e !== void 0, x = p ? e : f, v = l.useCallback(() => {
+    p || b(!1), a == null || a(!1);
+  }, [p, a]), B = l.useCallback(() => {
+    p || b(!0), a == null || a(!0);
+  }, [p, a]);
+  l.useEffect(() => {
+    if (!x || !r)
+      return;
+    const w = (y) => {
+      y.key === "Escape" && (y.defaultPrevented || (y.preventDefault(), v()));
+    };
+    return window.addEventListener("keydown", w), () => window.removeEventListener("keydown", w);
+  }, [r, v, x]);
+  const A = l.useMemo(
+    () => ({
+      onClose: v,
+      onOpen: B,
+      isOpen: x,
+      positioning: { ...P, ...s },
+      lazyMount: n,
+      unmountOnExit: i
+    }),
+    [v, B, x, n, i, s]
+  );
+  return /* @__PURE__ */ c(g.Provider, { value: A, ...d });
+}, T = (t) => {
+  const { onClick: e, slot: o, ...r } = t, { onOpen: s, isOpen: n } = h(), i = (a) => {
+    s == null || s(), e == null || e(a);
+  };
+  return /* @__PURE__ */ c(
+    m.button,
+    {
+      "aria-expanded": n,
+      "data-state": n ? "open" : "closed",
+      onClick: i,
+      type: "button",
+      ...r,
+      "data-slot": o ?? "action-bar-trigger"
+    }
+  );
+}, j = k({
+  base: [
+    "fixed inset-x-0 bottom-0 z-50",
+    "flex",
+    "px-4 pb-[calc(var(--gutter)+env(safe-area-inset-bottom,0))]",
+    "pointer-events-none",
+    "data-[state=closed]:animate-out data-[state=open]:animate-in",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2",
+    "motion-reduce:animate-none!"
+  ],
+  variants: {
+    placement: {
+      bottom: "justify-center",
+      "bottom-end": "justify-end",
+      "bottom-start": "justify-start"
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+}), q = (t) => {
+  const { "aria-labelledby": e, className: o, slot: r, ...s } = t, { isOpen: n, lazyMount: i, unmountOnExit: a, positioning: d } = h(), f = d.placement, b = d.gutter;
+  return /* @__PURE__ */ c(N, { children: /* @__PURE__ */ c(
+    C,
+    {
+      asChild: !0,
+      lazyMount: i,
+      present: n,
+      unmountOnExit: a,
+      children: /* @__PURE__ */ c(
+        m.div,
+        {
+          className: u(j({ placement: f })),
+          "data-placement": f,
+          "data-slot": "action-bar-positioner",
+          style: { "--gutter": b },
+          children: /* @__PURE__ */ c(
+            m.div,
+            {
+              "aria-labelledby": e,
+              className: u(
+                "[--space:--spacing(2)]",
+                "flex w-fit items-center gap-1",
+                "rounded-xl border shadow-lg/5",
+                "px-[calc(var(--space)+2px)] py-(--space)",
+                "bg-popover",
+                "text-popover-foreground",
+                "pointer-events-auto",
+                o
+              ),
+              role: "toolbar",
+              ...s,
+              "data-slot": r ?? "action-bar-content"
+            }
+          )
+        }
+      )
+    }
+  ) });
+}, F = (t) => {
+  const { className: e, slot: o, ...r } = t;
+  return /* @__PURE__ */ c(
+    O,
+    {
+      className: u("mx-1 h-1/2", e),
+      orientation: "vertical",
+      ...r,
+      slot: o ?? "action-bar-separator"
+    }
+  );
+}, G = (t) => {
+  const { className: e, onClick: o, slot: r, ...s } = t, { onClose: n, isOpen: i } = h(), a = (d) => {
+    n == null || n(), o == null || o(d);
+  };
+  return /* @__PURE__ */ c(
+    m.button,
+    {
+      "aria-label": "Close",
+      className: u(
+        "opacity-64 transition-opacity",
+        "hover:opacity-100",
+        "motion-reduce:transition-none!",
+        e
+      ),
+      "data-state": i ? "open" : "closed",
+      onClick: a,
+      type: "button",
+      ...s,
+      "data-slot": r ?? "action-bar-close"
+    }
+  );
+}, H = (t) => {
+  const { label: e, count: o = 0, className: r, children: s, slot: n, ...i } = t;
+  return /* @__PURE__ */ c(
+    E,
+    {
+      className: u("shrink-0 font-medium text-sm tabular-nums", r),
+      variant: "secondary",
+      ...i,
+      slot: n ?? "action-bar-value",
+      children: s ?? e ?? o
+    }
+  );
+}, J = (t) => {
+  const { className: e, ...o } = t;
+  return /* @__PURE__ */ c(
+    m.div,
+    {
+      className: u(
+        "flex items-center gap-1",
+        "**:data-[slot=action-bar-separator]:h-2",
+        e
+      ),
+      ...o
+    }
+  );
+}, h = () => {
+  const t = l.useContext(g);
+  if (!t)
+    throw new Error("useActionBar must be used within a ActionBarProvider.");
+  return t;
+};
+export {
+  R as ActionBar,
+  J as ActionBarBody,
+  G as ActionBarClose,
+  q as ActionBarContent,
+  F as ActionBarSeparator,
+  T as ActionBarTrigger,
+  H as ActionBarValue
+};
+//# sourceMappingURL=action-bar.js.map