@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/button.js

@@ -0,0 +1,157 @@
+import { jsx as e, jsxs as v, Fragment as b } from "react/jsx-runtime";
+import { ark as p } from "@ark-ui/react/factory";
+import { tv as f } from "tailwind-variants";
+import { cn as u } from "../lib/cn.js";
+import { Spinner as g } from "./spinner.js";
+const m = f({
+  base: [
+    "relative",
+    // The height is HERE, on the base, and every size variant only moves `--size`. Keyed off the
+    // part's own name instead — `[data-slot="button"][data-size="sm"]` — it was keyed off the one
+    // attribute this library lets a caller rename, and a renamed part silently lost its height:
+    // `ConversationScrollButton` measured 16×16 against a 24×24 floor. daisyUI's `.btn` does it
+    // this way for the same reason, and `no-measurement-on-a-renameable-slot.test.ts` holds it.
+    "h-(--size)",
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "whitespace-nowrap font-medium text-sm",
+    "border-solid",
+    "transition-all",
+    "outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-64",
+    "data-disabled:pointer-events-none data-disabled:opacity-64",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-64",
+    "data-[state=loading]:pointer-events-none",
+    "aria-invalid:border-destructive aria-invalid:ring-destructive/24",
+    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "motion-reduce:transition-none!"
+  ],
+  variants: {
+    variant: {
+      default: [
+        "[--btn-bg:var(--primary)]",
+        "[--btn-fg:var(--primary-foreground)]",
+        "focus-visible:border-background"
+      ],
+      outline: [
+        "[--btn-bg:transparent]",
+        "[--btn-fg:var(--foreground)]",
+        "[--btn-bd:var(--input)]",
+        "focus-visible:border-primary"
+      ],
+      destructive: [
+        "[--btn-bg:var(--destructive)]",
+        // Was `text-white` at 3.81 on red-500. The fill moved to `-600` and the ink became a token,
+        // because no choice of ink rescued red-500: white 3.81, near-black 4.15, AA needs 4.5.
+        "[--btn-fg:var(--destructive-content)]",
+        "focus-visible:border-background focus-visible:ring-destructive-foreground/32"
+      ],
+      secondary: [
+        "[--btn-bg:var(--secondary)]",
+        "[--btn-fg:var(--secondary-foreground)]",
+        "focus-visible:border-primary"
+      ],
+      ghost: [
+        "[--btn-bg:transparent]",
+        "[--btn-fg:var(--foreground)]",
+        "focus-visible:border-primary"
+      ],
+      // The one variant that opts OUT of the shared hover, because a link's hover is an underline
+      // and not a wash. A utility beats the recipe base by cascade layer, which is what makes
+      // opting out one class rather than an exception in the CSS.
+      link: [
+        "[--btn-bg:transparent]",
+        "[--btn-fg:var(--primary)]",
+        "underline-offset-4",
+        "hover:bg-transparent hover:underline active:bg-transparent",
+        "focus-visible:border-primary"
+      ]
+    },
+    /**
+     * Padding, gaps and icon sizes. **The heights are not here** — they are `--size-field` in
+     * `styles.css`, keyed off the `data-size` this recipe already writes, so a tenant can ask for
+     * compact controls without asking for tighter text.
+     *
+     * The floor is still measured rather than chosen. `xs` and `icon-xs` were both `1.5rem`, and
+     * every size is a `rem` against a root the density axis sets — 16px default, 14px compact, 18px
+     * comfortable — so they measured **21px in compact**, under the 24×24 WCAG 2.5.8 states in CSS
+     * pixels. `sm` is the smallest size that clears the bar in all three densities. No call site was
+     * failing: the spacing exception saves a clustered control, and every measured `xs` was in a
+     * cluster. The variant went because its NAME promised a size it could not deliver at one
+     * density, and nothing was published to break.
+     */
+    size: {
+      sm: ["[--size:calc(var(--size-field)*7)]", "px-2.5", "gap-1.5", "[&_svg:not([class*='size-'])]:size-3.5"],
+      md: ["[--size:calc(var(--size-field)*8)]", "px-3", "py-2"],
+      lg: ["[--size:calc(var(--size-field)*9)]", "px-3.5"],
+      xl: ["[--size:calc(var(--size-field)*10)]", "text-base", "px-4"],
+      // Square, and the width is stated rather than left to `aspect-ratio`: a caller who writes
+      // `w-fit` on top of an aspect ratio gets the icon's own width and a control twice as tall.
+      "icon-sm": ["[--size:calc(var(--size-field)*7)]", "w-(--size)", "px-0"],
+      "icon-md": ["[--size:calc(var(--size-field)*8)]", "w-(--size)", "px-0"],
+      "icon-lg": ["[--size:calc(var(--size-field)*9)]", "w-(--size)", "px-0"],
+      "icon-xl": [
+        "[--size:calc(var(--size-field)*10)]",
+        "w-(--size)",
+        "px-0",
+        "[&_svg:not([class*='size-'])]:size-5"
+      ]
+    },
+    clickEffect: {
+      true: "active:not-aria-[haspopup]:scale-[0.98]"
+    },
+    pill: {
+      true: [
+        "rounded-full",
+        "has-[>svg]:data-[size=sm]:pe-3.5",
+        "has-[>svg]:data-[size=md]:pe-4",
+        "has-[>svg]:data-[size=lg]:pe-4.5",
+        "has-[>svg]:data-[size=xl]:pe-5"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    clickEffect: !0,
+    pill: !1
+  }
+}), w = (t) => {
+  const {
+    variant: s = "default",
+    size: r = "md",
+    clickEffect: n = !0,
+    pill: o = !1,
+    isLoading: i = !1,
+    className: l,
+    children: a,
+    slot: d,
+    ...c
+  } = t;
+  return /* @__PURE__ */ e(
+    p.button,
+    {
+      className: u(
+        m({ variant: s, size: r, clickEffect: n, pill: o }),
+        l
+      ),
+      "data-size": r,
+      "data-state": i ? "loading" : "idle",
+      "data-variant": s,
+      type: "button",
+      ...c,
+      "data-slot": d ?? "button",
+      "aria-busy": i,
+      "aria-disabled": i,
+      children: i ? /* @__PURE__ */ v(b, { children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "invisible", children: a }),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: a }),
+        /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(g, { "aria-hidden": !0 }) })
+      ] }) : a
+    }
+  );
+};
+export {
+  w as Button,
+  m as buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/simples/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/simples/button.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Spinner } from \"./spinner\";\n\n/**\n * Everything a class list can say. The rest — the fill, the ink, the edge, the lift, the hover, the\n * active and the height — is one block of real CSS in `styles.css`, written once in terms of three\n * locals, and this file assigns those three.\n *\n * **That is the whole shape of the change, and it is daisyUI's.** Their `.btn-primary` is two\n * custom-property assignments over a `.btn` that derives every state; ours was six variants of five\n * to six utilities each, naming eight different tokens between them, with the hover of each written\n * separately. A hover rule that lives in six places is a hover rule that drifts in six places, and\n * three of the comments this file used to carry were measurements taken to settle one of those\n * drifts.\n *\n * What a variant may set: `--btn-bg`, `--btn-fg`, `--btn-bd`. Nothing else here paints.\n */\nexport const buttonVariants = tv({\n  base: [\n    \"relative\",\n    // The height is HERE, on the base, and every size variant only moves `--size`. Keyed off the\n    // part's own name instead — `[data-slot=\"button\"][data-size=\"sm\"]` — it was keyed off the one\n    // attribute this library lets a caller rename, and a renamed part silently lost its height:\n    // `ConversationScrollButton` measured 16×16 against a 24×24 floor. daisyUI's `.btn` does it\n    // this way for the same reason, and `no-measurement-on-a-renameable-slot.test.ts` holds it.\n    \"h-(--size)\",\n    \"inline-flex shrink-0 items-center justify-center gap-2\",\n    \"whitespace-nowrap font-medium text-sm\",\n    \"border-solid\",\n    \"transition-all\",\n    \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring\",\n    \"disabled:pointer-events-none disabled:opacity-64\",\n    \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n    \"aria-disabled:pointer-events-none aria-disabled:opacity-64\",\n    \"data-[state=loading]:pointer-events-none\",\n    \"aria-invalid:border-destructive aria-invalid:ring-destructive/24\",\n    \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"motion-reduce:transition-none!\",\n  ],\n  variants: {\n    variant: {\n      default: [\n        \"[--btn-bg:var(--primary)]\",\n        \"[--btn-fg:var(--primary-foreground)]\",\n        \"focus-visible:border-background\",\n      ],\n      outline: [\n        \"[--btn-bg:transparent]\",\n        \"[--btn-fg:var(--foreground)]\",\n        \"[--btn-bd:var(--input)]\",\n        \"focus-visible:border-primary\",\n      ],\n      destructive: [\n        \"[--btn-bg:var(--destructive)]\",\n        // Was `text-white` at 3.81 on red-500. The fill moved to `-600` and the ink became a token,\n        // because no choice of ink rescued red-500: white 3.81, near-black 4.15, AA needs 4.5.\n        \"[--btn-fg:var(--destructive-content)]\",\n        \"focus-visible:border-background focus-visible:ring-destructive-foreground/32\",\n      ],\n      secondary: [\n        \"[--btn-bg:var(--secondary)]\",\n        \"[--btn-fg:var(--secondary-foreground)]\",\n        \"focus-visible:border-primary\",\n      ],\n      ghost: [\n        \"[--btn-bg:transparent]\",\n        \"[--btn-fg:var(--foreground)]\",\n        \"focus-visible:border-primary\",\n      ],\n      // The one variant that opts OUT of the shared hover, because a link's hover is an underline\n      // and not a wash. A utility beats the recipe base by cascade layer, which is what makes\n      // opting out one class rather than an exception in the CSS.\n      link: [\n        \"[--btn-bg:transparent]\",\n        \"[--btn-fg:var(--primary)]\",\n        \"underline-offset-4\",\n        \"hover:bg-transparent hover:underline active:bg-transparent\",\n        \"focus-visible:border-primary\",\n      ],\n    },\n    /**\n     * Padding, gaps and icon sizes. **The heights are not here** — they are `--size-field` in\n     * `styles.css`, keyed off the `data-size` this recipe already writes, so a tenant can ask for\n     * compact controls without asking for tighter text.\n     *\n     * The floor is still measured rather than chosen. `xs` and `icon-xs` were both `1.5rem`, and\n     * every size is a `rem` against a root the density axis sets — 16px default, 14px compact, 18px\n     * comfortable — so they measured **21px in compact**, under the 24×24 WCAG 2.5.8 states in CSS\n     * pixels. `sm` is the smallest size that clears the bar in all three densities. No call site was\n     * failing: the spacing exception saves a clustered control, and every measured `xs` was in a\n     * cluster. The variant went because its NAME promised a size it could not deliver at one\n     * density, and nothing was published to break.\n     */\n    size: {\n      sm: [\"[--size:calc(var(--size-field)*7)]\", \"px-2.5\", \"gap-1.5\", \"[&_svg:not([class*='size-'])]:size-3.5\"],\n      md: [\"[--size:calc(var(--size-field)*8)]\", \"px-3\", \"py-2\"],\n      lg: [\"[--size:calc(var(--size-field)*9)]\", \"px-3.5\"],\n      xl: [\"[--size:calc(var(--size-field)*10)]\", \"text-base\", \"px-4\"],\n      // Square, and the width is stated rather than left to `aspect-ratio`: a caller who writes\n      // `w-fit` on top of an aspect ratio gets the icon's own width and a control twice as tall.\n      \"icon-sm\": [\"[--size:calc(var(--size-field)*7)]\", \"w-(--size)\", \"px-0\"],\n      \"icon-md\": [\"[--size:calc(var(--size-field)*8)]\", \"w-(--size)\", \"px-0\"],\n      \"icon-lg\": [\"[--size:calc(var(--size-field)*9)]\", \"w-(--size)\", \"px-0\"],\n      \"icon-xl\": [\n        \"[--size:calc(var(--size-field)*10)]\",\n        \"w-(--size)\",\n        \"px-0\",\n        \"[&_svg:not([class*='size-'])]:size-5\",\n      ],\n    },\n    clickEffect: {\n      true: \"active:not-aria-[haspopup]:scale-[0.98]\",\n    },\n    pill: {\n      true: [\n        \"rounded-full\",\n        \"has-[>svg]:data-[size=sm]:pe-3.5\",\n        \"has-[>svg]:data-[size=md]:pe-4\",\n        \"has-[>svg]:data-[size=lg]:pe-4.5\",\n        \"has-[>svg]:data-[size=xl]:pe-5\",\n      ],\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n    clickEffect: true,\n    pill: false,\n  },\n});\n\nexport interface ButtonProps\n  extends React.ComponentProps<typeof ark.button>,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * Apply a click effect to the button\n   *\n   * @default true\n   */\n  clickEffect?: boolean;\n  /**\n   * Show a loading indicator\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n}\n\nexport const Button = (props: ButtonProps) => {\n  const {\n    variant = \"default\",\n    size = \"md\",\n    clickEffect = true,\n    pill = false,\n    isLoading = false,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ark.button\n      className={cn(\n        buttonVariants({ variant, size, clickEffect, pill }),\n        className\n      )}\n      data-size={size}\n      data-state={isLoading ? \"loading\" : \"idle\"}\n      data-variant={variant}\n      type=\"button\"\n      {...rest}\n      data-slot={slot ?? \"button\"}\n      aria-busy={isLoading}\n      aria-disabled={isLoading}\n    >\n      {isLoading ? (\n        <>\n          <span aria-hidden className=\"invisible\">\n            {children}\n          </span>\n\n          <span className=\"sr-only\">{children}</span>\n\n          <span className=\"absolute inset-0 flex items-center justify-center\">\n            <Spinner aria-hidden />\n          </span>\n        </>\n      ) : (\n        children\n      )}\n    </ark.button>\n  );\n};\n"],"names":["buttonVariants","tv","Button","props","variant","size","clickEffect","pill","isLoading","className","children","slot","rest","jsx","ark","cn","jsxs","Fragment","Spinner"],"mappings":"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"}

