@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/drawer.d.cts

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Drawer as Drawer$1 } from 'vaul';
+
+declare const drawerContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DrawerSize = "sm" | "md" | "lg" | "full";
+interface DrawerProps {
+    children: ReactNode;
+    /**
+     * Whether the drawer should scale the background content when open.
+     * Requires `[vaul-drawer-wrapper]` attribute on your app wrapper element.
+     * @default true
+     */
+    shouldScaleBackground?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the drawer starts open. */
+    defaultOpen?: boolean;
+    /** Whether to dismiss on outside click. @default true */
+    dismissible?: boolean;
+    /** Direction the drawer opens from. @default "bottom" */
+    direction?: "top" | "bottom" | "left" | "right";
+    /** Whether to nest inside another drawer. */
+    nested?: boolean;
+    /** Whether to block body scroll when drawer is open. @default true */
+    modal?: boolean;
+    /** Called when drawer is closed. */
+    onClose?: () => void;
+}
+interface DrawerTriggerProps extends ComponentPropsWithoutRef<typeof Drawer$1.Trigger> {
+    className?: string;
+}
+interface DrawerContentProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Content>, "asChild"> {
+    /** Controls the maximum height of the drawer. @default "md" */
+    size?: DrawerSize;
+    /** Whether to show the drag handle at the top. @default true */
+    showHandle?: boolean;
+    /** Extra classes for the overlay backdrop. */
+    overlayClassName?: string;
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerHandleProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerTitleProps extends ComponentPropsWithoutRef<typeof Drawer$1.Title> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerDescriptionProps extends ComponentPropsWithoutRef<typeof Drawer$1.Description> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerCloseProps extends ComponentPropsWithoutRef<typeof Drawer$1.Close> {
+    className?: string;
+}
+/**
+ * Drawer — a bottom sheet with drag-to-dismiss interaction.
+ *
+ * Wraps vaul's `Drawer.Root` with sensible defaults for the Unified UI
+ * design system. Set `shouldScaleBackground` to control whether the
+ * background content scales down when the drawer opens (requires the
+ * `[vaul-drawer-wrapper]` attribute on your app wrapper).
+ */
+declare function Drawer({ shouldScaleBackground, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
+declare const DrawerTrigger: react.ForwardRefExoticComponent<DrawerTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * A visual drag handle rendered at the top of the drawer content.
+ * Provides a clear affordance that the drawer can be dragged to dismiss.
+ */
+declare function DrawerHandle({ className, ...rest }: DrawerHandleProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerHandle {
+    var displayName: string;
+}
+declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare function DrawerHeader({ className, children, ...rest }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerHeader {
+    var displayName: string;
+}
+declare function DrawerBody({ className, children, ...rest }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerBody {
+    var displayName: string;
+}
+declare function DrawerFooter({ className, children, ...rest }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerFooter {
+    var displayName: string;
+}
+declare const DrawerTitle: react.ForwardRefExoticComponent<DrawerTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: react.ForwardRefExoticComponent<DrawerDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerClose: react.ForwardRefExoticComponent<DrawerCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHandle, type DrawerHandleProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, type DrawerSize, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants };

package/dist/components/drawer.d.ts

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Drawer as Drawer$1 } from 'vaul';
+
+declare const drawerContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DrawerSize = "sm" | "md" | "lg" | "full";
+interface DrawerProps {
+    children: ReactNode;
+    /**
+     * Whether the drawer should scale the background content when open.
+     * Requires `[vaul-drawer-wrapper]` attribute on your app wrapper element.
+     * @default true
+     */
+    shouldScaleBackground?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the drawer starts open. */
+    defaultOpen?: boolean;
+    /** Whether to dismiss on outside click. @default true */
+    dismissible?: boolean;
+    /** Direction the drawer opens from. @default "bottom" */
+    direction?: "top" | "bottom" | "left" | "right";
+    /** Whether to nest inside another drawer. */
+    nested?: boolean;
+    /** Whether to block body scroll when drawer is open. @default true */
+    modal?: boolean;
+    /** Called when drawer is closed. */
+    onClose?: () => void;
+}
+interface DrawerTriggerProps extends ComponentPropsWithoutRef<typeof Drawer$1.Trigger> {
+    className?: string;
+}
+interface DrawerContentProps extends Omit<ComponentPropsWithoutRef<typeof Drawer$1.Content>, "asChild"> {
+    /** Controls the maximum height of the drawer. @default "md" */
+    size?: DrawerSize;
+    /** Whether to show the drag handle at the top. @default true */
+    showHandle?: boolean;
+    /** Extra classes for the overlay backdrop. */
+    overlayClassName?: string;
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerHandleProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerTitleProps extends ComponentPropsWithoutRef<typeof Drawer$1.Title> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerDescriptionProps extends ComponentPropsWithoutRef<typeof Drawer$1.Description> {
+    className?: string;
+    children: ReactNode;
+}
+interface DrawerCloseProps extends ComponentPropsWithoutRef<typeof Drawer$1.Close> {
+    className?: string;
+}
+/**
+ * Drawer — a bottom sheet with drag-to-dismiss interaction.
+ *
+ * Wraps vaul's `Drawer.Root` with sensible defaults for the Unified UI
+ * design system. Set `shouldScaleBackground` to control whether the
+ * background content scales down when the drawer opens (requires the
+ * `[vaul-drawer-wrapper]` attribute on your app wrapper).
+ */
+declare function Drawer({ shouldScaleBackground, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
+declare const DrawerTrigger: react.ForwardRefExoticComponent<DrawerTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * A visual drag handle rendered at the top of the drawer content.
+ * Provides a clear affordance that the drawer can be dragged to dismiss.
+ */
+declare function DrawerHandle({ className, ...rest }: DrawerHandleProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerHandle {
+    var displayName: string;
+}
+declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare function DrawerHeader({ className, children, ...rest }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerHeader {
+    var displayName: string;
+}
+declare function DrawerBody({ className, children, ...rest }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerBody {
+    var displayName: string;
+}
+declare function DrawerFooter({ className, children, ...rest }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+declare namespace DrawerFooter {
+    var displayName: string;
+}
+declare const DrawerTitle: react.ForwardRefExoticComponent<DrawerTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: react.ForwardRefExoticComponent<DrawerDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerClose: react.ForwardRefExoticComponent<DrawerCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHandle, type DrawerHandleProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, type DrawerSize, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants };

package/dist/components/drawer.mjs

@@ -0,0 +1,230 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import {
+  forwardRef
+} from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+const drawerContentVariants = cva(
+  [
+    // Positioning — vaul handles the transform; we set the shell styles
+    "fixed inset-x-0 bottom-0",
+    // Z-index
+    "z-[var(--z-modal)]",
+    // Layout
+    "flex flex-col",
+    // Visual
+    "rounded-t-lg",
+    "border border-b-0 border-border",
+    "bg-background",
+    "shadow-xl",
+    // Focus
+    "outline-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-h-[30vh]",
+        md: "max-h-[50vh]",
+        lg: "max-h-[75vh]",
+        full: "max-h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Drawer({
+  shouldScaleBackground = true,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Root,
+    {
+      shouldScaleBackground,
+      ...rest,
+      children
+    }
+  );
+}
+Drawer.displayName = "Drawer";
+const DrawerTrigger = forwardRef(function DrawerTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Trigger,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "drawer-trigger",
+      ...rest
+    }
+  );
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+const DrawerOverlay = forwardRef(function DrawerOverlay2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Overlay,
+    {
+      ref,
+      className: cn(
+        "fixed inset-0",
+        "z-[var(--z-overlay)]",
+        "bg-black/50",
+        className
+      ),
+      ...rest
+    }
+  );
+});
+DrawerOverlay.displayName = "DrawerOverlay";
+function DrawerHandle({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("mx-auto mt-4 mb-2 flex justify-center", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-handle",
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-12 rounded-full bg-muted-foreground/25" })
+    }
+  );
+}
+DrawerHandle.displayName = "DrawerHandle";
+const DrawerContent = forwardRef(function DrawerContent2({
+  size = "md",
+  showHandle = true,
+  overlayClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsxs(
+      DrawerPrimitive.Content,
+      {
+        ref,
+        className: cn("not-prose", drawerContentVariants({ size }), className),
+        "data-ds": "",
+        "data-ds-component": "drawer",
+        "data-ds-size": size,
+        ...rest,
+        children: [
+          showHandle && /* @__PURE__ */ jsx(DrawerHandle, {}),
+          children
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+function DrawerHeader({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-1.5 px-6 pt-4 pb-2", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-header",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerHeader.displayName = "DrawerHeader";
+function DrawerBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex-1 overflow-y-auto px-6 py-4", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-body",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerBody.displayName = "DrawerBody";
+function DrawerFooter({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse gap-2 px-6 pb-6 pt-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "drawer-footer",
+      ...rest,
+      children
+    }
+  );
+}
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = forwardRef(function DrawerTitle2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Title,
+    {
+      ref,
+      className: cn(
+        "text-lg font-semibold leading-6 text-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "drawer-title",
+      ...rest,
+      children
+    }
+  );
+});
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = forwardRef(function DrawerDescription2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Description,
+    {
+      ref,
+      className: cn("text-sm leading-5 text-muted-foreground", className),
+      "data-ds": "",
+      "data-ds-component": "drawer-description",
+      ...rest,
+      children
+    }
+  );
+});
+DrawerDescription.displayName = "DrawerDescription";
+const DrawerClose = forwardRef(function DrawerClose2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Close,
+    {
+      ref,
+      className,
+      "data-ds": "",
+      "data-ds-component": "drawer-close",
+      ...rest
+    }
+  );
+});
+DrawerClose.displayName = "DrawerClose";
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHandle,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  drawerContentVariants
+};