@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/tags-input.js

@@ -0,0 +1,228 @@
+import { jsx as a } from "react/jsx-runtime";
+import { TagsInput as r, useTagsInput as l, useTagsInputContext as u } from "@ark-ui/react/tags-input";
+import { XIcon as d } from "lucide-react";
+import { tv as c } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { FieldLabel as g } from "./field.js";
+const b = l, T = u, N = r.Context, w = (e) => {
+  const { className: t, children: s, slot: n, ...o } = e;
+  return /* @__PURE__ */ a(
+    r.Root,
+    {
+      className: i(
+        "flex flex-col gap-2",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        t
+      ),
+      ...o,
+      "data-slot": n ?? "tags-input",
+      children: s
+    }
+  );
+}, y = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.RootProvider,
+    {
+      className: i(
+        "flex flex-col gap-2",
+        "data-invalid:text-destructive dark:data-invalid:text-destructive-foreground",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "tags-input-root-provider"
+    }
+  );
+}, C = (e) => {
+  const { children: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(g, { asChild: !0, children: /* @__PURE__ */ a(r.Label, { ...n, "data-slot": s ?? "tags-input-label", children: t }) });
+}, p = c({
+  base: [
+    "group/tags-input-control",
+    "relative",
+    "w-full min-w-0",
+    "flex flex-wrap items-center gap-1.5",
+    "bg-background bg-field",
+    "rounded-field border border-input shadow-xs/5",
+    "transition-[color,box-shadow]",
+    "outline-none",
+    "focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring",
+    "data-focus:border-primary data-focus:ring-[3px] data-focus:ring-ring",
+    "data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    size: {
+      sm: ["min-h-7", "p-1"],
+      md: ["min-h-8", "p-1.5"],
+      lg: ["min-h-9", "p-1.5"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), z = (e) => {
+  const { size: t = "md", className: s, slot: n, ...o } = e;
+  return /* @__PURE__ */ a(
+    r.Control,
+    {
+      className: i(p({ size: t }), s),
+      "data-size": t,
+      ...o,
+      "data-slot": n ?? "tags-input-control"
+    }
+  );
+}, k = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.Input,
+    {
+      className: i(
+        "h-6 flex-1 min-w-16",
+        "ps-1.5 pe-1",
+        "bg-transparent",
+        "text-base md:text-sm",
+        "outline-none",
+        "placeholder:text-faint",
+        "disabled:pointer-events-none",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "tags-input-input"
+    }
+  );
+}, P = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.Item,
+    {
+      className: i(
+        "inline-flex items-center",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "tags-input-item"
+    }
+  );
+}, _ = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.ItemPreview,
+    {
+      className: i(
+        "inline-flex items-center gap-1",
+        "h-6",
+        "ps-2 pe-1",
+        "select-none whitespace-nowrap font-medium text-xs",
+        "rounded-md border border-secondary/20",
+        "bg-secondary text-secondary-foreground",
+        "data-highlighted:border-primary data-highlighted:ring-[3px] data-highlighted:ring-ring",
+        "data-disabled:opacity-64",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "tags-input-item-preview"
+    }
+  );
+}, j = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.ItemText,
+    {
+      className: i("px-0.5", t),
+      ...n,
+      "data-slot": s ?? "tags-input-item-text"
+    }
+  );
+}, L = (e) => {
+  const { className: t, slot: s, ...n } = e;
+  return /* @__PURE__ */ a(
+    r.ItemInput,
+    {
+      className: i(
+        "h-6 min-w-16",
+        "px-1",
+        "bg-transparent",
+        "text-xs",
+        "outline-none",
+        t
+      ),
+      ...n,
+      "data-slot": s ?? "tags-input-item-input"
+    }
+  );
+}, R = (e) => {
+  const { className: t, children: s, slot: n, ...o } = e;
+  return /* @__PURE__ */ a(
+    r.ItemDeleteTrigger,
+    {
+      className: i(
+        "inline-flex items-center justify-center shrink-0",
+        "size-4",
+        "rounded-sm",
+        "text-secondary-foreground/64",
+        "transition-colors",
+        "outline-none",
+        "hover:text-secondary-foreground",
+        "focus-visible:ring-[3px] focus-visible:ring-ring",
+        "[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none",
+        t
+      ),
+      ...o,
+      "data-slot": n ?? "tags-input-item-delete-trigger",
+      children: s ?? /* @__PURE__ */ a(d, { "aria-hidden": !0 })
+    }
+  );
+}, $ = (e) => {
+  const { className: t, children: s, slot: n, ...o } = e;
+  return /* @__PURE__ */ a(
+    r.ClearTrigger,
+    {
+      className: i(
+        "inline-flex items-center justify-center shrink-0",
+        "size-6",
+        "rounded-md",
+        "text-muted-foreground",
+        "transition-colors",
+        "outline-none",
+        "hover:text-foreground",
+        "focus-visible:ring-[3px] focus-visible:ring-ring",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        t
+      ),
+      ...o,
+      "data-slot": n ?? "tags-input-clear-trigger",
+      children: s ?? /* @__PURE__ */ a(d, { "aria-hidden": !0 })
+    }
+  );
+}, D = ({
+  slot: e,
+  ...t
+}) => /* @__PURE__ */ a(
+  r.HiddenInput,
+  {
+    ...t,
+    "data-slot": e ?? "tags-input-hidden-input"
+  }
+);
+export {
+  w as TagsInput,
+  $ as TagsInputClearTrigger,
+  N as TagsInputContext,
+  z as TagsInputControl,
+  D as TagsInputHiddenInput,
+  k as TagsInputInput,
+  P as TagsInputItem,
+  R as TagsInputItemDeleteTrigger,
+  L as TagsInputItemInput,
+  _ as TagsInputItemPreview,
+  j as TagsInputItemText,
+  C as TagsInputLabel,
+  y as TagsInputRootProvider,
+  b as useTagsInput,
+  T as useTagsInputContext
+};
+//# sourceMappingURL=tags-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.js","sources":["../../src/simples/tags-input.tsx"],"sourcesContent":["import {\n  TagsInput as ArkTagsInput,\n  useTagsInput as useArkTagsInput,\n  useTagsInputContext as useArkTagsInputContext,\n} from \"@ark-ui/react/tags-input\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel } from \"./field\";\n\n/**\n * The only place the plain name is a CHOICE, and it goes to the machine hook.\n *\n * Thirty-six components here write `export const useX = useXContext`, and so does Shark in fifty of\n * its ninety-five — `accordion.tsx` is our line character for character. `tags-input` is where Shark\n * ships both, because {@link TagsInputRootProvider} needs a machine to be handed, and a compound\n * that offers a controlled root has two hooks to name rather than one. So the plain name goes to the\n * machine and the context hook takes the suffix, here as there.\n *\n * `useHighlight` is also a machine hook and is not the same case: Ark's `highlight` module exports\n * no context hook at all, so there was nothing to choose between. Here both exist.\n *\n * If you are reaching for the value, the items or `clearAll` from inside the compound, that is\n * {@link useTagsInputContext}.\n */\nexport const useTagsInput = useArkTagsInput;\n\n/** The context hook — what `useX` is everywhere else in this library. */\nexport const useTagsInputContext = useArkTagsInputContext;\n\n// Render-prop context used to map the machine's value into styled items.\nexport const TagsInputContext = ArkTagsInput.Context;\n\nexport const TagsInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Root>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Root\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input\"}\n    >\n      {children}\n    </ArkTagsInput.Root>\n  );\n};\n\n/**\n * The controlled root: build the machine with {@link useTagsInput} and pass it as `value`.\n *\n * The same shape as `FileUploadRootProvider`, and for the same reason — a surface outside the\n * compound that has to drive it. It is also why this file names two hooks where the rest of the\n * library names one.\n */\nexport const TagsInputRootProvider = (\n  props: React.ComponentProps<typeof ArkTagsInput.RootProvider>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.RootProvider\n      className={cn(\n        \"flex flex-col gap-2\",\n        \"data-invalid:text-destructive dark:data-invalid:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-root-provider\"}\n    />\n  );\n};\n\nexport const TagsInputLabel = (\n  props: React.ComponentProps<typeof ArkTagsInput.Label>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldLabel asChild>\n      <ArkTagsInput.Label {...rest} data-slot={slot ?? \"tags-input-label\"}>\n        {children}\n      </ArkTagsInput.Label>\n    </FieldLabel>\n  );\n};\n\nconst tagsInputControlVariants = tv({\n  base: [\n    \"group/tags-input-control\",\n    \"relative\",\n    \"w-full min-w-0\",\n    \"flex flex-wrap items-center gap-1.5\",\n    \"bg-background bg-field\",\n    \"rounded-field border border-input shadow-xs/5\",\n    \"transition-[color,box-shadow]\",\n    \"outline-none\",\n    \"focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring\",\n    \"data-focus:border-primary data-focus:ring-[3px] data-focus:ring-ring\",\n    \"data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    size: {\n      sm: [\"min-h-7\", \"p-1\"],\n      md: [\"min-h-8\", \"p-1.5\"],\n      lg: [\"min-h-9\", \"p-1.5\"],\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface TagsInputControlProps\n  extends React.ComponentProps<typeof ArkTagsInput.Control>,\n    VariantProps<typeof tagsInputControlVariants> {}\n\nexport const TagsInputControl = (props: TagsInputControlProps) => {\n  const { size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Control\n      className={cn(tagsInputControlVariants({ size }), className)}\n      data-size={size}\n      {...rest}\n      data-slot={slot ?? \"tags-input-control\"}\n    />\n  );\n};\n\nexport const TagsInputInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.Input>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Input\n      className={cn(\n        \"h-6 flex-1 min-w-16\",\n        \"ps-1.5 pe-1\",\n        \"bg-transparent\",\n        \"text-base md:text-sm\",\n        \"outline-none\",\n        \"placeholder:text-faint\",\n        \"disabled:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-input\"}\n    />\n  );\n};\n\nexport const TagsInputItem = (\n  props: React.ComponentProps<typeof ArkTagsInput.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.Item\n      className={cn(\n        \"inline-flex items-center\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item\"}\n    />\n  );\n};\n\nexport const TagsInputItemPreview = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemPreview>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemPreview\n      className={cn(\n        \"inline-flex items-center gap-1\",\n        \"h-6\",\n        \"ps-2 pe-1\",\n        \"select-none whitespace-nowrap font-medium text-xs\",\n        \"rounded-md border border-secondary/20\",\n        \"bg-secondary text-secondary-foreground\",\n        \"data-highlighted:border-primary data-highlighted:ring-[3px] data-highlighted:ring-ring\",\n        \"data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-preview\"}\n    />\n  );\n};\n\nexport const TagsInputItemText = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemText\n      className={cn(\"px-0.5\", className)}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-text\"}\n    />\n  );\n};\n\nexport const TagsInputItemInput = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemInput>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemInput\n      className={cn(\n        \"h-6 min-w-16\",\n        \"px-1\",\n        \"bg-transparent\",\n        \"text-xs\",\n        \"outline-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-input\"}\n    />\n  );\n};\n\nexport const TagsInputItemDeleteTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ItemDeleteTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ItemDeleteTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-4\",\n        \"rounded-sm\",\n        \"text-secondary-foreground/64\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-secondary-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-item-delete-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ItemDeleteTrigger>\n  );\n};\n\nexport const TagsInputClearTrigger = (\n  props: React.ComponentProps<typeof ArkTagsInput.ClearTrigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkTagsInput.ClearTrigger\n      className={cn(\n        \"inline-flex items-center justify-center shrink-0\",\n        \"size-6\",\n        \"rounded-md\",\n        \"text-muted-foreground\",\n        \"transition-colors\",\n        \"outline-none\",\n        \"hover:text-foreground\",\n        \"focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tags-input-clear-trigger\"}\n    >\n      {children ?? <XIcon aria-hidden />}\n    </ArkTagsInput.ClearTrigger>\n  );\n};\n\nexport const TagsInputHiddenInput = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTagsInput.HiddenInput>) => (\n  <ArkTagsInput.HiddenInput\n    {...rest}\n    data-slot={slot ?? \"tags-input-hidden-input\"}\n  />\n);\n"],"names":["useTagsInput","useArkTagsInput","useTagsInputContext","useArkTagsInputContext","TagsInputContext","ArkTagsInput","TagsInput","props","className","children","slot","rest","jsx","cn","TagsInputRootProvider","TagsInputLabel","FieldLabel","tagsInputControlVariants","tv","TagsInputControl","size","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemInput","TagsInputItemDeleteTrigger","XIcon","TagsInputClearTrigger","TagsInputHiddenInput"],"mappings":"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"}

