linkedunion-design-kit 1.10.6-beta.2 → 1.10.7-beta.1

package/dist/src/components/MenuBar/menubar.stories.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarShortcut, MenubarGroup, } from "./menubar";
+var meta = {
+    title: "Components/MenuBar",
+    component: Menubar,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. Built on top of Radix UI Menubar primitive.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+// Basic menubar with File and Edit menus
+export var Basic = function () { return (_jsxs(Menubar, { children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarItem, { children: ["New Tab ", _jsx(MenubarShortcut, { children: "\u2318T" })] }), _jsxs(MenubarItem, { children: ["New Window ", _jsx(MenubarShortcut, { children: "\u2318N" })] }), _jsx(MenubarSeparator, {}), _jsxs(MenubarItem, { children: ["Open File... ", _jsx(MenubarShortcut, { children: "\u2318O" })] })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Edit" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarItem, { children: ["Undo ", _jsx(MenubarShortcut, { children: "\u2318Z" })] }), _jsxs(MenubarItem, { children: ["Redo ", _jsx(MenubarShortcut, { children: "\u21E7\u2318Z" })] }), _jsx(MenubarSeparator, {}), _jsxs(MenubarItem, { children: ["Cut ", _jsx(MenubarShortcut, { children: "\u2318X" })] }), _jsxs(MenubarItem, { children: ["Copy ", _jsx(MenubarShortcut, { children: "\u2318C" })] }), _jsxs(MenubarItem, { children: ["Paste ", _jsx(MenubarShortcut, { children: "\u2318V" })] })] })] })] })); };
+// Complete desktop-style menubar example from shadcn docs
+export var Complete = function () {
+    var _a = useState(false), showBookmarks = _a[0], setShowBookmarks = _a[1];
+    var _b = useState(true), showFullUrls = _b[0], setShowFullUrls = _b[1];
+    var _c = useState("benoit"), selectedProfile = _c[0], setSelectedProfile = _c[1];
+    return (_jsxs(Menubar, { children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarItem, { children: ["New Tab ", _jsx(MenubarShortcut, { children: "\u2318T" })] }), _jsxs(MenubarItem, { children: ["New Window ", _jsx(MenubarShortcut, { children: "\u2318N" })] }), _jsx(MenubarItem, { disabled: true, children: "New Incognito Window" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Share" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "Email link" }), _jsx(MenubarItem, { children: "Messages" }), _jsx(MenubarItem, { children: "Notes" })] })] }), _jsx(MenubarSeparator, {}), _jsxs(MenubarItem, { children: ["Print... ", _jsx(MenubarShortcut, { children: "\u2318P" })] })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Edit" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarItem, { children: ["Undo ", _jsx(MenubarShortcut, { children: "\u2318Z" })] }), _jsxs(MenubarItem, { children: ["Redo ", _jsx(MenubarShortcut, { children: "\u21E7\u2318Z" })] }), _jsx(MenubarSeparator, {}), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Find" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "Search the web" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Find..." }), _jsx(MenubarItem, { children: "Find Next" }), _jsx(MenubarItem, { children: "Find Previous" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Cut" }), _jsx(MenubarItem, { children: "Copy" }), _jsx(MenubarItem, { children: "Paste" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "View" }), _jsxs(MenubarContent, { children: [_jsx(MenubarCheckboxItem, { checked: showBookmarks, onCheckedChange: setShowBookmarks, children: "Always Show Bookmarks Bar" }), _jsx(MenubarCheckboxItem, { checked: showFullUrls, onCheckedChange: setShowFullUrls, children: "Always Show Full URLs" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarItem, { inset: true, children: ["Reload ", _jsx(MenubarShortcut, { children: "\u2318R" })] }), _jsxs(MenubarItem, { disabled: true, inset: true, children: ["Force Reload ", _jsx(MenubarShortcut, { children: "\u21E7\u2318R" })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { inset: true, children: "Toggle Fullscreen" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { inset: true, children: "Hide Sidebar" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Profiles" }), _jsxs(MenubarContent, { children: [_jsxs(MenubarRadioGroup, { value: selectedProfile, onValueChange: setSelectedProfile, children: [_jsx(MenubarRadioItem, { value: "andy", children: "Andy" }), _jsx(MenubarRadioItem, { value: "benoit", children: "Benoit" }), _jsx(MenubarRadioItem, { value: "luis", children: "Luis" })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { inset: true, children: "Edit..." }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { inset: true, children: "Add Profile..." })] })] })] }));
+};
+// Menubar with checkbox items
+export var WithCheckboxItems = function () {
+    var _a = useState(false), showBookmarks = _a[0], setShowBookmarks = _a[1];
+    var _b = useState(true), showFullUrls = _b[0], setShowFullUrls = _b[1];
+    var _c = useState(false), showDeveloperTools = _c[0], setShowDeveloperTools = _c[1];
+    return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "View" }), _jsxs(MenubarContent, { children: [_jsx(MenubarCheckboxItem, { checked: showBookmarks, onCheckedChange: setShowBookmarks, children: "Show Bookmarks Bar" }), _jsx(MenubarCheckboxItem, { checked: showFullUrls, onCheckedChange: setShowFullUrls, children: "Show Full URLs" }), _jsx(MenubarCheckboxItem, { checked: showDeveloperTools, onCheckedChange: setShowDeveloperTools, children: "Developer Tools" })] })] }) }));
+};
+// Menubar with radio group
+export var WithRadioGroup = function () {
+    var _a = useState("system"), theme = _a[0], setTheme = _a[1];
+    return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Theme" }), _jsx(MenubarContent, { children: _jsxs(MenubarRadioGroup, { value: theme, onValueChange: setTheme, children: [_jsx(MenubarRadioItem, { value: "light", children: "Light" }), _jsx(MenubarRadioItem, { value: "dark", children: "Dark" }), _jsx(MenubarRadioItem, { value: "system", children: "System" })] }) })] }) }));
+};
+// Menubar with submenu
+export var WithSubMenus = {
+    render: function () { return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsx(MenubarItem, { children: "New" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Share" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "Email link" }), _jsx(MenubarItem, { children: "Copy link" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "More..." })] })] }), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Export" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "PDF" }), _jsx(MenubarItem, { children: "HTML" }), _jsx(MenubarItem, { children: "Markdown" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Print..." })] })] }) })); },
+};
+// Menubar with disabled items
+export var WithDisabledItems = {
+    render: function () { return (_jsxs(Menubar, { children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsx(MenubarItem, { children: "New Tab" }), _jsx(MenubarItem, { children: "New Window" }), _jsx(MenubarItem, { disabled: true, children: "New Incognito Window" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Open File..." }), _jsx(MenubarItem, { disabled: true, children: "Open Recent" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Edit" }), _jsxs(MenubarContent, { children: [_jsx(MenubarItem, { disabled: true, children: "Undo" }), _jsx(MenubarItem, { disabled: true, children: "Redo" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Cut" }), _jsx(MenubarItem, { children: "Copy" }), _jsx(MenubarItem, { children: "Paste" })] })] })] })); },
+};
+// Menubar with labels and groups
+export var WithLabelsAndGroups = {
+    render: function () { return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "Edit" }), _jsxs(MenubarContent, { children: [_jsx(MenubarLabel, { children: "Actions" }), _jsxs(MenubarItem, { children: ["Undo ", _jsx(MenubarShortcut, { children: "\u2318Z" })] }), _jsxs(MenubarItem, { children: ["Redo ", _jsx(MenubarShortcut, { children: "\u21E7\u2318Z" })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarLabel, { children: "Clipboard" }), _jsxs(MenubarGroup, { children: [_jsxs(MenubarItem, { children: ["Cut ", _jsx(MenubarShortcut, { children: "\u2318X" })] }), _jsxs(MenubarItem, { children: ["Copy ", _jsx(MenubarShortcut, { children: "\u2318C" })] }), _jsxs(MenubarItem, { children: ["Paste ", _jsx(MenubarShortcut, { children: "\u2318V" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarLabel, { children: "Selection" }), _jsxs(MenubarItem, { children: ["Select All ", _jsx(MenubarShortcut, { children: "\u2318A" })] })] })] }) })); },
+};
+// Menubar with inset items (items with left padding for alignment)
+export var WithInsetItems = function () {
+    var _a = useState(true), showStatus = _a[0], setShowStatus = _a[1];
+    return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "View" }), _jsxs(MenubarContent, { children: [_jsx(MenubarCheckboxItem, { checked: showStatus, onCheckedChange: setShowStatus, children: "Show Status Bar" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarItem, { inset: true, children: ["Zoom In ", _jsx(MenubarShortcut, { children: "\u2318+" })] }), _jsxs(MenubarItem, { inset: true, children: ["Zoom Out ", _jsx(MenubarShortcut, { children: "\u2318-" })] }), _jsxs(MenubarItem, { inset: true, children: ["Reset Zoom ", _jsx(MenubarShortcut, { children: "\u23180" })] })] })] }) }));
+};
+// Nested submenus example
+export var NestedSubMenus = {
+    render: function () { return (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { children: "File" }), _jsxs(MenubarContent, { children: [_jsx(MenubarItem, { children: "New" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Open Recent" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "document.txt" }), _jsx(MenubarItem, { children: "image.png" }), _jsx(MenubarSeparator, {}), _jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "More..." }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "Last Week" }), _jsx(MenubarItem, { children: "Last Month" }), _jsx(MenubarItem, { children: "Last Year" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Clear Recent" })] })] })] })] }) })); },
+};

