@zentauri-ui/zentauri-components 1.7.1 → 1.7.3

package/dist/ui/popover/animated.js

@@ -0,0 +1,67 @@
+"use client";
+'use strict';
+
+var chunkQSPXPU72_js = require('../../chunk-QSPXPU72.js');
+var chunkZS5756ZC_js = require('../../chunk-ZS5756ZC.js');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/popover/animated/animations.ts
+var popoverAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0, y: -4 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.16, ease: "easeOut" }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.16, ease: "easeOut" }
+  }
+};
+var PopoverContentAnimated = ({
+  children,
+  className,
+  variant,
+  size,
+  width,
+  side = "bottom",
+  align = "center",
+  role = "dialog",
+  animation = "none",
+  onDrag: _onDrag,
+  onDragStart: _onDragStart,
+  onDragEnd: _onDragEnd,
+  onAnimationStart: _onAnimationStart,
+  ...props
+}) => {
+  const { open, contentId, contentRef } = chunkQSPXPU72_js.usePopover();
+  if (!open) {
+    return null;
+  }
+  const motionProps = popoverAnimationPresets[animation];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      ref: contentRef,
+      id: contentId,
+      "data-open": open,
+      role,
+      tabIndex: -1,
+      ...motionProps,
+      className: chunkZS5756ZC_js.cn(
+        chunkQSPXPU72_js.popoverContentVariants({ variant, size, width }),
+        chunkQSPXPU72_js.sideAlignClass(side, align),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+
+exports.PopoverContentAnimated = PopoverContentAnimated;
+exports.popoverAnimationPresets = popoverAnimationPresets;
+//# sourceMappingURL=animated.js.map
+//# sourceMappingURL=animated.js.map

package/dist/ui/popover/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/popover/animated/animations.ts","../../../src/ui/popover/animated/popover-content-animated.tsx"],"names":["usePopover","jsx","motion","cn","popoverContentVariants","sideAlignClass"],"mappings":";;;;;;;;AAEO,IAAM,uBAAA,GAAmD;AAAA,EAC9D,MAAM,EAAC;AAAA,EACP,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,EAAA,EAAG;AAAA,IAC7B,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,CAAA,EAAE;AAAA,IAC5B,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,SAAA;AAAU,GAChD;AAAA,EACA,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,IAChC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,SAAA;AAAU;AAElD;ACHO,IAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,MAAA;AAAA,EACZ,MAAA,EAAQ,OAAA;AAAA,EACR,WAAA,EAAa,YAAA;AAAA,EACb,SAAA,EAAW,UAAA;AAAA,EACX,gBAAA,EAAkB,iBAAA;AAAA,EAClB,GAAG;AACL,CAAA,KAAmC;AACjC,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,UAAA,KAAeA,2BAAA,EAAW;AAEnD,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,WAAA,GAAc,wBAAwB,SAAS,CAAA;AAErD,EAAA,uBACEC,cAAA;AAAA,IAACC,mBAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,EAAA,EAAI,SAAA;AAAA,MACJ,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACT,GAAG,WAAA;AAAA,MACJ,SAAA,EAAWC,mBAAA;AAAA,QACTC,uCAAA,CAAuB,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,CAAA;AAAA,QAC/CC,+BAAA,CAAe,MAAM,KAAK,CAAA;AAAA,QAC1B;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"animated.js","sourcesContent":["import type { PopoverAnimationPresets } from \"./types\";\n\nexport const popoverAnimationPresets: PopoverAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0, y: -4 },\n    animate: { opacity: 1, y: 0 },\n    transition: { duration: 0.16, ease: \"easeOut\" },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    transition: { duration: 0.16, ease: \"easeOut\" },\n  },\n};\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport { popoverAnimationPresets } from \"./animations\";\nimport type { PopoverContentAnimatedProps } from \"./types\";\nimport { sideAlignClass, usePopover } from \"../popover-base\";\nimport { popoverContentVariants } from \"../variants\";\n\nexport const PopoverContentAnimated = ({\n  children,\n  className,\n  variant,\n  size,\n  width,\n  side = \"bottom\",\n  align = \"center\",\n  role = \"dialog\",\n  animation = \"none\",\n  onDrag: _onDrag,\n  onDragStart: _onDragStart,\n  onDragEnd: _onDragEnd,\n  onAnimationStart: _onAnimationStart,\n  ...props\n}: PopoverContentAnimatedProps) => {\n  const { open, contentId, contentRef } = usePopover();\n\n  if (!open) {\n    return null;\n  }\n\n  const motionProps = popoverAnimationPresets[animation];\n\n  return (\n    <motion.div\n      ref={contentRef}\n      id={contentId}\n      data-open={open}\n      role={role}\n      tabIndex={-1}\n      {...motionProps}\n      className={cn(\n        popoverContentVariants({ variant, size, width }),\n        sideAlignClass(side, align),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"]}

package/dist/ui/popover/animated.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { usePopover, popoverContentVariants, sideAlignClass } from '../../chunk-BC6M42HQ.mjs';
+import { cn } from '../../chunk-4D54YOL6.mjs';
+import { motion } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ui/popover/animated/animations.ts
+var popoverAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0, y: -4 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.16, ease: "easeOut" }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.16, ease: "easeOut" }
+  }
+};
+var PopoverContentAnimated = ({
+  children,
+  className,
+  variant,
+  size,
+  width,
+  side = "bottom",
+  align = "center",
+  role = "dialog",
+  animation = "none",
+  onDrag: _onDrag,
+  onDragStart: _onDragStart,
+  onDragEnd: _onDragEnd,
+  onAnimationStart: _onAnimationStart,
+  ...props
+}) => {
+  const { open, contentId, contentRef } = usePopover();
+  if (!open) {
+    return null;
+  }
+  const motionProps = popoverAnimationPresets[animation];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref: contentRef,
+      id: contentId,
+      "data-open": open,
+      role,
+      tabIndex: -1,
+      ...motionProps,
+      className: cn(
+        popoverContentVariants({ variant, size, width }),
+        sideAlignClass(side, align),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+
+export { PopoverContentAnimated, popoverAnimationPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

package/dist/ui/popover/animated.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/popover/animated/animations.ts","../../../src/ui/popover/animated/popover-content-animated.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,uBAAA,GAAmD;AAAA,EAC9D,MAAM,EAAC;AAAA,EACP,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,EAAA,EAAG;AAAA,IAC7B,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,GAAG,CAAA,EAAE;AAAA,IAC5B,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,SAAA;AAAU,GAChD;AAAA,EACA,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,IAChC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,SAAA;AAAU;AAElD;ACHO,IAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,MAAA;AAAA,EACZ,MAAA,EAAQ,OAAA;AAAA,EACR,WAAA,EAAa,YAAA;AAAA,EACb,SAAA,EAAW,UAAA;AAAA,EACX,gBAAA,EAAkB,iBAAA;AAAA,EAClB,GAAG;AACL,CAAA,KAAmC;AACjC,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,UAAA,KAAe,UAAA,EAAW;AAEnD,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,WAAA,GAAc,wBAAwB,SAAS,CAAA;AAErD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,EAAA,EAAI,SAAA;AAAA,MACJ,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACT,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,sBAAA,CAAuB,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,CAAA;AAAA,QAC/C,cAAA,CAAe,MAAM,KAAK,CAAA;AAAA,QAC1B;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"animated.mjs","sourcesContent":["import type { PopoverAnimationPresets } from \"./types\";\n\nexport const popoverAnimationPresets: PopoverAnimationPresets = {\n  none: {},\n  fade: {\n    initial: { opacity: 0, y: -4 },\n    animate: { opacity: 1, y: 0 },\n    transition: { duration: 0.16, ease: \"easeOut\" },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.96 },\n    animate: { opacity: 1, scale: 1 },\n    transition: { duration: 0.16, ease: \"easeOut\" },\n  },\n};\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport { popoverAnimationPresets } from \"./animations\";\nimport type { PopoverContentAnimatedProps } from \"./types\";\nimport { sideAlignClass, usePopover } from \"../popover-base\";\nimport { popoverContentVariants } from \"../variants\";\n\nexport const PopoverContentAnimated = ({\n  children,\n  className,\n  variant,\n  size,\n  width,\n  side = \"bottom\",\n  align = \"center\",\n  role = \"dialog\",\n  animation = \"none\",\n  onDrag: _onDrag,\n  onDragStart: _onDragStart,\n  onDragEnd: _onDragEnd,\n  onAnimationStart: _onAnimationStart,\n  ...props\n}: PopoverContentAnimatedProps) => {\n  const { open, contentId, contentRef } = usePopover();\n\n  if (!open) {\n    return null;\n  }\n\n  const motionProps = popoverAnimationPresets[animation];\n\n  return (\n    <motion.div\n      ref={contentRef}\n      id={contentId}\n      data-open={open}\n      role={role}\n      tabIndex={-1}\n      {...motionProps}\n      className={cn(\n        popoverContentVariants({ variant, size, width }),\n        sideAlignClass(side, align),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n};\n"]}

package/dist/ui/popover/index.d.ts

@@ -0,0 +1,4 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverContext, usePopover, } from "./popover";
+export { popoverContentVariants } from "./variants";
+export type { PopoverAlign, PopoverContentProps, PopoverContextType, PopoverProps, PopoverSide, PopoverTriggerProps, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACX,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACpD,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/ui/popover/popover-base.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverAlign, PopoverContentProps, PopoverContextType, PopoverProps, PopoverSide, PopoverTriggerProps } from "./types";
+export declare const PopoverContext: import("react").Context<PopoverContextType | null>;
+export declare const usePopover: () => PopoverContextType;
+export declare function sideAlignClass(side: PopoverSide, align: PopoverAlign): string;
+export declare const Popover: ({ children, defaultOpen, open: controlledOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: ({ children, className, }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: ({ children, className, variant, size, width, side, align, role, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=popover-base.d.ts.map

package/dist/ui/popover/popover-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-base.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/popover-base.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAcF,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,UA0BpE;AAED,eAAO,MAAM,OAAO,GAAI,oGAOrB,YAAY,4CA2Ed,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0BAG5B,mBAAmB,4CAsDrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4EAU5B,mBAAmB,mDAwBrB,CAAC"}

package/dist/ui/popover/popover.d.ts

@@ -0,0 +1,2 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverContext, usePopover, } from "./popover-base";
+//# sourceMappingURL=popover.d.ts.map

package/dist/ui/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/popover.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,cAAc,EACd,UAAU,GACX,MAAM,gBAAgB,CAAC"}

package/dist/ui/popover/types.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { popoverContentVariants } from "./variants";
+export type PopoverSide = "top" | "left" | "bottom" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+export type PopoverContextType = {
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    toggleOpen: () => void;
+    contentId: string;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+};
+export type PopoverProps = {
+    children: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+};
+export type PopoverTriggerProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type PopoverContentProps = ComponentPropsWithRef<"div"> & {
+    children: ReactNode;
+    variant?: VariantProps<typeof popoverContentVariants>["variant"];
+    size?: VariantProps<typeof popoverContentVariants>["size"];
+    width?: VariantProps<typeof popoverContentVariants>["width"];
+    side?: PopoverSide;
+    align?: PopoverAlign;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/ui/popover/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC,SAAS,CAAC,CAAA;IAChE,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC;IAC7D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC"}

package/dist/ui/popover/variants.d.ts

@@ -0,0 +1,6 @@
+export declare const popoverContentVariants: (props?: ({
+    variant?: "default" | "outline" | "glass" | "sky" | "emerald" | "rose" | "indigo" | "green" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+    width?: "md" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/ui/popover/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/popover/variants.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB;;;;8EAWjC,CAAC"}

package/dist/ui/popover.js

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var chunkQSPXPU72_js = require('../chunk-QSPXPU72.js');
+require('../chunk-ZS5756ZC.js');
+
+
+
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.Popover; }
+});
+Object.defineProperty(exports, "PopoverContent", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.PopoverContent; }
+});
+Object.defineProperty(exports, "PopoverContext", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.PopoverContext; }
+});
+Object.defineProperty(exports, "PopoverTrigger", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.PopoverTrigger; }
+});
+Object.defineProperty(exports, "popoverContentVariants", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.popoverContentVariants; }
+});
+Object.defineProperty(exports, "usePopover", {
+  enumerable: true,
+  get: function () { return chunkQSPXPU72_js.usePopover; }
+});
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map

