@arolariu/components 0.0.9 → 0.0.11

package/dist/es/components/ui/button.js

@@ -2,46 +2,30 @@ import { jsx as i } from "react/jsx-runtime";
 import { Slot as d } from "@radix-ui/react-slot";
 import { cva as o } from "class-variance-authority";
 import { cn as s } from "../../lib/utils.js";
-const l = o(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
-  {
-    variants: {
-      variant: {
-        default: "bg-neutral-900 text-neutral-50 shadow-xs hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
-        destructive: "bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40",
-        outline: "border border-neutral-200 bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        secondary: "bg-neutral-100 text-neutral-900 shadow-xs hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
-        ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
-      }
+const l = o("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900", {
+  variants: {
+    variant: {
+      default: "bg-neutral-900 text-neutral-50 shadow-xs hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+      destructive: "bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40",
+      outline: "border border-neutral-200 bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+      secondary: "bg-neutral-100 text-neutral-900 shadow-xs hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+      ghost: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+      link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
     }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-);
-function k({
-  className: r,
-  variant: e,
-  size: a,
-  asChild: t = !1,
-  ...n
-}) {
-  return /* @__PURE__ */ i(
-    t ? d : "button",
-    {
-      "data-slot": "button",
-      className: s(l({ variant: e, size: a, className: r })),
-      ...n
-    }
-  );
+});
+function k({ className: r, variant: e, size: a, asChild: t = !1, ...n }) {
+  return i(t ? d : "button", { "data-slot": "button", className: s(l({ variant: e, size: a, className: r })), ...n });
 }
 export {
   k as Button,

package/dist/es/components/ui/calendar.js

@@ -3,58 +3,35 @@ import { ChevronRight as o, ChevronLeft as i } from "lucide-react";
 import { DayPicker as c } from "react-day-picker";
 import { cn as e } from "../../lib/utils.js";
 import { buttonVariants as n } from "./button.js";
-function h({
-  className: d,
-  classNames: s,
-  showOutsideDays: u = !0,
-  ...l
-}) {
-  return /* @__PURE__ */ r(
-    c,
-    {
-      showOutsideDays: u,
-      className: e("p-3", d),
-      classNames: {
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: e(
-          n({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell: "text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400",
-        row: "flex w-full mt-2",
-        cell: e(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800",
-          l.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: e(
-          n({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start aria-selected:bg-neutral-900 aria-selected:text-neutral-50 dark:aria-selected:bg-neutral-50 dark:aria-selected:text-neutral-900",
-        day_range_end: "day-range-end aria-selected:bg-neutral-900 aria-selected:text-neutral-50 dark:aria-selected:bg-neutral-50 dark:aria-selected:text-neutral-900",
-        day_selected: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
-        day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
-        day_outside: "day-outside text-neutral-500 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:text-neutral-400",
-        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
-        day_range_middle: "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
-        day_hidden: "invisible",
-        ...s
-      },
-      components: {
-        IconLeft: ({ className: a, ...t }) => /* @__PURE__ */ r(i, { className: e("size-4", a), ...t }),
-        IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(o, { className: e("size-4", a), ...t })
-      },
-      ...l
-    }
-  );
+function h({ className: d, classNames: s, showOutsideDays: u = !0, ...l }) {
+  return r(c, { showOutsideDays: u, className: e("p-3", d), classNames: {
+    months: "flex flex-col sm:flex-row gap-2",
+    month: "flex flex-col gap-4",
+    caption: "flex justify-center pt-1 relative items-center w-full",
+    caption_label: "text-sm font-medium",
+    nav: "flex items-center gap-1",
+    nav_button: e(n({ variant: "outline" }), "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+    nav_button_previous: "absolute left-1",
+    nav_button_next: "absolute right-1",
+    table: "w-full border-collapse space-x-1",
+    head_row: "flex",
+    head_cell: "text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400",
+    row: "flex w-full mt-2",
+    cell: e("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800", l.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"),
+    day: e(n({ variant: "ghost" }), "size-8 p-0 font-normal aria-selected:opacity-100"),
+    day_range_start: "day-range-start aria-selected:bg-neutral-900 aria-selected:text-neutral-50 dark:aria-selected:bg-neutral-50 dark:aria-selected:text-neutral-900",
+    day_range_end: "day-range-end aria-selected:bg-neutral-900 aria-selected:text-neutral-50 dark:aria-selected:bg-neutral-50 dark:aria-selected:text-neutral-900",
+    day_selected: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+    day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+    day_outside: "day-outside text-neutral-500 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:text-neutral-400",
+    day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+    day_range_middle: "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+    day_hidden: "invisible",
+    ...s
+  }, components: {
+    IconLeft: ({ className: t, ...a }) => r(i, { className: e("size-4", t), ...a }),
+    IconRight: ({ className: t, ...a }) => r(o, { className: e("size-4", t), ...a })
+  }, ...l });
 }
 export {
   h as Calendar

package/dist/es/components/ui/card.js

@@ -1,67 +1,22 @@
 import { jsx as a } from "react/jsx-runtime";
 import { cn as e } from "../../lib/utils.js";
 function o({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card",
-      className: e(
-        "bg-white text-neutral-950 flex flex-col gap-6 rounded-xl border border-neutral-200 py-6 shadow-sm dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800",
-        t
-      ),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card", className: e("bg-white text-neutral-950 flex flex-col gap-6 rounded-xl border border-neutral-200 py-6 shadow-sm dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800", t), ...r });
 }
 function l({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: e("flex flex-col gap-1.5 px-6", t),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card-header", className: e("flex flex-col gap-1.5 px-6", t), ...r });
 }
 function s({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: e("leading-none font-semibold", t),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card-title", className: e("leading-none font-semibold", t), ...r });
 }
 function c({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: e("text-neutral-500 text-sm dark:text-neutral-400", t),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card-description", className: e("text-neutral-500 text-sm dark:text-neutral-400", t), ...r });
 }
 function i({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: e("px-6", t),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card-content", className: e("px-6", t), ...r });
 }
 function u({ className: t, ...r }) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      "data-slot": "card-footer",
-      className: e("flex items-center px-6", t),
-      ...r
-    }
-  );
+  return a("div", { "data-slot": "card-footer", className: e("flex items-center px-6", t), ...r });
 }
 export {
   o as Card,

package/dist/es/components/ui/carousel.js

@@ -1,43 +1,29 @@
 import { jsx as n, jsxs as h } from "react/jsx-runtime";
 import * as l from "react";
-import z from "embla-carousel-react";
-import { ArrowLeft as g, ArrowRight as p } from "lucide-react";
+import k from "embla-carousel-react";
+import { ArrowLeft as p, ArrowRight as g } from "lucide-react";
 import { cn as d } from "../../lib/utils.js";
 import { Button as v } from "./button.js";
 const N = l.createContext(null);
 function m() {
-  const o = l.useContext(N);
-  if (!o)
+  const r = l.useContext(N);
+  if (!r)
     throw new Error("useCarousel must be used within a <Carousel />");
-  return o;
+  return r;
 }
-function I({
-  orientation: o = "horizontal",
-  opts: r,
-  setApi: t,
-  plugins: s,
-  className: c,
-  children: i,
-  ...u
-}) {
-  const [b, e] = z(
-    {
-      ...r,
-      axis: o === "horizontal" ? "x" : "y"
-    },
-    s
-  ), [w, S] = l.useState(!1), [y, P] = l.useState(!1), f = l.useCallback((a) => {
-    a && (S(a.canScrollPrev()), P(a.canScrollNext()));
+function I({ orientation: r = "horizontal", opts: o, setApi: t, plugins: s, className: c, children: i, ...u }) {
+  const [b, e] = k({
+    ...o,
+    axis: r === "horizontal" ? "x" : "y"
+  }, s), [w, z] = l.useState(!1), [S, y] = l.useState(!1), f = l.useCallback((a) => {
+    a && (z(a.canScrollPrev()), y(a.canScrollNext()));
   }, []), x = l.useCallback(() => {
     e == null || e.scrollPrev();
   }, [e]), C = l.useCallback(() => {
     e == null || e.scrollNext();
-  }, [e]), k = l.useCallback(
-    (a) => {
-      a.key === "ArrowLeft" ? (a.preventDefault(), x()) : a.key === "ArrowRight" && (a.preventDefault(), C());
-    },
-    [x, C]
-  );
+  }, [e]), P = l.useCallback((a) => {
+    a.key === "ArrowLeft" ? (a.preventDefault(), x()) : a.key === "ArrowRight" && (a.preventDefault(), C());
+  }, [x, C]);
   return l.useEffect(() => {
     !e || !t || t(e);
   }, [e, t]), l.useEffect(() => {
@@ -45,128 +31,32 @@ function I({
       return f(e), e.on("reInit", f), e.on("select", f), () => {
         e == null || e.off("select", f);
       };
-  }, [e, f]), /* @__PURE__ */ n(
-    N.Provider,
-    {
-      value: {
-        carouselRef: b,
-        api: e,
-        opts: r,
-        orientation: o || ((r == null ? void 0 : r.axis) === "y" ? "vertical" : "horizontal"),
-        scrollPrev: x,
-        scrollNext: C,
-        canScrollPrev: w,
-        canScrollNext: y
-      },
-      children: /* @__PURE__ */ n(
-        "div",
-        {
-          onKeyDownCapture: k,
-          className: d("relative", c),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...u,
-          children: i
-        }
-      )
-    }
-  );
+  }, [e, f]), n(N.Provider, { value: {
+    carouselRef: b,
+    api: e,
+    opts: o,
+    orientation: r || ((o == null ? void 0 : o.axis) === "y" ? "vertical" : "horizontal"),
+    scrollPrev: x,
+    scrollNext: C,
+    canScrollPrev: w,
+    canScrollNext: S
+  }, children: n("div", { onKeyDownCapture: P, className: d("relative", c), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...u, children: i }) });
 }
-function K({ className: o, ...r }) {
+function K({ className: r, ...o }) {
   const { carouselRef: t, orientation: s } = m();
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      ref: t,
-      className: "overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ n(
-        "div",
-        {
-          className: d(
-            "flex",
-            s === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            o
-          ),
-          ...r
-        }
-      )
-    }
-  );
+  return n("div", { ref: t, className: "overflow-hidden", "data-slot": "carousel-content", children: n("div", { className: d("flex", s === "horizontal" ? "-ml-4" : "-mt-4 flex-col", r), ...o }) });
 }
-function L({ className: o, ...r }) {
+function L({ className: r, ...o }) {
   const { orientation: t } = m();
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      role: "group",
-      "aria-roledescription": "slide",
-      "data-slot": "carousel-item",
-      className: d(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        t === "horizontal" ? "pl-4" : "pt-4",
-        o
-      ),
-      ...r
-    }
-  );
+  return n("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: d("min-w-0 shrink-0 grow-0 basis-full", t === "horizontal" ? "pl-4" : "pt-4", r), ...o });
 }
-function B({
-  className: o,
-  variant: r = "outline",
-  size: t = "icon",
-  ...s
-}) {
+function B({ className: r, variant: o = "outline", size: t = "icon", ...s }) {
   const { orientation: c, scrollPrev: i, canScrollPrev: u } = m();
-  return /* @__PURE__ */ h(
-    v,
-    {
-      "data-slot": "carousel-previous",
-      variant: r,
-      size: t,
-      className: d(
-        "absolute size-8 rounded-full",
-        c === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        o
-      ),
-      disabled: !u,
-      onClick: i,
-      ...s,
-      children: [
-        /* @__PURE__ */ n(g, {}),
-        /* @__PURE__ */ n("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
+  return h(v, { "data-slot": "carousel-previous", variant: o, size: t, className: d("absolute size-8 rounded-full", c === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", r), disabled: !u, onClick: i, ...s, children: [n(p, {}), n("span", { className: "sr-only", children: "Previous slide" })] });
 }
-function q({
-  className: o,
-  variant: r = "outline",
-  size: t = "icon",
-  ...s
-}) {
+function q({ className: r, variant: o = "outline", size: t = "icon", ...s }) {
   const { orientation: c, scrollNext: i, canScrollNext: u } = m();
-  return /* @__PURE__ */ h(
-    v,
-    {
-      "data-slot": "carousel-next",
-      variant: r,
-      size: t,
-      className: d(
-        "absolute size-8 rounded-full",
-        c === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        o
-      ),
-      disabled: !u,
-      onClick: i,
-      ...s,
-      children: [
-        /* @__PURE__ */ n(p, {}),
-        /* @__PURE__ */ n("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+  return h(v, { "data-slot": "carousel-next", variant: o, size: t, className: d("absolute size-8 rounded-full", c === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", r), disabled: !u, onClick: i, ...s, children: [n(g, {}), n("span", { className: "sr-only", children: "Next slide" })] });
 }
 export {
   I as Carousel,