package/dist/simples/textarea.d.ts

@@ -0,0 +1,6 @@
+import { Field as ArkField } from '@ark-ui/react/field';
+import { default as React } from 'react';
+export interface TextareaProps extends React.ComponentProps<typeof ArkField.Textarea> {
+}
+export declare const Textarea: (props: TextareaProps) => React.JSX.Element;
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/simples/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC;CAAG;AAExF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAU5C,CAAC"}

package/dist/simples/textarea.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Field as d } from "@ark-ui/react/field";
+import { cn as o } from "../lib/cn.js";
+const n = [
+  "field-sizing-content min-h-16 w-full",
+  "flex",
+  "px-3 py-2",
+  "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",
+  "aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
+  "data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24",
+  "dark:aria-invalid:text-destructive-foreground",
+  "dark:data-invalid:text-destructive-foreground",
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64",
+  "motion-reduce:transition-none!"
+], u = (e) => {
+  const { className: i, slot: t, ...r } = e;
+  return /* @__PURE__ */ a(
+    d.Textarea,
+    {
+      className: o(n, i),
+      ...r,
+      "data-slot": t ?? "textarea"
+    }
+  );
+};
+export {
+  u as Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/simples/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../src/simples/textarea.tsx"],"sourcesContent":["import { Field as ArkField } from \"@ark-ui/react/field\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nconst textareaBase = [\n  \"field-sizing-content min-h-16 w-full\",\n  \"flex\",\n  \"px-3 py-2\",\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  \"aria-invalid:border-destructive aria-invalid:text-destructive-foreground aria-invalid:ring-[3px] aria-invalid:ring-destructive/24\",\n  \"data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:ring-[3px] data-invalid:ring-destructive/24\",\n  \"dark:aria-invalid:text-destructive-foreground\",\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\nexport interface TextareaProps extends React.ComponentProps<typeof ArkField.Textarea> {}\n\nexport const Textarea = (props: TextareaProps) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkField.Textarea\n      className={cn(textareaBase, className)}\n      {...rest}\n      data-slot={slot ?? \"textarea\"}\n    />\n  );\n};\n"],"names":["textareaBase","Textarea","props","className","slot","rest","jsx","ArkField","cn"],"mappings":";;;AAIA,MAAMA,IAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIaC,IAAW,CAACC,MAAyB;AAChD,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,WAAWC,EAAGR,GAAcG,CAAS;AAAA,MACpC,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/toast.d.ts