package/dist/simples/calendar.d.ts

@@ -0,0 +1,45 @@
+import { DatePicker as ArkCalendar } from '@ark-ui/react/date-picker';
+import { default as React } from 'react';
+import { Button } from './button';
+export declare const Calendar: (props: React.ComponentProps<typeof ArkCalendar.Root>) => React.JSX.Element;
+export declare const CalendarControl: (props: React.ComponentProps<typeof ArkCalendar.Control>) => React.JSX.Element;
+export declare const CalendarLabel: (props: React.ComponentProps<typeof ArkCalendar.Label>) => React.JSX.Element;
+export declare const CalendarTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.Trigger>) => React.JSX.Element;
+export declare const CalendarPresetTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.PresetTrigger>) => React.JSX.Element;
+export declare const CalendarViewDate: (props: React.ComponentProps<typeof ArkCalendar.RangeText>) => React.JSX.Element;
+export declare const CalendarTodayTrigger: (props: React.ComponentProps<typeof Button>) => React.JSX.Element;
+export declare const CalendarClearTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.ClearTrigger>) => React.JSX.Element;
+export declare const CalendarYearSelect: (props: React.ComponentProps<typeof ArkCalendar.YearSelect>) => React.JSX.Element;
+export declare const CalendarMonthSelect: (props: React.ComponentProps<typeof ArkCalendar.MonthSelect>) => React.JSX.Element;
+export declare const CalendarView: (props: React.ComponentProps<typeof ArkCalendar.View>) => React.JSX.Element;
+export declare const CalendarContext: (props: React.ComponentProps<typeof ArkCalendar.Context>) => React.JSX.Element;
+export declare const CalendarViewControl: (props: React.ComponentProps<typeof ArkCalendar.ViewControl>) => React.JSX.Element;
+export declare const CalendarPrevTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.PrevTrigger>) => React.JSX.Element;
+export declare const CalendarNextTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.NextTrigger>) => React.JSX.Element;
+export declare const CalendarTable: (props: React.ComponentProps<typeof ArkCalendar.Table>) => React.JSX.Element;
+interface CalendarWeekDaysProps extends React.ComponentProps<typeof ArkCalendar.TableHead> {
+    /**
+     * The format of the week days
+     *
+     * @default 'narrow'
+     */
+    format?: "narrow" | "short" | "long";
+}
+export declare const CalendarWeekDays: (props: CalendarWeekDaysProps) => React.JSX.Element;
+export declare const CalendarTableDays: (props: React.ComponentProps<typeof CalendarTableBody>) => React.JSX.Element;
+interface CalendarTableNextMonthProps extends React.ComponentProps<typeof CalendarTableBody> {
+    /**
+     * The number of months to offset
+     *
+     * @default 1
+     */
+    months?: number;
+}
+export declare const CalendarTableNextMonth: (props: CalendarTableNextMonthProps) => React.JSX.Element;
+export declare const CalendarTableHead: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.TableHead>) => React.JSX.Element;
+export declare const CalendarTableRow: (props: React.ComponentProps<typeof ArkCalendar.TableRow>) => React.JSX.Element;
+export declare const CalendarTableHeader: (props: React.ComponentProps<typeof ArkCalendar.TableHeader>) => React.JSX.Element;
+export declare const CalendarTableBody: ({ slot, ...rest }: React.ComponentProps<typeof ArkCalendar.TableBody>) => React.JSX.Element;
+export declare const CalendarTableCell: (props: React.ComponentProps<typeof ArkCalendar.TableCell>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/simples/calendar.tsx"],"names":[],"mappings":"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"}

package/dist/simples/calendar.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { DatePicker as n } from "@ark-ui/react/date-picker";
+import { ChevronDownIcon as f, ChevronRightIcon as x, ChevronLeftIcon as y } from "lucide-react";
+import { cn as s } from "../lib/cn.js";
+import { Button as m } from "./button.js";
+import { nativeSelectVariants as h } from "./native-select.js";
+const D = (e) => {
+  const {
+    lazyMount: a = !0,
+    unmountOnExit: r = !0,
+    className: l,
+    slot: d,
+    ...o
+  } = e;
+  return /* @__PURE__ */ t(
+    n.Root,
+    {
+      className: s("[--cell-size:--spacing(9)]", "w-fit", l),
+      inline: !0,
+      lazyMount: a,
+      unmountOnExit: r,
+      ...o,
+      "data-slot": d ?? "calendar"
+    }
+  );
+}, P = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.Control,
+    {
+      className: s("inline-flex items-center gap-2", a),
+      ...l,
+      "data-slot": r ?? "calendar-control"
+    }
+  );
+}, S = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.Label,
+    {
+      className: s("font-medium text-sm", a),
+      ...l,
+      "data-slot": r ?? "calendar-label"
+    }
+  );
+}, _ = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(n.Trigger, { ...a, "data-slot": e ?? "calendar-trigger" }), j = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(
+  n.PresetTrigger,
+  {
+    ...a,
+    "data-slot": e ?? "calendar-preset-trigger"
+  }
+), H = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.RangeText,
+    {
+      className: s("font-medium text-sm", a),
+      ...l,
+      "data-slot": r ?? "calendar-range-text"
+    }
+  );
+}, M = (e) => {
+  const { variant: a = "outline", size: r = "lg", slot: l, ...d } = e;
+  return /* @__PURE__ */ t(i, { children: (o) => /* @__PURE__ */ t(
+    m,
+    {
+      onClick: () => o.selectToday(),
+      size: r,
+      variant: a,
+      ...d,
+      slot: l ?? "calendar-today-trigger",
+      children: "Today"
+    }
+  ) });
+}, B = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(
+  n.ClearTrigger,
+  {
+    ...a,
+    "data-slot": e ?? "calendar-clear-trigger"
+  }
+), L = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: s("relative w-fit has-[select:disabled]:opacity-64"),
+      "data-slot": "calendar-year-select-wrapper",
+      children: [
+        /* @__PURE__ */ t(
+          n.YearSelect,
+          {
+            className: s(h()),
+            ...l,
+            "data-slot": r ?? "calendar-year-select"
+          }
+        ),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: s(
+              "absolute inset-e-2.5 top-1/2 -translate-y-1/2",
+              "size-4",
+              "select-none text-muted-foreground",
+              "pointer-events-none"
+            ),
+            "data-slot": "calendar-year-select-icon"
+          }
+        )
+      ]
+    }
+  );
+}, O = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: s("relative w-fit has-[select:disabled]:opacity-64"),
+      "data-slot": "calendar-month-select-wrapper",
+      children: [
+        /* @__PURE__ */ t(
+          n.MonthSelect,
+          {
+            className: s(h(), a),
+            ...l,
+            "data-slot": r ?? "calendar-month-select"
+          }
+        ),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: s(
+              "absolute inset-e-2.5 top-1/2 -translate-y-1/2",
+              "size-4",
+              "select-none text-muted-foreground",
+              "pointer-events-none"
+            ),
+            "data-slot": "calendar-month-select-icon"
+          }
+        )
+      ]
+    }
+  );
+}, Y = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.View,
+    {
+      className: s("flex flex-col gap-1", a),
+      ...l,
+      "data-slot": r ?? "calendar-view"
+    }
+  );
+}, i = (e) => /* @__PURE__ */ t(n.Context, { ...e }), E = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.ViewControl,
+    {
+      className: s(
+        "relative",
+        "h-auto w-full",
+        "flex items-center gap-1.5",
+        a
+      ),
+      ...l,
+      "data-slot": r ?? "calendar-view-control"
+    }
+  );
+}, W = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(n.PrevTrigger, { asChild: !0, ...a, children: /* @__PURE__ */ t(
+  m,
+  {
+    className: "me-auto",
+    size: "icon-md",
+    slot: e ?? "calendar-prev-trigger",
+    variant: "ghost",
+    children: /* @__PURE__ */ t(y, { "aria-hidden": !0, className: "rtl:rotate-180" })
+  }
+) }), q = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(n.NextTrigger, { asChild: !0, ...a, children: /* @__PURE__ */ t(
+  m,
+  {
+    className: "ms-auto",
+    size: "icon-md",
+    slot: e ?? "calendar-next-trigger",
+    variant: "ghost",
+    children: /* @__PURE__ */ t(x, { "aria-hidden": !0, className: "rtl:rotate-180" })
+  }
+) }), A = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.Table,
+    {
+      className: s("group", "w-full min-w-60", "border-collapse", a),
+      ...l,
+      "data-slot": r ?? "calendar-table"
+    }
+  );
+}, F = (e) => {
+  const { format: a = "narrow", slot: r, ...l } = e;
+  return /* @__PURE__ */ t(i, { children: (d) => /* @__PURE__ */ t(N, { ...l, slot: r ?? "calendar-table-head", children: /* @__PURE__ */ t(u, { children: d.weekDays.map((o) => /* @__PURE__ */ t(w, { children: o[a] }, o.short)) }) }) });
+}, G = (e) => {
+  const { tabIndex: a, ...r } = e;
+  return /* @__PURE__ */ t(i, { children: (l) => /* @__PURE__ */ t(v, { ...r, children: l.weeks.map((d, o) => /* @__PURE__ */ t(u, { children: d.map((c) => /* @__PURE__ */ t(
+    p,
+    {
+      tabIndex: a ?? void 0,
+      value: c,
+      children: c.day
+    },
+    c.day
+  )) }, o)) }) });
+}, J = (e) => {
+  const { months: a = 1, tabIndex: r, ...l } = e;
+  return /* @__PURE__ */ t(i, { children: (d) => {
+    const o = d.getOffset({ months: a });
+    return /* @__PURE__ */ t(v, { ...l, children: o.weeks.map((c, C) => /* @__PURE__ */ t(u, { children: c.map((g) => /* @__PURE__ */ t(
+      p,
+      {
+        tabIndex: r ?? void 0,
+        value: g,
+        visibleRange: o.visibleRange,
+        children: g.day
+      },
+      g.day
+    )) }, C)) });
+  } });
+}, N = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(n.TableHead, { ...a, "data-slot": e ?? "calendar-table-head" }), u = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.TableRow,
+    {
+      className: s("mt-1 flex w-full", a),
+      ...l,
+      "data-slot": r ?? "calendar-table-row"
+    }
+  );
+}, w = (e) => {
+  const { className: a, slot: r, ...l } = e;
+  return /* @__PURE__ */ t(
+    n.TableHeader,
+    {
+      className: s(
+        "h-(--cell-size) w-full",
+        "flex items-center justify-center",
+        "select-none font-medium text-faint text-xs",
+        "rounded-lg",
+        a
+      ),
+      ...l,
+      "data-slot": r ?? "calendar-table-header"
+    }
+  );
+}, v = ({
+  slot: e,
+  ...a
+}) => /* @__PURE__ */ t(n.TableBody, { ...a, "data-slot": e ?? "calendar-table-body" }), p = (e) => {
+  const { value: a, visibleRange: r, className: l, slot: d, ...o } = e;
+  return /* @__PURE__ */ t(
+    n.TableCell,
+    {
+      className: s(
+        "relative",
+        "h-(--cell-size) w-full",
+        "select-none text-center",
+        "[&:first-child[aria-selected=true]_div]:rounded-s-lg",
+        "[&:last-child[aria-selected=true]_div]:rounded-e-lg"
+      ),
+      "data-slot": "calendar-table-cell",
+      value: a,
+      visibleRange: r,
+      children: /* @__PURE__ */ t(
+        n.TableCellTrigger,
+        {
+          className: s(
+            "inline-flex items-center justify-center gap-1",
+            "h-(--cell-size) w-full min-w-(--cell-size) data-[view=day]:h-(--cell-size)",
+            "select-none whitespace-nowrap font-normal text-base text-foreground leading-none sm:text-sm",
+            "rounded-lg border border-transparent",
+            "hover:bg-accent hover:text-accent-foreground",
+            "data-today:data-selected:after:bg-background data-today:after:absolute data-today:after:bottom-1 data-today:after:left-1/2 data-today:after:size-1 data-today:after:-translate-x-1/2 data-today:after:rounded-full data-today:after:bg-primary",
+            "data-focus:border-primary data-focus:bg-foreground/14 data-focus:text-primary data-focus:ring-[3px] data-focus:ring-ring",
+            "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring",
+            "data-disabled:pointer-events-none data-disabled:opacity-64",
+            "data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-64",
+            "data-[view=day]:data-in-range:rounded-none data-[view=day]:data-in-range:not-[data-selected]:bg-primary/10",
+            "data-selected:bg-primary! data-selected:text-primary-foreground!",
+            "data-hover-range-start:rounded-s-lg! data-range-start:rounded-s-lg!",
+            "data-hover-range-end:rounded-e-lg! data-range-end:rounded-e-lg!",
+            "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+            l
+          ),
+          ...o,
+          "data-slot": d ?? "calendar-table-cell-trigger"
+        }
+      )
+    }
+  );
+};
+export {
+  D as Calendar,
+  B as CalendarClearTrigger,
+  i as CalendarContext,
+  P as CalendarControl,
+  S as CalendarLabel,
+  O as CalendarMonthSelect,
+  q as CalendarNextTrigger,
+  j as CalendarPresetTrigger,
+  W as CalendarPrevTrigger,
+  A as CalendarTable,
+  v as CalendarTableBody,
+  p as CalendarTableCell,
+  G as CalendarTableDays,
+  N as CalendarTableHead,
+  w as CalendarTableHeader,
+  J as CalendarTableNextMonth,
+  u as CalendarTableRow,
+  M as CalendarTodayTrigger,
+  _ as CalendarTrigger,
+  Y as CalendarView,
+  E as CalendarViewControl,
+  H as CalendarViewDate,
+  F as CalendarWeekDays,
+  L as CalendarYearSelect
+};
+//# sourceMappingURL=calendar.js.map

