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

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

"use client";
import { jsx as t, jsxs as o } from "react/jsx-runtime";
import { Drawer as e } from "../../node_modules/vaul/dist/index.js";
import { cn as d } from "../../lib/utils.js";
function w({
  ...r
}) {
  return /* @__PURE__ */ t(e.Root, { "data-slot": "drawer", ...r });
}
function m({
  ...r
}) {
  return /* @__PURE__ */ t(e.Trigger, { "data-slot": "drawer-trigger", ...r });
}
function n({
  ...r
}) {
  return /* @__PURE__ */ t(e.Portal, { "data-slot": "drawer-portal", ...r });
}
function l({
  className: r,
  ...a
}) {
  return /* @__PURE__ */ t(
    e.Overlay,
    {
      "data-slot": "drawer-overlay",
      className: d(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        r
      ),
      ...a
    }
  );
}
function f({
  className: r,
  children: a,
  ...i
}) {
  return /* @__PURE__ */ o(n, { "data-slot": "drawer-portal", children: [
    /* @__PURE__ */ t(l, {}),
    /* @__PURE__ */ o(
      e.Content,
      {
        "data-slot": "drawer-content",
        className: d(
          "border-d-border group/drawer-content bg-d-background fixed z-50 flex h-auto flex-col",
          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
          r
        ),
        ...i,
        children: [
          /* @__PURE__ */ t("div", { className: "bg-d-secondary mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
          a
        ]
      }
    )
  ] });
}
function v({ className: r, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      "data-slot": "drawer-header",
      className: d("flex flex-col gap-1.5 p-4", r),
      ...a
    }
  );
}
function p({ className: r, ...a }) {
  return /* @__PURE__ */ t(
    "div",
    {
      "data-slot": "drawer-footer",
      className: d("mt-auto flex flex-col gap-2 p-4", r),
      ...a
    }
  );
}
function b({
  className: r,
  ...a
}) {
  return /* @__PURE__ */ t(
    e.Title,
    {
      "data-slot": "drawer-title",
      className: d("text-d-foreground font-semibold", r),
      ...a
    }
  );
}
function g({
  className: r,
  ...a
}) {
  return /* @__PURE__ */ t(
    e.Description,
    {
      "data-slot": "drawer-description",
      className: d("text-d-secondary-foreground text-sm", r),
      ...a
    }
  );
}
export {
  w as Drawer,
  f as DrawerContent,
  g as DrawerDescription,
  p as DrawerFooter,
  v as DrawerHeader,
  l as DrawerOverlay,
  n as DrawerPortal,
  b as DrawerTitle,
  m as DrawerTrigger
};