@@ -0,0 +1,20 @@
+import { Toast as ArkToast, Toaster as ArkToaster, createToaster, CreateToasterReturn } from '@ark-ui/react/toast';
+import { default as React } from 'react';
+export declare const useToast: () => import('@ark-ui/react').UseToastContext;
+export declare const toast: CreateToasterReturn;
+interface ToasterProps extends Omit<React.ComponentProps<typeof ArkToaster>, "toaster" | "children"> {
+    /**
+     * Toaster instance
+     */
+    toaster?: ReturnType<typeof createToaster>;
+}
+export declare const Toaster: (props: ToasterProps) => React.JSX.Element;
+interface ToastItemProps extends React.ComponentProps<typeof ArkToast.Root> {
+    /**
+     * The toast item data
+     */
+    toast: ArkToast.Options;
+}
+export declare const ToastItem: (props: ToastItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/simples/toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,OAAO,IAAI,UAAU,EACrB,aAAa,EACb,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAQ7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,QAAQ,+CAAkB,CAAC;AAExC,eAAO,MAAM,KAAK,EAAE,mBAIlB,CAAC;AAEH,UAAU,YACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,SAAS,GAAG,UAAU,CACvB;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBAoB1C,CAAC;AAUF,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC;IACzE;;OAEG;IACH,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBA6F9C,CAAC"}

package/dist/simples/toast.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { Portal as p } from "@ark-ui/react/portal";
+import { useToastContext as f, Toast as a, Toaster as g, createToaster as h } from "@ark-ui/react/toast";
+import { XIcon as u, TriangleAlertIcon as x, InfoIcon as v, CircleAlertIcon as y, CircleCheckIcon as w } from "lucide-react";
+import { cn as l } from "../lib/cn.js";
+import { Button as d } from "./button.js";
+import { Spinner as T } from "./spinner.js";
+const D = f, b = h({
+  placement: "bottom-end",
+  overlap: !0,
+  max: 3
+}), O = (o) => {
+  const { toaster: e = b, className: r, style: i, ...n } = o;
+  return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
+    g,
+    {
+      className: l(
+        "w-[calc(100%-var(--viewport-offset-left))] sm:w-(--width)",
+        "data-[align=center]:left-[calc(var(--viewport-offset-right)/2)]!",
+        "sm:data-[align=center]:w-full",
+        r
+      ),
+      style: { "--width": "356px", ...i },
+      toaster: e,
+      ...n,
+      children: (c) => /* @__PURE__ */ t(N, { toast: c })
+    }
+  ) });
+}, C = {
+  loading: /* @__PURE__ */ t(T, {}),
+  success: /* @__PURE__ */ t(w, {}),
+  error: /* @__PURE__ */ t(y, {}),
+  info: /* @__PURE__ */ t(v, {}),
+  warning: /* @__PURE__ */ t(x, {})
+}, N = (o) => {
+  const { toast: e, className: r, slot: i, ...n } = o, c = e.type ? C[e.type] : null, m = e.closable === !1;
+  return /* @__PURE__ */ s(
+    a.Root,
+    {
+      className: l(
+        "z-(--z-index) translate-x-(--x) translate-y-(--y)",
+        "relative",
+        "w-[calc(100%-var(--viewport-offset-left))] sm:w-(--width)",
+        "px-3.5 py-3",
+        "flex items-start justify-between gap-1.5",
+        "bg-popover",
+        "select-none text-card-foreground text-sm",
+        "rounded-lg border shadow-lg/5",
+        "scale-(--scale) opacity-(--opacity)",
+        "transition-all duration-250 will-change-[translate,opacity,scale]",
+        "ease-[cubic-bezier(0.21,1.02,0.73,1)]",
+        "data-[state=closed]:transition-[translate,scale,opacity]",
+        "data-[state=closed]:duration-[300ms,300ms,150ms]",
+        "data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)]",
+        "motion-reduce:transition-none!",
+        r
+      ),
+      ...n,
+      "data-slot": i ?? "toast",
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex items-start gap-1.5", children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: l(
+                "in-data-[type=warning]:text-warning",
+                "in-data-[type=success]:text-success",
+                "in-data-[type=error]:text-destructive-foreground",
+                "in-data-[type=info]:text-info",
+                "[&_svg]:pointer-events-none [&_svg]:h-lh [&_svg]:w-4 [&_svg]:shrink-0"
+              ),
+              "data-slot": "toast-icon",
+              children: c
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ t(
+              a.Title,
+              {
+                className: "font-medium text-sm",
+                "data-slot": "toast-title",
+                children: e.title
+              }
+            ),
+            e.description && /* @__PURE__ */ t(
+              a.Description,
+              {
+                className: "text-muted-foreground text-sm",
+                "data-slot": "toast-description",
+                children: e.description
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          e.action && /* @__PURE__ */ t(
+            a.ActionTrigger,
+            {
+              asChild: !0,
+              onClick: e.action.onClick,
+              children: /* @__PURE__ */ t(d, { size: "sm", slot: "toast-action-trigger", variant: "secondary", children: e.action.label })
+            }
+          ),
+          !m && /* @__PURE__ */ t(a.CloseTrigger, { asChild: !0, children: /* @__PURE__ */ t(
+            d,
+            {
+              "aria-label": "Close",
+              className: "opacity-64 hover:opacity-100",
+              size: "icon-sm",
+              slot: "toast-close-trigger",
+              variant: "ghost",
+              children: /* @__PURE__ */ t(u, {})
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  N as ToastItem,
+  O as Toaster,
+  b as toast,
+  D as useToast
+};
+//# sourceMappingURL=toast.js.map

package/dist/simples/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../src/simples/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@ark-ui/react/portal\";\nimport {\n  Toast as ArkToast,\n  Toaster as ArkToaster,\n  createToaster,\n  type CreateToasterReturn,\n  useToastContext,\n} from \"@ark-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  TriangleAlertIcon,\n  XIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\nexport const useToast = useToastContext;\n\nexport const toast: CreateToasterReturn = createToaster({\n  placement: \"bottom-end\",\n  overlap: true,\n  max: 3,\n});\n\ninterface ToasterProps\n  extends Omit<\n    React.ComponentProps<typeof ArkToaster>,\n    \"toaster\" | \"children\"\n  > {\n  /**\n   * Toaster instance\n   */\n  toaster?: ReturnType<typeof createToaster>;\n}\n\nexport const Toaster = (props: ToasterProps) => {\n  const { toaster: toasterInstance = toast, className, style, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkToaster\n        className={cn(\n          \"w-[calc(100%-var(--viewport-offset-left))] sm:w-(--width)\",\n          \"data-[align=center]:left-[calc(var(--viewport-offset-right)/2)]!\",\n          \"sm:data-[align=center]:w-full\",\n          className\n        )}\n        style={{ \"--width\": \"356px\", ...style } as React.CSSProperties}\n        toaster={toasterInstance}\n        {...rest}\n      >\n        {(toastItem) => <ToastItem toast={toastItem} />}\n      </ArkToaster>\n    </Portal>\n  );\n};\n\nconst TOAST_ICONS = {\n  loading: <Spinner />,\n  success: <CircleCheckIcon />,\n  error: <CircleAlertIcon />,\n  info: <InfoIcon />,\n  warning: <TriangleAlertIcon />,\n} as const;\n\ninterface ToastItemProps extends React.ComponentProps<typeof ArkToast.Root> {\n  /**\n   * The toast item data\n   */\n  toast: ArkToast.Options;\n}\n\nexport const ToastItem = (props: ToastItemProps) => {\n  const { toast: toastData, className, slot, ...rest } = props;\n\n  const ToastIcon = toastData.type\n    ? TOAST_ICONS[toastData.type as keyof typeof TOAST_ICONS]\n    : null;\n\n  const isExplicitClosable = toastData.closable === false;\n\n  return (\n    <ArkToast.Root\n      className={cn(\n        \"z-(--z-index) translate-x-(--x) translate-y-(--y)\",\n        \"relative\",\n        \"w-[calc(100%-var(--viewport-offset-left))] sm:w-(--width)\",\n        \"px-3.5 py-3\",\n        \"flex items-start justify-between gap-1.5\",\n        \"bg-popover\",\n        \"select-none text-card-foreground text-sm\",\n        \"rounded-lg border shadow-lg/5\",\n        \"scale-(--scale) opacity-(--opacity)\",\n        \"transition-all duration-250 will-change-[translate,opacity,scale]\",\n        \"ease-[cubic-bezier(0.21,1.02,0.73,1)]\",\n        \"data-[state=closed]:transition-[translate,scale,opacity]\",\n        \"data-[state=closed]:duration-[300ms,300ms,150ms]\",\n        \"data-[state=closed]:ease-[cubic-bezier(0.06,0.71,0.55,1)]\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"toast\"}\n    >\n      <div className=\"flex items-start gap-1.5\">\n        <div\n          className={cn(\n            \"in-data-[type=warning]:text-warning\",\n            \"in-data-[type=success]:text-success\",\n            \"in-data-[type=error]:text-destructive-foreground\",\n            \"in-data-[type=info]:text-info\",\n            \"[&_svg]:pointer-events-none [&_svg]:h-lh [&_svg]:w-4 [&_svg]:shrink-0\"\n          )}\n          data-slot=\"toast-icon\"\n        >\n          {ToastIcon}\n        </div>\n\n        <div className=\"flex flex-col gap-0.5\">\n          <ArkToast.Title\n            className=\"font-medium text-sm\"\n            data-slot=\"toast-title\"\n          >\n            {toastData.title}\n          </ArkToast.Title>\n\n          {toastData.description && (\n            <ArkToast.Description\n              className=\"text-muted-foreground text-sm\"\n              data-slot=\"toast-description\"\n            >\n              {toastData.description}\n            </ArkToast.Description>\n          )}\n        </div>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        {toastData.action && (\n          <ArkToast.ActionTrigger\n            asChild\n            onClick={toastData.action.onClick}\n          >\n            <Button size=\"sm\" slot=\"toast-action-trigger\" variant=\"secondary\">\n              {toastData.action.label}\n            </Button>\n          </ArkToast.ActionTrigger>\n        )}\n\n        {!isExplicitClosable && (\n          <ArkToast.CloseTrigger asChild>\n            <Button\n              aria-label=\"Close\"\n              className=\"opacity-64 hover:opacity-100\"\n              size=\"icon-sm\"\n              slot=\"toast-close-trigger\"\n              variant=\"ghost\"\n            >\n              <XIcon />\n            </Button>\n          </ArkToast.CloseTrigger>\n        )}\n      </div>\n    </ArkToast.Root>\n  );\n};\n"],"names":["ArkToaster"],"mappings":";;;;;;;;AAsBO;AAEiD;AAC3C;AACF;AAEX;AAcE;AAEA;AAEI;AAACA;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAE8B;AACvB;AACL;AAEyC;AAAA;AAIrD;AAEoB;AACA;AACQ;AACF;AACR;AAElB;AAUE;AAQA;AACE;AAAU;AAAT;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAEnB;AACE;AAAA;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAET;AAAA;AAAA;AAID;AAAA;AAAU;AAAT;AACW;AACA;AAEC;AAAA;AAAA;AAIX;AAAU;AAAT;AACW;AACA;AAEC;AAAA;AAAA;AAGjB;AACF;AAGG;AACC;AAAU;AAAT;AACQ;AACmB;AAI1B;AAAA;AAAA;AAMA;AAAC;AAAA;AACY;AACD;AACL;AACA;AACG;AAED;AAAA;AAEX;AAEJ;AAAA;AAAA;AAGN;;;;;;;"}

package/dist/simples/toggle-group.d.ts

@@ -0,0 +1,20 @@
+import { ToggleGroup as ArkToggleGroup } from '@ark-ui/react/toggle-group';
+import { default as React } from 'react';
+import { ToggleProps } from './toggle';
+export declare const useToggleGroup: () => import('@ark-ui/react').UseToggleGroupContext;
+type ToggleGroupContextProps = Pick<ToggleProps, "variant" | "size"> & {
+    /**
+     * Gap between items.
+     *
+     * @default 0
+     */
+    spacing?: number;
+};
+interface ToggleGroupProps extends React.ComponentProps<typeof ArkToggleGroup.Root>, ToggleGroupContextProps {
+}
+export declare const ToggleGroup: (props: ToggleGroupProps) => React.JSX.Element;
+interface ToggleGroupItemProps extends React.ComponentProps<typeof ArkToggleGroup.Item> {
+}
+export declare const ToggleGroupItem: (props: ToggleGroupItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=toggle-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/simples/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,IAAI,cAAc,EAE9B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,cAAc,qDAA2B,CAAC;AAEvD,KAAK,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IACrE;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,UAAU,gBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EACtD,uBAAuB;CAAG;AAe9B,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBA8BlD,CAAC;AAEF,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;CAAG;AAE7D,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBA8B1D,CAAC"}

package/dist/simples/toggle-group.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useToggleGroupContext as f, ToggleGroup as g } from "@ark-ui/react/toggle-group";
+import d from "react";
+import { tv as v } from "tailwind-variants";
+import { cn as c } from "../lib/cn.js";
+import { Toggle as h } from "./toggle.js";
+const _ = f, u = d.createContext({}), x = v({
+  base: ["w-fit", "flex items-center gap-[--spacing(var(--gap))]", "rounded-lg"],
+  variants: {
+    orientation: {
+      horizontal: "flex-row pointer-coarse:*:after:min-w-auto",
+      vertical: "flex-col items-stretch pointer-coarse:*:after:min-h-auto"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}), y = (t) => {
+  const {
+    multiple: r = !0,
+    orientation: o = "horizontal",
+    variant: n = "ghost",
+    size: i = "md",
+    spacing: a = 0,
+    className: s,
+    style: l,
+    slot: p,
+    ...m
+  } = t;
+  return /* @__PURE__ */ e(u.Provider, { value: { variant: n, size: i, spacing: a }, children: /* @__PURE__ */ e(
+    g.Root,
+    {
+      className: c(x({ orientation: o }), s),
+      multiple: r,
+      orientation: o,
+      style: {
+        ...l,
+        "--gap": a
+      },
+      ...m,
+      "data-slot": p ?? "toggle-group"
+    }
+  ) });
+}, I = (t) => {
+  const { value: r, className: o, slot: n, ...i } = t, { variant: a, size: s, spacing: l } = z();
+  return /* @__PURE__ */ e(g.Item, { asChild: !0, value: r, children: /* @__PURE__ */ e(
+    h,
+    {
+      className: c(
+        "shrink-0 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none",
+        "data-[spacing=0]:px-2",
+        "data-[orientation=horizontal]:data-[spacing=0]:first:rounded-s-lg",
+        "data-[orientation=vertical]:data-[spacing=0]:first:rounded-t-lg",
+        "data-[orientation=horizontal]:data-[spacing=0]:last:rounded-e-lg",
+        "data-[orientation=vertical]:data-[spacing=0]:last:rounded-b-lg",
+        "data-[orientation=horizontal]:data-[spacing=0]:data-[variant=outline]:border-s-0",
+        "data-[orientation=vertical]:data-[spacing=0]:data-[variant=outline]:border-t-0",
+        "data-[orientation=horizontal]:data-[spacing=0]:data-[variant=outline]:first:border-s",
+        o
+      ),
+      "data-spacing": l,
+      "data-variant": a,
+      size: s,
+      variant: a,
+      ...i,
+      slot: n ?? "toggle-group-item"
+    }
+  ) });
+}, z = () => {
+  const t = d.useContext(u);
+  if (!t)
+    throw new Error("useToggleGroupContext must be used within a ToggleGroup");
+  return t;
+};
+export {
+  y as ToggleGroup,
+  I as ToggleGroupItem,
+  _ as useToggleGroup
+};
+//# sourceMappingURL=toggle-group.js.map

package/dist/simples/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":["../../src/simples/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ToggleGroup as ArkToggleGroup,\n  useToggleGroupContext as useArkToggleGroupContext,\n} from \"@ark-ui/react/toggle-group\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Toggle, type ToggleProps } from \"./toggle\";\n\nexport const useToggleGroup = useArkToggleGroupContext;\n\ntype ToggleGroupContextProps = Pick<ToggleProps, \"variant\" | \"size\"> & {\n  /**\n   * Gap between items.\n   *\n   * @default 0\n   */\n  spacing?: number;\n};\n\nconst ToggleGroupContext = React.createContext({} as ToggleGroupContextProps);\n\ninterface ToggleGroupProps\n  extends React.ComponentProps<typeof ArkToggleGroup.Root>,\n    ToggleGroupContextProps {}\n\nconst toggleGroupVariants = tv({\n  base: [\"w-fit\", \"flex items-center gap-[--spacing(var(--gap))]\", \"rounded-lg\"],\n  variants: {\n    orientation: {\n      horizontal: \"flex-row pointer-coarse:*:after:min-w-auto\",\n      vertical: \"flex-col items-stretch pointer-coarse:*:after:min-h-auto\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const ToggleGroup = (props: ToggleGroupProps) => {\n  const {\n    multiple = true,\n    orientation = \"horizontal\",\n    variant = \"ghost\",\n    size = \"md\",\n    spacing = 0,\n    className,\n    style,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n      <ArkToggleGroup.Root\n        className={cn(toggleGroupVariants({ orientation }), className)}\n        multiple={multiple}\n        orientation={orientation}\n        style={\n          {\n            ...style,\n            \"--gap\": spacing,\n          } as React.CSSProperties\n        }\n        {...rest}\n        data-slot={slot ?? \"toggle-group\"}\n      />\n    </ToggleGroupContext.Provider>\n  );\n};\n\ninterface ToggleGroupItemProps\n  extends React.ComponentProps<typeof ArkToggleGroup.Item> {}\n\nexport const ToggleGroupItem = (props: ToggleGroupItemProps) => {\n  const { value, className, slot, ...rest } = props;\n\n  const { variant, size, spacing } = _useToggleGroup();\n\n  return (\n    <ArkToggleGroup.Item asChild value={value}>\n      <Toggle\n        className={cn(\n          \"shrink-0 focus:z-10 focus-visible:z-10\",\n          \"data-[spacing=0]:rounded-none\",\n          \"data-[spacing=0]:px-2\",\n          \"data-[orientation=horizontal]:data-[spacing=0]:first:rounded-s-lg\",\n          \"data-[orientation=vertical]:data-[spacing=0]:first:rounded-t-lg\",\n          \"data-[orientation=horizontal]:data-[spacing=0]:last:rounded-e-lg\",\n          \"data-[orientation=vertical]:data-[spacing=0]:last:rounded-b-lg\",\n          \"data-[orientation=horizontal]:data-[spacing=0]:data-[variant=outline]:border-s-0\",\n          \"data-[orientation=vertical]:data-[spacing=0]:data-[variant=outline]:border-t-0\",\n          \"data-[orientation=horizontal]:data-[spacing=0]:data-[variant=outline]:first:border-s\",\n          className\n        )}\n        data-spacing={spacing}\n        data-variant={variant}\n        size={size}\n        variant={variant}\n        {...rest}\n        slot={slot ?? \"toggle-group-item\"}\n      />\n    </ArkToggleGroup.Item>\n  );\n};\n\nconst _useToggleGroup = () => {\n  const context = React.useContext(ToggleGroupContext);\n\n  if (!context) {\n    throw new Error(\"useToggleGroupContext must be used within a ToggleGroup\");\n  }\n\n  return context;\n};\n"],"names":[],"mappings":";;;;;;;AAWO;AAiBwB;AACgD;AACnE;AACK;AACC;AACF;AAAA;AACZ;AAEe;AACF;AAEjB;AAGE;AAAM;AACO;AACG;AACJ;AACH;AACG;AACV;AACA;AACA;AACG;AAGL;AAEI;AAAgB;AAAf;AAC8D;AAC7D;AACA;AAEE;AACK;AACM;AAAA;AAGT;AACe;AAAA;AAI3B;AAME;AAIA;AAEI;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEY;AACA;AACd;AACA;AACI;AACU;AAAA;AAItB;AAGE;AAEA;AACE;AAGF;AACF;;;;;;"}

package/dist/simples/toggle.d.ts

@@ -0,0 +1,35 @@
+import { Toggle as ArkToggle } from '@ark-ui/react/toggle';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { buttonVariants } from './button';
+export declare const useToggle: () => import('@ark-ui/react').UseToggleContext;
+export declare const toggleVariants: 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 interface ToggleProps extends React.ComponentProps<typeof ArkToggle.Root>, VariantProps<typeof toggleVariants> {
+    /**
+     * The variant of the toggle
+     *
+     * @default "outline"
+     */
+    variant?: Extract<VariantProps<typeof buttonVariants>["variant"], "outline" | "ghost">;
+}
+export declare const Toggle: (props: ToggleProps) => React.JSX.Element;
+export declare const ToggleIndicator: (props: React.ComponentProps<typeof ArkToggle.Indicator>) => React.JSX.Element;
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/simples/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAE1C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;qDAmBzB,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EACjD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CACf,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,EAC9C,SAAS,GAAG,OAAO,CACpB,CAAC;CACH;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,sBAcxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,sBAaxD,CAAC"}