@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/pagination.d.ts

@@ -0,0 +1,11 @@
+import { Pagination as ArkPagination } from '@ark-ui/react/pagination';
+import { default as React } from 'react';
+export declare const usePagination: () => import('@ark-ui/react').UsePaginationContext;
+export declare const Pagination: (props: React.ComponentProps<typeof ArkPagination.Root>) => React.JSX.Element;
+export declare const PaginationPrevTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkPagination.PrevTrigger>) => React.JSX.Element;
+export declare const PaginationNextTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkPagination.NextTrigger>) => React.JSX.Element;
+export interface PaginationItemProps extends React.ComponentProps<typeof ArkPagination.Item> {
+}
+export declare const PaginationItem: (props: PaginationItemProps) => React.JSX.Element;
+export declare const PaginationEllipsis: (props: React.ComponentProps<typeof ArkPagination.Ellipsis>) => React.JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/simples/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,aAAa,EAE5B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,aAAa,oDAAuB,CAAC;AAElD,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,sBAYvD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,sBAY1E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,sBAY1E,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;CAAG;AAE5D,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAqBxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,sBAsB3D,CAAC"}

package/dist/simples/pagination.js

@@ -0,0 +1,78 @@
+import { jsx as e, jsxs as c, Fragment as g } from "react/jsx-runtime";
+import { usePaginationContext as d, Pagination as r } from "@ark-ui/react/pagination";
+import { ChevronRightIcon as m, ChevronLeftIcon as h } from "lucide-react";
+import { cn as o } from "../lib/cn.js";
+import { Button as l } from "./button.js";
+const f = d, v = (t) => {
+  const { className: a, slot: i, ...n } = t;
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      "aria-label": "Pagination",
+      className: o("flex items-center gap-1", a),
+      ...n,
+      "data-slot": i ?? "pagination"
+    }
+  );
+}, C = ({ slot: t, ...a }) => /* @__PURE__ */ e(r.PrevTrigger, { asChild: !0, ...a, children: /* @__PURE__ */ e(
+  l,
+  {
+    "aria-label": "Previous page",
+    size: "icon-md",
+    slot: t ?? "pagination-prev-trigger",
+    variant: "ghost",
+    children: /* @__PURE__ */ e(h, { "aria-hidden": !0, className: "rtl:rotate-180" })
+  }
+) }), b = ({ slot: t, ...a }) => /* @__PURE__ */ e(r.NextTrigger, { asChild: !0, ...a, children: /* @__PURE__ */ e(
+  l,
+  {
+    "aria-label": "Next page",
+    size: "icon-md",
+    slot: t ?? "pagination-next-trigger",
+    variant: "ghost",
+    children: /* @__PURE__ */ e(m, { "aria-hidden": !0, className: "rtl:rotate-180" })
+  }
+) }), y = (t) => {
+  const { className: a, children: i, slot: n, ...s } = t;
+  return /* @__PURE__ */ e(r.Item, { asChild: !0, ...s, children: /* @__PURE__ */ e(
+    l,
+    {
+      className: o(
+        "tabular-nums",
+        "data-selected:bg-secondary data-selected:text-secondary-foreground data-selected:shadow-none",
+        a
+      ),
+      size: "icon-md",
+      slot: n ?? "pagination-item",
+      variant: "ghost",
+      children: i
+    }
+  ) });
+}, z = (t) => {
+  const { className: a, children: i, slot: n, ...s } = t;
+  return /* @__PURE__ */ e(
+    r.Ellipsis,
+    {
+      className: o(
+        "flex size-8 shrink-0 items-center justify-center",
+        "text-muted-foreground text-sm",
+        a
+      ),
+      ...s,
+      "data-slot": n ?? "pagination-ellipsis",
+      children: i ?? /* @__PURE__ */ c(g, { children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": !0, children: "…" }),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: "More pages" })
+      ] })
+    }
+  );
+};
+export {
+  v as Pagination,
+  z as PaginationEllipsis,
+  y as PaginationItem,
+  b as PaginationNextTrigger,
+  C as PaginationPrevTrigger,
+  f as usePagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/simples/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../src/simples/pagination.tsx"],"sourcesContent":["import {\n  Pagination as ArkPagination,\n  usePaginationContext,\n} from \"@ark-ui/react/pagination\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\n\nexport const usePagination = usePaginationContext;\n\nexport const Pagination = (\n  props: React.ComponentProps<typeof ArkPagination.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPagination.Root\n      aria-label=\"Pagination\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"pagination\"}\n    />\n  );\n};\n\nexport const PaginationPrevTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPagination.PrevTrigger>\n) => (\n  <ArkPagination.PrevTrigger asChild {...rest}>\n    <Button\n      aria-label=\"Previous page\"\n      size=\"icon-md\"\n      slot={slot ?? \"pagination-prev-trigger\"}\n      variant=\"ghost\"\n    >\n      <ChevronLeftIcon aria-hidden className=\"rtl:rotate-180\" />\n    </Button>\n  </ArkPagination.PrevTrigger>\n);\n\nexport const PaginationNextTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPagination.NextTrigger>\n) => (\n  <ArkPagination.NextTrigger asChild {...rest}>\n    <Button\n      aria-label=\"Next page\"\n      size=\"icon-md\"\n      slot={slot ?? \"pagination-next-trigger\"}\n      variant=\"ghost\"\n    >\n      <ChevronRightIcon aria-hidden className=\"rtl:rotate-180\" />\n    </Button>\n  </ArkPagination.NextTrigger>\n);\n\nexport interface PaginationItemProps\n  extends React.ComponentProps<typeof ArkPagination.Item> {}\n\nexport const PaginationItem = (props: PaginationItemProps) => {\n  const { className, children, slot, ...rest } = props;\n\n  // The current page carries `data-selected` (and `aria-current=\"page\"`) from\n  // the machine, so it reads as filled/secondary while the rest stay ghost.\n  return (\n    <ArkPagination.Item asChild {...rest}>\n      <Button\n        className={cn(\n          \"tabular-nums\",\n          \"data-selected:bg-secondary data-selected:text-secondary-foreground data-selected:shadow-none\",\n          className\n        )}\n        size=\"icon-md\"\n        slot={slot ?? \"pagination-item\"}\n        variant=\"ghost\"\n      >\n        {children}\n      </Button>\n    </ArkPagination.Item>\n  );\n};\n\nexport const PaginationEllipsis = (\n  props: React.ComponentProps<typeof ArkPagination.Ellipsis>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkPagination.Ellipsis\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center\",\n        \"text-muted-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"pagination-ellipsis\"}\n    >\n      {children ?? (\n        <>\n          <span aria-hidden>&#8230;</span>\n          <span className=\"sr-only\">More pages</span>\n        </>\n      )}\n    </ArkPagination.Ellipsis>\n  );\n};\n"],"names":["usePagination","usePaginationContext","Pagination","props","className","slot","rest","jsx","ArkPagination","cn","PaginationPrevTrigger","Button","ChevronLeftIcon","PaginationNextTrigger","ChevronRightIcon","PaginationItem","children","PaginationEllipsis","jsxs","Fragment"],"mappings":";;;;;AASO,MAAMA,IAAgBC,GAEhBC,IAAa,CACxBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAG,2BAA2BL,CAAS;AAAA,MACjD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAwB,CACnC,EAAE,MAAAL,GAAM,GAAGC,EAAA,MAEX,gBAAAC,EAACC,EAAc,aAAd,EAA0B,SAAO,IAAE,GAAGF,GACrC,UAAA,gBAAAC;AAAA,EAACI;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,MAAK;AAAA,IACL,MAAMN,KAAQ;AAAA,IACd,SAAQ;AAAA,IAER,UAAA,gBAAAE,EAACK,GAAA,EAAgB,eAAW,IAAC,WAAU,iBAAA,CAAiB;AAAA,EAAA;AAC1D,EAAA,CACF,GAGWC,IAAwB,CACnC,EAAE,MAAAR,GAAM,GAAGC,EAAA,MAEX,gBAAAC,EAACC,EAAc,aAAd,EAA0B,SAAO,IAAE,GAAGF,GACrC,UAAA,gBAAAC;AAAA,EAACI;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,MAAK;AAAA,IACL,MAAMN,KAAQ;AAAA,IACd,SAAQ;AAAA,IAER,UAAA,gBAAAE,EAACO,GAAA,EAAiB,eAAW,IAAC,WAAU,iBAAA,CAAiB;AAAA,EAAA;AAC3D,EAAA,CACF,GAMWC,IAAiB,CAACZ,MAA+B;AAC5D,QAAM,EAAE,WAAAC,GAAW,UAAAY,GAAU,MAAAX,GAAM,GAAGC,MAASH;AAI/C,2BACGK,EAAc,MAAd,EAAmB,SAAO,IAAE,GAAGF,GAC9B,UAAA,gBAAAC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,MAAMC,KAAQ;AAAA,MACd,SAAQ;AAAA,MAEP,UAAAW;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,GAEaC,IAAqB,CAChCd,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,UAAAY,GAAU,MAAAX,GAAM,GAAGC,MAASH;AAE/C,SACE,gBAAAI;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,eACC,gBAAAa,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAZ,EAAC,QAAA,EAAK,eAAW,IAAC,UAAA,KAAO;AAAA,QACzB,gBAAAA,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,MAAA,EAAA,CACtC;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/simples/password-input.d.ts

