@arolariu/components 0.0.2 → 0.0.4

package/dist/es/components/ui/alert-dialog.js

@@ -0,0 +1,146 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-alert-dialog";
+import { cn as o } from "../../lib/utils.js";
+import { buttonVariants as r } from "./button.js";
+function u({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Root, { "data-slot": "alert-dialog", ...t });
+}
+function f({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Trigger, { "data-slot": "alert-dialog-trigger", ...t });
+}
+function i({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Portal, { "data-slot": "alert-dialog-portal", ...t });
+}
+function s({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: o(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function m({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ n(i, { children: [
+    /* @__PURE__ */ e(s, {}),
+    /* @__PURE__ */ e(
+      l.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: o(
+          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
+          t
+        ),
+        ...a
+      }
+    )
+  ] });
+}
+function p({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: o("flex flex-col gap-2 text-center sm:text-left", t),
+      ...a
+    }
+  );
+}
+function x({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: o(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function A({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: o("text-lg font-semibold", t),
+      ...a
+    }
+  );
+}
+function D({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: o("text-neutral-500 text-sm dark:text-neutral-400", t),
+      ...a
+    }
+  );
+}
+function b({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Action,
+    {
+      className: o(r(), t),
+      ...a
+    }
+  );
+}
+function v({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    l.Cancel,
+    {
+      className: o(r({ variant: "outline" }), t),
+      ...a
+    }
+  );
+}
+export {
+  u as AlertDialog,
+  b as AlertDialogAction,
+  v as AlertDialogCancel,
+  m as AlertDialogContent,
+  D as AlertDialogDescription,
+  x as AlertDialogFooter,
+  p as AlertDialogHeader,
+  s as AlertDialogOverlay,
+  i as AlertDialogPortal,
+  A as AlertDialogTitle,
+  f as AlertDialogTrigger
+};

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

@@ -0,0 +1,66 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import { cn as e } from "../../lib/utils.js";
+const i = s(
+  "relative w-full rounded-lg border border-neutral-200 px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current dark:border-neutral-800",
+  {
+    variants: {
+      variant: {
+        default: "bg-white text-neutral-950 dark:bg-neutral-950 dark:text-neutral-50",
+        destructive: "text-neutral-50 [&>svg]:text-current *:data-[slot=alert-description]:text-neutral-50/80 dark:text-neutral-50 dark:*:data-[slot=alert-description]:text-neutral-50/80"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function u({
+  className: t,
+  variant: r,
+  ...l
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: e(i({ variant: r }), t),
+      ...l
+    }
+  );
+}
+function c({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: e(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function g({
+  className: t,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: e(
+        "text-neutral-500 col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed dark:text-neutral-400",
+        t
+      ),
+      ...r
+    }
+  );
+}
+export {
+  u as Alert,
+  g as AlertDescription,
+  c as AlertTitle
+};

package/dist/es/components/ui/aspect-ratio.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-aspect-ratio";
+function a({
+  ...t
+}) {
+  return /* @__PURE__ */ o(i.Root, { "data-slot": "aspect-ratio", ...t });
+}
+export {
+  a as AspectRatio
+};

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

@@ -0,0 +1,53 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-avatar";
+import { cn as l } from "../../lib/utils.js";
+function i({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ r(
+    e.Root,
+    {
+      "data-slot": "avatar",
+      className: l(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function n({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ r(
+    e.Image,
+    {
+      "data-slot": "avatar-image",
+      className: l("aspect-square size-full", a),
+      ...t
+    }
+  );
+}
+function u({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ r(
+    e.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: l(
+        "bg-neutral-100 flex size-full items-center justify-center rounded-full dark:bg-neutral-800",
+        a
+      ),
+      ...t
+    }
+  );
+}
+export {
+  i as Avatar,
+  u as AvatarFallback,
+  n as AvatarImage
+};

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

@@ -0,0 +1,39 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { cva as d } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const l = d(
+  "inline-flex items-center justify-center rounded-md border border-neutral-200 px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden dark:border-neutral-800 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: "border-transparent bg-neutral-900 text-neutral-50 [a&]:hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:[a&]:hover:bg-neutral-50/90",
+        secondary: "border-transparent bg-neutral-100 text-neutral-900 [a&]:hover:bg-neutral-100/90 dark:bg-neutral-800 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800/90",
+        destructive: "border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:[a&]:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40",
+        outline: "text-neutral-950 [a&]:hover:bg-neutral-100 [a&]:hover:text-neutral-900 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800 dark:[a&]:hover:text-neutral-50"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function k({
+  className: r,
+  variant: e,
+  asChild: a = !1,
+  ...t
+}) {
+  return /* @__PURE__ */ n(
+    a ? i : "span",
+    {
+      "data-slot": "badge",
+      className: o(l({ variant: e }), r),
+      ...t
+    }
+  );
+}
+export {
+  k as Badge,
+  l as badgeVariants
+};

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

@@ -0,0 +1,102 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { Slot as l } from "@radix-ui/react-slot";
+import { ChevronRight as i, MoreHorizontal as o } from "lucide-react";
+import { cn as t } from "../../lib/utils.js";
+function p({ ...r }) {
+  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
+}
+function f({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: t(
+        "text-neutral-500 flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 dark:text-neutral-400",
+        r
+      ),
+      ...e
+    }
+  );
+}
+function x({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: t("inline-flex items-center gap-1.5", r),
+      ...e
+    }
+  );
+}
+function h({
+  asChild: r,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ a(
+    r ? l : "a",
+    {
+      "data-slot": "breadcrumb-link",
+      className: t("hover:text-neutral-950 transition-colors dark:hover:text-neutral-50", e),
+      ...n
+    }
+  );
+}
+function g({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: t("text-neutral-950 font-normal dark:text-neutral-50", r),
+      ...e
+    }
+  );
+}
+function N({
+  children: r,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("[&>svg]:size-3.5", e),
+      ...n,
+      children: r ?? /* @__PURE__ */ a(i, {})
+    }
+  );
+}
+function k({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("flex size-9 items-center justify-center", r),
+      ...e,
+      children: [
+        /* @__PURE__ */ a(o, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  p as Breadcrumb,
+  k as BreadcrumbEllipsis,
+  x as BreadcrumbItem,
+  h as BreadcrumbLink,
+  f as BreadcrumbList,
+  g as BreadcrumbPage,
+  N as BreadcrumbSeparator
+};

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

@@ -0,0 +1,49 @@
+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"
+      }
+    },
+    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
+    }
+  );
+}
+export {
+  k as Button,
+  l as buttonVariants
+};

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

@@ -0,0 +1,61 @@
+import { jsx as r } from "react/jsx-runtime";
+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
+    }
+  );
+}
+export {
+  h as Calendar
+};

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

@@ -0,0 +1,73 @@
+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
+    }
+  );
+}
+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
+    }
+  );
+}
+function s({ className: t, ...r }) {
+  return /* @__PURE__ */ 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
+    }
+  );
+}
+function i({ className: t, ...r }) {
+  return /* @__PURE__ */ 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
+    }
+  );
+}
+export {
+  o as Card,
+  i as CardContent,
+  c as CardDescription,
+  u as CardFooter,
+  l as CardHeader,
+  s as CardTitle
+};