@lglab/compose-ui 0.20.0 → 0.22.0

package/dist/drawer.d.ts

@@ -0,0 +1,99 @@
+import { Dialog } from '@base-ui/react/dialog';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+declare type ButtonSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+
+export declare const DrawerBackdrop: {
+    ({ className, ...props }: DrawerBackdropProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerBackdropProps = React_2.ComponentProps<typeof Dialog.Backdrop>;
+
+export declare const DrawerClose: {
+    ({ className, variant, size, ...props }: DrawerCloseProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerCloseProps = React_2.ComponentProps<typeof Dialog.Close> & {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the close button */
+    size?: ButtonSize;
+};
+
+export declare const DrawerContent: {
+    ({ className, ...props }: DrawerContentProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerContentProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export declare const DrawerDescription: {
+    ({ className, ...props }: DrawerDescriptionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerDescriptionProps = React_2.ComponentProps<typeof Dialog.Description>;
+
+export declare const DrawerFooter: {
+    ({ className, ...props }: DrawerFooterProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerFooterProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export declare const DrawerHeader: {
+    ({ className, ...props }: DrawerHeaderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerHeaderProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export declare const DrawerPopup: {
+    ({ className, side, ...props }: DrawerPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerPopupProps = React_2.ComponentProps<typeof Dialog.Popup> & {
+    /** Side from which the drawer slides in */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+};
+
+export declare const DrawerPortal: {
+    (props: DrawerPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerPortalProps = React_2.ComponentProps<typeof Dialog.Portal>;
+
+export declare const DrawerRoot: {
+    (props: DrawerRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerRootProps = React_2.ComponentProps<typeof Dialog.Root>;
+
+export declare const DrawerTitle: {
+    ({ className, ...props }: DrawerTitleProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerTitleProps = React_2.ComponentProps<typeof Dialog.Title>;
+
+export declare const DrawerTrigger: {
+    ({ className, variant, size, ...props }: DrawerTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DrawerTriggerProps = React_2.ComponentProps<typeof Dialog.Trigger> & {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the trigger button */
+    size?: ButtonSize;
+};
+
+export { }

package/dist/drawer.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Dialog as s } from "@base-ui/react/dialog";
+import { cva as i } from "class-variance-authority";
+import { b as n } from "./button-variants-CbFMPwc8.js";
+import { c as t } from "./utils-B6yFEsav.js";
+const d = (a) => /* @__PURE__ */ e(s.Root, { ...a });
+d.displayName = "DrawerRoot";
+const c = ({ className: a, variant: r, size: o, ...l }) => /* @__PURE__ */ e(
+  s.Trigger,
+  {
+    className: t(n({ variant: r, size: o }), a),
+    ...l
+  }
+);
+c.displayName = "DrawerTrigger";
+const p = (a) => /* @__PURE__ */ e(s.Portal, { ...a });
+p.displayName = "DrawerPortal";
+const m = ({ className: a, ...r }) => /* @__PURE__ */ e(
+  s.Backdrop,
+  {
+    className: t(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      "transition-opacity duration-300",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      a
+    ),
+    ...r
+  }
+);
+m.displayName = "DrawerBackdrop";
+const u = i(
+  [
+    "fixed z-50 flex flex-col bg-background p-6 shadow-lg",
+    "transition-transform duration-300 ease-out",
+    "scale-[calc(1-0.1*var(--nested-dialogs))]",
+    "data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5"
+  ],
+  {
+    variants: {
+      side: {
+        top: [
+          "inset-x-0 top-0 border-b border-border",
+          "data-starting-style:-translate-y-full",
+          "data-ending-style:-translate-y-full"
+        ],
+        right: [
+          "inset-y-0 right-0 h-full w-sm max-w-full border-l border-border",
+          "data-starting-style:translate-x-full",
+          "data-ending-style:translate-x-full"
+        ],
+        bottom: [
+          "inset-x-0 bottom-0 border-t border-border",
+          "data-starting-style:translate-y-full",
+          "data-ending-style:translate-y-full"
+        ],
+        left: [
+          "inset-y-0 left-0 h-full w-sm max-w-full border-r border-border",
+          "data-starting-style:-translate-x-full",
+          "data-ending-style:-translate-x-full"
+        ]
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+), g = ({ className: a, side: r, ...o }) => /* @__PURE__ */ e(
+  s.Popup,
+  {
+    className: t(u({ side: r }), a),
+    ...o
+  }
+);
+g.displayName = "DrawerPopup";
+const f = ({ className: a, ...r }) => /* @__PURE__ */ e(
+  s.Title,
+  {
+    className: t("text-lg font-semibold leading-none tracking-tight", a),
+    ...r
+  }
+);
+f.displayName = "DrawerTitle";
+const y = ({ className: a, ...r }) => /* @__PURE__ */ e(s.Description, { className: t("", a), ...r });
+y.displayName = "DrawerDescription";
+const w = ({ className: a, variant: r, size: o, ...l }) => /* @__PURE__ */ e(
+  s.Close,
+  {
+    className: t(n({ variant: r ?? "outline", size: o }), a),
+    ...l
+  }
+);
+w.displayName = "DrawerClose";
+const b = ({ className: a, ...r }) => /* @__PURE__ */ e("div", { className: t("flex flex-col space-y-1.5", a), ...r });
+b.displayName = "DrawerHeader";
+const D = ({ className: a, ...r }) => /* @__PURE__ */ e("div", { className: t("py-5", a), ...r });
+D.displayName = "DrawerContent";
+const N = ({ className: a, ...r }) => /* @__PURE__ */ e("div", { className: t("", a), ...r });
+N.displayName = "DrawerFooter";
+export {
+  m as DrawerBackdrop,
+  w as DrawerClose,
+  D as DrawerContent,
+  y as DrawerDescription,
+  N as DrawerFooter,
+  b as DrawerHeader,
+  g as DrawerPopup,
+  p as DrawerPortal,
+  d as DrawerRoot,
+  f as DrawerTitle,
+  c as DrawerTrigger
+};