linkedunion-design-kit 1.11.6-beta.3 → 1.11.8

package/dist/index.d.ts

@@ -40,4 +40,3 @@ 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,4 +39,3 @@ 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/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.jsx

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { format } from "date-fns";
 import { cn } from "../../lib/utils";
 import { Calendar } from "../ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import LUIcon from "../Icons/LUIcon";
 import { getIconSize, getPadding, getIconPosition } from "../Input";
 import { inputVariantConfig, inputVariants } from "../Input/input";

package/dist/src/components/DateRangePicker/DateRangePicker.jsx

@@ -22,7 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { format, startOfDay } from "date-fns";
 import { cn } from "../../lib/utils";
 import { Calendar } from "../ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/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.jsx

@@ -13,7 +13,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/Popover/popover";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../../components/ui/popover";
 import { Button } from "../../../components/Button/Button/Button";
 import LUIcon from "../../../components/Icons/LUIcon";
 import { Checkbox } from "../../../components/Checkbox/checkbox";

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

@@ -47,7 +47,7 @@ var DropdownMenuContent = React.forwardRef(function (_a, ref) {
     return (<DropdownMenuPrimitive.Portal>
       <DropdownMenuSizeContext.Provider value={size}>
         <DropdownMenuPrimitive.Content data-reset={Reset_BS} ref={ref} sideOffset={sideOffset} align={align} // Pass align prop to DropdownMenuPrimitive.Content
-     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}/>
+     className={cn(className, "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])} {...props}/>
       </DropdownMenuSizeContext.Provider>
     </DropdownMenuPrimitive.Portal>);
 });
@@ -57,7 +57,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 (<DropdownMenuPrimitive.Item 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
+    return (<DropdownMenuPrimitive.Item ref={ref} data-reset={Reset_BS} className={cn("relative font-normal! 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;
@@ -87,7 +87,7 @@ var DropdownMenuRadioItem = React.forwardRef(function (_a, ref) {
 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 (<DropdownMenuPrimitive.Label ref={ref} className={cn("!px-2 !py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props}/>);
+    return (<DropdownMenuPrimitive.Label ref={ref} className={cn(className, "!px-2 !py-1.5 text-sm font-semibold", inset && "pl-8")} {...props}/>);
 });
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 var DropdownMenuSeparator = React.forwardRef(function (_a, ref) {

package/dist/src/components/TimePicker/TimePicker.jsx

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../Popover/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import LUIcon from "../Icons/LUIcon";
 import { getIconSize, getPadding, getIconPosition } from "../Input";
 import { Button } from "../Button/Button/Button";

package/dist/styles/global.css

@@ -349,9 +349,6 @@
   .order-last {
     order: 9999;
   }
-  .col-span-2 {
-    grid-column: span 2 / span 2;
-  }
   .container {
     width: 100%;
     @media (width >= 480px) {
@@ -784,9 +781,6 @@
   .min-h-\[42px\] {
     min-height: 42px;
   }
-  .min-h-\[300px\] {
-    min-height: 300px;
-  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -889,9 +883,6 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -1118,9 +1109,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -1195,13 +1183,6 @@
       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;
@@ -1251,15 +1232,6 @@
       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;
@@ -1935,9 +1907,6 @@
   .\!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;
   }
@@ -1989,9 +1958,6 @@
   .text-left {
     text-align: left;
   }
-  .text-right {
-    text-align: right;
-  }
   .text-start {
     text-align: start;
   }
@@ -2123,6 +2089,10 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
+  .font-normal\! {
+    --tw-font-weight: var(--font-weight-normal) !important;
+    font-weight: var(--font-weight-normal) !important;
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -5549,11 +5519,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-divide-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -5795,7 +5760,6 @@
       --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.6-beta.3",
+  "version": "1.11.8",
   "private": false,
   "files": [
     "dist",
@@ -70,7 +70,7 @@
     "init": "^0.1.2",
     "linkedunion-design-kit": "^1.6.0",
     "lucide-react": "^0.488.0",
-    "next": "^15.2.0",
+    "next": "^15.5.10",
     "radio-group": "^0.0.2",
     "react": "^19.0.0",
     "react-day-picker": "^9.11.1",
@@ -119,7 +119,7 @@
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.5.2",
-    "storybook": "^8.4.3",
+    "storybook": "^8.6.15",
     "tailwindcss": "^4.1.3",
     "ts-node": "^10.9.2",
     "typescript": "^5"

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

@@ -1,74 +0,0 @@
-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.jsx

@@ -1,544 +0,0 @@
-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 (<div className="flex items-center justify-center min-h-[300px]">
-        <Story />
-      </div>); },
-    ],
-};
-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 (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">{args.triggerLabel}</Button>
-      </PopoverTrigger>
-      <PopoverContent align={args.align} side={args.side} sideOffset={args.sideOffset} className={POPOVER_WIDE}>
-        <div className="space-y-2">
-          <Heading variant="h4-500">{args.title}</Heading>
-          <Body variant="body-sm" className="text-gray-500">
-            {args.description}
-          </Body>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// 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 (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE}>
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <Heading variant="h4-500">Dimensions</Heading>
-            <Body variant="body-sm" className="text-gray-500">
-              Set the dimensions for the layer.
-            </Body>
-          </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Width</Label>
-              <Input defaultValue="100%" className="col-span-2 h-8"/>
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Max Width</Label>
-              <Input defaultValue="300px" className="col-span-2 h-8"/>
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Height</Label>
-              <Input defaultValue="25px" className="col-span-2 h-8"/>
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Max Height</Label>
-              <Input defaultValue="none" className="col-span-2 h-8"/>
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// 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 (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE}>
-        <div className="space-y-2">
-          <Heading variant="h4-500">Popover Title</Heading>
-          <Body variant="body-sm" className="text-gray-500">
-            This is a basic popover with a title and description. Use it to
-            display additional context or information.
-          </Body>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// 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 (<div className="flex items-end gap-8">
-      <div className="flex flex-col items-center gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">Align Start</Button>
-          </PopoverTrigger>
-          <PopoverContent align="start" className={POPOVER_MEDIUM}>
-            <div className="space-y-2">
-              <Heading variant="h4-500">Start Aligned</Heading>
-              <Body variant="body-sm" className="text-gray-500">
-                The popover content is aligned to the start edge of the trigger.
-              </Body>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      <div className="flex flex-col items-center gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">Align Center</Button>
-          </PopoverTrigger>
-          <PopoverContent align="center" className={POPOVER_MEDIUM}>
-            <div className="space-y-2">
-              <Heading variant="h4-500">Center Aligned</Heading>
-              <Body variant="body-sm" className="text-gray-500">
-                The popover content is centered relative to the trigger.
-              </Body>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      <div className="flex flex-col items-center gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">Align End</Button>
-          </PopoverTrigger>
-          <PopoverContent align="end" className={POPOVER_MEDIUM}>
-            <div className="space-y-2">
-              <Heading variant="h4-500">End Aligned</Heading>
-              <Body variant="body-sm" className="text-gray-500">
-                The popover content is aligned to the end edge of the trigger.
-              </Body>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>); },
-};
-// ============================================================================
-// 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 (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE}>
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <Heading variant="h4-500">Edit Profile</Heading>
-            <Body variant="body-sm" className="text-gray-500">
-              Update your display name and email address.
-            </Body>
-          </div>
-          <div className="grid gap-3">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Name</Label>
-              <Input defaultValue="John Doe" className="col-span-2 h-8"/>
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Email</Label>
-              <Input defaultValue="john@example.com" className="col-span-2 h-8"/>
-            </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label>Phone</Label>
-              <Input defaultValue="555-0123" className="col-span-2 h-8"/>
-            </div>
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" size="sm">
-              Cancel
-            </Button>
-            <Button size="sm">Save</Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// 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 (<div className="flex gap-8">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">English (LTR)</Button>
-        </PopoverTrigger>
-        <PopoverContent side="bottom" align="start" className="w-64 rounded-md border bg-white p-4 shadow-md">
-          <div className="space-y-2">
-            <Heading variant="h4-500">Settings</Heading>
-            <Body variant="body-sm" className="text-gray-500">
-              Manage your account settings and preferences.
-            </Body>
-          </div>
-        </PopoverContent>
-      </Popover>
-
-      <div dir="rtl">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">RTL Layout</Button>
-          </PopoverTrigger>
-          <PopoverContent side="bottom" align="start" className={POPOVER_MEDIUM}>
-            <div className="space-y-2 text-right">
-              <Heading variant="h4-500">Settings</Heading>
-              <Body variant="body-sm" className="text-gray-500">
-                This popover renders with right-to-left text direction and
-                alignment.
-              </Body>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>); },
-};
-// ============================================================================
-// SIDE VARIANTS
-// ============================================================================
-/**
- * Demonstrates all four side positions for the popover:
- * top, right, bottom, and left.
- */
-export var SidePositions = {
-    render: function () { return (<div className="flex items-center gap-4">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Top</Button>
-        </PopoverTrigger>
-        <PopoverContent side="top" className={POPOVER_NARROW}>
-          <Body variant="body-sm" className="text-gray-600">
-            Appears above the trigger.
-          </Body>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Right</Button>
-        </PopoverTrigger>
-        <PopoverContent side="right" className={POPOVER_NARROW}>
-          <Body variant="body-sm" className="text-gray-600">
-            Appears to the right.
-          </Body>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Bottom</Button>
-        </PopoverTrigger>
-        <PopoverContent side="bottom" className={POPOVER_NARROW}>
-          <Body variant="body-sm" className="text-gray-600">
-            Appears below the trigger.
-          </Body>
-        </PopoverContent>
-      </Popover>
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Left</Button>
-        </PopoverTrigger>
-        <PopoverContent side="left" className={POPOVER_NARROW}>
-          <Body variant="body-sm" className="text-gray-600">
-            Appears to the left.
-          </Body>
-        </PopoverContent>
-      </Popover>
-    </div>); },
-};
-// ============================================================================
-// POPOVER ANCHOR
-// ============================================================================
-/**
- * Demonstrates using PopoverAnchor to position the popover relative
- * to a different element than the trigger.
- */
-export var WithAnchor = {
-    render: function () { return (<Popover>
-      <div className="flex items-center gap-4">
-        <PopoverAnchor asChild>
-          <Input placeholder="Anchored here..." className="w-48"/>
-        </PopoverAnchor>
-        <PopoverTrigger asChild>
-          <Button variant="outline" size="sm">
-            Open
-          </Button>
-        </PopoverTrigger>
-      </div>
-      <PopoverContent className="w-64 rounded-md border bg-white p-4 shadow-md">
-        <Body variant="body-sm" className="text-gray-600">
-          This popover is anchored to the input field rather than the trigger
-          button. The content appears relative to the anchor element.
-        </Body>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// REAL-WORLD USE CASES
-// ============================================================================
-/**
- * Notification popover showing a list of recent notifications.
- */
-export var NotificationList = {
-    render: function () { return (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Notifications (3)</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE_NO_PADDING}>
-        <div className="p-4 border-b">
-          <Heading variant="h4-500">Notifications</Heading>
-        </div>
-        <div className="divide-y">
-          <div className="p-3 hover:bg-gray-50">
-            <Body variant="body-sm-500">Meeting Reminder</Body>
-            <Body variant="body-xs" className="text-gray-500">
-              Monthly union meeting starts in 30 minutes.
-            </Body>
-            <Body variant="body-xs" className="text-gray-400 mt-1">
-              5 min ago
-            </Body>
-          </div>
-          <div className="p-3 hover:bg-gray-50">
-            <Body variant="body-sm-500">Dues Payment Received</Body>
-            <Body variant="body-xs" className="text-gray-500">
-              Your quarterly dues payment has been processed successfully.
-            </Body>
-            <Body variant="body-xs" className="text-gray-400 mt-1">
-              1 hour ago
-            </Body>
-          </div>
-          <div className="p-3 hover:bg-gray-50">
-            <Body variant="body-sm-500">New Announcement</Body>
-            <Body variant="body-xs" className="text-gray-500">
-              Contract negotiations update from leadership.
-            </Body>
-            <Body variant="body-xs" className="text-gray-400 mt-1">
-              3 hours ago
-            </Body>
-          </div>
-        </div>
-        <div className="p-3 border-t text-center">
-          <Button variant="link" size="sm">
-            View All Notifications
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-/**
- * User profile popover showing account details and actions.
- */
-export var UserProfileCard = {
-    render: function () { return (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" size="sm">
-          John Doe
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_LARGE}>
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <Heading variant="h6-600">John Doe</Heading>
-            <Body variant="body-sm" className="text-gray-500">
-              john.doe@union-local-123.org
-            </Body>
-          </div>
-          <div className="border-t pt-3 space-y-1">
-            <Body variant="body-xs" className="text-gray-400">
-              Role: Union Member
-            </Body>
-            <Body variant="body-xs" className="text-gray-400">
-              Local: 123 - Iron Workers
-            </Body>
-            <Body variant="body-xs" className="text-gray-400">
-              Member since: January 2022
-            </Body>
-          </div>
-          <div className="flex gap-2 border-t pt-3">
-            <Button variant="outline" size="sm" className="flex-1">
-              Profile
-            </Button>
-            <Button variant="outline" size="sm" className="flex-1">
-              Sign Out
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-// ============================================================================
-// EDGE CASES
-// ============================================================================
-/**
- * Popover with a large amount of text content to test overflow and scrolling behavior.
- */
-export var LongContent = {
-    render: function () { return (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Long Content</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE_SCROLLABLE}>
-        <div className="space-y-3">
-          <Heading variant="h4-500">Detailed Information</Heading>
-          <Body variant="body-sm" className="text-gray-500">
-            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.
-          </Body>
-          <Body variant="body-sm" className="text-gray-500">
-            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.
-          </Body>
-          <Body variant="body-sm" className="text-gray-500">
-            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.
-          </Body>
-          <Body variant="body-sm" className="text-gray-500">
-            Additional resources and documentation are available in the member
-            portal. You can find frequently asked questions, downloadable forms,
-            and contact information for each department.
-          </Body>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};
-/**
- * Popover with minimal content to verify it renders correctly with little data.
- */
-export var MinimalContent = {
-    render: function () { return (<Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Info</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_MINIMAL}>
-        <Body variant="body-sm">Done.</Body>
-      </PopoverContent>
-    </Popover>); },
-};
-/**
- * Popover in a default open state, useful for testing and documentation screenshots.
- */
-export var DefaultOpen = {
-    render: function () { return (<Popover defaultOpen>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Already Open</Button>
-      </PopoverTrigger>
-      <PopoverContent className={POPOVER_WIDE}>
-        <div className="space-y-2">
-          <Heading variant="h4-500">Open by Default</Heading>
-          <Body variant="body-sm" className="text-gray-500">
-            This popover starts in the open state by default.
-          </Body>
-        </div>
-      </PopoverContent>
-    </Popover>); },
-};

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

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

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

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