@devalok/shilp-sutra 0.1.0

package/dist/ui/sidebar.js

@@ -0,0 +1,562 @@
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { Root as h } from "../primitives/react-slot.js";
+import { cva as E } from "class-variance-authority";
+import { IconLayoutSidebarLeftCollapse as T } from "@tabler/icons-react";
+import { useIsMobile as A } from "../hooks/use-mobile.js";
+import { cn as i } from "./lib/utils.js";
+import { Button as D } from "./button.js";
+import { Input as O } from "./input.js";
+import { Separator as R } from "./separator.js";
+import { Sheet as G, SheetContent as L } from "./sheet.js";
+import { Skeleton as M } from "./skeleton.js";
+import { Tooltip as H, TooltipTrigger as K, TooltipContent as j, TooltipProvider as $ } from "./tooltip.js";
+import { forwardRef as s, useMemo as I, useState as _, useCallback as C, useEffect as P, useContext as V, createContext as W } from "react";
+const q = "sidebar:state", F = 60 * 60 * 24 * 7, U = "16rem", X = "18rem", Y = "3rem", J = "b", k = W(null);
+function w() {
+  const a = V(k);
+  if (!a)
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  return a;
+}
+const Q = s(
+  ({
+    defaultOpen: a = !0,
+    open: e,
+    onOpenChange: t,
+    className: d,
+    style: o,
+    children: n,
+    ...b
+  }, f) => {
+    const u = A(), [m, c] = _(!1), [x, z] = _(a), g = e ?? x, v = C(
+      (l) => {
+        const p = typeof l == "function" ? l(g) : l;
+        t ? t(p) : z(p), document.cookie = `${q}=${p}; path=/; max-age=${F}`;
+      },
+      [t, g]
+    ), y = C(() => u ? c((l) => !l) : v((l) => !l), [u, v, c]);
+    P(() => {
+      const l = (p) => {
+        p.key === J && (p.metaKey || p.ctrlKey) && (p.preventDefault(), y());
+      };
+      return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
+    }, [y]);
+    const N = g ? "expanded" : "collapsed", B = I(
+      () => ({
+        state: N,
+        open: g,
+        setOpen: v,
+        isMobile: u,
+        openMobile: m,
+        setOpenMobile: c,
+        toggleSidebar: y
+      }),
+      [
+        N,
+        g,
+        v,
+        u,
+        m,
+        c,
+        y
+      ]
+    );
+    return /* @__PURE__ */ r(k.Provider, { value: B, children: /* @__PURE__ */ r($, { delayDuration: 0, children: /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          "--sidebar-width": U,
+          "--sidebar-width-icon": Y,
+          ...o
+        },
+        className: i(
+          "group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-background",
+          d
+        ),
+        ref: f,
+        ...b,
+        children: n
+      }
+    ) }) });
+  }
+);
+Q.displayName = "SidebarProvider";
+const Z = s(
+  ({
+    side: a = "left",
+    variant: e = "sidebar",
+    collapsible: t = "offcanvas",
+    className: d,
+    children: o,
+    ...n
+  }, b) => {
+    const { isMobile: f, state: u, openMobile: m, setOpenMobile: c } = w();
+    return t === "none" ? /* @__PURE__ */ r(
+      "div",
+      {
+        className: i(
+          "flex h-full w-[--sidebar-width] flex-col bg-layer-01 text-text-primary",
+          d
+        ),
+        ref: b,
+        ...n,
+        children: o
+      }
+    ) : f ? /* @__PURE__ */ r(G, { open: m, onOpenChange: c, ...n, children: /* @__PURE__ */ r(
+      L,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        className: "w-[--sidebar-width] bg-layer-01 p-0 text-text-primary [&>button]:hidden",
+        style: {
+          "--sidebar-width": X
+        },
+        side: a,
+        children: /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: o })
+      }
+    ) }) : /* @__PURE__ */ S(
+      "div",
+      {
+        ref: b,
+        className: "group peer hidden text-text-primary md:block",
+        "data-state": u,
+        "data-collapsible": u === "collapsed" ? t : "",
+        "data-variant": e,
+        "data-side": a,
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: i(
+                "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-moderate-02 ease-linear",
+                "group-data-[collapsible=offcanvas]:w-0",
+                "group-data-[side=right]:rotate-180",
+                e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              )
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: i(
+                "fixed inset-y-0 z-raised hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-moderate-02 ease-linear md:flex",
+                a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+                e === "floating" || e === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+                d
+              ),
+              ...n,
+              children: /* @__PURE__ */ r(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  className: "flex h-full w-full flex-col bg-layer-01 group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow",
+                  children: o
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "Sidebar";
+const ee = s(({ className: a, onClick: e, ...t }, d) => {
+  const { toggleSidebar: o } = w();
+  return /* @__PURE__ */ S(
+    D,
+    {
+      ref: d,
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "icon-md",
+      className: i("h-ds-xs-plus w-ds-xs-plus", a),
+      onClick: (n) => {
+        e == null || e(n), o();
+      },
+      ...t,
+      children: [
+        /* @__PURE__ */ r(T, {}),
+        /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+});
+ee.displayName = "SidebarTrigger";
+const ae = s(
+  ({ className: a, ...e }, t) => {
+    const { toggleSidebar: d } = w();
+    return /* @__PURE__ */ r(
+      "button",
+      {
+        ref: t,
+        "data-sidebar": "rail",
+        "aria-label": "Toggle Sidebar",
+        tabIndex: -1,
+        onClick: d,
+        title: "Toggle Sidebar",
+        className: i(
+          "hover:after:bg-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-layer-02",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          a
+        ),
+        ...e
+      }
+    );
+  }
+);
+ae.displayName = "SidebarRail";
+const te = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "main",
+    {
+      ref: t,
+      className: i(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-ds-xl md:peer-data-[variant=inset]:shadow",
+        a
+      ),
+      ...e
+    }
+  )
+);
+te.displayName = "SidebarInset";
+const re = s(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+  O,
+  {
+    ref: t,
+    "data-sidebar": "input",
+    className: i(
+      "h-ds-sm w-full bg-layer-01 shadow-none focus-visible:ring-2 focus-visible:ring-focus",
+      a
+    ),
+    ...e
+  }
+));
+re.displayName = "SidebarInput";
+const ie = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "header",
+      className: i("flex flex-col gap-ds-03 p-ds-03", a),
+      ...e
+    }
+  )
+);
+ie.displayName = "SidebarHeader";
+const se = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "footer",
+      className: i("flex flex-col gap-ds-03 p-ds-03", a),
+      ...e
+    }
+  )
+);
+se.displayName = "SidebarFooter";
+const de = s(({ className: a, ...e }, t) => /* @__PURE__ */ r(
+  R,
+  {
+    ref: t,
+    "data-sidebar": "separator",
+    className: i(
+      "bg-border-subtle mx-ds-03 w-auto",
+      a
+    ),
+    ...e
+  }
+));
+de.displayName = "SidebarSeparator";
+const oe = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "content",
+      className: i(
+        "flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        a
+      ),
+      ...e
+    }
+  )
+);
+oe.displayName = "SidebarContent";
+const ne = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "group",
+      className: i("relative flex w-full min-w-0 flex-col p-ds-03", a),
+      ...e
+    }
+  )
+);
+ne.displayName = "SidebarGroup";
+const le = s(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
+  e ? h : "div",
+  {
+    ref: d,
+    "data-sidebar": "group-label",
+    className: i(
+      "flex h-ds-sm shrink-0 items-center rounded-ds-md px-ds-03 text-ds-sm font-medium text-text-secondary outline-none ring-focus transition-[margin,opa] duration-moderate-02 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+      a
+    ),
+    ...t
+  }
+));
+le.displayName = "SidebarGroupLabel";
+const ue = s(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
+  e ? h : "button",
+  {
+    ref: d,
+    "data-sidebar": "group-action",
+    className: i(
+      "hover:bg-layer-02 absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-text-primary outline-none ring-focus transition-transform hover:text-text-primary focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "after:absolute after:-inset-2 after:md:hidden",
+      "group-data-[collapsible=icon]:hidden",
+      a
+    ),
+    ...t
+  }
+));
+ue.displayName = "SidebarGroupAction";
+const ce = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "group-content",
+      className: i("w-full text-ds-md", a),
+      ...e
+    }
+  )
+);
+ce.displayName = "SidebarGroupContent";
+const pe = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "ul",
+    {
+      ref: t,
+      "data-sidebar": "menu",
+      className: i("flex w-full min-w-0 flex-col gap-ds-02", a),
+      ...e
+    }
+  )
+);
+pe.displayName = "SidebarMenu";
+const be = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "li",
+    {
+      ref: t,
+      "data-sidebar": "menu-item",
+      className: i("group/menu-item relative", a),
+      ...e
+    }
+  )
+);
+be.displayName = "SidebarMenuItem";
+const me = E(
+  "peer/menu-button hover:bg-layer-02 active:bg-interactive-subtle data-[active=true]:bg-interactive-subtle data-[state=open]:hover:bg-layer-02 flex w-full items-center gap-ds-03 overflow-hidden rounded-ds-md p-ds-03 text-left outline-none ring-focus transition-[width,height,padding] hover:text-text-primary focus-visible:ring-2 active:text-text-primary disabled:pointer-events-none disabled:opacity-[0.38] group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-[0.38] data-[active=true]:font-medium data-[active=true]:text-text-primary data-[state=open]:hover:text-text-primary group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-ds-03 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-layer-02 hover:text-text-primary",
+        outline: "hover:bg-layer-02 bg-background shadow-[0_0_0_1px_var(--color-border-subtle)] hover:text-text-primary hover:shadow-[0_0_0_1px_var(--color-border-strong)]"
+      },
+      size: {
+        md: "h-ds-sm text-ds-md",
+        sm: "h-ds-xs-plus text-ds-sm",
+        lg: "h-ds-lg text-ds-md group-data-[collapsible=icon]:!p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), fe = s(
+  ({
+    asChild: a = !1,
+    isActive: e = !1,
+    variant: t = "default",
+    size: d = "md",
+    tooltip: o,
+    className: n,
+    ...b
+  }, f) => {
+    const u = a ? h : "button", { isMobile: m, state: c } = w(), x = /* @__PURE__ */ r(
+      u,
+      {
+        ref: f,
+        "data-sidebar": "menu-button",
+        "data-size": d,
+        "data-active": e,
+        className: i(me({ variant: t, size: d }), n),
+        ...b
+      }
+    );
+    return o ? (typeof o == "string" && (o = {
+      children: o
+    }), /* @__PURE__ */ S(H, { children: [
+      /* @__PURE__ */ r(K, { asChild: !0, children: x }),
+      /* @__PURE__ */ r(
+        j,
+        {
+          side: "right",
+          align: "center",
+          hidden: c !== "collapsed" || m,
+          ...o
+        }
+      )
+    ] })) : x;
+  }
+);
+fe.displayName = "SidebarMenuButton";
+const ge = s(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, o) => /* @__PURE__ */ r(
+  e ? h : "button",
+  {
+    ref: o,
+    "data-sidebar": "menu-action",
+    className: i(
+      "hover:bg-layer-02 absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-ds-md p-0 text-text-primary outline-none ring-focus transition-transform hover:text-text-primary focus-visible:ring-2 peer-hover/menu-button:text-text-primary [&>svg]:size-4 [&>svg]:shrink-0",
+      "after:absolute after:-inset-2 after:md:hidden",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=md]/menu-button:top-ds-02b",
+      "peer-data-[size=lg]/menu-button:top-ds-03",
+      "group-data-[collapsible=icon]:hidden",
+      t && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-text-primary md:opacity-0",
+      a
+    ),
+    ...d
+  }
+));
+ge.displayName = "SidebarMenuAction";
+const he = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      "data-sidebar": "menu-badge",
+      className: i(
+        "pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-ds-md px-ds-02 text-ds-sm font-medium tabular-nums text-text-primary",
+        "peer-hover/menu-button:text-text-primary peer-data-[active=true]/menu-button:text-text-primary",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=md]/menu-button:top-ds-02b",
+        "peer-data-[size=lg]/menu-button:top-ds-03",
+        "group-data-[collapsible=icon]:hidden",
+        a
+      ),
+      ...e
+    }
+  )
+);
+he.displayName = "SidebarMenuBadge";
+const xe = s(({ className: a, showIcon: e = !1, ...t }, d) => {
+  const o = I(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      ref: d,
+      "data-sidebar": "menu-skeleton",
+      className: i("flex h-ds-sm items-center gap-ds-03 rounded-ds-md px-ds-03", a),
+      ...t,
+      children: [
+        e && /* @__PURE__ */ r(
+          M,
+          {
+            className: "size-4 rounded-ds-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ r(
+          M,
+          {
+            className: "h-4 max-w-[--skeleton-width] flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": o
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+xe.displayName = "SidebarMenuSkeleton";
+const ve = s(
+  ({ className: a, ...e }, t) => /* @__PURE__ */ r(
+    "ul",
+    {
+      ref: t,
+      "data-sidebar": "menu-sub",
+      className: i(
+        "mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-border-subtle px-ds-03 py-ds-01",
+        "group-data-[collapsible=icon]:hidden",
+        a
+      ),
+      ...e
+    }
+  )
+);
+ve.displayName = "SidebarMenuSub";
+const ye = s(
+  ({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a })
+);
+ye.displayName = "SidebarMenuSubItem";
+const Se = s(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...o }, n) => /* @__PURE__ */ r(
+  a ? h : "a",
+  {
+    ref: n,
+    "data-sidebar": "menu-sub-button",
+    "data-size": e,
+    "data-active": t,
+    className: i(
+      "hover:bg-layer-02 active:bg-interactive-subtle flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-ds-md px-ds-03 text-text-primary outline-none ring-focus hover:text-text-primary focus-visible:ring-2 active:text-text-primary disabled:pointer-events-none disabled:opacity-[0.38] aria-disabled:pointer-events-none aria-disabled:opacity-[0.38] [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-text-primary",
+      "data-[active=true]:bg-interactive-subtle data-[active=true]:text-text-primary",
+      e === "sm" && "text-ds-sm",
+      e === "md" && "text-ds-md",
+      "group-data-[collapsible=icon]:hidden",
+      d
+    ),
+    ...o
+  }
+));
+Se.displayName = "SidebarMenuSubButton";
+export {
+  Z as Sidebar,
+  oe as SidebarContent,
+  se as SidebarFooter,
+  ne as SidebarGroup,
+  ue as SidebarGroupAction,
+  ce as SidebarGroupContent,
+  le as SidebarGroupLabel,
+  ie as SidebarHeader,
+  re as SidebarInput,
+  te as SidebarInset,
+  pe as SidebarMenu,
+  ge as SidebarMenuAction,
+  he as SidebarMenuBadge,
+  fe as SidebarMenuButton,
+  be as SidebarMenuItem,
+  xe as SidebarMenuSkeleton,
+  ve as SidebarMenuSub,
+  Se as SidebarMenuSubButton,
+  ye as SidebarMenuSubItem,
+  Q as SidebarProvider,
+  ae as SidebarRail,
+  de as SidebarSeparator,
+  ee as SidebarTrigger,
+  w as useSidebar
+};

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const skeletonVariants: (props?: ({
+    variant?: "text" | "circle" | "rectangle" | null | undefined;
+    animation?: "none" | "pulse" | "shimmer" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for Skeleton — a loading placeholder with shape variants and two animation styles.
+ *
+ * **Shape variants:** `rectangle` (default, rounded corners) | `circle` (aspect-square pill) |
+ * `text` (full-width slim bar, for text line placeholders)
+ *
+ * **Animation:** `pulse` (default, opacity fade) | `shimmer` (left-to-right gradient sweep,
+ * respects `prefers-reduced-motion`) | `none` (static, for testing or paused states)
+ *
+ * @example
+ * // Text line placeholder (repeatable for a paragraph skeleton):
+ * <Skeleton variant="text" />
+ * <Skeleton variant="text" className="w-3/4" />
+ *
+ * @example
+ * // Avatar + name card loading state:
+ * <div className="flex items-center gap-ds-04">
+ *   <Skeleton variant="circle" className="h-ds-md w-ds-md" />
+ *   <div className="flex flex-col gap-ds-02 flex-1">
+ *     <Skeleton variant="text" className="w-1/2" />
+ *     <Skeleton variant="text" className="w-1/3" />
+ *   </div>
+ * </div>
+ *
+ * @example
+ * // Card placeholder with shimmer animation:
+ * <Skeleton variant="rectangle" animation="shimmer" className="h-48 w-full" />
+ * // These are just a few ways — feel free to combine props creatively!
+ */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export { Skeleton, skeletonVariants };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/ui/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/ui/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,gBAAgB;;;8EAkBpB,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,QAAA,MAAM,QAAQ,sFAUb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/skeleton.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as m } from "./lib/utils.js";
+const l = i("bg-skeleton-base", {
+  variants: {
+    variant: {
+      rectangle: "rounded-ds-md",
+      circle: "rounded-ds-full aspect-square",
+      text: "rounded-ds-sm h-4 w-full"
+    },
+    animation: {
+      pulse: "animate-pulse",
+      shimmer: "bg-[length:200%_100%] bg-gradient-to-r from-skeleton-base via-skeleton-shimmer to-skeleton-base animate-skeleton-shimmer motion-reduce:animate-none",
+      none: ""
+    }
+  },
+  defaultVariants: {
+    variant: "rectangle",
+    animation: "pulse"
+  }
+}), d = s.forwardRef(
+  ({ className: e, variant: a, animation: t, ...n }, o) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      className: m(l({ variant: a, animation: t }), e),
+      ...n
+    }
+  )
+);
+d.displayName = "Skeleton";
+export {
+  d as Skeleton,
+  l as skeletonVariants
+};

package/dist/ui/slider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@primitives/react-slider';
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

package/dist/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAI3D,QAAA,MAAM,MAAM,yJAoBV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ui/slider.js

@@ -0,0 +1,29 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as n from "react";
+import { Root as o, Track as t, Range as c, Thumb as d } from "../primitives/react-slider.js";
+import { cn as f } from "./lib/utils.js";
+const m = n.forwardRef(({ className: i, "aria-label": l, ...s }, r) => /* @__PURE__ */ a(
+  o,
+  {
+    ref: r,
+    className: f(
+      "relative flex w-full touch-none select-none items-center",
+      i
+    ),
+    ...s,
+    children: [
+      /* @__PURE__ */ e(t, { className: "relative h-ds-02b w-full grow overflow-hidden rounded-ds-full bg-field", children: /* @__PURE__ */ e(c, { className: "absolute h-full bg-interactive" }) }),
+      /* @__PURE__ */ e(
+        d,
+        {
+          "aria-label": l,
+          className: "block h-ico-sm w-ico-sm rounded-ds-full border-2 border-interactive bg-layer-01 shadow-01 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38]"
+        }
+      )
+    ]
+  }
+));
+m.displayName = o.displayName;
+export {
+  m as Slider
+};