package/dist/simples/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sources":["../../src/simples/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { DatePicker as ArkCalendar } from \"@ark-ui/react/date-picker\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { nativeSelectVariants } from \"./native-select\";\n\nexport const Calendar = (\n  props: React.ComponentProps<typeof ArkCalendar.Root>\n) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    className,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkCalendar.Root\n      className={cn(\"[--cell-size:--spacing(9)]\", \"w-fit\", className)}\n      inline\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n      data-slot={slot ?? \"calendar\"}\n    />\n  );\n};\n\nexport const CalendarControl = (\n  props: React.ComponentProps<typeof ArkCalendar.Control>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.Control\n      className={cn(\"inline-flex items-center gap-2\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-control\"}\n    />\n  );\n};\n\nexport const CalendarLabel = (\n  props: React.ComponentProps<typeof ArkCalendar.Label>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.Label\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-label\"}\n    />\n  );\n};\n\nexport const CalendarTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.Trigger>) => (\n  <ArkCalendar.Trigger {...rest} data-slot={slot ?? \"calendar-trigger\"} />\n);\n\nexport const CalendarPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.PresetTrigger>) => (\n  <ArkCalendar.PresetTrigger\n    {...rest}\n    data-slot={slot ?? \"calendar-preset-trigger\"}\n  />\n);\n\nexport const CalendarViewDate = (\n  props: React.ComponentProps<typeof ArkCalendar.RangeText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.RangeText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-range-text\"}\n    />\n  );\n};\n\nexport const CalendarTodayTrigger = (\n  props: React.ComponentProps<typeof Button>\n) => {\n  const { variant = \"outline\", size = \"lg\", slot, ...rest } = props;\n\n  return (\n    <CalendarContext>\n      {(calendar) => (\n        <Button\n          onClick={() => calendar.selectToday()}\n          size={size}\n          variant={variant}\n          {...rest}\n          slot={slot ?? \"calendar-today-trigger\"}\n        >\n          Today\n        </Button>\n      )}\n    </CalendarContext>\n  );\n};\n\nexport const CalendarClearTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.ClearTrigger>) => (\n  <ArkCalendar.ClearTrigger\n    {...rest}\n    data-slot={slot ?? \"calendar-clear-trigger\"}\n  />\n);\n\nexport const CalendarYearSelect = (\n  props: React.ComponentProps<typeof ArkCalendar.YearSelect>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <div\n      className={cn(\"relative w-fit has-[select:disabled]:opacity-64\")}\n      data-slot=\"calendar-year-select-wrapper\"\n    >\n      <ArkCalendar.YearSelect\n        className={cn(nativeSelectVariants())}\n        {...rest}\n        data-slot={slot ?? \"calendar-year-select\"}\n      />\n      <ChevronDownIcon\n        className={cn(\n          \"absolute inset-e-2.5 top-1/2 -translate-y-1/2\",\n          \"size-4\",\n          \"select-none text-muted-foreground\",\n          \"pointer-events-none\"\n        )}\n        data-slot=\"calendar-year-select-icon\"\n      />\n    </div>\n  );\n};\n\nexport const CalendarMonthSelect = (\n  props: React.ComponentProps<typeof ArkCalendar.MonthSelect>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <div\n      className={cn(\"relative w-fit has-[select:disabled]:opacity-64\")}\n      data-slot=\"calendar-month-select-wrapper\"\n    >\n      <ArkCalendar.MonthSelect\n        className={cn(nativeSelectVariants(), className)}\n        {...rest}\n        data-slot={slot ?? \"calendar-month-select\"}\n      />\n      <ChevronDownIcon\n        className={cn(\n          \"absolute inset-e-2.5 top-1/2 -translate-y-1/2\",\n          \"size-4\",\n          \"select-none text-muted-foreground\",\n          \"pointer-events-none\"\n        )}\n        data-slot=\"calendar-month-select-icon\"\n      />\n    </div>\n  );\n};\n\nexport const CalendarView = (\n  props: React.ComponentProps<typeof ArkCalendar.View>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.View\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-view\"}\n    />\n  );\n};\n\nexport const CalendarContext = (\n  props: React.ComponentProps<typeof ArkCalendar.Context>\n) => <ArkCalendar.Context {...props} />;\n\nexport const CalendarViewControl = (\n  props: React.ComponentProps<typeof ArkCalendar.ViewControl>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.ViewControl\n      className={cn(\n        \"relative\",\n        \"h-auto w-full\",\n        \"flex items-center gap-1.5\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"calendar-view-control\"}\n    />\n  );\n};\n\nexport const CalendarPrevTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.PrevTrigger>) => (\n  <ArkCalendar.PrevTrigger asChild {...rest}>\n    <Button\n      className=\"me-auto\"\n      size=\"icon-md\"\n      slot={slot ?? \"calendar-prev-trigger\"}\n      variant=\"ghost\"\n    >\n      <ChevronLeftIcon aria-hidden className=\"rtl:rotate-180\" />\n    </Button>\n  </ArkCalendar.PrevTrigger>\n);\n\nexport const CalendarNextTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.NextTrigger>) => (\n  <ArkCalendar.NextTrigger asChild {...rest}>\n    <Button\n      className=\"ms-auto\"\n      size=\"icon-md\"\n      slot={slot ?? \"calendar-next-trigger\"}\n      variant=\"ghost\"\n    >\n      <ChevronRightIcon aria-hidden className=\"rtl:rotate-180\" />\n    </Button>\n  </ArkCalendar.NextTrigger>\n);\n\nexport const CalendarTable = (\n  props: React.ComponentProps<typeof ArkCalendar.Table>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.Table\n      className={cn(\"group\", \"w-full min-w-60\", \"border-collapse\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-table\"}\n    />\n  );\n};\n\ninterface CalendarWeekDaysProps\n  extends React.ComponentProps<typeof ArkCalendar.TableHead> {\n  /**\n   * The format of the week days\n   *\n   * @default 'narrow'\n   */\n  format?: \"narrow\" | \"short\" | \"long\";\n}\n\nexport const CalendarWeekDays = (props: CalendarWeekDaysProps) => {\n  const { format = \"narrow\", slot, ...rest } = props;\n\n  return (\n    <CalendarContext>\n      {(calendar) => (\n        <CalendarTableHead {...rest} slot={slot ?? \"calendar-table-head\"}>\n          <CalendarTableRow>\n            {calendar.weekDays.map((weekDay) => (\n              <CalendarTableHeader key={weekDay.short}>\n                {weekDay[format]}\n              </CalendarTableHeader>\n            ))}\n          </CalendarTableRow>\n        </CalendarTableHead>\n      )}\n    </CalendarContext>\n  );\n};\n\nexport const CalendarTableDays = (\n  props: React.ComponentProps<typeof CalendarTableBody>\n) => {\n  const { tabIndex, ...rest } = props;\n  return (\n    <CalendarContext>\n      {(calendar) => (\n        <CalendarTableBody {...rest}>\n          {calendar.weeks.map((week, index) => (\n            <CalendarTableRow key={index}>\n              {week.map((day) => (\n                <CalendarTableCell\n                  key={day.day}\n                  tabIndex={tabIndex ?? undefined}\n                  value={day}\n                >\n                  {day.day}\n                </CalendarTableCell>\n              ))}\n            </CalendarTableRow>\n          ))}\n        </CalendarTableBody>\n      )}\n    </CalendarContext>\n  );\n};\n\ninterface CalendarTableNextMonthProps\n  extends React.ComponentProps<typeof CalendarTableBody> {\n  /**\n   * The number of months to offset\n   *\n   * @default 1\n   */\n  months?: number;\n}\n\nexport const CalendarTableNextMonth = (props: CalendarTableNextMonthProps) => {\n  const { months = 1, tabIndex, ...rest } = props;\n\n  return (\n    <CalendarContext>\n      {(calendar) => {\n        const offset = calendar.getOffset({ months });\n\n        return (\n          <CalendarTableBody {...rest}>\n            {offset.weeks.map((week, index) => (\n              <CalendarTableRow key={index}>\n                {week.map((day) => (\n                  <CalendarTableCell\n                    key={day.day}\n                    tabIndex={tabIndex ?? undefined}\n                    value={day}\n                    visibleRange={offset.visibleRange}\n                  >\n                    {day.day}\n                  </CalendarTableCell>\n                ))}\n              </CalendarTableRow>\n            ))}\n          </CalendarTableBody>\n        );\n      }}\n    </CalendarContext>\n  );\n};\n\nexport const CalendarTableHead = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.TableHead>) => (\n  <ArkCalendar.TableHead {...rest} data-slot={slot ?? \"calendar-table-head\"} />\n);\n\nexport const CalendarTableRow = (\n  props: React.ComponentProps<typeof ArkCalendar.TableRow>\n) => {\n  const { className, slot, ...rest } = props;\n  return (\n    <ArkCalendar.TableRow\n      className={cn(\"mt-1 flex w-full\", className)}\n      {...rest}\n      data-slot={slot ?? \"calendar-table-row\"}\n    />\n  );\n};\n\nexport const CalendarTableHeader = (\n  props: React.ComponentProps<typeof ArkCalendar.TableHeader>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.TableHeader\n      className={cn(\n        \"h-(--cell-size) w-full\",\n        \"flex items-center justify-center\",\n        \"select-none font-medium text-faint text-xs\",\n        \"rounded-lg\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"calendar-table-header\"}\n    />\n  );\n};\n\nexport const CalendarTableBody = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkCalendar.TableBody>) => (\n  <ArkCalendar.TableBody {...rest} data-slot={slot ?? \"calendar-table-body\"} />\n);\n\nexport const CalendarTableCell = (\n  props: React.ComponentProps<typeof ArkCalendar.TableCell>\n) => {\n  const { value, visibleRange, className, slot, ...rest } = props;\n\n  return (\n    <ArkCalendar.TableCell\n      className={cn(\n        \"relative\",\n        \"h-(--cell-size) w-full\",\n        \"select-none text-center\",\n        \"[&:first-child[aria-selected=true]_div]:rounded-s-lg\",\n        \"[&:last-child[aria-selected=true]_div]:rounded-e-lg\"\n      )}\n      data-slot=\"calendar-table-cell\"\n      value={value}\n      visibleRange={visibleRange}\n    >\n      <ArkCalendar.TableCellTrigger\n        className={cn(\n          \"inline-flex items-center justify-center gap-1\",\n          \"h-(--cell-size) w-full min-w-(--cell-size) data-[view=day]:h-(--cell-size)\",\n          \"select-none whitespace-nowrap font-normal text-base text-foreground leading-none sm:text-sm\",\n          \"rounded-lg border border-transparent\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"data-today:data-selected:after:bg-background data-today:after:absolute data-today:after:bottom-1 data-today:after:left-1/2 data-today:after:size-1 data-today:after:-translate-x-1/2 data-today:after:rounded-full data-today:after:bg-primary\",\n          \"data-focus:border-primary data-focus:bg-foreground/14 data-focus:text-primary data-focus:ring-[3px] data-focus:ring-ring\",\n          \"outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n          \"data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-64\",\n          \"data-[view=day]:data-in-range:rounded-none data-[view=day]:data-in-range:not-[data-selected]:bg-primary/10\",\n          \"data-selected:bg-primary! data-selected:text-primary-foreground!\",\n          \"data-hover-range-start:rounded-s-lg! data-range-start:rounded-s-lg!\",\n          \"data-hover-range-end:rounded-e-lg! data-range-end:rounded-e-lg!\",\n          \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"calendar-table-cell-trigger\"}\n      />\n    </ArkCalendar.TableCell>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAaO;AAGL;AAAM;AACQ;AACI;AAChB;AACA;AACG;AAGL;AACE;AAAa;AAAZ;AAC+D;AACxD;AACN;AACA;AACI;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AAC0D;AACrD;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAEgC;AAC9B;AAEF;AAIsC;AACpC;AAEF;AACE;AAAa;AAAZ;AACK;AACe;AACrB;AAMA;AAEA;AACE;AAAa;AAAZ;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAKE;AAEA;AAGM;AAAC;AAAA;AACyB;AACxB;AACA;AACI;AACU;AACf;AAAA;AAMT;AAEqC;AACnC;AAEF;AACE;AAAa;AAAZ;AACK;AACe;AACrB;AAMA;AAEA;AACE;AAAC;AAAA;AACgE;AACrD;AAEV;AAAA;AAAa;AAAZ;AACqC;AAChC;AACe;AAAA;AAAA;AAErB;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AACZ;AAAA;AAGN;AAKE;AAEA;AACE;AAAC;AAAA;AACgE;AACrD;AAEV;AAAA;AAAa;AAAZ;AACgD;AAC3C;AACe;AAAA;AAAA;AAErB;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAEQ;AAAA;AAAA;AACZ;AAAA;AAGN;AAKE;AAEA;AACE;AAAa;AAAZ;AAC+C;AAC1C;AACe;AAAA;AAGzB;AASE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAEoC;AAClC;AAEF;AAEI;AAAC;AAAA;AACW;AACL;AACS;AACN;AAEgD;AAC1D;AAIgC;AAClC;AAEF;AAEI;AAAC;AAAA;AACW;AACL;AACS;AACN;AAEiD;AAC3D;AAOF;AAEA;AACE;AAAa;AAAZ;AACuE;AAClE;AACe;AAAA;AAGzB;AAaE;AAEA;AAeF;AAKE;AACA;AAOc;AAAC;AAAA;AAEuB;AACf;AAEF;AAAA;AAJI;AAa3B;AAaE;AAEA;AAGM;AAEA;AAKU;AAAC;AAAA;AAEuB;AACf;AACc;AAEhB;AAAA;AALI;AAUnB;AAKV;AAEkC;AAChC;AAEF;AAOE;AACA;AACE;AAAa;AAAZ;AAC4C;AACvC;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAEkC;AAChC;AAEF;AAOE;AAEA;AACE;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEQ;AACV;AACA;AAEA;AAAa;AAAZ;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAAA;AACrB;AAGN;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/simples/card.d.ts

