@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/dialog.d.ts

@@ -0,0 +1,100 @@
+import { Dialog as ArkDialog } from '@ark-ui/react/dialog';
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const useDialog: () => import('@ark-ui/react').UseDialogContext;
+export declare const Dialog: (props: React.ComponentProps<typeof ArkDialog.Root>) => React.JSX.Element;
+export declare const DialogTrigger: (props: React.ComponentProps<typeof ArkDialog.Trigger>) => React.JSX.Element;
+export declare const dialogOverlayVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const DialogOverlay: (props: React.ComponentProps<typeof ArkDialog.Backdrop>) => React.JSX.Element | null;
+export declare const DialogPositioner: (props: React.ComponentProps<typeof ArkDialog.Positioner>) => React.JSX.Element;
+export declare const dialogContentVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        "2xl": string[];
+        "3xl": string[];
+        "4xl": string[];
+        "5xl": string[];
+        "6xl": string[];
+        fullscreen: string[];
+    };
+    bottomStickOnMobile: {
+        true: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        "2xl": string[];
+        "3xl": string[];
+        "4xl": string[];
+        "5xl": string[];
+        "6xl": string[];
+        fullscreen: string[];
+    };
+    bottomStickOnMobile: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        "2xl": string[];
+        "3xl": string[];
+        "4xl": string[];
+        "5xl": string[];
+        "6xl": string[];
+        fullscreen: string[];
+    };
+    bottomStickOnMobile: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface DialogContentProps extends React.ComponentProps<typeof ArkDialog.Content>, VariantProps<typeof dialogContentVariants> {
+    /**
+     * Stick the dialog to the bottom of the screen on mobile
+     *
+     * @default true
+     */
+    bottomStickOnMobile?: boolean;
+    /**
+     * Show close button at the top right corner
+     *
+     * @default true
+     */
+    showCloseButton?: boolean;
+}
+export declare const DialogContent: (props: DialogContentProps) => React.JSX.Element;
+interface DialogBodyProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * Add a fade effect to the scroll area
+     *
+     * @default false
+     */
+    scrollFade?: boolean;
+}
+export declare const DialogBody: (props: DialogBodyProps) => React.JSX.Element;
+interface DialogHeaderProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * The description of the dialog
+     */
+    description?: string;
+    /**
+     * The title of the dialog
+     */
+    title?: string;
+}
+export declare const DialogHeader: (props: DialogHeaderProps) => React.JSX.Element;
+export declare const DialogTitle: (props: React.ComponentProps<typeof ArkDialog.Title>) => React.JSX.Element;
+export declare const DialogDescription: (props: React.ComponentProps<typeof ArkDialog.Description>) => React.JSX.Element;
+export declare const DialogClose: ({ slot, ...rest }: React.ComponentProps<typeof ArkDialog.CloseTrigger>) => React.JSX.Element;
+export declare const DialogFooter: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/simples/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK1D,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAc1C,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,sBAkBxE,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,sBAClB,CAAC;AAEtC,eAAO,MAAM,qBAAqB,sMAUhC,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,QAAQ,CAAC,6BAiBvD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,UAAU,CAAC,sBAiBzD,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDA+ChC,CAAC;AAEH,UAAU,kBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,EACpD,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAkDtD,CAAC;AAEF,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACpE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAiBhD,CAAC;AAEF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACtE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA0BpD,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,sBAgBpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,sBAW1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mBAGzB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,YAAY,CAAC,sBAKrD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAiBvE,CAAC"}

