unifyedx-storybook-new 0.1.7 → 0.1.8

package/dist/unifyedx-storybook-new.css

@@ -646,6 +646,7 @@
   padding: 0rem 1.5rem;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
+  padding: 16px 20px;
 }
 
 .dialog-title-text {
@@ -3550,6 +3551,91 @@
   opacity: 0.9;
   margin: 0;
 }
+
+.options-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+
+.options-menu-trigger {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: #4b5563; /* gray-600 */
+  background-color: transparent;
+  border: none;
+}
+
+.options-menu-trigger:hover {
+  background-color: #f3f4f6; /* gray-100 */
+}
+
+.options-menu-trigger:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.options-menu-panel {
+  position: absolute; /* Will be managed by floating-ui */
+  z-index: 20;
+  width: 12rem; /* 192px */
+  margin-top: 0.5rem;
+  origin-top-right: ;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 0.25rem;
+}
+
+.options-menu-panel:focus {
+  outline: none;
+}
+
+.options-menu-item-wrapper {
+  /* Wrapper to contain dividers */
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 0.25rem 0;
+}
+
+.options-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+  border-radius: 0.25rem;
+  transition: background-color 0.15s, color 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.options-menu-item.active {
+  background-color: #2563eb;
+  color: white;
+}
+
+.options-menu-item:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.options-menu-item .item-icon {
+  margin-right: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+}
 .avatar-container {
   display: inline-flex;
   align-items: center;
@@ -4685,6 +4771,7 @@
   padding: 0rem 1.5rem;
   border-bottom: 1px solid #e5e7eb;
   flex-shrink: 0;
+  padding: 16px 20px;
 }
 .dialog-title-text {
   font-size: 1.25rem;
@@ -6747,3 +6834,83 @@
   opacity: 0.9;
   margin: 0;
 }
+.options-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
+
+.options-menu-trigger {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: #4b5563; /* gray-600 */
+  background-color: transparent;
+  border: none;
+}
+.options-menu-trigger:hover {
+  background-color: #f3f4f6; /* gray-100 */
+}
+.options-menu-trigger:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.options-menu-panel {
+  position: absolute; /* Will be managed by floating-ui */
+  z-index: 20;
+  width: 12rem; /* 192px */
+  margin-top: 0.5rem;
+  origin-top-right: ;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 0.25rem;
+}
+.options-menu-panel:focus {
+  outline: none;
+}
+
+.options-menu-item-wrapper {
+  /* Wrapper to contain dividers */
+}
+
+.menu-divider {
+  height: 1px;
+  background-color: #e5e7eb;
+  margin: 0.25rem 0;
+}
+
+.options-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #374151; /* gray-700 */
+  border-radius: 0.25rem;
+  transition: background-color 0.15s, color 0.15s;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.options-menu-item.active {
+  background-color: #2563eb;
+  color: white;
+}
+.options-menu-item:disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.options-menu-item .item-icon {
+  margin-right: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+}

package/dist/unifyedx-storybook-new.es.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, createElement, useState, useMemo, useId as useId$1, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, Fragment, useImperativeHandle } from 'react';
-import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch } from '@headlessui/react';
+import { Popover as Popover$1, PopoverButton, PopoverPanel, Transition, Dialog, TransitionChild, DialogPanel, DialogTitle, TabGroup, TabList, Tab, TabPanels, RadioGroup as RadioGroup$1, Listbox, ListboxButton, ListboxOptions, ListboxOption, SwitchGroup, Switch, Menu as Menu$1, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { useFloating, offset as offset$2, flip as flip$2, shift as shift$2, autoUpdate as autoUpdate$1 } from '@floating-ui/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -581,11 +582,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$l = [
+const __iconNode$m = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$l);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$m);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -595,13 +596,13 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$l = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$k);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$l);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -611,8 +612,8 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$k);
  */
 
 
-const __iconNode$j = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$j);
+const __iconNode$k = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$k);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -622,8 +623,8 @@ const Check = createLucideIcon("check", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
+const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -633,8 +634,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
+const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -644,8 +645,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
  */
 
 
-const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -655,11 +656,11 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$g = [
   ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
   ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
 ];
-const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$f);
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$g);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -669,11 +670,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$f = [
   ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
   ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
 ];
-const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$e);
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$f);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -683,11 +684,11 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$e = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$d);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$e);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -697,11 +698,11 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$d = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -711,12 +712,27 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "M12 13v8", key: "1l5pq0" }],
   ["path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242", key: "1pljnt" }],
   ["path", { d: "m8 17 4-4 4 4", key: "1quai1" }]
 ];
-const CloudUpload = createLucideIcon("cloud-upload", __iconNode$b);
+const CloudUpload = createLucideIcon("cloud-upload", __iconNode$c);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$b = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+];
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$b);
 
 /**
  * @license lucide-react v0.525.0 - ISC
@@ -43226,4 +43242,53 @@ const PageHeader = ({
   ] });
 };
 
-export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal };
+const OptionsMenu = ({
+  options = [],
+  onSelect,
+  triggerIcon: TriggerIcon = EllipsisVertical
+}) => {
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate$1,
+    middleware: [offset$2(5), flip$2(), shift$2({ padding: 5 })]
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu$1, { as: "div", className: "options-menu-wrapper", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MenuButton, { ref: refs.setReference, className: "options-menu-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriggerIcon, { size: 20 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Transition,
+      {
+        as: Fragment,
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MenuItems,
+          {
+            ref: refs.setFloating,
+            style: floatingStyles,
+            className: "options-menu-panel",
+            children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "options-menu-item-wrapper", children: [
+              option.dividerBefore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "menu-divider" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { children: ({ active }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "button",
+                {
+                  onClick: () => onSelect(option),
+                  className: `options-menu-item ${active ? "active" : ""}`,
+                  disabled: option.disabled,
+                  children: [
+                    option.icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "item-icon", children: option.icon }),
+                    option.label
+                  ]
+                }
+              ) })
+            ] }, option.label))
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unifyedx-storybook-new",
   "private": false,
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",
@@ -18,6 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.13",
     "@headlessui/react": "*",
     "@hookform/resolvers": "^5.1.1",
     "@storybook/jest": "^0.2.2",
@@ -73,6 +74,7 @@
     "@headlessui/react": "*",
     "framer-motion": "*",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "@floating-ui/react": "^0.27.13"
   }
 }