@kopexa/theme 1.4.0 → 1.4.2

package/dist/{chunk-OEVKY5EP.mjs → chunk-5DF3M5JP.mjs}

@@ -4,9 +4,10 @@ var dialog = tv({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
+      "flex flex-col",
       "bg-background fixed top-[50%] left-[50%] z-50",
-      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "gap-4 border shadow-lg",
+      "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "border shadow-lg",
       //  mobile animation vars
       "[--scale-enter:100%]",
       "[--scale-exit:100%]",

package/dist/{chunk-E5AF4JZZ.mjs → chunk-5FI7W32M.mjs}

@@ -12,7 +12,7 @@ var button = tv({
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
     "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
-    "transform-gpu cursor-pointer hover:opacity-80",
+    "transform-gpu cursor-pointer hover:opacity-80 overflow-hidden",
     ...focusVisibleClasses,
     // shadcn below
     "disabled:pointer-events-none disabled:opacity-50",

package/dist/chunk-EXBKQDH5.mjs

@@ -0,0 +1,24 @@
+// src/components/dropdown-menu.ts
+import { tv } from "tailwind-variants";
+var dropdownMenu = tv({
+  slots: {
+    root: "",
+    content: "min-w-56 bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+    item: "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    checkboxItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    iconWrapper: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+    icon: "size-4",
+    radioItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    radioItemIcon: "size-4 fill-current",
+    label: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+    separator: "bg-border -mx-1 my-1 h-px",
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    subTrigger: "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+    subTriggerIcon: "size-4 ml-auto",
+    subContent: "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg"
+  }
+});
+
+export {
+  dropdownMenu
+};

package/dist/{chunk-GWY5N4AY.mjs → chunk-GQV7INYX.mjs}

@@ -16,7 +16,7 @@ var pageLayout = tv({
       "data-[position=end]:flex-col-reverse",
       // md+
       "md:w-auto md:mt-0 md:mb-0",
-      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-0.5rem)]",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
       "md:data-[position=end]:flex-row-reverse",
       "md:data-[position=start]:flex-row"
     ],

package/dist/{chunk-V74N5X6Z.mjs → chunk-UI2M2MFB.mjs}

@@ -1,6 +1,6 @@
 import {
   dialog
-} from "./chunk-OEVKY5EP.mjs";
+} from "./chunk-5DF3M5JP.mjs";
 
 // src/components/drawer.ts
 import { tv } from "tailwind-variants";

package/dist/components/button.js

@@ -65,7 +65,7 @@ var button = (0, import_tailwind_variants.tv)({
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
     "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
-    "transform-gpu cursor-pointer hover:opacity-80",
+    "transform-gpu cursor-pointer hover:opacity-80 overflow-hidden",
     ...focusVisibleClasses,
     // shadcn below
     "disabled:pointer-events-none disabled:opacity-50",

package/dist/components/button.mjs

@@ -1,6 +1,6 @@
 import {
   button
-} from "../chunk-E5AF4JZZ.mjs";
+} from "../chunk-5FI7W32M.mjs";
 import "../chunk-HQ27V5V4.mjs";
 import "../chunk-U6ONJKJY.mjs";
 export {

package/dist/components/dialog.js

@@ -28,9 +28,10 @@ var dialog = (0, import_tailwind_variants.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
+      "flex flex-col",
       "bg-background fixed top-[50%] left-[50%] z-50",
-      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "gap-4 border shadow-lg",
+      "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "border shadow-lg",
       //  mobile animation vars
       "[--scale-enter:100%]",
       "[--scale-exit:100%]",

package/dist/components/dialog.mjs

@@ -1,6 +1,6 @@
 import {
   dialog
-} from "../chunk-OEVKY5EP.mjs";
+} from "../chunk-5DF3M5JP.mjs";
 export {
   dialog
 };

package/dist/components/drawer.js

@@ -31,9 +31,10 @@ var dialog = (0, import_tailwind_variants.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
+      "flex flex-col",
       "bg-background fixed top-[50%] left-[50%] z-50",
-      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "gap-4 border shadow-lg",
+      "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "border shadow-lg",
       //  mobile animation vars
       "[--scale-enter:100%]",
       "[--scale-exit:100%]",

package/dist/components/drawer.mjs

@@ -1,7 +1,7 @@
 import {
   drawer
-} from "../chunk-V74N5X6Z.mjs";
-import "../chunk-OEVKY5EP.mjs";
+} from "../chunk-UI2M2MFB.mjs";
+import "../chunk-5DF3M5JP.mjs";
 export {
   drawer
 };

package/dist/components/dropdown-menu.d.mts

@@ -0,0 +1,109 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const dropdownMenu: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, undefined, unknown, unknown, undefined>>;
+type DropdownMenuVariantProps = VariantProps<typeof dropdownMenu>;
+
+export { type DropdownMenuVariantProps, dropdownMenu };

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,109 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+declare const dropdownMenu: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            separator?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            shortcut?: tailwind_variants.ClassValue;
+            content?: tailwind_variants.ClassValue;
+            checkboxItem?: tailwind_variants.ClassValue;
+            iconWrapper?: tailwind_variants.ClassValue;
+            icon?: tailwind_variants.ClassValue;
+            radioItem?: tailwind_variants.ClassValue;
+            radioItemIcon?: tailwind_variants.ClassValue;
+            label?: tailwind_variants.ClassValue;
+            subTrigger?: tailwind_variants.ClassValue;
+            subTriggerIcon?: tailwind_variants.ClassValue;
+            subContent?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    root: string;
+    content: string;
+    item: string;
+    checkboxItem: string;
+    iconWrapper: string;
+    icon: string;
+    radioItem: string;
+    radioItemIcon: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    subTrigger: string;
+    subTriggerIcon: string;
+    subContent: string;
+}, undefined, unknown, unknown, undefined>>;
+type DropdownMenuVariantProps = VariantProps<typeof dropdownMenu>;
+
+export { type DropdownMenuVariantProps, dropdownMenu };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dropdown-menu.ts
+var dropdown_menu_exports = {};
+__export(dropdown_menu_exports, {
+  dropdownMenu: () => dropdownMenu
+});
+module.exports = __toCommonJS(dropdown_menu_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var dropdownMenu = (0, import_tailwind_variants.tv)({
+  slots: {
+    root: "",
+    content: "min-w-56 bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+    item: "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    checkboxItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    iconWrapper: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+    icon: "size-4",
+    radioItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    radioItemIcon: "size-4 fill-current",
+    label: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+    separator: "bg-border -mx-1 my-1 h-px",
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    subTrigger: "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+    subTriggerIcon: "size-4 ml-auto",
+    subContent: "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dropdownMenu
+});

package/dist/components/dropdown-menu.mjs

@@ -0,0 +1,6 @@
+import {
+  dropdownMenu
+} from "../chunk-EXBKQDH5.mjs";
+export {
+  dropdownMenu
+};

package/dist/components/index.d.mts

@@ -2,6 +2,7 @@ export { ButtonVariantProps, button } from './button.mjs';
 export { CommandVariants, command } from './command.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './dialog.mjs';
 export { DrawerVariantProps, drawer } from './drawer.mjs';
+export { DropdownMenuVariantProps, dropdownMenu } from './dropdown-menu.mjs';
 export { PageLayoutVariantProps, pageLayout } from './page-layout.mjs';
 export { PopoverVariants, popover } from './popover.mjs';
 export { SpinnerVariants, spinner } from './spinner.mjs';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { ButtonVariantProps, button } from './button.js';
 export { CommandVariants, command } from './command.js';
 export { DialogSlots, DialogVariantProps, dialog } from './dialog.js';
 export { DrawerVariantProps, drawer } from './drawer.js';
+export { DropdownMenuVariantProps, dropdownMenu } from './dropdown-menu.js';
 export { PageLayoutVariantProps, pageLayout } from './page-layout.js';
 export { PopoverVariants, popover } from './popover.js';
 export { SpinnerVariants, spinner } from './spinner.js';

package/dist/components/index.js

@@ -24,6 +24,7 @@ __export(components_exports, {
   command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
+  dropdownMenu: () => dropdownMenu,
   pageLayout: () => pageLayout,
   popover: () => popover,
   spinner: () => spinner,
@@ -74,7 +75,7 @@ var button = (0, import_tailwind_variants.tv)({
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
     "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
-    "transform-gpu cursor-pointer hover:opacity-80",
+    "transform-gpu cursor-pointer hover:opacity-80 overflow-hidden",
     ...focusVisibleClasses,
     // shadcn below
     "disabled:pointer-events-none disabled:opacity-50",
@@ -250,9 +251,10 @@ var dialog = (0, import_tailwind_variants3.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
+      "flex flex-col",
       "bg-background fixed top-[50%] left-[50%] z-50",
-      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "gap-4 border shadow-lg",
+      "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "border shadow-lg",
       //  mobile animation vars
       "[--scale-enter:100%]",
       "[--scale-exit:100%]",
@@ -416,9 +418,30 @@ var drawer = (0, import_tailwind_variants4.tv)({
   }
 });
 
-// src/components/page-layout.ts
+// src/components/dropdown-menu.ts
 var import_tailwind_variants5 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants5.tv)({
+var dropdownMenu = (0, import_tailwind_variants5.tv)({
+  slots: {
+    root: "",
+    content: "min-w-56 bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+    item: "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    checkboxItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    iconWrapper: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+    icon: "size-4",
+    radioItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    radioItemIcon: "size-4 fill-current",
+    label: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+    separator: "bg-border -mx-1 my-1 h-px",
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    subTrigger: "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+    subTriggerIcon: "size-4 ml-auto",
+    subContent: "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg"
+  }
+});
+
+// src/components/page-layout.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants6.tv)({
   slots: {
     root: "",
     wrapper: "flex mx-auto flex-wrap",
@@ -434,7 +457,7 @@ var pageLayout = (0, import_tailwind_variants5.tv)({
       "data-[position=end]:flex-col-reverse",
       // md+
       "md:w-auto md:mt-0 md:mb-0",
-      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-0.5rem)]",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
       "md:data-[position=end]:flex-row-reverse",
       "md:data-[position=start]:flex-row"
     ],
@@ -515,8 +538,8 @@ var pageLayout = (0, import_tailwind_variants5.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants7 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants7.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -527,8 +550,8 @@ var popover = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants8.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -638,8 +661,8 @@ var spinner = (0, import_tailwind_variants7.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants8 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants8.tv)({
+var import_tailwind_variants9 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants9.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -655,6 +678,7 @@ var tooltip = (0, import_tailwind_variants8.tv)({
   command,
   dialog,
   drawer,
+  dropdownMenu,
   pageLayout,
   popover,
   spinner,

package/dist/components/index.mjs

@@ -1,4 +1,7 @@
-import "../chunk-ZKEY52ZF.mjs";
+import "../chunk-KIDK6JOG.mjs";
+import {
+  popover
+} from "../chunk-J35D7RWA.mjs";
 import {
   spinner
 } from "../chunk-IL3JFLE2.mjs";
@@ -7,7 +10,7 @@ import {
 } from "../chunk-SVCFD7RR.mjs";
 import {
   button
-} from "../chunk-E5AF4JZZ.mjs";
+} from "../chunk-5FI7W32M.mjs";
 import "../chunk-HQ27V5V4.mjs";
 import "../chunk-U6ONJKJY.mjs";
 import {
@@ -15,21 +18,22 @@ import {
 } from "../chunk-YPHFKGNI.mjs";
 import {
   drawer
-} from "../chunk-V74N5X6Z.mjs";
+} from "../chunk-UI2M2MFB.mjs";
 import {
   dialog
-} from "../chunk-OEVKY5EP.mjs";
+} from "../chunk-5DF3M5JP.mjs";
 import {
-  pageLayout
-} from "../chunk-GWY5N4AY.mjs";
+  dropdownMenu
+} from "../chunk-EXBKQDH5.mjs";
 import {
-  popover
-} from "../chunk-J35D7RWA.mjs";
+  pageLayout
+} from "../chunk-GQV7INYX.mjs";
 export {
   button,
   command,
   dialog,
   drawer,
+  dropdownMenu,
   pageLayout,
   popover,
   spinner,

package/dist/components/page-layout.js

@@ -40,7 +40,7 @@ var pageLayout = (0, import_tailwind_variants.tv)({
       "data-[position=end]:flex-col-reverse",
       // md+
       "md:w-auto md:mt-0 md:mb-0",
-      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-0.5rem)]",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
       "md:data-[position=end]:flex-row-reverse",
       "md:data-[position=start]:flex-row"
     ],

package/dist/components/page-layout.mjs

@@ -1,6 +1,6 @@
 import {
   pageLayout
-} from "../chunk-GWY5N4AY.mjs";
+} from "../chunk-GQV7INYX.mjs";
 export {
   pageLayout
 };

package/dist/index.d.mts

@@ -3,6 +3,7 @@ export { ButtonVariantProps, button } from './components/button.mjs';
 export { CommandVariants, command } from './components/command.mjs';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.mjs';
 export { DrawerVariantProps, drawer } from './components/drawer.mjs';
+export { DropdownMenuVariantProps, dropdownMenu } from './components/dropdown-menu.mjs';
 export { PageLayoutVariantProps, pageLayout } from './components/page-layout.mjs';
 export { PopoverVariants, popover } from './components/popover.mjs';
 export { SpinnerVariants, spinner } from './components/spinner.mjs';

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { ButtonVariantProps, button } from './components/button.js';
 export { CommandVariants, command } from './components/command.js';
 export { DialogSlots, DialogVariantProps, dialog } from './components/dialog.js';
 export { DrawerVariantProps, drawer } from './components/drawer.js';
+export { DropdownMenuVariantProps, dropdownMenu } from './components/dropdown-menu.js';
 export { PageLayoutVariantProps, pageLayout } from './components/page-layout.js';
 export { PopoverVariants, popover } from './components/popover.js';
 export { SpinnerVariants, spinner } from './components/spinner.js';

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
+  dropdownMenu: () => dropdownMenu,
   pageLayout: () => pageLayout,
   popover: () => popover,
   spinner: () => spinner,
@@ -74,7 +75,7 @@ var button = (0, import_tailwind_variants.tv)({
     "group relative inline-flex items-center justify-center select-none",
     "box-border appearance-none",
     "whitespace-nowrap min-w-max font-normal subpixel-antialiased",
-    "transform-gpu cursor-pointer hover:opacity-80",
+    "transform-gpu cursor-pointer hover:opacity-80 overflow-hidden",
     ...focusVisibleClasses,
     // shadcn below
     "disabled:pointer-events-none disabled:opacity-50",
@@ -250,9 +251,10 @@ var dialog = (0, import_tailwind_variants3.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
+      "flex flex-col",
       "bg-background fixed top-[50%] left-[50%] z-50",
-      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "gap-4 border shadow-lg",
+      "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "border shadow-lg",
       //  mobile animation vars
       "[--scale-enter:100%]",
       "[--scale-exit:100%]",
@@ -416,9 +418,30 @@ var drawer = (0, import_tailwind_variants4.tv)({
   }
 });
 
-// src/components/page-layout.ts
+// src/components/dropdown-menu.ts
 var import_tailwind_variants5 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants5.tv)({
+var dropdownMenu = (0, import_tailwind_variants5.tv)({
+  slots: {
+    root: "",
+    content: "min-w-56 bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+    item: "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    checkboxItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    iconWrapper: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+    icon: "size-4",
+    radioItem: "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    radioItemIcon: "size-4 fill-current",
+    label: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+    separator: "bg-border -mx-1 my-1 h-px",
+    shortcut: "text-muted-foreground ml-auto text-xs tracking-widest",
+    subTrigger: "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+    subTriggerIcon: "size-4 ml-auto",
+    subContent: "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg"
+  }
+});
+
+// src/components/page-layout.ts
+var import_tailwind_variants6 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants6.tv)({
   slots: {
     root: "",
     wrapper: "flex mx-auto flex-wrap",
@@ -434,7 +457,7 @@ var pageLayout = (0, import_tailwind_variants5.tv)({
       "data-[position=end]:flex-col-reverse",
       // md+
       "md:w-auto md:mt-0 md:mb-0",
-      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-0.5rem)]",
+      "md:data-[sticky=true]:sticky md:data-[sticky=true]:top-2 md:data-[sticky=true]:max-h-[calc(100dvh-1rem)]",
       "md:data-[position=end]:flex-row-reverse",
       "md:data-[position=start]:flex-row"
     ],
@@ -515,8 +538,8 @@ var pageLayout = (0, import_tailwind_variants5.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants7 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants7.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -527,8 +550,8 @@ var popover = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants8.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -638,8 +661,8 @@ var spinner = (0, import_tailwind_variants7.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants8 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants8.tv)({
+var import_tailwind_variants9 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants9.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -655,6 +678,7 @@ var tooltip = (0, import_tailwind_variants8.tv)({
   command,
   dialog,
   drawer,
+  dropdownMenu,
   pageLayout,
   popover,
   spinner,

package/dist/index.mjs

@@ -1,4 +1,7 @@
-import "./chunk-ZKEY52ZF.mjs";
+import "./chunk-KIDK6JOG.mjs";
+import {
+  popover
+} from "./chunk-J35D7RWA.mjs";
 import {
   spinner
 } from "./chunk-IL3JFLE2.mjs";
@@ -7,7 +10,7 @@ import {
 } from "./chunk-SVCFD7RR.mjs";
 import {
   button
-} from "./chunk-E5AF4JZZ.mjs";
+} from "./chunk-5FI7W32M.mjs";
 import "./chunk-HQ27V5V4.mjs";
 import "./chunk-U6ONJKJY.mjs";
 import {
@@ -15,21 +18,22 @@ import {
 } from "./chunk-YPHFKGNI.mjs";
 import {
   drawer
-} from "./chunk-V74N5X6Z.mjs";
+} from "./chunk-UI2M2MFB.mjs";
 import {
   dialog
-} from "./chunk-OEVKY5EP.mjs";
+} from "./chunk-5DF3M5JP.mjs";
 import {
-  pageLayout
-} from "./chunk-GWY5N4AY.mjs";
+  dropdownMenu
+} from "./chunk-EXBKQDH5.mjs";
 import {
-  popover
-} from "./chunk-J35D7RWA.mjs";
+  pageLayout
+} from "./chunk-GQV7INYX.mjs";
 export {
   button,
   command,
   dialog,
   drawer,
+  dropdownMenu,
   pageLayout,
   popover,
   spinner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",