package/dist/simples/dialog.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useDialogContext as h, Dialog as n } from "@ark-ui/react/dialog";
+import { ark as m } from "@ark-ui/react/factory";
+import { Portal as b } from "@ark-ui/react/portal";
+import { XIcon as v } from "lucide-react";
+import u from "react";
+import { tv as p } from "tailwind-variants";
+import { cn as r } from "../lib/cn.js";
+import { Button as w } from "./button.js";
+import { ScrollArea as y } from "./scroll-area.js";
+const A = h, g = u.createContext(null);
+g.displayName = "DialogContext";
+const H = (t) => {
+  const {
+    modal: a = !0,
+    lazyMount: o = !0,
+    unmountOnExit: s = !0,
+    ...l
+  } = t;
+  return /* @__PURE__ */ e(g.Provider, { value: { modal: a }, children: /* @__PURE__ */ e(
+    n.Root,
+    {
+      lazyMount: o,
+      modal: a,
+      unmountOnExit: s,
+      ...l
+    }
+  ) });
+}, I = (t) => /* @__PURE__ */ e(n.Trigger, { ...t }), D = p({
+  base: [
+    "fixed inset-0 z-50",
+    "bg-black/32 backdrop-blur-xs",
+    "duration-200",
+    "peer peer-data-[slot=dialog-overlay]:hidden",
+    "data-[state=open]:fade-in-0 data-[state=open]:animate-in",
+    "data-[state=closed]:fade-out-0 data-[state=closed]:animate-out",
+    "motion-reduce:animate-none!"
+  ]
+}), N = (t) => {
+  const { className: a, slot: o, ...s } = t, { modal: l } = O();
+  return l ? /* @__PURE__ */ e(
+    n.Backdrop,
+    {
+      className: r(D(), a),
+      ...s,
+      "data-slot": o ?? "dialog-overlay"
+    }
+  ) : null;
+}, z = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    n.Positioner,
+    {
+      className: r(
+        "fixed inset-0 z-50",
+        "h-svh w-screen",
+        "grid grid-rows-[1fr_auto_3fr] justify-items-center",
+        "p-4",
+        a
+      ),
+      ...s,
+      "data-slot": o ?? "dialog-positioner"
+    }
+  );
+}, C = p({
+  base: [
+    "[--space:--spacing(6)]",
+    "z-[calc(50+var(--layer-index,0))]",
+    "relative",
+    "row-start-2",
+    "max-h-[calc(100svh-2rem)] min-h-0 w-full min-w-0",
+    "flex flex-col overflow-hidden",
+    "bg-popover",
+    "text-popover-foreground",
+    "rounded-2xl border shadow-lg/5",
+    "outline-none",
+    "translate-y-[calc(-1.25rem*var(--nested-layer-count))]",
+    "transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform",
+    "data-[nested=dialog]:data-[state=closed]:slide-in-from-bottom-10 data-[nested=dialog]:data-[state=open]:slide-in-from-bottom-10 data-[has-nested=dialog]:origin-top",
+    "scale-[calc(1-0.1*var(--nested-layer-count))] opacity-[calc(1-0.1*var(--nested-layer-count))]",
+    "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:animate-out",
+    "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:animate-in",
+    "motion-reduce:animate-none! motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: ["max-w-md"],
+      md: ["max-w-lg"],
+      lg: ["max-w-xl"],
+      xl: ["max-w-2xl"],
+      "2xl": ["max-w-3xl"],
+      "3xl": ["max-w-4xl"],
+      "4xl": ["max-w-5xl"],
+      "5xl": ["max-w-6xl"],
+      "6xl": ["max-w-7xl"],
+      fullscreen: ["size-full"]
+    },
+    bottomStickOnMobile: {
+      true: [
+        "max-sm:max-h-[calc(100svh-3rem)]",
+        "max-sm:max-w-none",
+        "max-sm:rounded-none max-sm:rounded-t-2xl max-sm:border-x-0 max-sm:border-t max-sm:border-b-0",
+        "max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))]",
+        "max-sm:data-[state=closed]:slide-out-to-bottom-5 max-sm:data-[state=open]:slide-in-from-bottom-5",
+        "max-sm:data-[state=closed]:zoom-out-100 max-sm:data-[state=open]:zoom-in-100"
+      ]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), X = (t) => {
+  const {
+    showCloseButton: a = !0,
+    bottomStickOnMobile: o = !0,
+    size: s = "md",
+    className: l,
+    children: i,
+    slot: d,
+    ...f
+  } = t;
+  return /* @__PURE__ */ c(b, { children: [
+    /* @__PURE__ */ e(N, {}),
+    /* @__PURE__ */ e(
+      z,
+      {
+        className: r(
+          o && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"
+        ),
+        children: /* @__PURE__ */ c(
+          n.Content,
+          {
+            className: r(
+              C({ size: s, bottomStickOnMobile: o }),
+              l
+            ),
+            ...f,
+            "data-slot": d ?? "dialog-content",
+            children: [
+              i,
+              !!a && /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e(
+                w,
+                {
+                  "aria-label": "Close",
+                  className: "absolute inset-e-2.5 top-2.5 opacity-64 hover:opacity-100",
+                  size: "icon-sm",
+                  variant: "ghost",
+                  children: /* @__PURE__ */ e(v, {})
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}, $ = (t) => {
+  const { scrollFade: a = !1, className: o, slot: s, ...l } = t;
+  return /* @__PURE__ */ e(y, { className: "min-h-0 flex-1", scrollFade: a, children: /* @__PURE__ */ e(
+    m.div,
+    {
+      className: r(
+        "p-(--space)",
+        "in-[[data-slot=dialog-content]:has([data-slot=dialog-header])]:pt-0",
+        "in-[[data-slot=dialog-content]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",
+        o
+      ),
+      ...l,
+      "data-slot": s ?? "dialog-body"
+    }
+  ) });
+}, q = (t) => {
+  const { className: a, title: o, description: s, children: l, slot: i, ...d } = t;
+  return /* @__PURE__ */ c(
+    m.div,
+    {
+      className: r(
+        "shrink-0",
+        "p-(--space)",
+        "flex flex-col gap-2",
+        "in-[[data-slot=dialog-content]:has([data-slot=dialog-body])]:pb-3",
+        a
+      ),
+      ...d,
+      "data-slot": i ?? "dialog-header",
+      children: [
+        !!o && /* @__PURE__ */ e(x, { children: o }),
+        !!s && /* @__PURE__ */ e(k, { children: s }),
+        !o && typeof l == "string" ? /* @__PURE__ */ e(x, { children: l }) : l
+      ]
+    }
+  );
+}, x = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    n.Title,
+    {
+      className: r(
+        "font-heading font-semibold text-lg leading-none",
+        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.
+        "in-[[data-slot=dialog-content]:has([data-slot=dialog-close-trigger])]:pe-8",
+        a
+      ),
+      ...s,
+      "data-slot": o ?? "dialog-title"
+    }
+  );
+}, k = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    n.Description,
+    {
+      className: r("text-muted-foreground text-sm", a),
+      ...s,
+      "data-slot": o ?? "dialog-description"
+    }
+  );
+}, _ = ({
+  slot: t,
+  ...a
+}) => /* @__PURE__ */ e(
+  n.CloseTrigger,
+  {
+    ...a,
+    "data-slot": t ?? "dialog-close-trigger"
+  }
+), G = (t) => {
+  const { className: a, slot: o, ...s } = t;
+  return /* @__PURE__ */ e(
+    m.div,
+    {
+      className: r(
+        "shrink-0",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
+        "px-(--space) py-4",
+        "border-t",
+        a
+      ),
+      ...s,
+      "data-slot": o ?? "dialog-footer"
+    }
+  );
+}, O = () => {
+  const t = u.useContext(g);
+  if (!t)
+    throw new Error("useDialog must be used within a DialogProvider");
+  return t;
+};
+export {
+  H as Dialog,
+  $ as DialogBody,
+  _ as DialogClose,
+  X as DialogContent,
+  k as DialogDescription,
+  G as DialogFooter,
+  q as DialogHeader,
+  N as DialogOverlay,
+  z as DialogPositioner,
+  x as DialogTitle,
+  I as DialogTrigger,
+  C as dialogContentVariants,
+  D as dialogOverlayVariants,
+  A as useDialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/simples/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../src/simples/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as ArkDialog, useDialogContext } from \"@ark-ui/react/dialog\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { XIcon } from \"lucide-react\";\nimport React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { ScrollArea } from \"./scroll-area\";\n\nexport const useDialog = useDialogContext;\n\ninterface DialogContextProps {\n  /**\n   * Used internally to show or hide overlay\n   *\n   * @default true\n   */\n  modal?: boolean;\n}\n\nconst DialogContext = React.createContext<DialogContextProps | null>(null);\nDialogContext.displayName = \"DialogContext\";\n\nexport const Dialog = (props: React.ComponentProps<typeof ArkDialog.Root>) => {\n  const {\n    modal = true,\n    lazyMount = true,\n    unmountOnExit = true,\n    ...rest\n  } = props;\n\n  return (\n    <DialogContext.Provider value={{ modal }}>\n      <ArkDialog.Root\n        lazyMount={lazyMount}\n        modal={modal}\n        unmountOnExit={unmountOnExit}\n        {...rest}\n      />\n    </DialogContext.Provider>\n  );\n};\n\nexport const DialogTrigger = (\n  props: React.ComponentProps<typeof ArkDialog.Trigger>\n) => <ArkDialog.Trigger {...props} />;\n\nexport const dialogOverlayVariants = tv({\n  base: [\n    \"fixed inset-0 z-50\",\n    \"bg-black/32 backdrop-blur-xs\",\n    \"duration-200\",\n    \"peer peer-data-[slot=dialog-overlay]:hidden\",\n    \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n    \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n    \"motion-reduce:animate-none!\",\n  ],\n});\n\nexport const DialogOverlay = (\n  props: React.ComponentProps<typeof ArkDialog.Backdrop>\n) => {\n  const { className, slot, ...rest } = props;\n\n  const { modal } = _useDialog();\n\n  if (!modal) {\n    return null;\n  }\n\n  return (\n    <ArkDialog.Backdrop\n      className={cn(dialogOverlayVariants(), className)}\n      {...rest}\n      data-slot={slot ?? \"dialog-overlay\"}\n    />\n  );\n};\n\nexport const DialogPositioner = (\n  props: React.ComponentProps<typeof ArkDialog.Positioner>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDialog.Positioner\n      className={cn(\n        \"fixed inset-0 z-50\",\n        \"h-svh w-screen\",\n        \"grid grid-rows-[1fr_auto_3fr] justify-items-center\",\n        \"p-4\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"dialog-positioner\"}\n    />\n  );\n};\n\nexport const dialogContentVariants = tv({\n  base: [\n    \"[--space:--spacing(6)]\",\n    \"z-[calc(50+var(--layer-index,0))]\",\n    \"relative\",\n    \"row-start-2\",\n    \"max-h-[calc(100svh-2rem)] min-h-0 w-full min-w-0\",\n    \"flex flex-col overflow-hidden\",\n    \"bg-popover\",\n    \"text-popover-foreground\",\n    \"rounded-2xl border shadow-lg/5\",\n    \"outline-none\",\n    \"translate-y-[calc(-1.25rem*var(--nested-layer-count))]\",\n    \"transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform\",\n    \"data-[nested=dialog]:data-[state=closed]:slide-in-from-bottom-10 data-[nested=dialog]:data-[state=open]:slide-in-from-bottom-10 data-[has-nested=dialog]:origin-top\",\n    \"scale-[calc(1-0.1*var(--nested-layer-count))] opacity-[calc(1-0.1*var(--nested-layer-count))]\",\n    \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:animate-out\",\n    \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:animate-in\",\n    \"motion-reduce:animate-none! motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"max-w-md\"],\n      md: [\"max-w-lg\"],\n      lg: [\"max-w-xl\"],\n      xl: [\"max-w-2xl\"],\n      \"2xl\": [\"max-w-3xl\"],\n      \"3xl\": [\"max-w-4xl\"],\n      \"4xl\": [\"max-w-5xl\"],\n      \"5xl\": [\"max-w-6xl\"],\n      \"6xl\": [\"max-w-7xl\"],\n      fullscreen: [\"size-full\"],\n    },\n    bottomStickOnMobile: {\n      true: [\n        \"max-sm:max-h-[calc(100svh-3rem)]\",\n        \"max-sm:max-w-none\",\n        \"max-sm:rounded-none max-sm:rounded-t-2xl max-sm:border-x-0 max-sm:border-t max-sm:border-b-0\",\n        \"max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))]\",\n        \"max-sm:data-[state=closed]:slide-out-to-bottom-5 max-sm:data-[state=open]:slide-in-from-bottom-5\",\n        \"max-sm:data-[state=closed]:zoom-out-100 max-sm:data-[state=open]:zoom-in-100\",\n      ],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ninterface DialogContentProps\n  extends React.ComponentProps<typeof ArkDialog.Content>,\n    VariantProps<typeof dialogContentVariants> {\n  /**\n   * Stick the dialog to the bottom of the screen on mobile\n   *\n   * @default true\n   */\n  bottomStickOnMobile?: boolean;\n  /**\n   * Show close button at the top right corner\n   *\n   * @default true\n   */\n  showCloseButton?: boolean;\n}\n\nexport const DialogContent = (props: DialogContentProps) => {\n  const {\n    showCloseButton = true,\n    bottomStickOnMobile = true,\n    size = \"md\",\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <Portal>\n      <DialogOverlay />\n\n      <DialogPositioner\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\"\n        )}\n      >\n        <ArkDialog.Content\n          className={cn(\n            dialogContentVariants({ size, bottomStickOnMobile }),\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"dialog-content\"}\n        >\n          {children}\n\n          {!!showCloseButton && (\n            <DialogClose 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            </DialogClose>\n          )}\n        </ArkDialog.Content>\n      </DialogPositioner>\n    </Portal>\n  );\n};\n\ninterface DialogBodyProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * Add a fade effect to the scroll area\n   *\n   * @default false\n   */\n  scrollFade?: boolean;\n}\n\nexport const DialogBody = (props: DialogBodyProps) => {\n  const { scrollFade = false, className, slot, ...rest } = props;\n\n  return (\n    <ScrollArea className=\"min-h-0 flex-1\" scrollFade={scrollFade}>\n      <ark.div\n        className={cn(\n          \"p-(--space)\",\n          \"in-[[data-slot=dialog-content]:has([data-slot=dialog-header])]:pt-0\",\n          \"in-[[data-slot=dialog-content]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"dialog-body\"}\n      />\n    </ScrollArea>\n  );\n};\n\ninterface DialogHeaderProps extends React.ComponentProps<typeof ark.div> {\n  /**\n   * The description of the dialog\n   */\n  description?: string;\n  /**\n   * The title of the dialog\n   */\n  title?: string;\n}\n\nexport const DialogHeader = (props: DialogHeaderProps) => {\n  const { className, title, description, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"shrink-0\",\n        \"p-(--space)\",\n        \"flex flex-col gap-2\",\n        \"in-[[data-slot=dialog-content]:has([data-slot=dialog-body])]:pb-3\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"dialog-header\"}\n    >\n      {!!title && <DialogTitle>{title}</DialogTitle>}\n\n      {!!description && <DialogDescription>{description}</DialogDescription>}\n\n      {!title && typeof children === \"string\" ? (\n        <DialogTitle>{children}</DialogTitle>\n      ) : (\n        children\n      )}\n    </ark.div>\n  );\n};\n\nexport const DialogTitle = (\n  props: React.ComponentProps<typeof ArkDialog.Title>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDialog.Title\n      className={cn(\n        \"font-heading font-semibold text-lg leading-none\",\n        // Reserve inline-end room so the absolutely-positioned close X never overlaps the title.\n        \"in-[[data-slot=dialog-content]:has([data-slot=dialog-close-trigger])]:pe-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"dialog-title\"}\n    />\n  );\n};\n\nexport const DialogDescription = (\n  props: React.ComponentProps<typeof ArkDialog.Description>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDialog.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"dialog-description\"}\n    />\n  );\n};\n\nexport const DialogClose = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDialog.CloseTrigger>) => (\n  <ArkDialog.CloseTrigger\n    {...rest}\n    data-slot={slot ?? \"dialog-close-trigger\"}\n  />\n);\n\nexport const DialogFooter = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"shrink-0\",\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        \"sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n        \"px-(--space) py-4\",\n        \"border-t\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"dialog-footer\"}\n    />\n  );\n};\n\nconst _useDialog = () => {\n  const context = React.useContext(DialogContext);\n\n  if (!context) {\n    throw new Error(\"useDialog must be used within a DialogProvider\");\n  }\n\n  return context;\n};\n"],"names":["DialogContext"],"mappings":";;;;;;;;;;;AAYO;AAYPA;AAEO;AACL;AAAM;AACI;AACI;AACI;AACb;AAGL;AAEI;AAAW;AAAV;AACC;AACA;AACA;AACI;AAAA;AAIZ;AAMwC;AAChC;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AAEJ;AAKE;AAIA;AAKE;AAAW;AAAV;AACiD;AAC5C;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAEwC;AAChC;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACF;AACW;AACA;AACA;AACC;AACG;AACA;AACA;AACA;AACA;AACK;AAAA;AAEL;AACb;AACJ;AACA;AACA;AACA;AACA;AACA;AAAA;AACF;AACF;AAEe;AACT;AAEV;AAoBE;AAAM;AACc;AACI;AACf;AACP;AACA;AACA;AACG;AAGL;AAEI;AAAe;AAEf;AAAC;AAAA;AACY;AAEP;AAAA;AAGJ;AAAW;AAAV;AACY;AAC0C;AACnD;AAAA;AAEE;AACe;AAElB;AAAA;AAIG;AAAC;AAAA;AACY;AAID;AACL;AACG;AAED;AAAA;AAEX;AAAA;AAAA;AAAA;AAEJ;AAAA;AAIR;AAYE;AAEA;AAEI;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAI3B;AAcE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAA+B;AAEkB;AAKhD;AAAA;AAAA;AAIR;AAKE;AAEA;AACE;AAAW;AAAV;AACY;AACT;AAAA;AAEA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAW;AAAV;AACyD;AACpD;AACe;AAAA;AAGzB;AAE4B;AAC1B;AAEF;AACE;AAAW;AAAV;AACK;AACe;AACrB;AAIA;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAGE;AAEA;AACE;AAGF;AACF;;;;;;;;;;;;;;;;;"}

package/dist/simples/download-trigger.d.ts

@@ -0,0 +1,3 @@
+import { DownloadTrigger as ArkDownloadTrigger } from '@ark-ui/react/download-trigger';
+export declare const DownloadTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkDownloadTrigger>) => import("react").JSX.Element;
+//# sourceMappingURL=download-trigger.d.ts.map

package/dist/simples/download-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-trigger.d.ts","sourceRoot":"","sources":["../../src/simples/download-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGvF,eAAO,MAAM,eAAe,GAC1B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,gCACQ,CAAC"}

package/dist/simples/download-trigger.js

@@ -0,0 +1,7 @@
+import { jsx as g } from "react/jsx-runtime";
+import { DownloadTrigger as a } from "@ark-ui/react/download-trigger";
+const i = ({ slot: o, ...r }) => /* @__PURE__ */ g(a, { ...r, "data-slot": o ?? "download-trigger" });
+export {
+  i as DownloadTrigger
+};
+//# sourceMappingURL=download-trigger.js.map

package/dist/simples/download-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-trigger.js","sources":["../../src/simples/download-trigger.tsx"],"sourcesContent":["import { DownloadTrigger as ArkDownloadTrigger } from \"@ark-ui/react/download-trigger\";\n\n// Renders a `<button>` (compose our Button via `asChild`) that turns `data` into a file download.\nexport const DownloadTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkDownloadTrigger>\n) => <ArkDownloadTrigger {...rest} data-slot={slot ?? \"download-trigger\"} />;\n"],"names":["DownloadTrigger","slot","rest","jsx","ArkDownloadTrigger"],"mappings":";;AAGO,MAAMA,IAAkB,CAC7B,EAAE,MAAAC,GAAM,GAAGC,EAAA,MACR,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAM,aAAWD,KAAQ,mBAAA,CAAoB;"}

package/dist/simples/editable.d.ts

@@ -0,0 +1,23 @@
+import { Editable as ArkEditable } from '@ark-ui/react/editable';
+import { default as React } from 'react';
+import { ButtonProps } from './button';
+export declare const useEditable: () => import('@ark-ui/react').UseEditableContext;
+export interface EditableProps extends React.ComponentProps<typeof ArkEditable.Root> {
+    orientation?: "horizontal" | "vertical";
+}
+export declare const Editable: (props: EditableProps) => React.JSX.Element;
+export declare const EditableArea: (props: React.ComponentProps<typeof ArkEditable.Area>) => React.JSX.Element;
+export interface EditableInputProps extends Omit<React.ComponentProps<typeof ArkEditable.Input>, "size"> {
+}
+export declare const EditableInput: ({ slot, ...rest }: EditableInputProps) => React.JSX.Element;
+interface EditablePreviewProps extends React.ComponentProps<typeof ArkEditable.Preview> {
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+}
+export declare const EditablePreview: (props: EditablePreviewProps) => React.JSX.Element;
+export declare const EditableControl: (props: React.ComponentProps<typeof ArkEditable.Control>) => React.JSX.Element;
+export declare const EditableEditTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkEditable.EditTrigger>) => React.JSX.Element;
+export declare const EditableCancelTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkEditable.CancelTrigger>) => React.JSX.Element;
+export declare const EditableSubmitTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkEditable.SubmitTrigger>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=editable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../../src/simples/editable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAsB,MAAM,wBAAwB,CAAC;AACrF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,UAAU,CAAC;AAE5D,eAAO,MAAM,WAAW,kDAAqB,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAkB5C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,sBAMhF,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CAAG;AAEzE,eAAO,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,sBAElE,CAAC;AAEF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC;IACrF,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,sBActF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,WAAW,CAAC,sBACa,CAAC;AAEvF,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,sBACe,CAAC;AAE3F,eAAO,MAAM,qBAAqB,GAChC,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,sBACe,CAAC"}

package/dist/simples/editable.js

@@ -0,0 +1,70 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useEditableContext as d, Editable as i } from "@ark-ui/react/editable";
+import { cn as s } from "../lib/cn.js";
+import { buttonVariants as c } from "./button.js";
+const p = d, f = (t) => {
+  const { orientation: e = "horizontal", className: r, slot: l, ...o } = t;
+  return /* @__PURE__ */ a(
+    i.Root,
+    {
+      className: s(
+        "group/editable",
+        "relative",
+        "w-full",
+        "data-[orientation=vertical]:items-end",
+        "flex items-center gap-2",
+        r
+      ),
+      "data-orientation": e,
+      ...o,
+      "data-slot": l ?? "editable"
+    }
+  );
+}, E = (t) => {
+  const { className: e, slot: r, ...l } = t;
+  return /* @__PURE__ */ a(i.Area, { className: s("w-full", e), ...l, "data-slot": r ?? "editable-area" });
+}, x = ({ slot: t, ...e }) => /* @__PURE__ */ a(i.Input, { ...e, "data-slot": t ?? "editable-input" }), w = (t) => {
+  const { variant: e = "outline", size: r = "md", className: l, slot: o, ...n } = t;
+  return /* @__PURE__ */ a(
+    i.Preview,
+    {
+      className: s(
+        c({ variant: e, size: r, clickEffect: !1 }),
+        "w-full justify-start",
+        "px-3",
+        "whitespace-pre-wrap font-normal text-base sm:text-sm",
+        "data-placeholder-shown:text-muted-foreground",
+        "in-[[data-slot=editable-area]:has(textarea)]:items-start",
+        l
+      ),
+      ...n,
+      "data-slot": o ?? "editable-preview"
+    }
+  );
+}, N = (t) => {
+  const { className: e, slot: r, ...l } = t;
+  return /* @__PURE__ */ a(
+    i.Control,
+    {
+      className: s(
+        "group-data-[orientation=vertical]/editable:flex-col",
+        "inline-flex items-center gap-2",
+        e
+      ),
+      ...l,
+      "data-slot": r ?? "editable-control"
+    }
+  );
+}, v = ({ slot: t, ...e }) => /* @__PURE__ */ a(i.EditTrigger, { ...e, "data-slot": t ?? "editable-edit-trigger" }), T = ({ slot: t, ...e }) => /* @__PURE__ */ a(i.CancelTrigger, { ...e, "data-slot": t ?? "editable-cancel-trigger" }), h = ({ slot: t, ...e }) => /* @__PURE__ */ a(i.SubmitTrigger, { ...e, "data-slot": t ?? "editable-submit-trigger" });
+export {
+  f as Editable,
+  E as EditableArea,
+  T as EditableCancelTrigger,
+  N as EditableControl,
+  v as EditableEditTrigger,
+  x as EditableInput,
+  w as EditablePreview,
+  h as EditableSubmitTrigger,
+  p as useEditable
+};
+//# sourceMappingURL=editable.js.map

