laif-ds 0.1.1 → 0.1.3

package/dist/components/ui/button.js

@@ -0,0 +1,66 @@
+"use client";
+import { j as r } from "../../_virtual/jsx-runtime.js";
+import { Slot as g } from "@radix-ui/react-slot";
+import { cva as l } from "class-variance-authority";
+import { cn as u } from "../../lib/utils.js";
+import { Icon as c } from "./icon.js";
+const v = l(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      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 h({
+  className: n,
+  variant: s,
+  size: e,
+  asChild: i = !1,
+  iconLeft: o,
+  iconRight: a,
+  ...t
+}) {
+  const d = i ? g : "button";
+  return i ? /* @__PURE__ */ r.jsx(
+    d,
+    {
+      "data-slot": "button",
+      className: u(v({ variant: s, size: e, className: n })),
+      ...t
+    }
+  ) : /* @__PURE__ */ r.jsxs(
+    d,
+    {
+      "data-slot": "button",
+      className: u(v({ variant: s, size: e, className: n })),
+      ...t,
+      children: [
+        o && /* @__PURE__ */ r.jsx(c, { name: o, size: e === "default" ? "md" : e === "sm" ? "xs" : "sm" }),
+        t.children,
+        a && /* @__PURE__ */ r.jsx(c, { name: a, size: e === "default" ? "md" : e === "sm" ? "xs" : "sm" })
+      ]
+    }
+  );
+}
+export {
+  h as Button,
+  v as buttonVariants
+};

package/dist/components/ui/calendar.js

@@ -0,0 +1,62 @@
+"use client";
+import { j as r } from "../../_virtual/jsx-runtime.js";
+import { ChevronRight as l, ChevronLeft as c } from "lucide-react";
+import { DayPicker as m } from "react-day-picker";
+import { cn as e } from "../../lib/utils.js";
+import { buttonVariants as d } from "./button.js";
+function y({
+  className: n,
+  classNames: s,
+  showOutsideDays: i = !0,
+  ...o
+}) {
+  return /* @__PURE__ */ r.jsx(
+    m,
+    {
+      showOutsideDays: i,
+      className: e("p-3", n),
+      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(
+          d({ 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-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        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-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          o.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(
+          d({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end: "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...s
+      },
+      components: {
+        IconLeft: ({ className: a, ...t }) => /* @__PURE__ */ r.jsx(c, { className: e("size-4", a), ...t }),
+        IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r.jsx(l, { className: e("size-4", a), ...t })
+      },
+      ...o
+    }
+  );
+}
+export {
+  y as Calendar
+};

package/dist/components/ui/card.js

@@ -0,0 +1,77 @@
+"use client";
+import { j as a } from "../../_virtual/jsx-runtime.js";
+import { cn as e } from "../../lib/utils.js";
+function s({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: e(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function n({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: e(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function c({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: e("leading-none font-semibold", t),
+      ...r
+    }
+  );
+}
+function i({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: e("text-muted-foreground text-sm", t),
+      ...r
+    }
+  );
+}
+function l({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: e("px-6", t),
+      ...r
+    }
+  );
+}
+function u({ className: t, ...r }) {
+  return /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: e("flex items-center px-6 [.border-t]:pt-6", t),
+      ...r
+    }
+  );
+}
+export {
+  s as Card,
+  l as CardContent,
+  i as CardDescription,
+  u as CardFooter,
+  n as CardHeader,
+  c as CardTitle
+};

package/dist/components/ui/carousel.js

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

package/dist/components/ui/chart.js

@@ -0,0 +1,216 @@
+"use client";
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import * as j from "react";
+import * as _ from "recharts";
+import { cn as u } from "../../lib/utils.js";
+const P = { light: "", dark: ".dark" }, C = j.createContext(null);
+function N() {
+  const c = j.useContext(C);
+  if (!c)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return c;
+}
+function R({
+  id: c,
+  className: e,
+  children: s,
+  config: n,
+  ...a
+}) {
+  const h = j.useId(), o = `chart-${c || h.replace(/:/g, "")}`;
+  return /* @__PURE__ */ t.jsx(C.Provider, { value: { config: n }, children: /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": o,
+      className: u(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        e
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ t.jsx(T, { id: o, config: n }),
+        /* @__PURE__ */ t.jsx(_.ResponsiveContainer, { children: s })
+      ]
+    }
+  ) });
+}
+const T = ({ id: c, config: e }) => {
+  const s = Object.entries(e).filter(
+    ([, n]) => n.theme || n.color
+  );
+  return s.length ? /* @__PURE__ */ t.jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(P).map(
+          ([n, a]) => `
+${a} [data-chart=${c}] {
+${s.map(([h, o]) => {
+            var l;
+            const i = ((l = o.theme) == null ? void 0 : l[n]) || o.color;
+            return i ? `  --color-${h}: ${i};` : null;
+          }).join(`
+`)}
+}
+`
+        ).join(`
+`)
+      }
+    }
+  ) : null;
+}, S = _.Tooltip;
+function K({
+  active: c,
+  payload: e,
+  className: s,
+  indicator: n = "dot",
+  hideLabel: a = !1,
+  hideIndicator: h = !1,
+  label: o,
+  labelFormatter: i,
+  labelClassName: l,
+  formatter: k,
+  color: $,
+  nameKey: L,
+  labelKey: m
+}) {
+  const { config: g } = N(), w = j.useMemo(() => {
+    var x;
+    if (a || !(e != null && e.length))
+      return null;
+    const [r] = e, b = `${m || (r == null ? void 0 : r.dataKey) || (r == null ? void 0 : r.name) || "value"}`, f = p(g, r, b), d = !m && typeof o == "string" ? ((x = g[o]) == null ? void 0 : x.label) || o : f == null ? void 0 : f.label;
+    return i ? /* @__PURE__ */ t.jsx("div", { className: u("font-medium", l), children: i(d, e) }) : d ? /* @__PURE__ */ t.jsx("div", { className: u("font-medium", l), children: d }) : null;
+  }, [
+    o,
+    i,
+    e,
+    a,
+    l,
+    g,
+    m
+  ]);
+  if (!c || !(e != null && e.length))
+    return null;
+  const v = e.length === 1 && n !== "dot";
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: u(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        s
+      ),
+      children: [
+        v ? null : w,
+        /* @__PURE__ */ t.jsx("div", { className: "grid gap-1.5", children: e.map((r, b) => {
+          const f = `${L || r.name || r.dataKey || "value"}`, d = p(g, r, f), x = $ || r.payload.fill || r.color;
+          return /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: u(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                n === "dot" && "items-center"
+              ),
+              children: k && (r == null ? void 0 : r.value) !== void 0 && r.name ? k(r.value, r.name, r, b, r.payload) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                d != null && d.icon ? /* @__PURE__ */ t.jsx(d.icon, {}) : !h && /* @__PURE__ */ t.jsx(
+                  "div",
+                  {
+                    className: u(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": n === "dot",
+                        "w-1": n === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": n === "dashed",
+                        "my-0.5": v && n === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": x,
+                      "--color-border": x
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t.jsxs(
+                  "div",
+                  {
+                    className: u(
+                      "flex flex-1 justify-between leading-none",
+                      v ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ t.jsxs("div", { className: "grid gap-1.5", children: [
+                        v ? w : null,
+                        /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || r.name })
+                      ] }),
+                      r.value && /* @__PURE__ */ t.jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: r.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            r.dataKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+const M = _.Legend;
+function H({
+  className: c,
+  hideIcon: e = !1,
+  payload: s,
+  verticalAlign: n = "bottom",
+  nameKey: a
+}) {
+  const { config: h } = N();
+  return s != null && s.length ? /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: u(
+        "flex items-center justify-center gap-4",
+        n === "top" ? "pb-3" : "pt-3",
+        c
+      ),
+      children: s.map((o) => {
+        const i = `${a || o.dataKey || "value"}`, l = p(h, o, i);
+        return /* @__PURE__ */ t.jsxs(
+          "div",
+          {
+            className: u(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              l != null && l.icon && !e ? /* @__PURE__ */ t.jsx(l.icon, {}) : /* @__PURE__ */ t.jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: o.color
+                  }
+                }
+              ),
+              l == null ? void 0 : l.label
+            ]
+          },
+          o.value
+        );
+      })
+    }
+  ) : null;
+}
+function p(c, e, s) {
+  if (typeof e != "object" || e === null)
+    return;
+  const n = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  let a = s;
+  return s in e && typeof e[s] == "string" ? a = e[s] : n && s in n && typeof n[s] == "string" && (a = n[s]), a in c ? c[a] : c[s];
+}
+export {
+  R as ChartContainer,
+  M as ChartLegend,
+  H as ChartLegendContent,
+  T as ChartStyle,
+  S as ChartTooltip,
+  K as ChartTooltipContent
+};