@vygruppen/spor-react 12.24.15 → 12.24.16

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.24.15 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.16 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           360.22 KB
+CJS dist/index.cjs           367.03 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       708.58 KB
+CJS dist/index.cjs.map       722.10 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2636ms
-ESM dist/index.mjs           336.04 KB
+CJS ⚡️ Build success in 2628ms
+ESM dist/index.mjs           342.22 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       722.10 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       708.58 KB
-ESM ⚡️ Build success in 2638ms
-DTS ⚡️ Build success in 20314ms
+ESM ⚡️ Build success in 2628ms
+DTS ⚡️ Build success in 20149ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        147.61 KB
+DTS dist/index.d.ts        150.61 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       147.61 KB
+DTS dist/index.d.cts       150.61 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.24.15 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.24.16 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 [dotenv@17.3.1] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @vygruppen/spor-react
 
+## 12.24.16
+
+### Patch Changes
+
+- b90fd20: Design adjustments to the menu component
+- 80a1fda: Add new menu-component
+
 ## 12.24.15
 
 ### Patch Changes

package/dist/index.cjs

@@ -4095,6 +4095,127 @@ function ListBoxSection({ section, state }) {
     ) })
   ] }) });
 }
+var CustomMenuContext = React20.createContext({
+  variant: "core"
+});
+var useMenuContext = () => React20.useContext(CustomMenuContext);
+var Menu = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CustomMenuContext.Provider,
+    {
+      value: {
+        variant: props.variant
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Root, { ...props, children })
+    }
+  );
+};
+var MenuContent = React20.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Content, { ref, ...props, children }) }) });
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuTrigger = React20.forwardRef(
+  ({ icon, size, children, ...props }, ref) => {
+    const { variant } = useMenuContext();
+    const { open } = react.useMenuContext();
+    const ChevronIcon = size === "sm" ? spor_icon_react_star.DropdownDownFill18Icon : spor_icon_react_star.DropdownDownFill24Icon;
+    const getButtonVariant = () => {
+      if (variant === "floating")
+        return "floating";
+      if (variant === "accent")
+        return "secondary";
+      return "tertiary";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Trigger, { asChild: true, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        leftIcon: icon,
+        variant: getButtonVariant(),
+        size,
+        ...props,
+        rightIcon: /* @__PURE__ */ jsxRuntime.jsx(
+          ChevronIcon,
+          {
+            transform: open ? "rotate(180deg)" : void 0,
+            transition: "transform 0.3s"
+          }
+        ),
+        children
+      }
+    ) });
+  }
+);
+MenuTrigger.displayName = "MenuTrigger";
+var MenuItem = React20.forwardRef(
+  ({ itemCommand, children, value, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.Item, { value, ...props, ref, children: [
+      leftIcon,
+      children,
+      itemCommand && /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemCommand, { children: itemCommand }),
+      rightIcon
+    ] });
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuTriggerItem = React20.forwardRef(
+  ({ children, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.TriggerItem, { ...props, ref, children: [
+      leftIcon,
+      children,
+      rightIcon
+    ] });
+  }
+);
+MenuTriggerItem.displayName = "MenuTriggerItem";
+var MenuRadioItemGroup = React20.forwardRef(({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.RadioItemGroup, { ...props, children });
+});
+MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+var MenuRadioItem = React20.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.RadioItem, { ...props, ref, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { w: "1.25rem", justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemIndicator, {}) })
+    ] });
+  }
+);
+MenuRadioItem.displayName = "MenuRadioItem";
+var MenuItemGroup = React20.forwardRef(
+  ({ children, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.ItemGroup, { ...props, ref, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemGroupLabel, { children: label }),
+      children
+    ] });
+  }
+);
+MenuItemGroup.displayName = "MenuItemGroup";
+var MenuCheckboxItem = React20.forwardRef(({ children, closeOnSelect = false, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Menu.CheckboxItem,
+    {
+      ...props,
+      ref,
+      closeOnSelect,
+      checked: props.checked,
+      onCheckedChange: props.onCheckedChange,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          checked: props.checked,
+          onCheckedChange: () => props.onCheckedChange,
+          children
+        }
+      )
+    }
+  );
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuSeparator = React20.forwardRef(({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Separator, { ...props });
+});
+MenuSeparator.displayName = "MenuSeparator";
 var NativeSelect = React20__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
@@ -7602,6 +7723,19 @@ var comboboxAnatomy = react$1.comboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty"
 );
+var menuAnatomy = anatomy.createAnatomy("menu").parts(
+  "trigger",
+  "content",
+  "item",
+  "itemGroup",
+  "triggerItem",
+  "itemCommand",
+  "itemGroupLabel",
+  "separator",
+  "radioItem",
+  "triggerItem",
+  "checkboxItem"
+);
 
 // src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = react.defineSlotRecipe({
@@ -9890,6 +10024,107 @@ var mediaControllerSlotRecipe = react.defineSlotRecipe({
     }
   ]
 });
+var menuSlotRecipe = react.defineSlotRecipe({
+  className: "menu",
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      bg: "bg",
+      borderRadius: "sm",
+      boxShadow: "sm",
+      width: "fit-content",
+      padding: "1",
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      zIndex: "dropdown",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast",
+        zIndex: "popover",
+        outline: "none"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5"
+    },
+    item: {
+      borderRadius: "9px",
+      padding: "2",
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+      _hover: {
+        backgroundColor: "accent.surface.hover"
+      },
+      "&:active": {
+        backgroundColor: "accent.surface.active"
+      },
+      _checked: {
+        backgroundColor: "accent.surface"
+      },
+      _highlighted: {
+        backgroundColor: "ghost.surface.hover"
+      }
+    },
+    itemGroupLabel: {
+      paddingY: "1",
+      fontWeight: "bold",
+      fontSize: "xs"
+    },
+    itemCommand: {
+      fontSize: "2xs"
+    },
+    separator: {
+      color: "outline"
+    },
+    radioItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 2
+    },
+    triggerItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+      alignItems: "center"
+    },
+    checkboxItem: {
+      display: "flex",
+      gap: 2,
+      alignItems: "center",
+      width: "full"
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline"
+        }
+      },
+      accent: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline"
+        }
+      },
+      floating: {
+        content: {
+          border: "sm",
+          borderColor: "floating.outline",
+          boxShadow: "lg"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
 var _a5, _b4;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
@@ -11253,7 +11488,8 @@ var slotRecipes = {
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
-  tooltip: popoverSlotRecipe
+  tooltip: popoverSlotRecipe,
+  menu: menuSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {
@@ -12441,6 +12677,16 @@ exports.List = List;
 exports.ListBox = ListBox;
 exports.ListIndicator = ListIndicator;
 exports.ListItem = ListItem2;
+exports.Menu = Menu;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuRadioItemGroup = MenuRadioItemGroup;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuTriggerItem = MenuTriggerItem;
 exports.NativeSelect = NativeSelect;
 exports.Nudge = Nudge;
 exports.NudgeActions = NudgeActions;
@@ -12521,6 +12767,7 @@ exports.themes = themes;
 exports.useCalendar = useCalendar;
 exports.useColorMode = useColorMode;
 exports.useColorModeValue = useColorModeValue;
+exports.useMenuContext = useMenuContext;
 exports.useTableSort = useTableSort;
 exports.useTranslation = useTranslation;
 //# sourceMappingURL=out.js.map