linkedunion-design-kit 1.11.9 → 1.11.11

package/dist/index.d.ts

@@ -40,3 +40,4 @@ 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";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";

package/dist/index.js

@@ -39,3 +39,4 @@ 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";
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";

package/dist/src/components/Alerts/Alert/alert.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, colorOptions, sizeOptions, shadowOptions, variantOptions, getIconForColor, getContentForColor, } from "../AlertDialog/index";
+import { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./alert";
+import { colorOptions, sizeOptions, shadowOptions, variantOptions, getIconForColor, getContentForColor, } from "../AlertDialog/index";
 import LUIcon from "../../Icons/LUIcon";
 import { Button } from "../../Button/Button/Button";
 import { Heading } from "../../Typography/Heading/heading";

package/dist/src/components/Alerts/AlertDialog/index.d.ts

@@ -1,5 +1,4 @@
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, alertDialogVariants, } from "./alert-dialog";
-export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "../Alert/alert";
 import { alertDialogVariants } from "./alert-dialog";
 export declare const colorOptions: Array<keyof typeof alertDialogVariants.color>;
 export declare const sizeOptions: Array<keyof typeof alertDialogVariants.size>;

package/dist/src/components/Alerts/AlertDialog/index.js

@@ -1,7 +1,5 @@
 // Export the main AlertDialog components
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, alertDialogVariants, } from "./alert-dialog";
-// Export the Alert components (non-modal version)
-export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "../Alert/alert";
 // Utility imports
 import { alertDialogVariants } from "./alert-dialog";
 // Extract options dynamically from the component with proper typing

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

@@ -18,7 +18,7 @@ export var buttonStyles = {
     },
     size: {
         xl: "h-13 !py-3.5 !px-6 !text-base !font-normal !leading-normal",
-        lg: "h-12 !py-3 !px-5 !text-base !font-normal !leading-normal",
+        lg: "h-12 !py-3 !px-5 !text-base font-normal !leading-normal",
         md: "h-10 !py-2.5 !px-5 !text-sm !font-normal !leading-5",
         sm: "h-9 !py-2 !px-3 !text-sm !font-normal !leading-5",
     },

package/dist/src/components/DatePicker/DatePicker.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format } from "date-fns";
 import { cn } from "../../lib/utils";
 import { Calendar } from "../ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
 import LUIcon from "../Icons/LUIcon";
 import { getIconSize, getPadding, getIconPosition } from "../Input";
 import { inputVariantConfig, inputVariants } from "../Input/input";

package/dist/src/components/DateRangePicker/DateRangePicker.js

@@ -34,7 +34,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { format, startOfDay } from "date-fns";
 import { cn } from "../../lib/utils";
 import { Calendar } from "../ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
 import LUIcon from "../Icons/LUIcon";
 import { getIconSize, getPadding, getIconPosition } from "../Input";
 import { inputVariantConfig, inputVariants } from "../Input/input";

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

@@ -14,7 +14,7 @@ import { cn } from "../../../lib/utils";
 import { Badge } from "../../../components/Badge/Badge";
 import { renderBadge } from "./utils/renderBadge";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger, } from "../../../components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../../components/Popover/popover";
 import { Button } from "../../../components/Button/Button/Button";
 import LUIcon from "../../../components/Icons/LUIcon";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