package/dist/simples/editable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable.js","sources":["../../src/simples/editable.tsx"],"sourcesContent":["import { Editable as ArkEditable, useEditableContext } from \"@ark-ui/react/editable\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { type ButtonProps, buttonVariants } from \"./button\";\n\nexport const useEditable = useEditableContext;\n\nexport interface EditableProps extends React.ComponentProps<typeof ArkEditable.Root> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const Editable = (props: EditableProps) => {\n  const { orientation = \"horizontal\", className, slot, ...rest } = props;\n\n  return (\n    <ArkEditable.Root\n      className={cn(\n        \"group/editable\",\n        \"relative\",\n        \"w-full\",\n        \"data-[orientation=vertical]:items-end\",\n        \"flex items-center gap-2\",\n        className,\n      )}\n      data-orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"editable\"}\n    />\n  );\n};\n\nexport const EditableArea = (props: React.ComponentProps<typeof ArkEditable.Area>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkEditable.Area className={cn(\"w-full\", className)} {...rest} data-slot={slot ?? \"editable-area\"} />\n  );\n};\n\nexport interface EditableInputProps\n  extends Omit<React.ComponentProps<typeof ArkEditable.Input>, \"size\"> {}\n\nexport const EditableInput = ({ slot, ...rest }: EditableInputProps) => (\n  <ArkEditable.Input {...rest} data-slot={slot ?? \"editable-input\"} />\n);\n\ninterface EditablePreviewProps extends React.ComponentProps<typeof ArkEditable.Preview> {\n  size?: ButtonProps[\"size\"];\n  variant?: ButtonProps[\"variant\"];\n}\n\nexport const EditablePreview = (props: EditablePreviewProps) => {\n  const { variant = \"outline\", size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkEditable.Preview\n      className={cn(\n        buttonVariants({ variant, size, clickEffect: false }),\n        \"w-full justify-start\",\n        \"px-3\",\n        \"whitespace-pre-wrap font-normal text-base sm:text-sm\",\n        \"data-placeholder-shown:text-muted-foreground\",\n        \"in-[[data-slot=editable-area]:has(textarea)]:items-start\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"editable-preview\"}\n    />\n  );\n};\n\nexport const EditableControl = (props: React.ComponentProps<typeof ArkEditable.Control>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkEditable.Control\n      className={cn(\n        \"group-data-[orientation=vertical]/editable:flex-col\",\n        \"inline-flex items-center gap-2\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"editable-control\"}\n    />\n  );\n};\n\nexport const EditableEditTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkEditable.EditTrigger>,\n) => <ArkEditable.EditTrigger {...rest} data-slot={slot ?? \"editable-edit-trigger\"} />;\n\nexport const EditableCancelTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkEditable.CancelTrigger>,\n) => <ArkEditable.CancelTrigger {...rest} data-slot={slot ?? \"editable-cancel-trigger\"} />;\n\nexport const EditableSubmitTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkEditable.SubmitTrigger>,\n) => <ArkEditable.SubmitTrigger {...rest} data-slot={slot ?? \"editable-submit-trigger\"} />;\n"],"names":["useEditable","useEditableContext","Editable","props","orientation","className","slot","rest","jsx","ArkEditable","cn","EditableArea","EditableInput","EditablePreview","variant","size","buttonVariants","EditableControl","EditableEditTrigger","EditableCancelTrigger","EditableSubmitTrigger"],"mappings":";;;;AAKO,MAAMA,IAAcC,GAMdC,IAAW,CAACC,MAAyB;AAChD,QAAM,EAAE,aAAAC,IAAc,cAAc,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAEjE,SACE,gBAAAK;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MACjB,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaK,IAAe,CAACR,MAAyD;AACpF,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK,EAACC,EAAY,MAAZ,EAAiB,WAAWC,EAAG,UAAUL,CAAS,GAAI,GAAGE,GAAM,aAAWD,KAAQ,gBAAA,CAAiB;AAExG,GAKaM,IAAgB,CAAC,EAAE,MAAAN,GAAM,GAAGC,EAAA,MACvC,gBAAAC,EAACC,EAAY,OAAZ,EAAmB,GAAGF,GAAM,aAAWD,KAAQ,iBAAA,CAAkB,GAQvDO,IAAkB,CAACV,MAAgC;AAC9D,QAAM,EAAE,SAAAW,IAAU,WAAW,MAAAC,IAAO,MAAM,WAAAV,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASJ;AAEvE,SACE,gBAAAK;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACTM,EAAe,EAAE,SAAAF,GAAS,MAAAC,GAAM,aAAa,IAAO;AAAA,QACpD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAV;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaW,IAAkB,CAACd,MAA4D;AAC1F,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaY,IAAsB,CACjC,EAAE,MAAAZ,GAAM,GAAGC,EAAA,MACR,gBAAAC,EAACC,EAAY,aAAZ,EAAyB,GAAGF,GAAM,aAAWD,KAAQ,wBAAA,CAAyB,GAEvEa,IAAwB,CACnC,EAAE,MAAAb,GAAM,GAAGC,EAAA,MACR,gBAAAC,EAACC,EAAY,eAAZ,EAA2B,GAAGF,GAAM,aAAWD,KAAQ,0BAAA,CAA2B,GAE3Ec,IAAwB,CACnC,EAAE,MAAAd,GAAM,GAAGC,EAAA,MACR,gBAAAC,EAACC,EAAY,eAAZ,EAA2B,GAAGF,GAAM,aAAWD,KAAQ,0BAAA,CAA2B;"}