@@ -0,0 +1,23 @@
+import { PasswordInput as ArkPasswordInput } from '@ark-ui/react/password-input';
+import { default as React } from 'react';
+import { InputGroupProps } from './input-group';
+export declare const usePasswordInput: () => import('@ark-ui/react').UsePasswordInputContext;
+interface PasswordInputProps extends React.ComponentProps<typeof ArkPasswordInput.Root>, Pick<InputGroupProps, "size"> {
+}
+export declare const PasswordInput: (props: PasswordInputProps) => React.JSX.Element;
+export declare const PasswordInputGroup: (props: React.ComponentProps<typeof ArkPasswordInput.Control>) => React.JSX.Element;
+export interface PasswordInputInputProps extends React.ComponentProps<typeof ArkPasswordInput.Input> {
+    /**
+     * A secret already exists on the server. The field still renders EMPTY — submitting it empty
+     * means "keep the stored value". This is the canonical credential-editing shape: the secret
+     * is never sent to the client, so there is nothing to prefill. Opt-in.
+     */
+    hasStoredValue?: boolean;
+    /** Placeholder shown while a stored secret is untouched. */
+    storedPlaceholder?: string;
+}
+export declare const PasswordInputInput: (props: PasswordInputInputProps) => React.JSX.Element;
+export declare const PasswordInputTrigger: (props: React.ComponentProps<typeof ArkPasswordInput.VisibilityTrigger>) => React.JSX.Element;
+export declare const PasswordInputIndicator: (props: React.ComponentProps<typeof ArkPasswordInput.Indicator>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=password-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../src/simples/password-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,gBAAgB,EAElC,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,gBAAgB,uDAA0B,CAAC;AAExD,UAAU,kBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EACxD,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;CAAG;AAEpC,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAgBtD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,sBAiB7D,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC;IAC3D;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,sBA4BhE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,iBAAiB,CAAC,sBAkBvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,sBAa/D,CAAC"}

package/dist/simples/password-input.js

@@ -0,0 +1,90 @@
+import { jsx as t } from "react/jsx-runtime";
+import { usePasswordInputContext as c, PasswordInput as e } from "@ark-ui/react/password-input";
+import { EyeIcon as h, EyeOffIcon as I } from "lucide-react";
+import { cn as d } from "../lib/cn.js";
+import { InputGroup as m, InputGroupInput as w, InputGroupAddon as f, InputGroupButton as g } from "./input-group.js";
+const G = c, N = (o) => {
+  const { size: s = "md", className: r, slot: n, ...a } = o;
+  return /* @__PURE__ */ t(
+    e.Root,
+    {
+      className: d(
+        "group/password-input",
+        "w-full",
+        "flex flex-col items-start gap-2",
+        r
+      ),
+      "data-size": s,
+      ...a,
+      "data-slot": n ?? "password-input"
+    }
+  );
+}, V = (o) => {
+  const { className: s, slot: r, ...n } = o;
+  return /* @__PURE__ */ t(e.Control, { asChild: !0, children: /* @__PURE__ */ t(
+    m,
+    {
+      className: d(
+        "in-data-[size=lg]:h-9 in-data-[size=sm]:h-7",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        s
+      ),
+      ...n,
+      slot: r ?? "password-input-control"
+    }
+  ) });
+}, k = (o) => {
+  const {
+    hasStoredValue: s = !1,
+    storedPlaceholder: r = "Leave empty to keep current",
+    placeholder: n,
+    value: a,
+    defaultValue: i,
+    slot: l,
+    ...u
+  } = o, p = s && (!a && !i) ? r : n;
+  return /* @__PURE__ */ t(
+    e.Input,
+    {
+      asChild: !0,
+      "data-has-stored-value": s || void 0,
+      defaultValue: i,
+      placeholder: p,
+      value: a,
+      ...u,
+      children: /* @__PURE__ */ t(w, { slot: l ?? "password-input-input" })
+    }
+  );
+}, E = (o) => {
+  const { children: s, slot: r, ...n } = o;
+  return /* @__PURE__ */ t(f, { align: "inline-end", children: /* @__PURE__ */ t(e.VisibilityTrigger, { asChild: !0, children: /* @__PURE__ */ t(
+    g,
+    {
+      size: "icon-sm",
+      variant: "ghost",
+      ...n,
+      slot: r ?? "password-input-visibility-trigger",
+      children: s ?? /* @__PURE__ */ t(P, {})
+    }
+  ) }) });
+}, P = (o) => {
+  const { children: s, slot: r, ...n } = o;
+  return /* @__PURE__ */ t(
+    e.Indicator,
+    {
+      fallback: /* @__PURE__ */ t(I, {}),
+      ...n,
+      "data-slot": r ?? "password-input-indicator",
+      children: s ?? /* @__PURE__ */ t(h, {})
+    }
+  );
+};
+export {
+  N as PasswordInput,
+  V as PasswordInputGroup,
+  P as PasswordInputIndicator,
+  k as PasswordInputInput,
+  E as PasswordInputTrigger,
+  G as usePasswordInput
+};
+//# sourceMappingURL=password-input.js.map

package/dist/simples/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","sources":["../../src/simples/password-input.tsx"],"sourcesContent":["import {\n  PasswordInput as ArkPasswordInput,\n  usePasswordInputContext,\n} from \"@ark-ui/react/password-input\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  type InputGroupProps,\n} from \"./input-group\";\n\nexport const usePasswordInput = usePasswordInputContext;\n\ninterface PasswordInputProps\n  extends React.ComponentProps<typeof ArkPasswordInput.Root>,\n    Pick<InputGroupProps, \"size\"> {}\n\nexport const PasswordInput = (props: PasswordInputProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkPasswordInput.Root\n      className={cn(\n        \"group/password-input\",\n        \"w-full\",\n        \"flex flex-col items-start gap-2\",\n        className\n      )}\n      data-size={size}\n      {...rest}\n      data-slot={slot ?? \"password-input\"}\n    />\n  );\n};\n\nexport const PasswordInputGroup = (\n  props: React.ComponentProps<typeof ArkPasswordInput.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPasswordInput.Control asChild>\n      <InputGroup\n        className={cn(\n          \"in-data-[size=lg]:h-9 in-data-[size=sm]:h-7\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n          className\n        )}\n        {...rest}\n        slot={slot ?? \"password-input-control\"}\n      />\n    </ArkPasswordInput.Control>\n  );\n};\n\nexport interface PasswordInputInputProps\n  extends React.ComponentProps<typeof ArkPasswordInput.Input> {\n  /**\n   * A secret already exists on the server. The field still renders EMPTY — submitting it empty\n   * means \"keep the stored value\". This is the canonical credential-editing shape: the secret\n   * is never sent to the client, so there is nothing to prefill. Opt-in.\n   */\n  hasStoredValue?: boolean;\n  /** Placeholder shown while a stored secret is untouched. */\n  storedPlaceholder?: string;\n}\n\nexport const PasswordInputInput = (props: PasswordInputInputProps) => {\n  const {\n    hasStoredValue = false,\n    storedPlaceholder = \"Leave empty to keep current\",\n    placeholder,\n    value,\n    defaultValue,\n    slot,\n    ...rest\n  } = props;\n\n  // The stored-value hint only makes sense while the field is untouched; once the user types,\n  // the submitted value replaces the secret and the hint would be a lie.\n  const untouched = !value && !defaultValue;\n  const shown = hasStoredValue && untouched ? storedPlaceholder : placeholder;\n\n  return (\n    <ArkPasswordInput.Input\n      asChild\n      data-has-stored-value={hasStoredValue || undefined}\n      defaultValue={defaultValue}\n      placeholder={shown}\n      value={value}\n      {...rest}\n    >\n      <InputGroupInput slot={slot ?? \"password-input-input\"} />\n    </ArkPasswordInput.Input>\n  );\n};\n\nexport const PasswordInputTrigger = (\n  props: React.ComponentProps<typeof ArkPasswordInput.VisibilityTrigger>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <InputGroupAddon align=\"inline-end\">\n      <ArkPasswordInput.VisibilityTrigger asChild>\n        <InputGroupButton\n          size=\"icon-sm\"\n          variant=\"ghost\"\n          {...rest}\n          slot={slot ?? \"password-input-visibility-trigger\"}\n        >\n          {children ?? <PasswordInputIndicator />}\n        </InputGroupButton>\n      </ArkPasswordInput.VisibilityTrigger>\n    </InputGroupAddon>\n  );\n};\n\nexport const PasswordInputIndicator = (\n  props: React.ComponentProps<typeof ArkPasswordInput.Indicator>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <ArkPasswordInput.Indicator\n      fallback={<EyeOffIcon />}\n      {...rest}\n      data-slot={slot ?? \"password-input-indicator\"}\n    >\n      {children ?? <EyeIcon />}\n    </ArkPasswordInput.Indicator>\n  );\n};\n"],"names":["usePasswordInput","usePasswordInputContext","PasswordInput","props","size","className","slot","rest","jsx","ArkPasswordInput","cn","PasswordInputGroup","InputGroup","PasswordInputInput","hasStoredValue","storedPlaceholder","placeholder","value","defaultValue","shown","InputGroupInput","PasswordInputTrigger","children","InputGroupAddon","InputGroupButton","PasswordInputIndicator","EyeOffIcon","EyeIcon"],"mappings":";;;;;AAeO,MAAMA,IAAmBC,GAMnBC,IAAgB,CAACC,MAA8B;AAC1D,QAAM,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAElD,SACE,gBAAAK;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,aAAWD;AAAA,MACV,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAqB,CAChCR,MACG;AACH,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK,EAACC,EAAiB,SAAjB,EAAyB,SAAO,IAC/B,UAAA,gBAAAD;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,MAAMD,KAAQ;AAAA,IAAA;AAAA,EAAA,GAElB;AAEJ,GAcaO,IAAqB,CAACV,MAAmC;AACpE,QAAM;AAAA,IACJ,gBAAAW,IAAiB;AAAA,IACjB,mBAAAC,IAAoB;AAAA,IACpB,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAZ;AAAA,IACA,GAAGC;AAAA,EAAA,IACDJ,GAKEgB,IAAQL,MADI,CAACG,KAAS,CAACC,KACeH,IAAoBC;AAEhE,SACE,gBAAAR;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,SAAO;AAAA,MACP,yBAAuBK,KAAkB;AAAA,MACzC,cAAAI;AAAA,MACA,aAAaC;AAAA,MACb,OAAAF;AAAA,MACC,GAAGV;AAAA,MAEJ,UAAA,gBAAAC,EAACY,GAAA,EAAgB,MAAMd,KAAQ,uBAAA,CAAwB;AAAA,IAAA;AAAA,EAAA;AAG7D,GAEae,IAAuB,CAClClB,MACG;AACH,QAAM,EAAE,UAAAmB,GAAU,MAAAhB,GAAM,GAAGC,MAASJ;AAEpC,SACE,gBAAAK,EAACe,KAAgB,OAAM,cACrB,4BAACd,EAAiB,mBAAjB,EAAmC,SAAO,IACzC,UAAA,gBAAAD;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAGjB;AAAA,MACJ,MAAMD,KAAQ;AAAA,MAEb,UAAAgB,uBAAaG,GAAA,CAAA,CAAuB;AAAA,IAAA;AAAA,EAAA,GAEzC,EAAA,CACF;AAEJ,GAEaA,IAAyB,CACpCtB,MACG;AACH,QAAM,EAAE,UAAAmB,GAAU,MAAAhB,GAAM,GAAGC,MAASJ;AAEpC,SACE,gBAAAK;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,4BAAWiB,GAAA,EAAW;AAAA,MACrB,GAAGnB;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAgB,uBAAaK,GAAA,CAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG5B;"}