@@ -0,0 +1,43 @@
+import { ark } from '@ark-ui/react/factory';
+import { VariantProps } from 'tailwind-variants';
+export declare const Card: (props: React.ComponentProps<typeof ark.article>) => import("react").JSX.Element;
+declare const cardMediaVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string;
+        icon: string;
+        image: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface CardMediaProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof cardMediaVariants> {
+}
+export declare const CardMedia: (props: CardMediaProps) => import("react").JSX.Element;
+interface HeaderProps extends React.ComponentProps<typeof ark.div> {
+    /**
+     * The description of the card
+     */
+    description?: string;
+    /**
+     * The title of the card
+     */
+    title?: string;
+}
+export declare const CardHeader: (props: HeaderProps) => import("react").JSX.Element;
+export declare const CardTitle: (props: React.ComponentProps<typeof ark.h3>) => import("react").JSX.Element;
+export declare const CardDescription: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export declare const CardAction: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export declare const CardContent: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export declare const CardFooter: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/simples/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK1D,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC,gCAoBnE,CAAC;AAEF,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAoBrB,CAAC;AAEH,UAAU,cACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAW9C,CAAC;AAEF,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IAChE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,gCAwB5C,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,gCAanE,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAW5C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAarE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAUtE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAiBrE,CAAC"}