linkedunion-design-kit 1.11.5 → 1.11.6-beta.1

package/dist/index.d.ts

@@ -37,3 +37,6 @@ export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";

package/dist/index.js

@@ -36,3 +36,6 @@ export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
+export * from "./src/components/Sheet";
+export * from "./src/components/Separator";
+export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";

package/dist/src/components/Button/Button/Button.d.ts

@@ -15,7 +15,8 @@ export declare const variant: {
 };
 declare const buttonVariants: (props?: ({
     color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
     shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/src/components/Button/Button/Button.js

@@ -37,30 +37,39 @@ import LUIcon from "../../Icons/LUIcon";
 import { buttonStyles } from "..";
 export var variant = {
     fill: "",
-    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none",
-    outline: "border lu-bg-transparent",
+    link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none font-normal leading-normal",
+    outline: "lu-border lu-bg-transparent",
     ghost: "lu-bg-transparent border-none",
 };
-var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
     variants: {
         color: buttonStyles.fillColor,
-        size: buttonStyles.size,
+        size: __assign(__assign({}, buttonStyles.size), { none: "" }),
+        linkSize: __assign(__assign({}, buttonStyles.linkSize), { none: "" }),
         shape: buttonStyles.shape,
         variant: variant,
     },
     defaultVariants: {
         color: "blue",
         size: "md",
+        linkSize: "none",
         shape: "rounded-sm",
         variant: "fill",
     },
-    compoundVariants: __spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
+    compoundVariants: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], Object.entries(buttonStyles.linkColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
             color: color,
             variant: "link",
             class: className,
         });
+    }), true), Object.entries(buttonStyles.linkSize).map(function (_a) {
+        var sizeKey = _a[0], className = _a[1];
+        return ({
+            linkSize: sizeKey,
+            variant: "link",
+            class: className,
+        });
     }), true), Object.entries(buttonStyles.outlineColor).map(function (_a) {
         var color = _a[0], className = _a[1];
         return ({
@@ -78,7 +87,7 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
     }), true),
 });
 function Button(_a) {
-    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "fill" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, shape = _a.shape, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.asChild, asChild = _e === void 0 ? false : _e, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
     var Comp = asChild ? Slot : "button";
     // Map button size to appropriate icon sizes for start and end icons
     var getIconSizes = function () {
@@ -98,6 +107,9 @@ function Button(_a) {
     // Use the calculated sizes based on button size
     var startIconSizeValue = iconSizes.startIcon;
     var endIconSizeValue = iconSizes.endIcon;
-    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className })) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+    var sizeProps = variant === "link"
+        ? { linkSize: size === "xl" ? "lg" : size, size: "none" }
+        : { size: size !== null && size !== void 0 ? size : "md", linkSize: "none" };
+    return (_jsxs(Comp, __assign({ "data-slot": "button", "data-size": size, "data-variant": variant, "data-color": color, className: cn(buttonVariants(__assign(__assign({ variant: variant, color: color }, sizeProps), { shape: shape })), className) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
 }
 export { Button, buttonVariants };

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

@@ -391,9 +391,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -691,9 +692,10 @@ declare const meta: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
         shape?: "rounded-sm" | "rounded-full" | "rounded-none" | null | undefined;
+        linkSize?: "sm" | "md" | "lg" | "none" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;

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

@@ -43,6 +43,7 @@ export declare const buttonStyles: {
     linkSize: {
         lg: string;
         md: string;
+        sm: string;
     };
     outlineColor: {
         blue: string;

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

@@ -43,8 +43,9 @@ export var buttonStyles = {
         disabled: "text-gray-300 hover:no-underline",
     },
     linkSize: {
-        lg: "!text-base !font-normal !leading-normal",
-        md: "!text-sm !font-normal !leading-5",
+        lg: "!text-lg",
+        md: "!text-base",
+        sm: "!text-sm",
     },
     outlineColor: {
         blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { checkBoxSize, dropdownMenuSize } from ".";
+import { checkBoxSize, dropdownContentPosition, dropdownMenuSize } from ".";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -13,9 +13,13 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
 } & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: keyof typeof dropdownContentPosition;
+};
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof dropdownMenuSize;
-    align?: "start" | "center" | "end";
+    align?: keyof typeof dropdownContentPosition;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.js

@@ -27,6 +27,7 @@ import { ChevronRight, Circle } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, } from ".";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Reset_BS } from "../../../utils/constants";
 // Provide size from Content to all items
 var DropdownMenuSizeContext = React.createContext("md");
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -37,7 +38,7 @@ var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm !p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -52,7 +53,7 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 var DropdownMenuContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, props = __rest(_a, ["className", "sideOffset", "size", "align"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx(DropdownMenuPrimitive.Content, __assign({ ref: ref, sideOffset: sideOffset, align: align, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm bg-white p-2 text-gray-900 shadow-backdrop-shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", dropdownMenuSize[size], className) }, props)) }) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx(DropdownMenuPrimitive.Content, __assign({ "data-reset": Reset_BS, ref: ref, sideOffset: sideOffset, align: align, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm bg-white !p-2 text-gray-900 shadow-backdrop-shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", dropdownMenuSize[size], className) }, props)) }) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React.forwardRef(function (_a, ref) {
@@ -60,7 +61,7 @@ var DropdownMenuItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, selected = _a.selected, size = _a.size, props = __rest(_a, ["className", "inset", "selected", "size"]);
     var inheritedSize = React.useContext(DropdownMenuSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx(DropdownMenuPrimitive.Item, __assign({ ref: ref, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm outline-none transition-colors text-gray-900 hover:bg-blue-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&>svg]:shrink-0", dropdownMenuIconSize[effectiveSize], dropdownMenuSize[effectiveSize], dropDownMenuItemSize[effectiveSize], inset && "pl-8", selected && "bg-blue-50 text-blue-600", // Apply styles for selected item
+    return (_jsx(DropdownMenuPrimitive.Item, __assign({ ref: ref, "data-reset": Reset_BS, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm outline-none transition-colors text-gray-900 hover:bg-blue-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&>svg]:shrink-0", dropdownMenuIconSize[effectiveSize], dropdownMenuSize[effectiveSize], dropDownMenuItemSize[effectiveSize], inset && "pl-8", selected && "bg-blue-50 text-blue-600", // Apply styles for selected item
         className) }, props)));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -75,17 +76,17 @@ DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
 var DropdownMenuRadioItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, __assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm !py-1.5 pl-8 !pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 var DropdownMenuLabel = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, props = __rest(_a, ["className", "inset"]);
-    return (_jsx(DropdownMenuPrimitive.Label, __assign({ ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Label, __assign({ ref: ref, className: cn("!px-2 !py-1.5 text-sm font-semibold", inset && "pl-8", className) }, props)));
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 var DropdownMenuSeparator = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className) }, props)));
+    return (_jsx(DropdownMenuPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 !my-1 h-px bg-muted", className) }, props)));
 });
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = function (_a) {

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.d.ts

@@ -1,8 +1,14 @@
 import { Meta } from "@storybook/react";
 import { DropdownMenu } from "./DropdownMenu";
+import type { DropdownMenuContentProps } from "./DropdownMenu";
+type DropdownMenuStoryArgs = DropdownMenuContentProps & {
+    size?: keyof typeof dropdownMenuSize;
+    align?: "start" | "center" | "end";
+};
+import { dropdownMenuSize } from ".";
 declare const _default: Meta<typeof DropdownMenu>;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@radix-ui/react-dropdown-menu").DropdownMenuProps>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DropdownMenuStoryArgs>;
 export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
 export declare const DisabledItems: () => import("react/jsx-runtime").JSX.Element;
@@ -23,3 +29,4 @@ export declare const DropdownMenuWithSelectAllAndSearch: () => import("react/jsx
 export declare const WorkSpaceSwitcher: () => import("react/jsx-runtime").JSX.Element;
 export declare const LanguageDropdownMenu: () => import("react/jsx-runtime").JSX.Element;
 export declare const Alignments: () => import("react/jsx-runtime").JSX.Element;
+export declare const MasterDropdownMenu: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -23,7 +34,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { Button } from "../../../components/Button/Button/Button";
 import LUIcon from "../../../components/Icons/LUIcon";
 import { useState } from "react";
-import { dropdownMenuSize } from ".";
+import { dropdownContentPosition, dropdownMenuSize } from ".";
 import { IconButton } from "../../../components/Button/IconButton/IconButton";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
 import { Label } from "../../../components/Label/Label";
@@ -31,6 +42,7 @@ import { Caption } from "../../../components/Typography/Caption/caption";
 import { Input } from "../../../components/Input";
 import { SelectAllSection } from "./SelectAllSection";
 import { Avatar, AvatarFallback, AvatarImage, } from "../../../components/Avatar/Avatar/Avatar";
+import { Badge } from "../../../components/Badge/Badge";
 export default {
     title: "Components/Dropdown/DropdownMenu",
     component: DropdownMenu,
@@ -55,7 +67,7 @@ export default {
         },
         align: {
             control: { type: "select" },
-            options: ["start", "center", "end"],
+            options: Object.keys(dropdownContentPosition),
             description: "Alignment of the dropdown menu",
             table: {
                 type: { summary: "string" },
@@ -70,7 +82,8 @@ var Template = function (args) {
         { label: "Option 2" },
         { label: "Option 3" },
     ];
-    return (_jsxs(DropdownMenu, __assign({}, args, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Open Menu" }) }), _jsx(DropdownMenuContent, { children: menuItems.map(function (item, index) { return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index)); }) })] })));
+    var size = args.size, align = args.align, rest = __rest(args, ["size", "align"]);
+    return (_jsxs(DropdownMenu, __assign({}, rest, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Open Menu" }) }), _jsx(DropdownMenuContent, { size: size, align: align, children: menuItems.map(function (item, index) { return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index)); }) })] })));
 };
 export var Default = Template.bind({});
 export var Sizes = function () {
@@ -251,3 +264,35 @@ export var LanguageDropdownMenu = function () {
 export var Alignments = function () {
     return (_jsxs("div", { className: "flex flex-row space-x-4", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Start" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Center" }) }), _jsxs(DropdownMenuContent, { align: "center", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align End" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] })] }));
 };
+export var MasterDropdownMenu = function () {
+    var menuItems = [
+        { type: "item", label: "Text Label 1" },
+        { type: "item", label: "Text Label 2" },
+        { type: "submenu", label: "Text Label 3", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "submenu", label: "Text Label 4", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "item", label: "Text Label 5" },
+        { type: "badge", label: "Text Label 6", badge: "09" },
+        { type: "avatar", label: "Text Label 7" },
+        { type: "item", label: "Text Label 8" },
+        // Second column starts after 8 items
+        { type: "item", label: "Text Label 9" },
+        { type: "submenu", label: "Text Label 10", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        { type: "item", label: "Text Label 11" },
+        { type: "badge", label: "Text Label 12", badge: "09" },
+        { type: "avatar", label: "Text Label 13" },
+    ];
+    var renderMenuItem = function (item, index) {
+        var _a;
+        switch (item.type) {
+            case "submenu":
+                return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: item.label }), _jsx(DropdownMenuSubContent, { children: (_a = item.subItems) === null || _a === void 0 ? void 0 : _a.map(function (subItem, subIndex) { return (_jsx(DropdownMenuItem, { children: subItem }, subIndex)); }) })] }, index));
+            case "badge":
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [item.label, _jsx(Badge, { color: "light-blue", children: item.badge })] }) }, index));
+            case "avatar":
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), item.label] }) }, index));
+            default:
+                return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index));
+        }
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(0, 8).map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(8).map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
+};

