@oneplatformdev/ui 0.1.0-8 → 0.1.9-10

package/Sidebar/Sidebar.d.ts

@@ -0,0 +1,67 @@
+import { VariantProps } from 'class-variance-authority';
+import { TooltipContent } from '../Tooltip';
+import * as React from "react";
+type SidebarContext = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare const SidebarContext: React.Context<SidebarContext | null>;
+declare function useSidebar(): SidebarContext;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import('..').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<import('..').InputProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+//# sourceMappingURL=Sidebar.d.ts.map

package/Sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAU5D,OAAO,EAEL,cAAc,EAGf,MAAM,YAAY,CAAA;AASnB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,sCAAmD,CAAA;AAEvE,iBAAS,UAAU,mBAOlB;AAED,QAAA,MAAM,eAAe;kBAGH,OAAO;WACd,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;gDAqGzC,CAAA;AAGD,QAAA,MAAM,OAAO;WAGF,MAAM,GAAG,OAAO;cACb,SAAS,GAAG,UAAU,GAAG,OAAO;kBAC5B,WAAW,GAAG,MAAM,GAAG,MAAM;gDA+F9C,CAAA;AAGD,QAAA,MAAM,cAAc,0JAuBlB,CAAA;AAGF,QAAA,MAAM,WAAW,kLA0Bf,CAAA;AAGF,QAAA,MAAM,YAAY,6JAehB,CAAA;AAGF,QAAA,MAAM,YAAY,uJAehB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,mKAYjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,iOAYpB,CAAA;AAGF,QAAA,MAAM,cAAc,mKAelB,CAAA;AAGF,QAAA,MAAM,YAAY,mKAYhB,CAAA;AAGF,QAAA,MAAM,iBAAiB;cAEqB,OAAO;gDAgBjD,CAAA;AAGF,QAAA,MAAM,kBAAkB;cAEuB,OAAO;mDAkBpD,CAAA;AAGF,QAAA,MAAM,mBAAmB,mKAUvB,CAAA;AAGF,QAAA,MAAM,WAAW,yKAUf,CAAA;AAGF,QAAA,MAAM,eAAe,kKAUnB,CAAA;AAyBF,QAAA,MAAM,iBAAiB;cAGT,OAAO;eACN,OAAO;cACR,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC;;;;iIAmDjE,CAAA;AAGD,QAAA,MAAM,iBAAiB;cAGT,OAAO;kBACH,OAAO;mDAwBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB,mKAkBpB,CAAA;AAGF,QAAA,MAAM,mBAAmB;eAGV,OAAO;gDAgCpB,CAAA;AAGF,QAAA,MAAM,cAAc,yKAclB,CAAA;AAGF,QAAA,MAAM,kBAAkB,kKAG6B,CAAA;AAGrD,QAAA,MAAM,oBAAoB;cAGZ,OAAO;WACV,IAAI,GAAG,IAAI;eACP,OAAO;mDAsBpB,CAAA;AAGF,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,CAAA"}

package/Sidebar/Sidebar.js

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

package/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Sidebar';
+//# sourceMappingURL=index.d.ts.map

package/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/Sidebar/index.js

@@ -0,0 +1,27 @@
+import { Sidebar as a, SidebarContent as i, SidebarFooter as S, SidebarGroup as b, SidebarGroupAction as d, SidebarGroupContent as n, SidebarGroupLabel as u, SidebarHeader as t, SidebarInput as o, SidebarInset as M, SidebarMenu as p, SidebarMenuAction as G, SidebarMenuBadge as I, SidebarMenuButton as g, SidebarMenuItem as l, SidebarMenuSkeleton as m, SidebarMenuSub as B, SidebarMenuSubButton as c, SidebarMenuSubItem as s, SidebarProvider as A, SidebarRail as C, SidebarSeparator as f, SidebarTrigger as k, useSidebar as v } from "./Sidebar.js";
+export {
+  a as Sidebar,
+  i as SidebarContent,
+  S as SidebarFooter,
+  b as SidebarGroup,
+  d as SidebarGroupAction,
+  n as SidebarGroupContent,
+  u as SidebarGroupLabel,
+  t as SidebarHeader,
+  o as SidebarInput,
+  M as SidebarInset,
+  p as SidebarMenu,
+  G as SidebarMenuAction,
+  I as SidebarMenuBadge,
+  g as SidebarMenuButton,
+  l as SidebarMenuItem,
+  m as SidebarMenuSkeleton,
+  B as SidebarMenuSub,
+  c as SidebarMenuSubButton,
+  s as SidebarMenuSubItem,
+  A as SidebarProvider,
+  C as SidebarRail,
+  f as SidebarSeparator,
+  k as SidebarTrigger,
+  v as useSidebar
+};

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=Skeleton.d.ts.map

package/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAOtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as o } from "@oneplatformdev/utils";
+function i({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: o("animate-pulse rounded-md bg-primary/10", r),
+      ...e
+    }
+  );
+}
+export {
+  i as Skeleton
+};

package/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+//# sourceMappingURL=index.d.ts.map

package/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}