@hexdspace/react 0.1.34 → 0.1.36

package/dist/index.d.ts

@@ -669,6 +669,7 @@ declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, m
 
 declare const dropdownMenuContentVariants: (props?: ({
     chrome?: "flat" | "glass" | "glow" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DropdownMenuContentControlledProps = 'asChild' | 'children' | 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'className' | 'style' | 'aria-label' | 'aria-labelledby';
 type DropdownMenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Content>, DropdownMenuContentControlledProps> & {
@@ -679,6 +680,7 @@ type DropdownMenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof Dropd
 declare const dropdownMenuItemVariants: (props?: ({
     inset?: boolean | null | undefined;
     destructive?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVariants> {
     trigger: React.ReactElement;
@@ -701,8 +703,8 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
     style?: React.CSSProperties;
     contentProps?: DropdownMenuContentProps;
 }
-declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
-interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, VariantProps<typeof dropdownMenuItemVariants> {
+declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, Omit<VariantProps<typeof dropdownMenuItemVariants>, 'orientation'> {
 }
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -2795,10 +2795,15 @@ var dropdownMenuContentVariants = cva7(
           "bg-[color:var(--surface-2)]",
           "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%),0_12px_28px_color-mix(in_oklab,var(--border),transparent_65%)]"
         )
+      },
+      orientation: {
+        horizontal: "min-w-0 w-max flex flex-row items-center gap-1.5",
+        vertical: ""
       }
     },
     defaultVariants: {
-      chrome: "flat"
+      chrome: "flat",
+      orientation: "vertical"
     }
   }
 );
@@ -2809,11 +2814,10 @@ var dropdownMenuItemVariants = cva7(
     "text-[color:var(--text-1)] cursor-pointer",
     "data-[highlighted]:bg-[color:var(--surface-hover)] data-[highlighted]:text-[color:var(--text-1)]",
     "data-[highlighted]:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%)]",
-    "data-[highlighted]:translate-x-[1px]",
     "active:bg-[color:var(--surface-active)]",
     "data-[disabled]:text-[color:var(--disabled-fg)] data-[disabled]:pointer-events-none",
     "data-[disabled]:cursor-not-allowed",
-    "transition-[background-color,color,box-shadow,transform] duration-[var(--motion-fast)] ease-out"
+    "transition-[background-color,color,box-shadow,transform,translate] duration-[var(--motion-fast)] ease-out"
   ),
   {
     variants: {
@@ -2824,10 +2828,18 @@ var dropdownMenuItemVariants = cva7(
           "data-[highlighted]:text-[color:var(--danger)]",
           "data-[highlighted]:bg-[color:color-mix(in_oklab,var(--danger),transparent_85%)]"
         )
+      },
+      orientation: {
+        vertical: "data-[highlighted]:translate-x-[1px]",
+        horizontal: "data-[highlighted]:translate-y-[-1px]"
       }
+    },
+    defaultVariants: {
+      orientation: "vertical"
     }
   }
 );
+var DropdownMenuOrientationContext = React13.createContext("vertical");
 function useWindowTimeout() {
   const timeoutRef = React13.useRef(null);
   const clear = React13.useCallback(() => {
@@ -2885,10 +2897,12 @@ function DropdownMenu({
   ariaLabel = "Menu",
   ariaLabelledBy,
   chrome,
+  orientation,
   className,
   style,
   contentProps
 }) {
+  const resolvedItemsOrientation = orientation ?? "vertical";
   const [uncontrolledOpen, setUncontrolledOpen] = React13.useState(defaultOpen ?? false);
   const isControlled = open2 !== void 0;
   const resolvedOpen = isControlled ? open2 : uncontrolledOpen;
@@ -3001,7 +3015,7 @@ function DropdownMenu({
     ...restContentProps,
     onKeyDown: handleContentKeyDown
   };
-  return /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
+  return /* @__PURE__ */ jsx19(DropdownMenuOrientationContext.Provider, { value: resolvedItemsOrientation, children: /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
     /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Trigger, { asChild: true, children: resolvedTrigger }),
     /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx19(AnimatePresence4, { children: resolvedOpen ? /* @__PURE__ */ jsx19(
       DropdownMenuPrimitive.Content,
@@ -3019,7 +3033,11 @@ function DropdownMenu({
         children: /* @__PURE__ */ jsx19(
           motion4.div,
           {
-            className: cn(dropdownMenuContentVariants({ chrome }), className, contentClassName),
+            className: cn(
+              dropdownMenuContentVariants({ chrome, orientation }),
+              className,
+              contentClassName
+            ),
             ref: composedContentRef,
             initial: {
               opacity: 0,
@@ -3042,20 +3060,27 @@ function DropdownMenu({
         )
       }
     ) : null }) })
-  ] });
+  ] }) });
 }
 var DropdownMenuItem = React13.forwardRef(
-  ({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx19(
-    DropdownMenuPrimitive.Item,
-    {
-      ref,
-      className: cn(dropdownMenuItemVariants({ inset, destructive }), className),
-      ...props
-    }
-  )
+  ({ className, inset, destructive, ...props }, ref) => {
+    const orientation = React13.useContext(DropdownMenuOrientationContext);
+    return /* @__PURE__ */ jsx19(
+      DropdownMenuPrimitive.Item,
+      {
+        ref,
+        className: cn(dropdownMenuItemVariants({ inset, destructive, orientation }), className),
+        ...props
+      }
+    );
+  }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1 h-px bg-(--divider)", className), ...props }));
+var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => {
+  const orientation = React13.useContext(DropdownMenuOrientationContext);
+  const orientationClassName = orientation === "horizontal" ? "mx-1 w-px self-stretch bg-(--divider)" : "my-1 h-px bg-(--divider)";
+  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn(orientationClassName, className), ...props });
+});
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 // src/ui/components/Kbd.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",