laif-ds/dist/components/ui/sidebar.js

Design System di Laif con componenti React basati su principi di Atomic Design

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