@@ -32,7 +32,19 @@ var Combobox = function (props) {
     var _l = useState([]), multiValue = _l[0], setMultiValue = _l[1];
     var buttonRef = useRef(null);
     var _m = useState(), popoverWidth = _m[0], setPopoverWidth = _m[1];
-    var maxVisibleBadges = useResponsiveBadges();
+    var selectedOptions = useMemo(function () {
+        if (!isMulti || !options || !multiValue.length)
+            return [];
+        return options.filter(function (option) {
+            return typeof option === "string"
+                ? multiValue.includes(option)
+                : multiValue.includes(option.value);
+        });
+    }, [isMulti, options, multiValue]);
+    var selectedLabels = useMemo(function () {
+        return selectedOptions.map(function (opt) { return (typeof opt === "string" ? opt : opt.key); });
+    }, [selectedOptions]);
+    var maxVisibleBadges = useResponsiveBadges(buttonRef, selectedLabels);
     useEffect(function () {
         if (isMulti && Array.isArray(defaultValue)) {
             setMultiValue(defaultValue);
@@ -74,47 +86,36 @@ var Combobox = function (props) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValues);
     };
     var getDisplay = useMemo(function () {
-        var handleRemove = function (value) {
-            if (isMulti) {
-                var newValues = multiValue.filter(function (val) { return val !== value; });
-                setMultiValue(newValues);
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValues);
-            }
-            else {
-                setSingleValue("");
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect("");
-            }
-        };
         if (!options)
             return placeholder;
         if (isMulti) {
-            if (!multiValue.length)
+            var handleRemove_1 = function (value) {
+                var newValues = multiValue.filter(function (val) { return val !== value; });
+                setMultiValue(newValues);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValues);
+            };
+            if (!selectedOptions.length)
                 return placeholder;
-            var selectedOptions = options.filter(function (option) {
-                return typeof option === "string"
-                    ? multiValue.includes(option)
-                    : multiValue.includes(option.value);
-            });
             if (selectedOptions.length <= maxVisibleBadges) {
-                return (_jsx("div", { className: "flex flex-wrap gap-1", children: selectedOptions.map(function (option) {
+                return (_jsx("div", { className: "flex flex-nowrap gap-1 overflow-hidden", children: selectedOptions.map(function (option) {
                         return renderBadge(typeof option === "string"
                             ? { key: option, value: option }
-                            : option, handleRemove);
+                            : option, handleRemove_1);
                     }) }));
             }
             var remainingCount = selectedOptions.length - maxVisibleBadges;
             var remainingOptions = selectedOptions.slice(maxVisibleBadges);
-            return (_jsxs("div", { className: "flex flex-wrap gap-1", children: [selectedOptions
+            return (_jsxs("div", { className: "flex flex-nowrap gap-1 overflow-hidden", children: [selectedOptions
                         .slice(0, maxVisibleBadges)
                         .map(function (option) {
                         return renderBadge(typeof option === "string"
                             ? { key: option, value: option }
-                            : option, handleRemove);
+                            : option, handleRemove_1);
                     }), _jsx(Tooltip, { title: remainingOptions
                             .map(function (option) {
                             return typeof option === "string" ? option : option.key;
                         })
-                            .join(", "), children: _jsxs(Badge, { color: "light-blue", className: "cursor-help", children: ["+", remainingCount] }) })] }));
+                            .join(", "), children: _jsxs(Badge, { color: "light-blue", children: ["+", remainingCount] }) })] }));
         }
         else {
             if (!singleValue)
@@ -126,7 +127,9 @@ var Combobox = function (props) {
             };
             var found = options.find(isMatch);
             return found
-                ? renderBadge(typeof found === "string" ? { key: found, value: found } : found, handleRemove)
+                ? typeof found === "string"
+                    ? found
+                    : found.key
                 : placeholder;
         }
     }, [
@@ -135,16 +138,17 @@ var Combobox = function (props) {
         isMulti,
         multiValue,
         singleValue,
+        selectedOptions,
         maxVisibleBadges,
         onSelect,
         setMultiValue,
         setSingleValue,
     ]);
     var normalizedOptions = useMemo(function () { return (Array.isArray(options) ? options : []); }, [options]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: buttonRef, variant: "outline", role: "combobox", color: "light-gray", "aria-expanded": open, className: cn("w-full justify-between !py-3 !px-4 font-normal !leading-normal hover:!bg-transparent active:!bg-transparent", comboboxSizes[size], comboboxSelectType[variant], comboboxColor[variant][color], open && comboboxColor[variant]["blue"], disabled && [
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: buttonRef, role: "combobox", "aria-expanded": open, className: cn("w-full justify-between border py-3! px-4! font-normal leading-normal! hover:bg-transparent active:bg-transparent text-gray-900!", comboboxSizes[size], comboboxSelectType[variant], comboboxColor[variant][color], open && comboboxColor[variant]["blue"], disabled && [
                         variant === "fill" && "bg-gray-100",
                         "border border-gray-300 cursor-not-allowed pointer-events-none",
-                    ], "min-h-[42px]"), shape: comboboxShapes[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: [_jsx("div", { className: "flex-grow flex items-center", children: getDisplay }), _jsx(LUIcon, { icon: "angle-down", size: iconSizeMap[size], color: "light-gray" })] }) }), _jsx(PopoverContent, { className: "p-0", style: popoverWidth ? { width: popoverWidth } : {}, children: _jsxs(Command, { children: [isSearch && (_jsx(CommandInput, { placeholder: "Search", className: comboboxSizes[size] })), isMulti && normalizedOptions.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 !px-4 !py-3 rounded-sm bg-gray-50 text-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "select-all", checked: multiValue.length === normalizedOptions.length, onCheckedChange: handleSelectAll, size: size }), _jsx(Label, { variant: getLabelVariant(size), children: "Select All" })] }), _jsxs(Caption, { variant: "sm", className: "text-gray-500", children: ["Selected (", multiValue.length, ")"] })] })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: empty_message }), _jsx(CommandGroup, { children: normalizedOptions.map(function (option) {
+                    ], "min-h-[42px]"), shape: comboboxShapes[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: [_jsx("div", { className: "flex min-w-0 grow items-center overflow-hidden", children: getDisplay }), _jsx(LUIcon, { icon: "angle-down", size: iconSizeMap[size], color: "light-gray", className: "shrink-0" })] }) }), _jsx(PopoverContent, { className: "p-0", style: popoverWidth ? { width: popoverWidth } : {}, children: _jsxs(Command, { children: [isSearch && (_jsx(CommandInput, { placeholder: "Search", className: comboboxSizes[size] })), isMulti && normalizedOptions.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 px-4! py-3! rounded-sm bg-gray-50 text-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "select-all", checked: multiValue.length === normalizedOptions.length, onCheckedChange: handleSelectAll, size: size }), _jsx(Label, { variant: getLabelVariant(size), children: "Select All" })] }), _jsxs(Caption, { variant: "sm", className: "text-gray-500", children: ["Selected (", multiValue.length, ")"] })] })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: empty_message }), _jsx(CommandGroup, { children: normalizedOptions.map(function (option) {
                                         var normalizedOption = typeof option === "string"
                                             ? { key: option, value: option }
                                             : option;

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

@@ -10,4 +10,5 @@ export declare const ComboboxWithCheckbox: () => import("react/jsx-runtime").JSX
 export declare const ComboboxWithUserIcon: () => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxWithDefaultValue: () => import("react/jsx-runtime").JSX.Element;
 export declare const ListOfArray: () => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxValidation: () => import("react/jsx-runtime").JSX.Element;

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

@@ -29,6 +29,26 @@ import { Caption } from "../../../components/Typography/Caption/caption";
 import { Button } from "../../../components/Button/Button/Button";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
 import { Badge } from "../../../components/Badge/Badge";
+import { Avatar, AvatarFallback } from "../../../components/Avatar/Avatar/Avatar";
+var keyValueOptions = [
+    { key: "next.js", value: "Next.js" },
+    { key: "sveltekit", value: "SvelteKit" },
+    { key: "nest.js", value: "Nest.js" },
+    { key: "remix", value: "Remix" },
+    { key: "astro", value: "Astro" },
+    { key: "react", value: "React" },
+    { key: "nest", value: "Nest" },
+    { key: "python", value: "Python" },
+    { key: "ai", value: "AI" },
+];
+var stringOptions = ["React", "Vue", "Angular", "Nest", "Next"];
+var iconOptions = [
+    { key: "next.js", value: "Next.js", icon: "plus" },
+    { key: "sveltekit", value: "SvelteKit", icon: "star" },
+    { key: "nest.js", value: "Nest.js", icon: "check" },
+    { key: "remix", value: "Remix", icon: "minus" },
+    { key: "astro", value: "Astro", icon: "plus" },
+];
 export default {
     title: "Components/Dropdown/Combobox",
     component: Combobox,
@@ -139,52 +159,23 @@ Default.args = {
     size: "md",
     placeholder: "Select Options",
     shape: "rectangular",
-    options: [
-        { key: "next.js", value: "Next.js" },
-        { key: "sveltekit", value: "SvelteKit" },
-        { key: "nest.js", value: "Nest.js" },
-        { key: "remix", value: "Remix" },
-        { key: "astro", value: "Astro" },
-        { key: "react", value: "React" },
-        { key: "nest", value: "Nest" },
-        { key: "python", value: "Python" },
-        { key: "ai", value: "AI" },
-    ],
+    options: keyValueOptions,
     isSearch: true,
     isMulti: true,
     renderOption: function (option) { return (_jsxs(_Fragment, { children: [option.icon && _jsx(LUIcon, { icon: option.icon, size: "md" }), _jsx("span", { children: option.key })] })); },
     onSelect: function (value) { return console.log(value); },
 };
-export var Basic = function () { return (_jsx(Combobox, { options: [
-        { key: "React", value: "react" },
-        { key: "Vue", value: "vue" },
-    ], onSelect: function (value) { return console.log(value); } })); };
-export var ComboboxSize = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Combobox, { size: "sm", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "md", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "lg", options: [
-                { key: "React", value: "react" },
-                { key: "Vue", value: "vue" },
-            ], onSelect: function (value) { return console.log(value); } })] })); };
-export var ComboboxType = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Text" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return _jsx("span", { children: option.value }); } }), _jsx(Label, { variant: "label-sm", children: "Text With Right Icon" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(LUIcon, { icon: "plus" })] })); } }), _jsx(Label, { variant: "label-sm", children: "Text With Left Icon" }), _jsx(Combobox, { isMulti: true, options: [
-                { key: "next.js", value: "Next.js", icon: "plus" },
-                { key: "sveltekit", value: "SvelteKit", icon: "star" },
-                { key: "nest.js", value: "Nest.js", icon: "check" },
-                { key: "remix", value: "Remix", icon: "minus" },
-                { key: "astro", value: "Astro", icon: "plus" },
-            ], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: option.icon }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Badge" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsx(Badge, { startIcon: "star", color: "light-blue", children: option.value })); } }), _jsx(Label, { variant: "label-sm", children: "Text+Counter" }), _jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(Badge, { color: "light-blue", children: +3 })] })); } })] })); };
+export var Basic = function () { return (_jsx(Combobox, { options: keyValueOptions.slice(0, 2), onSelect: function (value) { return console.log(value); } })); };
+export var ComboboxSize = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Combobox, { size: "sm", options: keyValueOptions.slice(0, 2), onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "md", options: keyValueOptions.slice(0, 2), onSelect: function (value) { return console.log(value); } }), _jsx(Combobox, { size: "lg", options: keyValueOptions.slice(0, 2), onSelect: function (value) { return console.log(value); } })] })); };
+export var ComboboxType = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Text" }), _jsx(Combobox, { isMulti: true, options: stringOptions.slice(0, 3), renderOption: function (option) { return _jsx("span", { children: option.value }); } }), _jsx(Label, { variant: "label-sm", children: "Text With Right Icon" }), _jsx(Combobox, { isMulti: true, options: stringOptions.slice(0, 3), renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(LUIcon, { icon: "plus" })] })); } }), _jsx(Label, { variant: "label-sm", children: "Text With Left Icon" }), _jsx(Combobox, { isMulti: true, options: iconOptions, renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: option.icon }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Badge" }), _jsx(Combobox, { isMulti: true, options: stringOptions.slice(0, 3), renderOption: function (option) { return (_jsx(Badge, { startIcon: "star", color: "light-blue", children: option.value })); } }), _jsx(Label, { variant: "label-sm", children: "Text+Counter" }), _jsx(Combobox, { isMulti: true, options: stringOptions.slice(0, 3), renderOption: function (option) { return (_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: option.value }), _jsx(Badge, { color: "light-blue", children: +3 })] })); } })] })); };
 export var ComboboxWithCheckbox = function () {
     var _a = useState([]), selected = _a[0], setSelected = _a[1];
-    var options = ["React", "Vue", "Angular"];
     var onCheckChange = function (value) {
         setSelected(function (prev) {
             return prev.includes(value) ? prev.filter(function (v) { return v !== value; }) : __spreadArray(__spreadArray([], prev, true), [value], false);
         });
     };
-    return (_jsx(Combobox, { isMulti: true, options: options, onSelect: function (value) {
+    return (_jsx(Combobox, { isMulti: true, options: stringOptions.slice(0, 3), onSelect: function (value) {
             if (Array.isArray(value)) {
                 setSelected(value);
             }
@@ -192,9 +183,10 @@ export var ComboboxWithCheckbox = function () {
                         onCheckChange(option.value);
                     } }), _jsx("span", { children: option.value })] })); } }));
 };