package/dist/simples/field.d.ts

@@ -0,0 +1,58 @@
+import { ark } from '@ark-ui/react/factory';
+import { Field as ArkField } from '@ark-ui/react/field';
+import { Fieldset as ArkFieldset } from '@ark-ui/react/fieldset';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const useField: () => import('@ark-ui/react').UseFieldContext;
+declare const fieldVariants: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string[];
+        horizontal: string[];
+        responsive: string[];
+    };
+    reverse: {
+        true: string[];
+    };
+}, undefined, string[], {
+    orientation: {
+        vertical: string[];
+        horizontal: string[];
+        responsive: string[];
+    };
+    reverse: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: string[];
+        horizontal: string[];
+        responsive: string[];
+    };
+    reverse: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface FieldProps extends React.ComponentProps<typeof ArkField.Root>, VariantProps<typeof fieldVariants> {
+}
+export declare const Field: (props: FieldProps) => React.JSX.Element;
+export declare const FieldSet: (props: React.ComponentProps<typeof ArkFieldset.Root>) => React.JSX.Element;
+interface FieldLegendProps extends React.ComponentProps<typeof ArkFieldset.Legend> {
+    /**
+     * The variant of the legend.
+     */
+    variant?: "legend" | "label";
+}
+export declare const FieldLegend: (props: FieldLegendProps) => React.JSX.Element;
+export declare const FieldGroup: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const FieldContent: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const FieldLabel: (props: React.ComponentProps<typeof ArkField.Label>) => React.JSX.Element;
+export declare const FieldRequiredIndicator: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+export declare const FieldTitle: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const FieldDescription: (props: React.ComponentProps<typeof ark.p>) => React.JSX.Element;
+export declare const FieldSeparator: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export declare const FieldHelper: (props: React.ComponentProps<typeof ArkField.HelperText>) => React.JSX.Element;
+export declare const FieldError: (props: React.ComponentProps<typeof ArkField.ErrorText>) => React.JSX.Element;
+export declare const FieldSetHelper: (props: React.ComponentProps<typeof ArkFieldset.HelperText>) => React.JSX.Element;
+export declare const FieldSetError: (props: React.ComponentProps<typeof ArkFieldset.ErrorText>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=field.d.ts.map

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

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