package/dist/simples/pin-input.d.ts

@@ -0,0 +1,30 @@
+import { PinInput as ArkPinInput } from '@ark-ui/react/pin-input';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const pinInputInputVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const PinInput: (props: React.ComponentProps<typeof ArkPinInput.Root>) => React.JSX.Element;
+export declare const PinInputLabel: (props: React.ComponentProps<typeof ArkPinInput.Label>) => React.JSX.Element;
+export declare const PinInputControl: (props: React.ComponentProps<typeof ArkPinInput.Control>) => React.JSX.Element;
+export interface PinInputInputProps extends Omit<React.ComponentProps<typeof ArkPinInput.Input>, "size">, VariantProps<typeof pinInputInputVariants> {
+}
+export declare const PinInputInput: (props: PinInputInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=pin-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../src/simples/pin-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;qDAyBzB,CAAC;AAEH,eAAO,MAAM,QAAQ,GACnB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBAWrD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,sBAWtD,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBAWxD,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EAClE,YAAY,CAAC,OAAO,qBAAqB,CAAC;CAAG;AAEjD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAUtD,CAAC"}

package/dist/simples/pin-input.js

@@ -0,0 +1,71 @@
+import { jsx as s } from "react/jsx-runtime";
+import { PinInput as r } from "@ark-ui/react/pin-input";
+import { tv as l } from "tailwind-variants";
+import { cn as a } from "../lib/cn.js";
+import { FieldLabel as d } from "./field.js";
+const u = l({
+  base: [
+    "shrink-0",
+    "text-center tabular-nums",
+    "bg-field",
+    "text-base md:text-sm",
+    "rounded-field border border-input shadow-xs/5",
+    "placeholder:text-faint",
+    "transition-[color,box-shadow]",
+    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+    "data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+    "dark:data-invalid:text-destructive-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: ["size-7"],
+      md: ["size-8"],
+      lg: ["size-9"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), v = (t) => {
+  const { className: e, slot: n, ...i } = t;
+  return /* @__PURE__ */ s(
+    r.Root,
+    {
+      className: a("flex flex-col items-start gap-2", e),
+      ...i,
+      "data-slot": n ?? "pin-input"
+    }
+  );
+}, x = (t) => {
+  const { children: e, slot: n, ...i } = t;
+  return /* @__PURE__ */ s(d, { asChild: !0, children: /* @__PURE__ */ s(r.Label, { ...i, "data-slot": n ?? "pin-input-label", children: e }) });
+}, g = (t) => {
+  const { className: e, slot: n, ...i } = t;
+  return /* @__PURE__ */ s(
+    r.Control,
+    {
+      className: a("flex items-center gap-2", e),
+      ...i,
+      "data-slot": n ?? "pin-input-control"
+    }
+  );
+}, I = (t) => {
+  const { size: e = "md", className: n, slot: i, ...o } = t;
+  return /* @__PURE__ */ s(
+    r.Input,
+    {
+      className: a(u({ size: e }), n),
+      ...o,
+      "data-slot": i ?? "pin-input-input"
+    }
+  );
+};
+export {
+  v as PinInput,
+  g as PinInputControl,
+  I as PinInputInput,
+  x as PinInputLabel
+};
+//# sourceMappingURL=pin-input.js.map

package/dist/simples/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.js","sources":["../../src/simples/pin-input.tsx"],"sourcesContent":["import { PinInput as ArkPinInput } from \"@ark-ui/react/pin-input\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\nconst pinInputInputVariants = tv({\n  base: [\n    \"shrink-0\",\n    \"text-center tabular-nums\",\n    \"bg-field\",\n    \"text-base md:text-sm\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"placeholder:text-faint\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    \"dark:data-invalid:text-destructive-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"size-7\"],\n      md: [\"size-8\"],\n      lg: [\"size-9\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport const PinInput = (\n  props: React.ComponentProps<typeof ArkPinInput.Root>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPinInput.Root\n      className={cn(\"flex flex-col items-start gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"pin-input\"}\n    />\n  );\n};\n\nexport const PinInputLabel = (\n  props: React.ComponentProps<typeof ArkPinInput.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkPinInput.Label {...rest} data-slot={slot ?? \"pin-input-label\"}>\n        {children}\n      </ArkPinInput.Label>\n    </FieldLabel>\n  );\n};\n\nexport const PinInputControl = (\n  props: React.ComponentProps<typeof ArkPinInput.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPinInput.Control\n      className={cn(\"flex items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"pin-input-control\"}\n    />\n  );\n};\n\nexport interface PinInputInputProps\n  extends Omit<React.ComponentProps<typeof ArkPinInput.Input>, \"size\">,\n    VariantProps<typeof pinInputInputVariants> {}\n\nexport const PinInputInput = (props: PinInputInputProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkPinInput.Input\n      className={cn(pinInputInputVariants({ size }), className)}\n      {...rest}\n      data-slot={slot ?? \"pin-input-input\"}\n    />\n  );\n};\n"],"names":["pinInputInputVariants","tv","PinInput","props","className","slot","rest","jsx","ArkPinInput","cn","PinInputLabel","children","FieldLabel","PinInputControl","PinInputInput","size"],"mappings":";;;;;AAMA,MAAMA,IAAwBC,EAAG;AAAA,EAC/B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,CAAC,QAAQ;AAAA,MACb,IAAI,CAAC,QAAQ;AAAA,MACb,IAAI,CAAC,QAAQ;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAEYC,IAAW,CACtBC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAG,mCAAmCL,CAAS;AAAA,MACzD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAgB,CAC3BP,MACG;AACH,QAAM,EAAE,UAAAQ,GAAU,MAAAN,GAAM,GAAGC,MAASH;AAEpC,SACE,gBAAAI,EAACK,GAAA,EAAW,SAAO,IACjB,4BAACJ,EAAY,OAAZ,EAAmB,GAAGF,GAAM,aAAWD,KAAQ,mBAC7C,UAAAM,GACH,GACF;AAEJ,GAEaE,IAAkB,CAC7BV,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAG,2BAA2BL,CAAS;AAAA,MACjD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAMaS,IAAgB,CAACX,MAA8B;AAC1D,QAAM,EAAE,MAAAY,IAAO,MAAM,WAAAX,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAElD,SACE,gBAAAI;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAGT,EAAsB,EAAE,MAAAe,EAAA,CAAM,GAAGX,CAAS;AAAA,MACvD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/popover.d.ts

@@ -0,0 +1,42 @@
+import { ark } from '@ark-ui/react/factory';
+import { Popover as ArkPopover } from '@ark-ui/react/popover';
+export declare const usePopover: () => import('@ark-ui/react').UsePopoverContext;
+export declare const Popover: (props: React.ComponentProps<typeof ArkPopover.Root>) => import("react").JSX.Element;
+export declare const PopoverTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkPopover.Trigger>) => import("react").JSX.Element;
+export declare const PopoverAnchor: ({ slot, ...rest }: React.ComponentProps<typeof ArkPopover.Anchor>) => import("react").JSX.Element;
+export declare const PopoverPositioner: ({ slot, ...rest }: React.ComponentProps<typeof ArkPopover.Positioner>) => import("react").JSX.Element;
+interface PopoverContentProps extends React.ComponentProps<typeof ArkPopover.Content> {
+    /**
+     * Show close button at the top right corner.
+     *
+     * Off by default, unlike Dialog / Sheet / Tour: a popover dismisses on outside click and on
+     * Escape, so the button is usually redundant chrome. Turn it on for a popover that holds a
+     * form the reader might otherwise lose.
+     *
+     * (Upstream Shark documents `@default true` here while destructuring `= false` — the
+     * behaviour is the same in both, only its JSDoc was wrong. Corrected, not changed.)
+     *
+     * @default false
+     */
+    showCloseButton?: boolean;
+}
+export declare const PopoverContent: (props: PopoverContentProps) => import("react").JSX.Element;
+interface PopoverHeaderProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * The description of the popover header
+     */
+    description?: string;
+    /**
+     * The title of the popover header
+     */
+    title?: string;
+}
+export declare const PopoverHeader: (props: PopoverHeaderProps) => import("react").JSX.Element;
+export declare const PopoverTitle: (props: React.ComponentProps<typeof ArkPopover.Title>) => import("react").JSX.Element;
+export declare const PopoverDescription: (props: React.ComponentProps<typeof ArkPopover.Description>) => import("react").JSX.Element;
+export declare const PopoverBody: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export declare const PopoverFooter: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export declare const PopoverClose: ({ slot, ...rest }: React.ComponentProps<typeof ArkPopover.CloseTrigger>) => import("react").JSX.Element;
+export declare const PopoverArrow: (props: React.ComponentProps<typeof ArkPopover.Arrow>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/simples/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,UAAU,EAEtB,MAAM,uBAAuB,CAAC;AAO/B,eAAO,MAAM,UAAU,iDAAoB,CAAC;AAE5C,eAAO,MAAM,OAAO,GAClB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,gCAiBpD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,gCACO,CAAC;AAE5E,eAAO,MAAM,aAAa,GACxB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,MAAM,CAAC,gCACM,CAAC;AAE1E,eAAO,MAAM,iBAAiB,GAAI,mBAG/B,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,UAAU,CAAC,gCAEpD,CAAC;AAEF,UAAU,mBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC;IACvD;;;;;;;;;;;OAWG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAoDxD,CAAC;AAEF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACvE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAsBtD,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,gCAgBrD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,WAAW,CAAC,gCAW3D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAmBtE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAgBxE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,mBAG1B,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,YAAY,CAAC,gCAKtD,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,gCAmBrD,CAAC"}

package/dist/simples/popover.js

@@ -0,0 +1,188 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { ark as i } from "@ark-ui/react/factory";
+import { usePopoverContext as v, Popover as s } from "@ark-ui/react/popover";
+import { Portal as u } from "@ark-ui/react/portal";
+import { XIcon as f } from "lucide-react";
+import { cn as n } from "../lib/cn.js";
+import { Button as g } from "./button.js";
+import { ScrollArea as h } from "./scroll-area.js";
+const B = v, k = (e) => {
+  const {
+    lazyMount: o = !0,
+    unmountOnExit: a = !0,
+    modal: r = !0,
+    ...l
+  } = e;
+  return /* @__PURE__ */ t(
+    s.Root,
+    {
+      lazyMount: o,
+      modal: r,
+      unmountOnExit: a,
+      ...l
+    }
+  );
+}, D = ({ slot: e, ...o }) => /* @__PURE__ */ t(s.Trigger, { ...o, "data-slot": e ?? "popover-trigger" }), E = ({ slot: e, ...o }) => /* @__PURE__ */ t(s.Anchor, { ...o, "data-slot": e ?? "popover-anchor" }), x = ({
+  slot: e,
+  ...o
+}) => /* @__PURE__ */ t(s.Positioner, { ...o, "data-slot": e ?? "popover-positioner" }), F = (e) => {
+  const { showCloseButton: o = !1, className: a, children: r, slot: l, ...p } = e;
+  return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(x, { children: /* @__PURE__ */ d(
+    s.Content,
+    {
+      className: n(
+        "relative",
+        "z-[calc(50+var(--layer-index,0))]",
+        "[--space:--spacing(4)]",
+        "w-auto min-w-32",
+        "flex flex-col",
+        "bg-popover",
+        "text-popover-foreground",
+        "rounded-box border shadow-lg/5",
+        "outline-hidden",
+        "origin-(--transform-origin)",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[placement=bottom]:slide-in-from-top-2",
+        "data-[placement=left]:slide-in-from-end-2",
+        "data-[placement=right]:slide-in-from-start-2",
+        "data-[placement=top]:slide-in-from-bottom-2",
+        "motion-reduce:animate-none!",
+        a
+      ),
+      ...p,
+      "data-slot": l ?? "popover-content",
+      children: [
+        r,
+        !!o && /* @__PURE__ */ t(P, { asChild: !0, children: /* @__PURE__ */ t(
+          g,
+          {
+            "aria-label": "Close",
+            className: "absolute inset-e-2.5 top-2.5 opacity-64 hover:opacity-100",
+            size: "icon-sm",
+            variant: "ghost",
+            children: /* @__PURE__ */ t(f, {})
+          }
+        ) })
+      ]
+    }
+  ) }) });
+}, H = (e) => {
+  const { title: o, description: a, children: r, className: l, slot: p, ...m } = e;
+  return /* @__PURE__ */ d(
+    i.div,
+    {
+      className: n(
+        "flex flex-col gap-2 p-(--space)",
+        "in-[[data-slot=popover-content]:has([data-slot=popover-body])]:pb-3",
+        l
+      ),
+      ...m,
+      "data-slot": p ?? "popover-header",
+      children: [
+        !!o && /* @__PURE__ */ t(c, { children: o }),
+        !!a && /* @__PURE__ */ t(b, { children: a }),
+        !o && typeof r == "string" ? /* @__PURE__ */ t(c, { children: r }) : r
+      ]
+    }
+  );
+}, c = (e) => {
+  const { className: o, slot: a, ...r } = e;
+  return /* @__PURE__ */ t(
+    s.Title,
+    {
+      className: n(
+        "font-semibold text-base leading-none",
+        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.
+        "in-[[data-slot=popover-content]:has([data-slot=popover-close-trigger])]:pe-8",
+        o
+      ),
+      ...r,
+      "data-slot": a ?? "popover-title"
+    }
+  );
+}, b = (e) => {
+  const { className: o, slot: a, ...r } = e;
+  return /* @__PURE__ */ t(
+    s.Description,
+    {
+      className: n("text-muted-foreground text-sm", o),
+      ...r,
+      "data-slot": a ?? "popover-description"
+    }
+  );
+}, I = (e) => {
+  const { className: o, slot: a, ...r } = e;
+  return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+    i.div,
+    {
+      className: n(
+        "flex-1",
+        "p-(--space)",
+        "overflow-auto",
+        "in-[[data-slot=popover-content]:has([data-slot=popover-header])]:pt-1",
+        "in-[[data-slot=popover-content]:has([data-slot=popover-footer]:not(.border-t))]:pb-1",
+        o
+      ),
+      ...r,
+      "data-slot": a ?? "popover-body"
+    }
+  ) });
+}, M = (e) => {
+  const { className: o, slot: a, ...r } = e;
+  return /* @__PURE__ */ t(
+    i.div,
+    {
+      className: n(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "sm:rounded-b-[calc(var(--radius-lg)-1px)]",
+        "px-(--space) py-4",
+        "border-t",
+        o
+      ),
+      ...r,
+      "data-slot": a ?? "popover-footer"
+    }
+  );
+}, P = ({
+  slot: e,
+  ...o
+}) => /* @__PURE__ */ t(
+  s.CloseTrigger,
+  {
+    ...o,
+    "data-slot": e ?? "popover-close-trigger"
+  }
+), O = (e) => {
+  const { style: o, slot: a, ...r } = e;
+  return /* @__PURE__ */ t(
+    s.Arrow,
+    {
+      style: {
+        "--arrow-background": "var(--popover)",
+        "--arrow-size": "calc(1.5 * var(--spacing))",
+        ...o
+      },
+      ...r,
+      "data-slot": a ?? "popover-arrow",
+      children: /* @__PURE__ */ t(s.ArrowTip, { className: "border-s border-t" })
+    }
+  );
+};
+export {
+  k as Popover,
+  E as PopoverAnchor,
+  O as PopoverArrow,
+  I as PopoverBody,
+  P as PopoverClose,
+  F as PopoverContent,
+  b as PopoverDescription,
+  M as PopoverFooter,
+  H as PopoverHeader,
+  x as PopoverPositioner,
+  c as PopoverTitle,
+  D as PopoverTrigger,
+  B as usePopover
+};
+//# sourceMappingURL=popover.js.map