-export var ComboboxWithUserIcon = function () { return (_jsx(Combobox, { isMulti: true, options: ["React", "Vue", "Angular", "Nest", "Next"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "user", variant: "padded" }), _jsx("span", { children: option.value })] })); } })); };
-export var ComboboxWithDefaultValue = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Multiple Default Values in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: ["React", "Vue"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: ["React"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Single Select" }), _jsx(Combobox, { isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], defaultValue: "React", renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } })] })); };
+export var ComboboxWithUserIcon = function () { return (_jsx(Combobox, { isMulti: true, options: stringOptions, renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(Avatar, { size: "xs", children: _jsx(AvatarFallback, { children: option.value.charAt(0) }) }), _jsx("span", { children: option.value })] })); } })); };
+export var ComboboxWithDefaultValue = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx(Label, { variant: "label-sm", children: "Multiple Default Values in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: stringOptions, defaultValue: ["React", "Vue"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Multiple Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, options: stringOptions, defaultValue: ["React"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } }), _jsx(Label, { variant: "label-sm", children: "Single Default Value in Single Select" }), _jsx(Combobox, { isSearch: true, options: stringOptions, defaultValue: "React", renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } })] })); };
 export var ListOfArray = function () { return (_jsx(Combobox, { isMulti: true, isSearch: true, options: ["React", "Vue", "Angular", "Nest", "Next"], renderOption: function (option) { return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx(LUIcon, { icon: "plus" }), _jsx("span", { children: option.value })] })); } })); };