package/dist/src/components/Dropdown/DropdownMenu/index.d.ts

@@ -18,3 +18,8 @@ export declare const checkBoxSize: {
     readonly md: "md";
     readonly lg: "lg";
 };
+export declare const dropdownContentPosition: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};

package/dist/src/components/Dropdown/DropdownMenu/index.js

@@ -19,3 +19,8 @@ export var checkBoxSize = {
     md: "md",
     lg: "lg",
 };
+export var dropdownContentPosition = {
+    start: "start",
+    center: "center",
+    end: "end",
+};

package/dist/src/components/Dropdown/select.js

@@ -25,6 +25,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../../lib/utils";
 import { selectSize, selectShape, selectType, selectColor, itemSize, } from ".";
 import LUIcon from "../Icons/LUIcon";
+import { Reset_BS } from "../../utils/constants";
 // Map select size to icon size
 var iconSizeMap = {
     lg: "md",
@@ -53,7 +54,7 @@ function SelectTrigger(_a) {
     var colorClass = isDisabled
         ? selectColor[variant]["disabled"]
         : selectColor[variant][color];
-    return (_jsxs(SelectPrimitive.Trigger, __assign({ "data-slot": "select-trigger", "data-size": size, "data-shape": shape, "data-type": variant, "data-color": isDisabled ? "disabled" : color, className: cn("data-[placeholder]:text-gray-400 w-full !px-4 !py-3 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center justify-between gap-2 !border border-gray-200 whitespace-nowrap !shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeClass, shapeClass, selectSize[size], colorClass, className), disabled: isDisabled }, props, { children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })] })));
+    return (_jsxs(SelectPrimitive.Trigger, __assign({ "data-reset": Reset_BS, "data-size": size, "data-shape": shape, "data-type": variant, "data-color": isDisabled ? "disabled" : color, className: cn("data-[placeholder]:text-gray-400 w-full !px-4 !py-3 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center justify-between gap-2 !border border-gray-200 whitespace-nowrap !shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeClass, shapeClass, selectSize[size], colorClass, className), disabled: isDisabled }, props, { children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })] })));
 }
 function SelectContent(_a) {
     var className = _a.className, children = _a.children, _b = _a.position, position = _b === void 0 ? "popper" : _b, _c = _a.hidePortal, hidePortal = _c === void 0 ? false : _c, props = __rest(_a, ["className", "children", "position", "hidePortal"]);
@@ -68,7 +69,7 @@ function SelectLabel(_a) {
 }
 function SelectItem(_a) {
     var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "size"]);
-    return (_jsx(SelectPrimitive.Item, __assign({ "data-slot": "select-item", className: cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className) }, props, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
+    return (_jsx(SelectPrimitive.Item, __assign({ "data-reset": "reset-bs-link", className: cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className) }, props, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
 }
 function SelectSeparator(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/dist/src/components/Modal/Modal.js

@@ -52,7 +52,7 @@ var DialogHeader = function (_a) {
 DialogHeader.displayName = "DialogHeader";
 var DialogBody = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("py-4 px-4", className) }, props)));
+    return (_jsx("div", __assign({ className: cn("!py-4 !px-4", className) }, props)));
 };
 DialogBody.displayName = "DialogBody";
 var DialogFooter = function (_a) {

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-px w-full" : "h-full w-px", 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,4 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, } from "../../components/Sheet/sheet";
+import { Button } from "../../components/Button/Button/Button";
+var meta = {
+    title: "Components/Sheet",
+    component: Sheet,
+    tags: ["autodocs"],
+};
+export default meta;
+var SIDES = ["top", "right", "bottom", "left"];
+export var Default = {
+    render: function () { return (_jsx("div", { className: "flex flex-wrap gap-2", children: SIDES.map(function (side) { return (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { children: side.charAt(0).toUpperCase() + side.slice(1) }) }), _jsxs(SheetContent, { side: side, children: [_jsxs(SheetHeader, { children: [_jsxs(SheetTitle, { children: [side.charAt(0).toUpperCase() + side.slice(1), " Sheet"] }), _jsxs(SheetDescription, { children: ["This sheet slides in from the ", side, "."] })] }), _jsx("div", { className: "my-4", children: "Sheet content goes here." }), _jsx(SheetFooter, { children: _jsx(SheetClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) }) })] })] }, side)); }) })); },
+};

package/dist/src/utils/iconList.d.ts

@@ -171,4 +171,5 @@ export declare const iconList: {
     exclamation: string;
     "fax-no": string;
     briefcase: string;
+    bluesky: string;
 };

package/dist/src/utils/iconList.js

@@ -171,4 +171,5 @@ export var iconList = {
     exclamation: "M18 2C18 0.89375 17.1063 0 16 0C14.8937 0 14 0.89375 14 2V22C14 23.1063 14.8937 24 16 24C17.1063 24 18 23.1063 18 22V2ZM16 32C17.3812 32 18.5 30.8813 18.5 29.5C18.5 28.1187 17.3812 27 16 27C14.6187 27 13.5 28.1187 13.5 29.5C13.5 30.8813 14.6187 32 16 32Z",
     "fax-no": "M10 5V10H14V5H23.1688L26 7.83125V10H30V7.83125C30 6.76875 29.5812 5.75 28.8312 5L26 2.16875C25.25 1.41875 24.2313 1 23.1688 1H14C11.7938 1 10 2.79375 10 5ZM2 9C0.89375 9 0 9.89375 0 11V29C0 30.1063 0.89375 31 2 31H5C6.10625 31 7 30.1063 7 29V11C7 9.89375 6.10625 9 5 9H2ZM30 13H10V29C10 30.1063 10.8937 31 12 31H30C31.1063 31 32 30.1063 32 29V15C32 13.8937 31.1063 13 30 13ZM14 19C14 18.1687 14.6687 17.5 15.5 17.5C16.3313 17.5 17 18.1687 17 19C17 19.8313 16.3313 20.5 15.5 20.5C14.6687 20.5 14 19.8313 14 19ZM14 25C14 24.1687 14.6687 23.5 15.5 23.5C16.3313 23.5 17 24.1687 17 25C17 25.8313 16.3313 26.5 15.5 26.5C14.6687 26.5 14 25.8313 14 25ZM21 17.5C21.8313 17.5 22.5 18.1687 22.5 19C22.5 19.8313 21.8313 20.5 21 20.5C20.1687 20.5 19.5 19.8313 19.5 19C19.5 18.1687 20.1687 17.5 21 17.5ZM19.5 25C19.5 24.1687 20.1687 23.5 21 23.5C21.8313 23.5 22.5 24.1687 22.5 25C22.5 25.8313 21.8313 26.5 21 26.5C20.1687 26.5 19.5 25.8313 19.5 25ZM26.5 17.5C27.3313 17.5 28 18.1687 28 19C28 19.8313 27.3313 20.5 26.5 20.5C25.6687 20.5 25 19.8313 25 19C25 18.1687 25.6687 17.5 26.5 17.5ZM25 25C25 24.1687 25.6687 23.5 26.5 23.5C27.3313 23.5 28 24.1687 28 25C28 25.8313 27.3313 26.5 26.5 26.5C25.6687 26.5 25 25.8313 25 25Z",
     briefcase: "M12.5 4H19.5C19.775 4 20 4.225 20 4.5V7H12V4.5C12 4.225 12.225 4 12.5 4ZM9 4.5V7H4C1.79375 7 0 8.79375 0 11V17H32V11C32 8.79375 30.2062 7 28 7H23V4.5C23 2.56875 21.4312 1 19.5 1H12.5C10.5688 1 9 2.56875 9 4.5ZM32 20H20V21C20 22.1063 19.1063 23 18 23H14C12.8938 23 12 22.1063 12 21V20H0V27C0 29.2062 1.79375 31 4 31H28C30.2062 31 32 29.2062 32 27V20Z",
+    bluesky: "M6.80914 3.68254C10.2783 6.26286 13.9886 11.4971 16 14.2286C18.0114 11.4971 21.7217 6.26286 25.1909 3.68254C27.7029 1.81143 31.4286 0.342857 31.4286 4.76572C31.4286 5.64914 30.8183 11.3714 30.4457 12.4686C29.2274 16.0571 25.5909 16.9257 22.3543 16.3657C28.0617 17.3486 29.7143 20.3931 26.7657 23.4377C21.1954 29.1874 17.9337 22.3086 16.6297 19.3749C16.3703 18.7909 16.2503 18.5063 16 18.5063C15.7497 18.5063 15.6297 18.7909 15.3703 19.3749C14.0663 22.3086 10.8046 29.1874 5.23428 23.4377C2.28571 20.3931 3.93828 17.3486 9.64571 16.3657C6.40914 16.9257 2.77257 16.0571 1.55428 12.4686C1.18171 11.3714 0.571428 5.64914 0.571428 4.76572C0.571428 0.342857 4.29714 1.81143 6.80914 3.68254Z",
 };

package/dist/styles/global.css

@@ -247,6 +247,12 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -379,9 +385,15 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .\!my-1 {
+    margin-block: calc(var(--spacing) * 1) !important;
+  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
@@ -883,6 +895,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .w-xs {
     width: var(--container-xs);
   }
@@ -1359,6 +1374,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1864,9 +1883,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1888,8 +1904,8 @@
   .\!pt-4 {
     padding-top: calc(var(--spacing) * 4) !important;
   }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
+  .\!pr-2 {
+    padding-right: calc(var(--spacing) * 2) !important;
   }
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
@@ -2512,6 +2528,9 @@
   .\[--cell-size\:--spacing\(6\)\] {
     --cell-size: calc(var(--spacing) * 6);
   }
+  .lu-border {
+    border: 1px solid currentColor;
+  }
   .running {
     animation-play-state: running;
   }
@@ -4512,6 +4531,12 @@
       opacity: 0%;
     }
   }
+  .data-\[state\=closed\]\:duration-300 {
+    &[data-state="closed"] {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
   .data-\[state\=closed\]\:fade-out-0 {
     &[data-state="closed"] {
       --tw-exit-opacity: calc(0/100);
@@ -4524,6 +4549,26 @@
       --tw-exit-scale: .95;
     }
   }
+  .data-\[state\=closed\]\:slide-out-to-bottom {
+    &[data-state="closed"] {
+      --tw-exit-translate-y: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-left {
+    &[data-state="closed"] {
+      --tw-exit-translate-x: -100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-right {
+    &[data-state="closed"] {
+      --tw-exit-translate-x: 100%;
+    }
+  }
+  .data-\[state\=closed\]\:slide-out-to-top {
+    &[data-state="closed"] {
+      --tw-exit-translate-y: -100%;
+    }
+  }
   .data-\[state\=inactive\]\:bg-blue-100 {
     &[data-state="inactive"] {
       background-color: #e2edf9;
@@ -4557,6 +4602,11 @@
       background-color: var(--accent);
     }
   }
+  .data-\[state\=open\]\:bg-secondary {
+    &[data-state="open"] {
+      background-color: var(--secondary);
+    }
+  }
   .data-\[state\=open\]\:text-muted-foreground {
     &[data-state="open"] {
       color: var(--muted-foreground);
@@ -4567,6 +4617,12 @@
       opacity: 100%;
     }
   }
+  .data-\[state\=open\]\:duration-500 {
+    &[data-state="open"] {
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+    }
+  }
   .data-\[state\=open\]\:fade-in-0 {
     &[data-state="open"] {
       --tw-enter-opacity: calc(0/100);
@@ -4579,6 +4635,26 @@
       --tw-enter-scale: .95;
     }
   }
+  .data-\[state\=open\]\:slide-in-from-bottom {
+    &[data-state="open"] {
+      --tw-enter-translate-y: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-left {
+    &[data-state="open"] {
+      --tw-enter-translate-x: -100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-right {
+    &[data-state="open"] {
+      --tw-enter-translate-x: 100%;
+    }
+  }
+  .data-\[state\=open\]\:slide-in-from-top {
+    &[data-state="open"] {
+      --tw-enter-translate-y: -100%;
+    }
+  }
   .data-\[state\=selected\]\:bg-gray-50 {
     &[data-state="selected"] {
       background-color: #fafafa;
@@ -4666,6 +4742,11 @@
       max-width: var(--container-lg);
     }
   }
+  .sm\:max-w-sm {
+    @media (width >= 40rem) {
+      max-width: var(--container-sm);
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -4701,6 +4782,15 @@
       gap: calc(var(--spacing) * 2);
     }
   }
+  .sm\:space-x-2 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
   .sm\:p-2 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 2);
@@ -4780,6 +4870,11 @@
       gap: calc(var(--spacing) * 4);
     }
   }
+  .md\:pl-2 {
+    @media (width >= 48rem) {
+      padding-left: calc(var(--spacing) * 2);
+    }
+  }
   .md\:\!text-sm {
     @media (width >= 48rem) {
       font-size: var(--text-sm) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.11.5",
+  "version": "1.11.6-beta.1",
   "private": false,
   "files": [
     "dist",
@@ -50,6 +50,7 @@
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.4",