package/dist/src/components/NavigationMenu/index.d.ts

@@ -0,0 +1 @@
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, } from "./navigation-menu";

package/dist/src/components/NavigationMenu/index.js

@@ -0,0 +1 @@
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, } from "./navigation-menu";

package/dist/src/components/NavigationMenu/navigation-menu.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/src/components/NavigationMenu/navigation-menu.js

@@ -0,0 +1,62 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Reset_BS } from "../../utils/constants";
+function NavigationMenu(_a) {
+    var className = _a.className, children = _a.children, _b = _a.viewport, viewport = _b === void 0 ? true : _b, props = __rest(_a, ["className", "children", "viewport"]);
+    return (_jsxs(NavigationMenuPrimitive.Root, __assign({ "data-slot": "navigation-menu", "data-viewport": viewport, className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className) }, props, { children: [children, viewport && _jsx(NavigationMenuViewport, {})] })));
+}
+function NavigationMenuList(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.List, __assign({ "data-slot": "navigation-menu-list", "data-reset-list": "reset-bs-ul", "data-reset": Reset_BS, className: cn("group flex flex-1 list-none items-center justify-center gap-1", className) }, props)));
+}
+function NavigationMenuItem(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Item, __assign({ "data-slot": "navigation-menu-item", className: cn("relative", className) }, props)));
+}
+var navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1");
+function NavigationMenuTrigger(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(NavigationMenuPrimitive.Trigger, __assign({ "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className) }, props, { children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] })));
+}
+function NavigationMenuContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Content, __assign({ "data-slot": "navigation-menu-content", className: cn("data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full !p-2 pr-2.5 md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className) }, props)));
+}
+function NavigationMenuViewport(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", { className: cn("absolute top-full left-0 isolate z-50 flex justify-center"), children: _jsx(NavigationMenuPrimitive.Viewport, __assign({ "data-slot": "navigation-menu-viewport", className: cn("origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]", className) }, props)) }));
+}
+function NavigationMenuLink(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Link, __assign({ "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm !p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+}
+function NavigationMenuIndicator(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(NavigationMenuPrimitive.Indicator, __assign({ "data-slot": "navigation-menu-indicator", className: cn("data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", className) }, props, { children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" }) })));
+}
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/src/components/NavigationMenu/navigation-menu.stories.d.ts

@@ -0,0 +1,29 @@
+import { NavigationMenu } from "./navigation-menu";
+declare const _default: {
+    title: string;
+    component: typeof NavigationMenu;
+    tags: string[];
+    parameters: {
+        docs: {
+            story: {
+                height: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIcons: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithSubmenu: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const DisabledItem: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const RightAlignedContent: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/src/components/NavigationMenu/navigation-menu.stories.js

@@ -0,0 +1,91 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "./navigation-menu";
+export default {
+    title: "Components/NavigationMenu",
+    component: NavigationMenu,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            story: {
+                height: "400px",
+            },
+        },
+    },
+};
+var components = [
+    {
+        title: "Alert Dialog",
+        href: "#",
+        description: "A modal dialog that interrupts the user with important content and expects a response.",
+    },
+    {
+        title: "Hover Card",
+        href: "#",
+        description: "For sighted users to preview content available behind a link.",
+    },
+    {
+        title: "Progress",
+        href: "#",
+        description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+    },
+    {
+        title: "Scroll-area",
+        href: "#",
+        description: "Visually or semantically separates content.",
+    },
+    {
+        title: "Tabs",
+        href: "#",
+        description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+    },
+    {
+        title: "Tooltip",
+        href: "#",
+        description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+    },
+];
+function ListItem(_a) {
+    var title = _a.title, children = _a.children, href = _a.href, props = __rest(_a, ["title", "children", "href"]);
+    return (_jsx("li", __assign({}, props, { children: _jsxs(NavigationMenuLink, { href: href, className: "block p-2 rounded hover:bg-accent", children: [_jsx("div", { className: "text-sm font-medium leading-none", children: title }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-sm leading-snug", children: children })] }) })));
+}
+export var Default = {
+    render: function () { return (_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { className: "flex-wrap", children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Home" }), _jsx(NavigationMenuContent, { children: _jsxs("ul", { className: "grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]", children: [_jsx("li", { className: "row-span-3", children: _jsxs(NavigationMenuLink, { href: "#", className: "block p-4 rounded bg-accent", children: [_jsx("div", { className: "mb-2 text-lg font-medium sm:mt-4", children: "shadcn/ui" }), _jsx("p", { className: "text-muted-foreground text-sm leading-tight", children: "Beautifully designed components built with Tailwind CSS." })] }) }), _jsx(ListItem, { href: "#", title: "Introduction", children: "Re-usable components built using Radix UI and Tailwind CSS." }), _jsx(ListItem, { href: "#", title: "Installation", children: "How to install dependencies and structure your app." }), _jsx(ListItem, { href: "#", title: "Typography", children: "Styles for headings, paragraphs, lists...etc" })] }) })] }), _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Components" }), _jsx(NavigationMenuContent, { children: _jsx("ul", { className: "grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]", children: components.map(function (component) { return (_jsx(ListItem, { title: component.title, href: component.href, children: component.description }, component.title)); }) }) })] }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "#", className: navigationMenuTriggerStyle(), children: "Docs" }) })] }) })); },
+};
+// Story: With Icons
+export var WithIcons = {
+    render: function () { return (_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsxs(NavigationMenuTrigger, { children: [_jsx("span", { role: "img", "aria-label": "home", className: "mr-2", children: "\uD83C\uDFE0" }), "Home"] }), _jsx(NavigationMenuContent, { children: _jsxs("ul", { className: "p-2", children: [_jsxs(ListItem, { href: "#", title: "Dashboard", children: [_jsx("span", { role: "img", "aria-label": "dashboard", className: "mr-2", children: "\uD83D\uDCCA" }), "View your dashboard"] }), _jsxs(ListItem, { href: "#", title: "Profile", children: [_jsx("span", { role: "img", "aria-label": "profile", className: "mr-2", children: "\uD83D\uDC64" }), "Manage your profile"] })] }) })] }), _jsx(NavigationMenuItem, { children: _jsxs(NavigationMenuLink, { href: "#", className: navigationMenuTriggerStyle(), children: [_jsx("span", { role: "img", "aria-label": "docs", className: "mr-2", children: "\uD83D\uDCC4" }), "Docs"] }) })] }) })); },
+};
+// Story: With Submenu
+export var WithSubmenu = {
+    render: function () { return (_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Services" }), _jsx(NavigationMenuContent, { children: _jsxs("ul", { className: "p-2", children: [_jsx(ListItem, { href: "#", title: "Design", children: "UI/UX Design services" }), _jsx(ListItem, { href: "#", title: "Development", children: "Web Development" }), _jsxs("li", { children: [_jsx(NavigationMenuTrigger, { className: "w-full", children: "More" }), _jsx(NavigationMenuContent, { children: _jsxs("ul", { className: "p-2", children: [_jsx(ListItem, { href: "#", title: "Consulting", children: "Business Consulting" }), _jsx(ListItem, { href: "#", title: "Support", children: "Customer Support" })] }) })] })] }) })] }) }) })); },
+};
+// Story: Disabled Item
+export var DisabledItem = {
+    render: function () { return (_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Active" }), _jsx(NavigationMenuContent, { children: _jsxs("ul", { className: "p-2", children: [_jsx(ListItem, { href: "#", title: "Enabled", children: "This item is enabled" }), _jsx("li", { children: _jsx(NavigationMenuLink, { href: "#", className: "block p-2 rounded text-muted-foreground cursor-not-allowed opacity-50", "aria-disabled": "true", tabIndex: -1, children: "Disabled Item" }) })] }) })] }) }) })); },
+};
+// Story: Right Aligned Content
+export var RightAlignedContent = {
+    render: function () { return (_jsx("div", { className: "flex justify-end", children: _jsx(NavigationMenu, { viewport: false, children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Right Align" }), _jsx(NavigationMenuContent, { className: "left-auto right-0 min-w-[320px]", children: _jsxs("ul", { className: "grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]", children: [_jsx("li", { className: "row-span-3", children: _jsxs(NavigationMenuLink, { href: "#", className: "block p-4 rounded bg-accent", children: [_jsx("div", { className: "mb-2 text-lg font-medium sm:mt-4", children: "shadcn/ui" }), _jsx("p", { className: "text-muted-foreground text-sm leading-tight", children: "Beautifully designed components built with Tailwind CSS." })] }) }), _jsx(ListItem, { href: "#", title: "Introduction", children: "Re-usable components built using Radix UI and Tailwind CSS." }), _jsx(ListItem, { href: "#", title: "Installation", children: "How to install dependencies and structure your app." }), _jsx(ListItem, { href: "#", title: "Typography", children: "Styles for headings, paragraphs, lists...etc" })] }) })] }) }) }) })); },
+};

package/dist/src/components/Separator/Separator.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "../../components/Separator/separator";
+declare const meta: Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof Separator>;
+export declare function SeparatorDemo({ orientation, decorative, className, }: {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Demo: Story;
+export declare const DecorativeTrue: Story;
+export declare const DecorativeFalse: Story;

package/dist/src/components/Separator/Separator.stories.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "../../components/Separator/separator";
+var meta = {
+    title: "UI/Separator",
+    component: Separator,
+    tags: ["autodocs"],
+    argTypes: {
+        orientation: {
+            control: { type: "radio" },
+            options: ["horizontal", "vertical"],
+            description: "Separator orientation",
+            table: { type: { summary: '"horizontal" | "vertical"' } },
+        },
+        decorative: {
+            control: { type: "boolean" },
+            description: "Accessibility: purely visual separator",
+            table: { type: { summary: "boolean" } },
+        },
+        className: {
+            control: { type: "text" },
+            description: "Custom CSS classes",
+            table: { type: { summary: "string" } },
+        },
+    },
+};
+export default meta;
+export function SeparatorDemo(_a) {
+    var _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "my-4" : _d;
+    return (_jsxs("div", { children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h4", { className: "text-sm leading-none font-medium", children: "Radix Primitives" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "An open-source UI component library." })] }), _jsx("div", { className: "h-20 flex items-center", children: _jsx(Separator, { className: className, orientation: orientation, decorative: decorative }) }), _jsxs("div", { className: "flex h-5 items-center space-x-4 text-sm", children: [_jsx("div", { children: "Blog" }), _jsx(Separator, { orientation: "vertical", decorative: decorative, className: className }), _jsx("div", { children: "Docs" }), _jsx(Separator, { orientation: "vertical", decorative: decorative, className: className }), _jsx("div", { children: "Source" })] })] }));
+}
+export var Horizontal = {
+    args: {
+        orientation: "horizontal",
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return (_jsx("div", { style: { width: 300 }, children: _jsx(Separator, __assign({}, args)) })); },
+};
+export var Vertical = {
+    args: {
+        orientation: "vertical",
+        decorative: true,
+        className: "mx-4 h-20",
+    },
+    render: function (args) { return _jsx(Separator, __assign({}, args)); },
+};
+export var Demo = {
+    args: {
+        orientation: "horizontal",
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return _jsx(SeparatorDemo, __assign({}, args)); },
+};
+export var DecorativeTrue = {
+    args: {
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return (_jsxs("div", { children: [_jsx("p", { children: "Above separator " }), _jsx(Separator, __assign({}, args)), _jsx("p", { children: "Below separator" })] })); },
+};
+export var DecorativeFalse = {
+    args: {
+        decorative: false,
+        className: "my-4",
+    },
+    render: function (args) { return (_jsxs("div", { children: [_jsx("p", { children: "Above separator (decorative=false)" }), _jsx(Separator, __assign({}, args)), _jsx("p", { children: "Below separator" })] })); },
+};

package/dist/src/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export { Separator } from "./separator";

package/dist/src/components/Separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator";

package/dist/src/components/Separator/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/src/components/Separator/separator.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../lib/utils";
+var Separator = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (_jsx(SeparatorPrimitive.Root, __assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props)));
+});
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/src/components/Sheet/index.d.ts

@@ -0,0 +1 @@
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./sheet";

package/dist/src/components/Sheet/index.js

@@ -0,0 +1 @@
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./sheet";

package/dist/src/components/Sheet/sheet.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/components/Sheet/sheet.js

@@ -0,0 +1,76 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Overlay, __assign({ className: cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+var SheetContent = React.forwardRef(function (_a, ref) {
+    var _b = _a.side, side = _b === void 0 ? "right" : _b, className = _a.className, children = _a.children, props = __rest(_a, ["side", "className", "children"]);
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, __assign({ ref: ref, className: cn(sheetVariants({ side: side }), className) }, props, { children: [_jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), children] }))] }));
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+};
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+};
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Title, __assign({ ref: ref, className: cn("text-lg font-semibold text-foreground", className) }, props)));
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Description, __assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/components/Sheet/sheet.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const LeftSide: StoryObj;
+export declare const TopSide: StoryObj;
+export declare const BottomSide: StoryObj;

package/dist/src/components/Sheet/sheet.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, } from "./sheet";
+import { Button } from "../Button/Button/Button";
+var meta = {
+    title: "Components/Sheet",
+    component: Sheet,
+    tags: ["autodocs"],
+};
+export default meta;
+export var Default = {
+    render: function () { return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { children: "Open Sheet" }) }), _jsxs(SheetContent, { side: "right", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Sheet Title" }), _jsx(SheetDescription, { children: "This is a description for the sheet component. You can put any content here." })] }), _jsx("div", { className: "my-4", children: "Main sheet content goes here." }), _jsx(SheetFooter, { children: _jsx(SheetClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })); },
+};
+export var LeftSide = {
+    render: function () { return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { children: "Open Left Sheet" }) }), _jsxs(SheetContent, { side: "left", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Left Sheet" }), _jsx(SheetDescription, { children: "This sheet slides in from the left." })] }), _jsx("div", { className: "my-4", children: "You can customize the content and side." }), _jsx(SheetFooter, { children: _jsx(SheetClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })); },
+};
+export var TopSide = {
+    render: function () { return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { children: "Open Top Sheet" }) }), _jsxs(SheetContent, { side: "top", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Top Sheet" }), _jsx(SheetDescription, { children: "This sheet slides in from the top." })] }), _jsx("div", { className: "my-4", children: "Any content can go here." }), _jsx(SheetFooter, { children: _jsx(SheetClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })); },
+};
+export var BottomSide = {
+    render: function () { return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { children: "Open Bottom Sheet" }) }), _jsxs(SheetContent, { side: "bottom", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Bottom Sheet" }), _jsx(SheetDescription, { children: "This sheet slides in from the bottom." })] }), _jsx("div", { className: "my-4", children: "Flexible content for bottom sheet." }), _jsx(SheetFooter, { children: _jsx(SheetClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] })); },
+};