package/dist/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"popover.js"}

package/dist/ui/popover.mjs

@@ -0,0 +1,5 @@
+"use client";
+export { Popover, PopoverContent, PopoverContext, PopoverTrigger, popoverContentVariants, usePopover } from '../chunk-BC6M42HQ.mjs';
+import '../chunk-4D54YOL6.mjs';
+//# sourceMappingURL=popover.mjs.map
+//# sourceMappingURL=popover.mjs.map

package/dist/ui/popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"popover.mjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": [

package/src/design-system/command.ts

@@ -0,0 +1,80 @@
+export const zuiCommandOverlayBase =
+  "fixed inset-0 z-9999 bg-[var(--zui-command-overlay-bg,oklch(12.9%_0.042_264.695_/_0.6))] backdrop-blur-sm";
+
+export const zuiCommandTriggerBase =
+  "relative inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md border border-[color:var(--zui-command-trigger-border,#0000001a)] dark:border-[color:var(--zui-command-trigger-border-dark,#ffffff1a)] bg-[var(--zui-command-trigger-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-trigger-bg-dark,oklch(12.9%_0.042_264.695))] px-3 py-2 text-sm text-[color:var(--zui-command-trigger-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-command-trigger-fg-dark,oklch(86.9%_0.022_252.894))] transition hover:bg-black/5 dark:hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/40";
+
+export const zuiCommandContentBase =
+  "fixed left-1/2 top-[15%] z-9999 w-[calc(100%-2rem)] -translate-x-1/2 overflow-hidden rounded-xl border border-[color:var(--zui-command-content-border,#0000001a)] dark:border-[color:var(--zui-command-content-border-dark,#ffffff1a)] bg-[var(--zui-command-content-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-content-bg-dark,oklch(12.9%_0.042_264.695))] text-[color:var(--zui-command-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-command-content-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-command-content-shadow,0_12px_40px_rgba(15,23,42,0.18))] dark:shadow-[var(--zui-command-content-shadow-dark,0_24px_80px_rgba(15,23,42,0.6))] focus:outline-none";
+
+export const zuiCommandContentSizes = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+} as const;
+
+export const zuiCommandInputRowBase =
+  "flex items-center gap-2 border-b border-[color:var(--zui-command-input-border,#0000000f)] dark:border-[color:var(--zui-command-input-border-dark,#ffffff14)] px-4";
+
+export const zuiCommandInputBase =
+  "h-12 w-full bg-transparent text-sm text-[color:var(--zui-command-input-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-command-input-fg-dark,oklch(98.4%_0.003_247.858))] placeholder:text-[color:var(--zui-command-input-placeholder,oklch(55.1%_0.027_264.364))] dark:placeholder:text-[color:var(--zui-command-input-placeholder-dark,oklch(55.1%_0.027_264.364))] focus:outline-none";
+
+export const zuiCommandListBase =
+  "max-h-[min(60vh,420px)] overflow-y-auto overscroll-contain p-2";
+
+export const zuiCommandGroupHeadingBase =
+  "px-2 pb-1 pt-3 text-xs font-semibold uppercase tracking-[0.12em] text-[color:var(--zui-command-group-heading-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-group-heading-fg-dark,oklch(70.7%_0.022_261.325))]";
+
+export const zuiCommandItemBase =
+  "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-[color:var(--zui-command-item-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-command-item-fg-dark,oklch(86.9%_0.022_252.894))] transition-colors data-[active=true]:bg-[var(--zui-command-item-active-bg,oklch(95.1%_0.026_236.824))] dark:data-[active=true]:bg-[var(--zui-command-item-active-bg-dark,oklch(28.2%_0.091_267.935_/_0.55))] data-[active=true]:text-[color:var(--zui-command-item-active-fg,oklch(20.8%_0.042_265.755))] dark:data-[active=true]:text-[color:var(--zui-command-item-active-fg-dark,oklch(98.4%_0.003_247.858))] aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+
+export const zuiCommandSeparatorBase =
+  "my-1 h-px bg-[var(--zui-command-separator-bg,#0000000f)] dark:bg-[var(--zui-command-separator-bg-dark,#ffffff14)]";
+
+export const zuiCommandEmptyBase =
+  "px-3 py-8 text-center text-sm text-[color:var(--zui-command-empty-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-empty-fg-dark,oklch(70.7%_0.022_261.325))]";
+
+export const zuiCommandFooterBase =
+  "flex items-center gap-3 border-t border-[color:var(--zui-command-footer-border,#0000000f)] dark:border-[color:var(--zui-command-footer-border-dark,#ffffff14)] px-4 py-2 text-xs text-[color:var(--zui-command-footer-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-footer-fg-dark,oklch(70.7%_0.022_261.325))]";
+
+export const zuiCommandContentAppearances = {
+  default:
+    "bg-[var(--zui-command-content-default-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-content-default-bg-dark,oklch(12.9%_0.042_264.695))]",
+  glass:
+    "border-[color:var(--zui-command-content-glass-border,#00000026)] dark:border-[color:var(--zui-command-content-glass-border-dark,#ffffff26)] bg-[var(--zui-command-content-glass-bg,oklch(98.4%_0.003_247.858_/_0.7))] dark:bg-[var(--zui-command-content-glass-bg-dark,oklch(12.9%_0.042_264.695_/_0.7))] backdrop-blur-xl",
+  sky: "border-[color:var(--zui-command-content-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-command-content-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-command-content-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-command-content-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl",
+  rose: "border-[color:var(--zui-command-content-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-command-content-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-command-content-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-command-content-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  purple:
+    "border-[color:var(--zui-command-content-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-command-content-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-command-content-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-command-content-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  pink: "border-[color:var(--zui-command-content-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-command-content-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-command-content-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-command-content-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  orange:
+    "border-[color:var(--zui-command-content-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-command-content-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-command-content-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-command-content-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  yellow:
+    "border-[color:var(--zui-command-content-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-command-content-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-command-content-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-command-content-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl",
+  teal: "border-[color:var(--zui-command-content-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-command-content-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-command-content-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-command-content-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl",
+  indigo:
+    "border-[color:var(--zui-command-content-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-command-content-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-command-content-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-command-content-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl",
+  emerald:
+    "border-[color:var(--zui-command-content-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-command-content-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-command-content-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-command-content-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl",
+  gray: "border-[color:var(--zui-command-content-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-command-content-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-command-content-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-command-content-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl",
+  amber:
+    "border-[color:var(--zui-command-content-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-command-content-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-command-content-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-command-content-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl",
+  violet:
+    "border-[color:var(--zui-command-content-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-command-content-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-command-content-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-command-content-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl",
+  "gradient-blue":
+    "border-[color:var(--zui-command-content-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-command-content-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-br from-[var(--zui-command-content-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-command-content-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.85))] to-[var(--zui-command-content-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-command-content-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.85))] backdrop-blur-xl",
+  "gradient-green":
+    "border-[color:var(--zui-command-content-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-command-content-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-br from-[var(--zui-command-content-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-command-content-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.85))] to-[var(--zui-command-content-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-command-content-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.85))] backdrop-blur-xl",
+  "gradient-red":
+    "border-[color:var(--zui-command-content-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-command-content-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-br from-[var(--zui-command-content-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-command-content-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.85))] to-[var(--zui-command-content-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-command-content-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.85))] backdrop-blur-xl",
+  "gradient-yellow":
+    "border-[color:var(--zui-command-content-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-command-content-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-br from-[var(--zui-command-content-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-command-content-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.85))] to-[var(--zui-command-content-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-command-content-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.85))] backdrop-blur-xl",
+  "gradient-purple":
+    "border-[color:var(--zui-command-content-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-command-content-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-br from-[var(--zui-command-content-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-command-content-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.85))] to-[var(--zui-command-content-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-command-content-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.85))] backdrop-blur-xl",
+  "gradient-teal":
+    "border-[color:var(--zui-command-content-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-command-content-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-br from-[var(--zui-command-content-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-command-content-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.85))] to-[var(--zui-command-content-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-command-content-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.85))] backdrop-blur-xl",
+  "gradient-indigo":
+    "border-[color:var(--zui-command-content-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-command-content-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-br from-[var(--zui-command-content-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-command-content-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.85))] to-[var(--zui-command-content-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-command-content-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.85))] backdrop-blur-xl",
+  "gradient-pink":
+    "border-[color:var(--zui-command-content-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-command-content-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-br from-[var(--zui-command-content-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-command-content-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.85))] to-[var(--zui-command-content-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-command-content-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.85))] backdrop-blur-xl",
+} as const;

package/src/design-system/index.ts

@@ -6,6 +6,7 @@ export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
 export * from "./checkbox";
+export * from "./command";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -15,6 +16,7 @@ export * from "./file-upload";
 export * from "./inputs";
 export * from "./modal";
 export * from "./pagination";
+export * from "./popover";
 export * from "./progress";
 export * from "./radio-group";
 export * from "./select";

package/src/design-system/popover.ts

@@ -0,0 +1,66 @@
+export const zuiPopoverContentBase =
+  "absolute z-50 rounded-lg border shadow-lg transition-all duration-200 outline-none";
+
+export const zuiPopoverContentVariants = {
+  default:
+    "border-[color:var(--zui-popover-default-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-popover-default-border-dark,#ffffff1a)] bg-[var(--zui-popover-default-bg,#ffffff)] dark:bg-[var(--zui-popover-default-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-popover-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-popover-default-fg-dark,oklch(96.8%_0.007_247.896))]",
+  outline:
+    "border-[color:var(--zui-popover-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-popover-outline-border-dark,oklch(87.2%_0.01_258.338))] bg-[var(--zui-popover-outline-bg,#ffffff)] dark:bg-[var(--zui-popover-outline-bg-dark,#000000)] text-[color:var(--zui-popover-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-popover-outline-fg-dark,#ffffff)]",
+  ghost:
+    "border-transparent bg-[var(--zui-popover-ghost-bg,oklch(96.7%_0.003_264.542))] dark:bg-[var(--zui-popover-ghost-bg-dark,oklch(27.8%_0.033_256.848))] text-[color:var(--zui-popover-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-popover-ghost-fg-dark,#ffffffe6)]",
+  glass:
+    "border-[color:var(--zui-popover-glass-border,#00000026)] dark:border-[color:var(--zui-popover-glass-border-dark,#ffffff26)] bg-[var(--zui-popover-glass-bg,#ffffffb3)] dark:bg-[var(--zui-popover-glass-bg-dark,#020617b3)] text-[color:var(--zui-popover-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-popover-glass-fg-dark,#ffffff)] backdrop-blur-md",
+  emerald:
+    "border-[color:var(--zui-popover-emerald-border,oklch(43.2%_0.095_166.913_/_0.35))] bg-[var(--zui-popover-emerald-bg,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-popover-emerald-fg,oklch(37.8%_0.077_168.94))] dark:bg-[var(--zui-popover-emerald-bg-dark,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-popover-emerald-fg-dark,oklch(90.5%_0.093_164.15))]",
+  indigo:
+    "border-[color:var(--zui-popover-indigo-border,oklch(39.8%_0.195_277.366_/_0.35))] bg-[var(--zui-popover-indigo-bg,oklch(87%_0.065_274.039))] text-[color:var(--zui-popover-indigo-fg,oklch(35.9%_0.144_278.697))] dark:bg-[var(--zui-popover-indigo-bg-dark,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-popover-indigo-fg-dark,oklch(87%_0.065_274.039))]",
+  purple:
+    "border-[color:var(--zui-popover-purple-border,oklch(43.8%_0.218_303.724_/_0.35))] bg-[var(--zui-popover-purple-bg,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-popover-purple-fg,oklch(38.1%_0.176_304.987))] dark:bg-[var(--zui-popover-purple-bg-dark,oklch(29.1%_0.149_302.717))] dark:text-[color:var(--zui-popover-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
+  pink:
+    "border-[color:var(--zui-popover-pink-border,oklch(45.9%_0.187_3.815_/_0.35))] bg-[var(--zui-popover-pink-bg,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-popover-pink-fg,oklch(40.8%_0.153_2.432))] dark:bg-[var(--zui-popover-pink-bg-dark,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-popover-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
+  rose:
+    "border-[color:var(--zui-popover-rose-border,oklch(45.5%_0.188_13.697_/_0.35))] bg-[var(--zui-popover-rose-bg,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-popover-rose-fg,oklch(41%_0.159_10.272))] dark:bg-[var(--zui-popover-rose-bg-dark,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-popover-rose-fg-dark,oklch(89.2%_0.058_10.001))]",
+  sky:
+    "border-[color:var(--zui-popover-sky-border,oklch(44.3%_0.11_240.79_/_0.35))] bg-[var(--zui-popover-sky-bg,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-popover-sky-fg,oklch(39.1%_0.09_240.876))] dark:bg-[var(--zui-popover-sky-bg-dark,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-popover-sky-fg-dark,oklch(90.1%_0.058_230.902))]",
+  teal:
+    "border-[color:var(--zui-popover-teal-border,oklch(43.7%_0.078_188.216_/_0.35))] bg-[var(--zui-popover-teal-bg,oklch(91%_0.096_180.426))] text-[color:var(--zui-popover-teal-fg,oklch(38.6%_0.063_188.416))] dark:bg-[var(--zui-popover-teal-bg-dark,oklch(27.7%_0.046_192.524))] dark:text-[color:var(--zui-popover-teal-fg-dark,oklch(91%_0.096_180.426))]",
+  yellow:
+    "border-[color:var(--zui-popover-yellow-border,oklch(47.6%_0.114_61.907_/_0.35))] bg-[var(--zui-popover-yellow-bg,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-popover-yellow-fg,oklch(42.1%_0.095_57.708))] dark:bg-[var(--zui-popover-yellow-bg-dark,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-popover-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
+  orange:
+    "border-[color:var(--zui-popover-orange-border,oklch(47%_0.157_37.304_/_0.35))] bg-[var(--zui-popover-orange-bg,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-popover-orange-fg,oklch(40.8%_0.123_38.172))] dark:bg-[var(--zui-popover-orange-bg-dark,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-popover-orange-fg-dark,oklch(90.1%_0.076_70.697))]",
+  green:
+    "border-[color:var(--zui-popover-green-border,oklch(44.8%_0.119_151.328_/_0.35))] bg-[var(--zui-popover-green-bg,oklch(92.5%_0.084_155.995))] text-[color:var(--zui-popover-green-fg,oklch(39.3%_0.095_152.535))] dark:bg-[var(--zui-popover-green-bg-dark,oklch(26.6%_0.065_152.934))] dark:text-[color:var(--zui-popover-green-fg-dark,oklch(92.5%_0.084_155.995))]",
+  "gradient-blue":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-blue-from,oklch(42.4%_0.199_265.638))] to-[var(--zui-popover-gradient-blue-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-popover-gradient-blue-fg,#ffffff)]",
+  "gradient-green":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-green-from,oklch(44.8%_0.119_151.328))] to-[var(--zui-popover-gradient-green-to,oklch(45.3%_0.124_130.933))] text-[color:var(--zui-popover-gradient-green-fg,#ffffff)]",
+  "gradient-red":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-red-from,oklch(44.4%_0.177_26.899))] to-[var(--zui-popover-gradient-red-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-popover-gradient-red-fg,#ffffff)]",
+  "gradient-yellow":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-yellow-from,oklch(47.6%_0.114_61.907))] to-[var(--zui-popover-gradient-yellow-to,oklch(47%_0.157_37.304))] text-[color:var(--zui-popover-gradient-yellow-fg,#ffffff)]",
+  "gradient-purple":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-purple-from,oklch(43.8%_0.218_303.724))] to-[var(--zui-popover-gradient-purple-to,oklch(45.9%_0.187_3.815))] text-[color:var(--zui-popover-gradient-purple-fg,#ffffff)]",
+  "gradient-teal":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-teal-from,oklch(43.7%_0.078_188.216))] to-[var(--zui-popover-gradient-teal-to,oklch(45%_0.085_224.283))] text-[color:var(--zui-popover-gradient-teal-fg,#ffffff)]",
+  "gradient-indigo":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-indigo-from,oklch(39.8%_0.195_277.366))] to-[var(--zui-popover-gradient-indigo-to,oklch(43.8%_0.218_303.724))] text-[color:var(--zui-popover-gradient-indigo-fg,#ffffff)]",
+  "gradient-pink":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-pink-from,oklch(45.9%_0.187_3.815))] to-[var(--zui-popover-gradient-pink-to,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-popover-gradient-pink-fg,#ffffff)]",
+  "gradient-orange":
+    "border-transparent bg-linear-to-r from-[var(--zui-popover-gradient-orange-from,oklch(47%_0.157_37.304))] to-[var(--zui-popover-gradient-orange-to,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-popover-gradient-orange-fg,#ffffff)]",
+} as const;
+
+export const zuiPopoverContentSizes = {
+  sm: "p-3 text-sm",
+  md: "p-4 text-sm",
+  lg: "p-5 text-base",
+} as const;
+
+export const zuiPopoverContentWidths = {
+  xs: "min-w-50 md:min-w-xs",
+  sm: "min-w-50 md:min-w-sm",
+  md: "min-w-50 md:min-w-md",
+  lg: "min-w-50 md:min-w-lg",
+  xl: "min-w-50 md:min-w-xl",
+  "2xl": "min-w-50 md:min-w-2xl",
+} as const;

package/src/ui/command/animated/animations.ts

@@ -0,0 +1,29 @@
+import type { CommandAnimationPresets } from "./types";
+
+export const commandOverlayAnimationPresets: CommandAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.18 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.97 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.97 },
+    transition: { type: "spring", stiffness: 440, damping: 34 },
+  },
+  "slide-down": {
+    initial: { opacity: 0, y: -20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -12 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 12 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+};

package/src/ui/command/animated/command-content-animated.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+
+import { commandOverlayAnimationPresets } from "./animations";
+import type { CommandContentAnimatedProps } from "./types";
+import { CommandContentLayer } from "../command-base";
+
+export function CommandContentAnimated({
+  className,
+  size,
+  appearance,
+  animation = "slide-down",
+  children,
+  ref,
+  id,
+  style,
+}: CommandContentAnimatedProps) {
+  const reduceMotion = useReducedMotion();
+  const overlayMotion = commandOverlayAnimationPresets.fade;
+  const panelMotion =
+    commandOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+
+  return (
+    <CommandContentLayer
+      appearance={appearance}
+      className={className}
+      componentName="CommandContent"
+      id={id}
+      ref={ref}
+      renderOverlay={(overlayProps) => (
+        <motion.div
+          {...overlayProps}
+          initial={overlayMotion.initial}
+          animate={overlayMotion.animate}
+          exit={overlayMotion.exit}
+          transition={overlayMotion.transition}
+        />
+      )}
+      renderPanel={(panelProps) => (
+        <motion.div
+          {...panelProps}
+          initial={animation === "none" ? false : panelMotion.initial}
+          animate={animation === "none" ? undefined : panelMotion.animate}
+          exit={animation === "none" ? undefined : panelMotion.exit}
+          transition={panelMotion.transition}
+        />
+      )}
+      renderPresence={(content) => <AnimatePresence>{content}</AnimatePresence>}
+      size={size}
+      style={style}
+    >
+      {children}
+    </CommandContentLayer>
+  );
+}
+
+CommandContentAnimated.displayName = "CommandContent";

package/src/ui/command/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { CommandContentAnimated } from "./command-content-animated";
+export type {
+  CommandContentAnimatedProps,
+  CommandAnimation,
+  CommandAnimationPresets,
+  CommandPresetMotionProps,
+} from "./types";
+export { commandOverlayAnimationPresets } from "./animations";

package/src/ui/command/animated/types.ts

@@ -0,0 +1,23 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { CommandContentProps } from "../types";
+
+export type CommandAnimation =
+  | "none"
+  | "fade"
+  | "scale"
+  | "slide-down"
+  | "slide-up";
+
+export type CommandContentAnimatedProps = CommandContentProps & {
+  animation?: CommandAnimation;
+};
+
+export type CommandPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "exit" | "transition"
+>;
+
+export type CommandAnimationPresets = Record<
+  CommandAnimation,
+  CommandPresetMotionProps
+>;