+export var MultiSelect = function () { return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", className: "mb-2", children: "Multi Select" }), _jsx(Combobox, { isMulti: true, isSearch: true, placeholder: "Select frameworks...", options: keyValueOptions, onSelect: function (value) { return console.log("Multi:", value); } })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", className: "mb-2", children: "Single Select" }), _jsx(Combobox, { isSearch: true, placeholder: "Select a framework...", options: keyValueOptions, onSelect: function (value) { return console.log("Single:", value); } })] })] })); };
 export var ComboboxValidation = function () {
     var _a = useState(""), selected = _a[0], setSelected = _a[1];
     var _b = useState(false), error = _b[0], setError = _b[1];
@@ -215,11 +207,5 @@ export var ComboboxValidation = function () {
             setError(false);
         }
     };
-    return (_jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-sm", children: "Select Category" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "Select Option", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) })] }), _jsxs("div", { children: [_jsx(Combobox, { placeholder: "Select framework...", size: "md", options: [
-                            { key: "next.js", value: "Next.js" },
-                            { key: "sveltekit", value: "SvelteKit" },
-                            { key: "nest.js", value: "Nest.js" },
-                            { key: "remix", value: "Remix" },
-                            { key: "astro", value: "Astro" },
-                        ], isSearch: true, onSelect: handleSelect, color: error ? "red" : "default", renderOption: function (option) { return _jsx("span", { children: option.value }); } }), error && (_jsx(Caption, { variant: "md", className: "mt-1 text-red-600", children: "field is required" }))] }), _jsx(Button, { type: "submit", children: "Submit" })] }));
+    return (_jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-sm", children: "Select Category" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "Select Option", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) })] }), _jsxs("div", { children: [_jsx(Combobox, { placeholder: "Select framework...", size: "md", options: keyValueOptions.slice(0, 5), isSearch: true, onSelect: handleSelect, color: error ? "red" : "default", renderOption: function (option) { return _jsx("span", { children: option.value }); } }), error && (_jsx(Caption, { variant: "md", className: "mt-1 text-red-600", children: "field is required" }))] }), _jsx(Button, { type: "submit", children: "Submit" })] }));
 };

package/dist/src/components/Dropdown/Combobox/utils/useResponsiveBadge.d.ts

@@ -1 +1,2 @@
-export declare const useResponsiveBadges: () => number;
+import { RefObject } from "react";
+export declare const useResponsiveBadges: (containerRef: RefObject<HTMLElement | null>, labels: string[]) => number;

package/dist/src/components/Dropdown/Combobox/utils/useResponsiveBadge.js