package/dist/simples/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../src/simples/popover.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport {\n  Popover as ArkPopover,\n  usePopoverContext,\n} from \"@ark-ui/react/popover\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { ScrollArea } from \"./scroll-area\";\n\nexport const usePopover = usePopoverContext;\n\nexport const Popover = (\n  props: React.ComponentProps<typeof ArkPopover.Root>\n) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    modal = true,\n    ...rest\n  } = props;\n\n  return (\n    <ArkPopover.Root\n      lazyMount={lazyMount}\n      modal={modal}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const PopoverTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Trigger>\n) => <ArkPopover.Trigger {...rest} data-slot={slot ?? \"popover-trigger\"} />;\n\nexport const PopoverAnchor = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkPopover.Anchor>\n) => <ArkPopover.Anchor {...rest} data-slot={slot ?? \"popover-anchor\"} />;\n\nexport const PopoverPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.Positioner>) => (\n  <ArkPopover.Positioner {...rest} data-slot={slot ?? \"popover-positioner\"} />\n);\n\ninterface PopoverContentProps\n  extends React.ComponentProps<typeof ArkPopover.Content> {\n  /**\n   * Show close button at the top right corner.\n   *\n   * Off by default, unlike Dialog / Sheet / Tour: a popover dismisses on outside click and on\n   * Escape, so the button is usually redundant chrome. Turn it on for a popover that holds a\n   * form the reader might otherwise lose.\n   *\n   * (Upstream Shark documents `@default true` here while destructuring `= false` — the\n   * behaviour is the same in both, only its JSDoc was wrong. Corrected, not changed.)\n   *\n   * @default false\n   */\n  showCloseButton?: boolean;\n}\n\nexport const PopoverContent = (props: PopoverContentProps) => {\n  const { showCloseButton = false, className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <PopoverPositioner>\n        <ArkPopover.Content\n          className={cn(\n            \"relative\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"[--space:--spacing(4)]\",\n            \"w-auto min-w-32\",\n            \"flex flex-col\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"popover-content\"}\n        >\n          {children}\n\n          {!!showCloseButton && (\n            <PopoverClose asChild>\n              <Button\n                aria-label=\"Close\"\n                // Aligned to the content padding: the button sits at 10px so the 16px icon\n                // (6px inset inside the 28px icon-sm button) lands its corner on the 16px\n                // `--space` grid — mirroring the header title on the opposite side.\n                className=\"absolute inset-e-2.5 top-2.5 opacity-64 hover:opacity-100\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              >\n                <XIcon />\n              </Button>\n            </PopoverClose>\n          )}\n        </ArkPopover.Content>\n      </PopoverPositioner>\n    </Portal>\n  );\n};\n\ninterface PopoverHeaderProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * The description of the popover header\n   */\n  description?: string;\n  /**\n   * The title of the popover header\n   */\n  title?: string;\n}\n\nexport const PopoverHeader = (props: PopoverHeaderProps) => {\n  const { title, description, children, className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col gap-2 p-(--space)\",\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-body])]:pb-3\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-header\"}\n    >\n      {!!title && <PopoverTitle>{title}</PopoverTitle>}\n      {!!description && <PopoverDescription>{description}</PopoverDescription>}\n      {!title && typeof children === \"string\" ? (\n        <PopoverTitle>{children}</PopoverTitle>\n      ) : (\n        children\n      )}\n    </ark.div>\n  );\n};\n\nexport const PopoverTitle = (\n  props: React.ComponentProps<typeof ArkPopover.Title>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Title\n      className={cn(\n        \"font-semibold text-base leading-none\",\n        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.\n        \"in-[[data-slot=popover-content]:has([data-slot=popover-close-trigger])]:pe-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-title\"}\n    />\n  );\n};\n\nexport const PopoverDescription = (\n  props: React.ComponentProps<typeof ArkPopover.Description>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"popover-description\"}\n    />\n  );\n};\n\nexport const PopoverBody = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ScrollArea>\n      <ark.div\n        className={cn(\n          \"flex-1\",\n          \"p-(--space)\",\n          \"overflow-auto\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-header])]:pt-1\",\n          \"in-[[data-slot=popover-content]:has([data-slot=popover-footer]:not(.border-t))]:pb-1\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"popover-body\"}\n      />\n    </ScrollArea>\n  );\n};\n\nexport const PopoverFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        \"sm:rounded-b-[calc(var(--radius-lg)-1px)]\",\n        \"px-(--space) py-4\",\n        \"border-t\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"popover-footer\"}\n    />\n  );\n};\n\nexport const PopoverClose = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkPopover.CloseTrigger>) => (\n  <ArkPopover.CloseTrigger\n    {...rest}\n    data-slot={slot ?? \"popover-close-trigger\"}\n  />\n);\n\nexport const PopoverArrow = (\n  props: React.ComponentProps<typeof ArkPopover.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkPopover.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"popover-arrow\"}\n    >\n      <ArkPopover.ArrowTip className=\"border-s border-t\" />\n    </ArkPopover.Arrow>\n  );\n};\n"],"names":["usePopover","usePopoverContext","Popover","props","lazyMount","unmountOnExit","modal","rest","jsx","ArkPopover","PopoverTrigger","slot","PopoverAnchor","PopoverPositioner","PopoverContent","showCloseButton","className","children","Portal","jsxs","cn","PopoverClose","Button","XIcon","PopoverHeader","title","description","ark","PopoverTitle","PopoverDescription","PopoverBody","ScrollArea","PopoverFooter","PopoverArrow","style"],"mappings":"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"}