@@ -1,14 +1,81 @@
-import { useEffect, useState } from "react";
-export var useResponsiveBadges = function () {
-    var _a = useState(3), maxVisibleBadges = _a[0], setMaxVisibleBadges = _a[1];
-    useEffect(function () {
-        var handleResize = function () {
-            var width = window.innerWidth;
-            setMaxVisibleBadges(width < 480 ? 1 : width < 640 ? 2 : width < 768 ? 3 : 4);
+import { useEffect, useLayoutEffect, useState } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export var useResponsiveBadges = function (containerRef, labels) {
+    var _a = useState(1), maxVisible = _a[0], setMaxVisible = _a[1];
+    useIsomorphicLayoutEffect(function () {
+        var container = containerRef.current;
+        if (!container || labels.length === 0) {
+            setMaxVisible(labels.length || 1);
+            return;
+        }
+        var calculate = function () {
+            var _a;
+            var containerStyle = getComputedStyle(container);
+            var containerPadding = (parseFloat(containerStyle.paddingLeft) || 0) +
+                (parseFloat(containerStyle.paddingRight) || 0);
+            // Measure chevron icon from DOM (last child of button)
+            var chevronEl = container.querySelector(".shrink-0");
+            var chevronWidth = (_a = chevronEl === null || chevronEl === void 0 ? void 0 : chevronEl.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+            // Read button's flex gap from computed style
+            var containerGap = parseFloat(containerStyle.gap) || 8;
+            var availableWidth = container.offsetWidth - containerPadding - chevronWidth - containerGap;
+            // Read badge gap from the flex container inside button
+            var badgeContainer = container.querySelector(".flex.flex-nowrap");
+            var badgeGap = badgeContainer
+                ? parseFloat(getComputedStyle(badgeContainer).gap) || 0
+                : 0;
+            // Measure text widths using canvas with actual font
+            var canvas = document.createElement("canvas");
+            var ctx = canvas.getContext("2d");
+            if (!ctx)
+                return;
+            ctx.font = containerStyle.font;
+            // Measure badge chrome (padding + close icon) from a rendered badge
+            var badgeChrome = 0;
+            var renderedBadge = container.querySelector('[data-slot="badge"]');
+            if (renderedBadge) {
+                var badgeText = renderedBadge.textContent || "";
+                var textWidth = ctx.measureText(badgeText.trim()).width;
+                badgeChrome = renderedBadge.offsetWidth - textWidth;
+            }
+            else {
+                // Fallback: derive from font size (covers padding + close icon + gaps)
+                var fontSize = parseFloat(containerStyle.fontSize) || 14;
+                badgeChrome = fontSize * 3;
+            }
+            // Measure counter badge width dynamically
+            var counterText = "+".concat(labels.length);
+            var counterWidth = Math.ceil(ctx.measureText(counterText).width) + badgeChrome;
+            var used = 0;
+            var count = 0;
+            for (var i = 0; i < labels.length; i++) {
+                var textWidth = Math.ceil(ctx.measureText(labels[i]).width);
+                var badgeWidth = textWidth + badgeChrome;
+                var gapWidth = i > 0 ? badgeGap : 0;
+                var remaining = labels.length - i - 1;
+                var counterSpace = remaining > 0 ? counterWidth + badgeGap : 0;
+                if (used + gapWidth + badgeWidth + counterSpace <= availableWidth) {
+                    used += gapWidth + badgeWidth;
+                    count++;
+                }
+                else {
+                    break;
+                }
+            }
+            setMaxVisible(Math.max(1, count));
         };
-        handleResize();
-        window.addEventListener("resize", handleResize);
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, []);
-    return maxVisibleBadges;
+        calculate();
+        var rafId;
+        var debouncedCalculate = function () {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(calculate);
+        };
+        var observer = new ResizeObserver(debouncedCalculate);
+        observer.observe(container);
+        return function () {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+        };
+    }, [containerRef, labels]);
+    return maxVisible;
 };

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover } from "./popover";
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+interface InteractiveArgs {
+    align: "start" | "center" | "end";
+    side: "top" | "right" | "bottom" | "left";
+    sideOffset: number;
+    triggerLabel: string;
+    title: string;
+    description: string;
+}
+/**
+ * Interactive playground to test different popover configurations.
+ * Use the Controls panel to customize alignment, side, offset, and content.
+ */
+export declare const Interactive: StoryObj<InteractiveArgs>;
+/**
+ * Default demo popover with a dimension settings form.
+ * Matches the standard shadcn/ui popover demo pattern with labeled input fields.
+ */
+export declare const Default: Story;
+/**
+ * Basic popover with a title and description.
+ * Demonstrates the simplest content structure.
+ */
+export declare const Basic: Story;
+/**
+ * Demonstrates the three horizontal alignment options for popover content:
+ * start, center, and end. Each aligns the popover differently relative
+ * to the trigger element.
+ */
+export declare const Alignment: Story;
+/**
+ * Popover containing a form with grouped input fields.
+ * Demonstrates the common pattern of inline editing within a popover.
+ */
+export declare const Form: Story;
+/**
+ * Demonstrates RTL (right-to-left) support for languages like Arabic and Hebrew.
+ * Uses the dir prop and side positioning for correct RTL layout.
+ */
+export declare const RTLSupport: Story;
+/**
+ * Demonstrates all four side positions for the popover:
+ * top, right, bottom, and left.
+ */
+export declare const SidePositions: Story;
+/**
+ * Demonstrates using PopoverAnchor to position the popover relative
+ * to a different element than the trigger.
+ */
+export declare const WithAnchor: Story;
+/**
+ * Notification popover showing a list of recent notifications.
+ */
+export declare const NotificationList: Story;
+/**
+ * User profile popover showing account details and actions.
+ */
+export declare const UserProfileCard: Story;
+/**
+ * Popover with a large amount of text content to test overflow and scrolling behavior.
+ */
+export declare const LongContent: Story;
+/**
+ * Popover with minimal content to verify it renders correctly with little data.
+ */
+export declare const MinimalContent: Story;
+/**
+ * Popover in a default open state, useful for testing and documentation screenshots.
+ */
+export declare const DefaultOpen: Story;

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

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./popover";
+import { Button } from "../Button/Button/Button";
+import { Input } from "../Input/input";
+import { Label } from "../Label/Label";
+import { Heading } from "../Typography/Heading/heading";
+import { Body } from "../Typography/Body/body";
+// Reusable className constants for PopoverContent styling
+var POPOVER_BASE_CLASSES = "rounded-md border bg-white shadow-md";
+var POPOVER_WIDE = "w-80 ".concat(POPOVER_BASE_CLASSES, " p-4"); // 320px width
+var POPOVER_MEDIUM = "w-64 ".concat(POPOVER_BASE_CLASSES, " p-4"); // 256px width
+var POPOVER_NARROW = "w-48 ".concat(POPOVER_BASE_CLASSES, " p-3"); // 192px width
+var POPOVER_LARGE = "w-72 ".concat(POPOVER_BASE_CLASSES, " p-4"); // 288px width
+var POPOVER_WIDE_NO_PADDING = "w-80 ".concat(POPOVER_BASE_CLASSES, " p-0");
+var POPOVER_WIDE_SCROLLABLE = "w-80 max-h-64 overflow-y-auto ".concat(POPOVER_BASE_CLASSES, " p-4");
+var POPOVER_MINIMAL = "".concat(POPOVER_BASE_CLASSES, " px-3 py-2");
+var meta = {
+    title: "Components/Popover",
+    component: Popover,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A floating panel that appears when a trigger element is clicked. Built on Radix UI Popover primitives with animated enter/exit transitions.",
+            },
+        },
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "flex items-center justify-center min-h-[300px]", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+/**
+ * Interactive playground to test different popover configurations.
+ * Use the Controls panel to customize alignment, side, offset, and content.
+ */
+export var Interactive = {
+    args: {
+        align: "center",
+        side: "bottom",
+        sideOffset: 4,
+        triggerLabel: "Open Popover",
+        title: "Popover Title",
+        description: "This is a popover with customizable placement and content.",
+    },
+    argTypes: {
+        align: {
+            control: "select",
+            options: ["start", "center", "end"],
+            description: "Horizontal alignment relative to the trigger",
+        },
+        side: {
+            control: "select",
+            options: ["top", "right", "bottom", "left"],
+            description: "Which side of the trigger the popover appears on",
+        },
+        sideOffset: {
+            control: { type: "number", min: 0, max: 24 },
+            description: "Distance in pixels between the trigger and the popover",
+        },
+        triggerLabel: {
+            control: "text",
+            description: "Text for the trigger button",
+        },
+        title: {
+            control: "text",
+            description: "The popover title text",
+        },
+        description: {
+            control: "text",
+            description: "The popover description text",
+        },
+    },
+    render: function (args) { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: args.triggerLabel }) }), _jsx(PopoverContent, { align: args.align, side: args.side, sideOffset: args.sideOffset, className: POPOVER_WIDE, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: args.title }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: args.description })] }) })] })); },
+};
+// ============================================================================
+// DEMO (DEFAULT) - Dimension form matching shadcn reference
+// ============================================================================
+/**
+ * Default demo popover with a dimension settings form.
+ * Matches the standard shadcn/ui popover demo pattern with labeled input fields.
+ */
+export var Default = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Popover" }) }), _jsx(PopoverContent, { className: POPOVER_WIDE, children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Dimensions" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "Set the dimensions for the layer." })] }), _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Width" }), _jsx(Input, { defaultValue: "100%", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Max Width" }), _jsx(Input, { defaultValue: "300px", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Height" }), _jsx(Input, { defaultValue: "25px", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Max Height" }), _jsx(Input, { defaultValue: "none", className: "col-span-2 h-8" })] })] })] }) })] })); },
+};
+// ============================================================================
+// BASIC - Simple popover with title and description
+// ============================================================================
+/**
+ * Basic popover with a title and description.
+ * Demonstrates the simplest content structure.
+ */
+export var Basic = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open Popover" }) }), _jsx(PopoverContent, { className: POPOVER_WIDE, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Popover Title" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "This is a basic popover with a title and description. Use it to display additional context or information." })] }) })] })); },
+};
+// ============================================================================
+// ALIGNMENT - All three alignment variants shown together
+// ============================================================================
+/**
+ * Demonstrates the three horizontal alignment options for popover content:
+ * start, center, and end. Each aligns the popover differently relative
+ * to the trigger element.
+ */
+export var Alignment = {
+    render: function () { return (_jsxs("div", { className: "flex items-end gap-8", children: [_jsx("div", { className: "flex flex-col items-center gap-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Align Start" }) }), _jsx(PopoverContent, { align: "start", className: POPOVER_MEDIUM, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Start Aligned" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "The popover content is aligned to the start edge of the trigger." })] }) })] }) }), _jsx("div", { className: "flex flex-col items-center gap-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Align Center" }) }), _jsx(PopoverContent, { align: "center", className: POPOVER_MEDIUM, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Center Aligned" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "The popover content is centered relative to the trigger." })] }) })] }) }), _jsx("div", { className: "flex flex-col items-center gap-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Align End" }) }), _jsx(PopoverContent, { align: "end", className: POPOVER_MEDIUM, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "End Aligned" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "The popover content is aligned to the end edge of the trigger." })] }) })] }) })] })); },
+};
+// ============================================================================
+// FORM - Popover with form fields
+// ============================================================================
+/**
+ * Popover containing a form with grouped input fields.
+ * Demonstrates the common pattern of inline editing within a popover.
+ */
+export var Form = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Edit Profile" }) }), _jsx(PopoverContent, { className: POPOVER_WIDE, children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Edit Profile" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "Update your display name and email address." })] }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { defaultValue: "John Doe", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Email" }), _jsx(Input, { defaultValue: "john@example.com", className: "col-span-2 h-8" })] }), _jsxs("div", { className: "grid grid-cols-3 items-center gap-4", children: [_jsx(Label, { children: "Phone" }), _jsx(Input, { defaultValue: "555-0123", className: "col-span-2 h-8" })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }), _jsx(Button, { size: "sm", children: "Save" })] })] }) })] })); },
+};
+// ============================================================================
+// RTL SUPPORT - Right-to-left layout
+// ============================================================================
+/**
+ * Demonstrates RTL (right-to-left) support for languages like Arabic and Hebrew.
+ * Uses the dir prop and side positioning for correct RTL layout.
+ */
+export var RTLSupport = {
+    render: function () { return (_jsxs("div", { className: "flex gap-8", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "English (LTR)" }) }), _jsx(PopoverContent, { side: "bottom", align: "start", className: POPOVER_MEDIUM, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Settings" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "Manage your account settings and preferences." })] }) })] }), _jsx("div", { dir: "rtl", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "RTL Layout" }) }), _jsx(PopoverContent, { side: "bottom", align: "start", className: POPOVER_MEDIUM, children: _jsxs("div", { className: "space-y-2 text-right", children: [_jsx(Heading, { variant: "h4-500", children: "Settings" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "This popover renders with right-to-left text direction and alignment." })] }) })] }) })] })); },
+};
+// ============================================================================
+// SIDE VARIANTS
+// ============================================================================
+/**
+ * Demonstrates all four side positions for the popover:
+ * top, right, bottom, and left.
+ */
+export var SidePositions = {
+    render: function () { return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Top" }) }), _jsx(PopoverContent, { side: "top", className: POPOVER_NARROW, children: _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Appears above the trigger." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Right" }) }), _jsx(PopoverContent, { side: "right", className: POPOVER_NARROW, children: _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Appears to the right." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Bottom" }) }), _jsx(PopoverContent, { side: "bottom", className: POPOVER_NARROW, children: _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Appears below the trigger." }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Left" }) }), _jsx(PopoverContent, { side: "left", className: POPOVER_NARROW, children: _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "Appears to the left." }) })] })] })); },
+};
+// ============================================================================
+// POPOVER ANCHOR
+// ============================================================================
+/**
+ * Demonstrates using PopoverAnchor to position the popover relative
+ * to a different element than the trigger.
+ */
+export var WithAnchor = {
+    render: function () { return (_jsxs(Popover, { children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx(Input, { placeholder: "Anchored here...", className: "w-48" }) }), _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: "Open" }) })] }), _jsx(PopoverContent, { className: POPOVER_MEDIUM, children: _jsx(Body, { variant: "body-sm", className: "text-gray-600", children: "This popover is anchored to the input field rather than the trigger button. The content appears relative to the anchor element." }) })] })); },
+};
+// ============================================================================
+// REAL-WORLD USE CASES
+// ============================================================================
+/**
+ * Notification popover showing a list of recent notifications.
+ */
+export var NotificationList = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Notifications (3)" }) }), _jsxs(PopoverContent, { className: POPOVER_WIDE_NO_PADDING, children: [_jsx("div", { className: "p-4 border-b", children: _jsx(Heading, { variant: "h4-500", children: "Notifications" }) }), _jsxs("div", { className: "divide-y", children: [_jsxs("div", { className: "p-3 hover:bg-gray-50", children: [_jsx(Body, { variant: "body-sm-500", children: "Meeting Reminder" }), _jsx(Body, { variant: "body-xs", className: "text-gray-500", children: "Monthly union meeting starts in 30 minutes." }), _jsx(Body, { variant: "body-xs", className: "text-gray-400 mt-1", children: "5 min ago" })] }), _jsxs("div", { className: "p-3 hover:bg-gray-50", children: [_jsx(Body, { variant: "body-sm-500", children: "Dues Payment Received" }), _jsx(Body, { variant: "body-xs", className: "text-gray-500", children: "Your quarterly dues payment has been processed successfully." }), _jsx(Body, { variant: "body-xs", className: "text-gray-400 mt-1", children: "1 hour ago" })] }), _jsxs("div", { className: "p-3 hover:bg-gray-50", children: [_jsx(Body, { variant: "body-sm-500", children: "New Announcement" }), _jsx(Body, { variant: "body-xs", className: "text-gray-500", children: "Contract negotiations update from leadership." }), _jsx(Body, { variant: "body-xs", className: "text-gray-400 mt-1", children: "3 hours ago" })] })] }), _jsx("div", { className: "p-3 border-t text-center", children: _jsx(Button, { variant: "link", size: "sm", children: "View All Notifications" }) })] })] })); },
+};
+/**
+ * User profile popover showing account details and actions.
+ */
+export var UserProfileCard = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "John Doe" }) }), _jsx(PopoverContent, { className: POPOVER_LARGE, children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Heading, { variant: "h6-600", children: "John Doe" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "john.doe@union-local-123.org" })] }), _jsxs("div", { className: "border-t pt-3 space-y-1", children: [_jsx(Body, { variant: "body-xs", className: "text-gray-400", children: "Role: Union Member" }), _jsx(Body, { variant: "body-xs", className: "text-gray-400", children: "Local: 123 - Iron Workers" }), _jsx(Body, { variant: "body-xs", className: "text-gray-400", children: "Member since: January 2022" })] }), _jsxs("div", { className: "flex gap-2 border-t pt-3", children: [_jsx(Button, { variant: "outline", size: "sm", className: "flex-1", children: "Profile" }), _jsx(Button, { variant: "outline", size: "sm", className: "flex-1", children: "Sign Out" })] })] }) })] })); },
+};
+// ============================================================================
+// EDGE CASES
+// ============================================================================
+/**
+ * Popover with a large amount of text content to test overflow and scrolling behavior.
+ */
+export var LongContent = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Long Content" }) }), _jsx(PopoverContent, { className: POPOVER_WIDE_SCROLLABLE, children: _jsxs("div", { className: "space-y-3", children: [_jsx(Heading, { variant: "h4-500", children: "Detailed Information" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "This popover contains a significant amount of text to demonstrate how the component handles overflow. When the content exceeds the maximum height, vertical scrolling is enabled so users can access all the information without the popover growing too large." }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "Union members can access their full benefits package details through this interface. The benefits include healthcare coverage, retirement planning resources, training program access, and legal representation services." }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "For questions about specific benefits or coverage details, members should contact their union representative directly. Representatives are available during business hours and can provide personalized guidance on all benefit-related topics." }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "Additional resources and documentation are available in the member portal. You can find frequently asked questions, downloadable forms, and contact information for each department." })] }) })] })); },
+};
+/**
+ * Popover with minimal content to verify it renders correctly with little data.
+ */
+export var MinimalContent = {
+    render: function () { return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Info" }) }), _jsx(PopoverContent, { className: POPOVER_MINIMAL, children: _jsx(Body, { variant: "body-sm", children: "Done." }) })] })); },
+};
+/**
+ * Popover in a default open state, useful for testing and documentation screenshots.
+ */
+export var DefaultOpen = {
+    render: function () { return (_jsxs(Popover, { defaultOpen: true, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Already Open" }) }), _jsx(PopoverContent, { className: POPOVER_WIDE, children: _jsxs("div", { className: "space-y-2", children: [_jsx(Heading, { variant: "h4-500", children: "Open by Default" }), _jsx(Body, { variant: "body-sm", className: "text-gray-500", children: "This popover starts in the open state by default." })] }) })] })); },
+};

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

@@ -0,0 +1 @@
+export * from "./popover";

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

@@ -0,0 +1 @@
+export * from "./popover";

package/dist/src/components/TimePicker/TimePicker.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
 import LUIcon from "../Icons/LUIcon";
 import { getIconSize, getPadding, getIconPosition } from "../Input";
 import { Button } from "../Button/Button/Button";

package/dist/styles/global.css

@@ -349,6 +349,9 @@
   .order-last {
     order: 9999;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .container {
     width: 100%;
     @media (width >= 480px) {
@@ -781,6 +784,9 @@
   .min-h-\[42px\] {
     min-height: 42px;
   }
+  .min-h-\[300px\] {
+    min-height: 300px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -883,6 +889,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -1049,9 +1058,6 @@
   .cursor-default {
     cursor: default;
   }
-  .cursor-help {
-    cursor: help;
-  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1100,6 +1106,9 @@
   .flex-row-reverse {
     flex-direction: row-reverse;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1109,6 +1118,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1183,6 +1195,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1232,6 +1251,15 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1841,6 +1869,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-4\! {
+    padding-inline: calc(var(--spacing) * 4) !important;
+  }
   .px-9 {
     padding-inline: calc(var(--spacing) * 9);
   }
@@ -1886,6 +1917,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\! {
+    padding-block: calc(var(--spacing) * 3) !important;
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1907,6 +1941,9 @@
   .\!pt-4 {
     padding-top: calc(var(--spacing) * 4) !important;
   }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
   .\!pr-2 {
     padding-right: calc(var(--spacing) * 2) !important;
   }
@@ -1958,6 +1995,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .text-start {
     text-align: start;
   }
@@ -2069,6 +2109,10 @@
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
   }
+  .leading-normal\! {
+    --tw-leading: var(--leading-normal) !important;
+    line-height: var(--leading-normal) !important;
+  }
   .\!font-normal {
     --tw-font-weight: var(--font-weight-normal) !important;
     font-weight: var(--font-weight-normal) !important;
@@ -2197,6 +2241,9 @@
   .text-gray-900 {
     color: #2B2C2E;
   }
+  .text-gray-900\! {
+    color: #2B2C2E !important;
+  }
   .text-gray-950 {
     color: #18191A;
   }
@@ -3217,6 +3264,13 @@
       }
     }
   }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:bg-yellow-50 {
     &:hover {
       @media (hover: hover) {
@@ -4038,6 +4092,11 @@
       background-color: #73030e;
     }
   }
+  .active\:bg-transparent {
+    &:active {
+      background-color: transparent;
+    }
+  }
   .active\:bg-yellow-500 {
     &:active {
       background-color: #ffd333;
@@ -5519,6 +5578,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -5760,6 +5824,7 @@
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.11.9",
+  "version": "1.11.11",
   "private": false,
   "files": [
     "dist",
@@ -122,6 +122,7 @@
     "storybook": "^8.6.15",
     "tailwindcss": "^4.1.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack": "5.99.9"
   }
 }