@codefast/ui 0.0.4 → 0.0.6

package/dist/toggle.mjs

@@ -1,2 +1,11 @@
-"use client";import{a,b}from"./chunk-WZ4XIF6U.mjs";import"./chunk-JTI7KCLO.mjs";export{b as Toggle,a as toggleVariants};
+"use client";
+import {
+  Toggle,
+  toggleVariants
+} from "./chunk-T52N6ZBP.mjs";
+import "./chunk-UG3URV2Z.mjs";
+export {
+  Toggle,
+  toggleVariants
+};
 //# sourceMappingURL=toggle.mjs.map

package/dist/tooltip.d.mts

@@ -4,8 +4,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
-declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 
-export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.d.ts

@@ -4,8 +4,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
-declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 
-export { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -1,2 +1,42 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";var _chunkQZCQ42BPjs = require('./chunk-QZCQ42BP.js');var _react = require('react'); var i = _interopRequireWildcard(_react);var _reacttooltip = require('@radix-ui/react-tooltip'); var t = _interopRequireWildcard(_reacttooltip);var _jsxruntime = require('react/jsx-runtime');var n=t.Provider,f= exports.Tooltip =t.Root,T= exports.TooltipTrigger =t.Trigger,c= exports.TooltipPortal =t.Portal,s= exports.TooltipArrow =i.forwardRef((o,e)=>_jsxruntime.jsx.call(void 0, t.Arrow,{ref:e,className:"fill-primary",...o}));s.displayName=t.Arrow.displayName;var p=i.forwardRef(({className:o,sideOffset:e=4,...r},l)=>_jsxruntime.jsx.call(void 0, t.Content,{ref:l,sideOffset:e,className:_chunkQZCQ42BPjs.b.call(void 0, "bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs","data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95","data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2","data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2","data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2","data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95","data-[state=closed]:data-[side=top]:slide-out-to-bottom-2","data-[state=closed]:data-[side=right]:slide-out-to-left-2","data-[state=closed]:data-[side=bottom]:slide-out-to-top-2","data-[state=closed]:data-[side=left]:slide-out-to-right-2",o),...r}));p.displayName=t.Content.displayName;exports.Tooltip = f; exports.TooltipArrow = s; exports.TooltipContent = p; exports.TooltipPortal = c; exports.TooltipProvider = n; exports.TooltipTrigger = T;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
+
+// src/tooltip.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reacttooltip = require('@radix-ui/react-tooltip'); var TooltipPrimitive = _interopRequireWildcard(_reacttooltip);
+var _jsxruntime = require('react/jsx-runtime');
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: _chunkG3NP7M2Njs.cn.call(void 0, 
+      "bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md px-3 py-1.5 text-xs focus:outline-none",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  TooltipPrimitive.Arrow,
+  {
+    ref,
+    className: _chunkG3NP7M2Njs.cn.call(void 0, "fill-primary", className),
+    ...props
+  }
+));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+
+
+
+
+
+
+exports.Tooltip = Tooltip; exports.TooltipArrow = TooltipArrow; exports.TooltipContent = TooltipContent; exports.TooltipProvider = TooltipProvider; exports.TooltipTrigger = TooltipTrigger;
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tooltip.tsx"],"names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipPortal","TooltipArrow","props","ref","TooltipContent","className","sideOffset","cn"],"mappings":"qDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAmChC,cAAAC,MAAA,oBA5BF,IAAMC,EAAmC,WAMnCC,EAA2B,OAM3BC,EAAkC,UAMlCC,EAAiC,SAMjCC,EAAqB,aAGzB,CAACC,EAAOC,IACRP,EAAkB,QAAjB,CAAuB,IAAKO,EAAK,UAAU,eAAgB,GAAGD,EAAO,CACvE,EACDD,EAAa,YAA+B,QAAM,YAMlD,IAAMG,EAAuB,aAG3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGJ,CAAM,EAAGC,IAC1CP,EAAkB,UAAjB,CACC,IAAKO,EACL,WAAYG,EACZ,UAAWC,EACT,yFACA,gHACA,mEACA,mEACA,mEACA,mEACA,iGACA,4DACA,4DACA,4DACA,4DACAF,CACF,EACC,GAAGH,EACN,CACD,EACDE,EAAe,YAA+B,UAAQ","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipPortal\n * -------------------------------------------------------------------------- */\n\nconst TooltipPortal = TooltipPrimitive.Portal;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  TooltipPrimitive.TooltipArrowProps\n>((props, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className=\"fill-primary\" {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipPrimitive.TooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs\",\n      \"data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95\",\n      \"data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2\",\n      \"data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2\",\n      \"data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2\",\n      \"data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2\",\n      \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n      \"data-[state=closed]:data-[side=top]:slide-out-to-bottom-2\",\n      \"data-[state=closed]:data-[side=right]:slide-out-to-left-2\",\n      \"data-[state=closed]:data-[side=bottom]:slide-out-to-top-2\",\n      \"data-[state=closed]:data-[side=left]:slide-out-to-right-2\",\n      className,\n    )}\n    {...props}\n  />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  Tooltip,\n  TooltipPortal,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipArrow,\n};\n"]}
+{"version":3,"sources":["../src/tooltip.tsx"],"names":[],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,sBAAsB;AA8B9B;AAvBJ,IAAM,kBAAmC;AAMzC,IAAM,UAA2B;AAMjC,IAAM,iBAAkC;AAMxC,IAAM,iBAAuB,iBAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C,oBAAkB,yBAAjB,EACC;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,eAAe,cAA+B,yBAAQ;AAMtD,IAAM,eAAqB,iBAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gBAAgB,SAAS;AAAA,IACtC,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAA+B,uBAAM","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipPrimitive.TooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md px-3 py-1.5 text-xs focus:outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  TooltipPrimitive.TooltipArrowProps\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn(\"fill-primary\", className)}\n    {...props}\n  />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n};\n"]}

package/dist/tooltip.mjs

@@ -1,2 +1,42 @@
-"use client";import{b as a}from"./chunk-JTI7KCLO.mjs";import*as i from"react";import*as t from"@radix-ui/react-tooltip";import{jsx as d}from"react/jsx-runtime";var n=t.Provider,f=t.Root,T=t.Trigger,c=t.Portal,s=i.forwardRef((o,e)=>d(t.Arrow,{ref:e,className:"fill-primary",...o}));s.displayName=t.Arrow.displayName;var p=i.forwardRef(({className:o,sideOffset:e=4,...r},l)=>d(t.Content,{ref:l,sideOffset:e,className:a("bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs","data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95","data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2","data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2","data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2","data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95","data-[state=closed]:data-[side=top]:slide-out-to-bottom-2","data-[state=closed]:data-[side=right]:slide-out-to-left-2","data-[state=closed]:data-[side=bottom]:slide-out-to-top-2","data-[state=closed]:data-[side=left]:slide-out-to-right-2",o),...r}));p.displayName=t.Content.displayName;export{f as Tooltip,s as TooltipArrow,p as TooltipContent,c as TooltipPortal,n as TooltipProvider,T as TooltipTrigger};
+"use client";
+import {
+  cn
+} from "./chunk-UG3URV2Z.mjs";
+
+// src/tooltip.tsx
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md px-3 py-1.5 text-xs focus:outline-none",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Arrow,
+  {
+    ref,
+    className: cn("fill-primary", className),
+    ...props
+  }
+));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};
 //# sourceMappingURL=tooltip.mjs.map

package/dist/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipPortal\n * -------------------------------------------------------------------------- */\n\nconst TooltipPortal = TooltipPrimitive.Portal;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  TooltipPrimitive.TooltipArrowProps\n>((props, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className=\"fill-primary\" {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipPrimitive.TooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs\",\n      \"data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95\",\n      \"data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2\",\n      \"data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2\",\n      \"data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2\",\n      \"data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2\",\n      \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n      \"data-[state=closed]:data-[side=top]:slide-out-to-bottom-2\",\n      \"data-[state=closed]:data-[side=right]:slide-out-to-left-2\",\n      \"data-[state=closed]:data-[side=bottom]:slide-out-to-top-2\",\n      \"data-[state=closed]:data-[side=left]:slide-out-to-right-2\",\n      className,\n    )}\n    {...props}\n  />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  Tooltip,\n  TooltipPortal,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipArrow,\n};\n"],"mappings":"sDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAmChC,cAAAC,MAAA,oBA5BF,IAAMC,EAAmC,WAMnCC,EAA2B,OAM3BC,EAAkC,UAMlCC,EAAiC,SAMjCC,EAAqB,aAGzB,CAACC,EAAOC,IACRP,EAAkB,QAAjB,CAAuB,IAAKO,EAAK,UAAU,eAAgB,GAAGD,EAAO,CACvE,EACDD,EAAa,YAA+B,QAAM,YAMlD,IAAMG,EAAuB,aAG3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGJ,CAAM,EAAGC,IAC1CP,EAAkB,UAAjB,CACC,IAAKO,EACL,WAAYG,EACZ,UAAWC,EACT,yFACA,gHACA,mEACA,mEACA,mEACA,mEACA,iGACA,4DACA,4DACA,4DACA,4DACAF,CACF,EACC,GAAGH,EACN,CACD,EACDE,EAAe,YAA+B,UAAQ","names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipPortal","TooltipArrow","props","ref","TooltipContent","className","sideOffset","cn"]}
+{"version":3,"sources":["../src/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipPrimitive.TooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md px-3 py-1.5 text-xs focus:outline-none\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  TooltipPrimitive.TooltipArrowProps\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn(\"fill-primary\", className)}\n    {...props}\n  />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n};\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,YAAY,sBAAsB;AA8B9B;AAvBJ,IAAM,kBAAmC;AAMzC,IAAM,UAA2B;AAMjC,IAAM,iBAAkC;AAMxC,IAAM,iBAAuB,iBAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C,oBAAkB,yBAAjB,EACC;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,eAAe,cAA+B,yBAAQ;AAMtD,IAAM,eAAqB,iBAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gBAAgB,SAAS;AAAA,IACtC,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAA+B,uBAAM;","names":[]}

package/dist/utils.js

@@ -1,2 +1,11 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkQZCQ42BPjs = require('./chunk-QZCQ42BP.js');exports.cn = _chunkQZCQ42BPjs.b; exports.compose = _chunkQZCQ42BPjs.c; exports.cva = _chunkQZCQ42BPjs.a;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
+
+
+
+
+exports.cn = _chunkG3NP7M2Njs.cn; exports.compose = _chunkG3NP7M2Njs.compose; exports.cva = _chunkG3NP7M2Njs.cva;
 //# sourceMappingURL=utils.js.map

package/dist/utils.mjs

@@ -1,2 +1,11 @@
-import{a,b,c}from"./chunk-JTI7KCLO.mjs";export{b as cn,c as compose,a as cva};
+import {
+  cn,
+  compose,
+  cva
+} from "./chunk-UG3URV2Z.mjs";
+export {
+  cn,
+  compose,
+  cva
+};
 //# sourceMappingURL=utils.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
@@ -270,11 +270,11 @@
     "cmdk": "^1.0.0",
     "cva": "1.0.0-beta.1",
     "embla-carousel-react": "^8.0.0",
-    "input-otp": "^1.2.2",
+    "input-otp": "^1.2.3",
     "next-themes": "^0.3.0",
     "react-day-picker": "^8.10.0",
     "react-hook-form": "^7.51.1",
-    "react-resizable-panels": "^2.0.13",
+    "react-resizable-panels": "^2.0.16",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "vaul": "^0.9.0"
@@ -283,16 +283,16 @@
     "@turbo/gen": "^1.13.0",
     "@types/eslint": "^8.56.6",
     "@types/node": "^20.11.30",
-    "@types/react": "^18.2.69",
+    "@types/react": "^18.2.73",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.2",
     "typescript": "^5.4.3",
-    "@codefast/eslint-config": "0.0.4",
+    "@codefast/eslint-config": "0.0.5",
     "@codefast/typescript-config": "0.0.1"
   },
   "peerDependencies": {

package/src/accordion.tsx

@@ -39,8 +39,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline",
-        "[&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}
@@ -62,10 +61,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className={cn(
-      "overflow-hidden text-sm",
-      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-    )}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>

package/src/alert-dialog.tsx

@@ -17,33 +17,6 @@ const AlertDialog = AlertDialogPrimitive.Root;
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-/* -----------------------------------------------------------------------------
- * Component: AlertDialogPortal
- * -------------------------------------------------------------------------- */
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-/* -----------------------------------------------------------------------------
- * Component: AlertDialogOverlay
- * -------------------------------------------------------------------------- */
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  AlertDialogPrimitive.AlertDialogOverlayProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
 /* -----------------------------------------------------------------------------
  * Component: AlertDialogContent
  * -------------------------------------------------------------------------- */
@@ -52,19 +25,17 @@ const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   AlertDialogPrimitive.AlertDialogContentProps
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
+  <AlertDialogPrimitive.Portal>
+    <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
-        "data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2",
+        "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
         className,
       )}
       {...props}
     />
-  </AlertDialogPortal>
+  </AlertDialogPrimitive.Portal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
@@ -177,8 +148,6 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,

package/src/alert.tsx

@@ -7,7 +7,7 @@ import { cn, cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const alertVariants = cva({
-  base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  base: "relative w-full rounded-lg border p-4 text-sm [&>svg+div]:-translate-y-[3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
   variants: {
     variant: {
       default: "bg-background text-foreground [&>svg]:text-foreground",

package/src/avatar.tsx

@@ -15,7 +15,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex size-10 shrink-0 overflow-hidden rounded-full",
       className,
     )}
     {...props}

package/src/badge.tsx

@@ -6,7 +6,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const badgeVariants = cva({
-  base: "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  base: "focus:ring-ring focus:ring-offset-background inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   variants: {
     variant: {
       default:

package/src/breadcrumb.tsx

@@ -124,7 +124,7 @@ function BreadcrumbEllipsis({
     <span
       role="presentation"
       aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
+      className={cn("flex size-4 items-center justify-center", className)}
       {...props}
     >
       <DotsHorizontalIcon className="size-4" />

package/src/button.tsx

@@ -8,7 +8,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const buttonVariants = cva({
-  base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+  base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
@@ -22,10 +22,10 @@ const buttonVariants = cva({
         "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
     },
     size: {
-      default: "h-9 px-4",
-      lg: "h-10 px-8",
-      sm: "h-8 px-3 text-xs",
-      icon: "h-9 w-9",
+      default: "h-10 px-4",
+      sm: "h-9 px-3",
+      lg: "h-11 px-8",
+      icon: "size-10",
     },
   },
   defaultVariants: {

package/src/calendar.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import {
+  type DateRange,
   DayPicker,
   type DayPickerProps,
   type StyledComponent,
-  type DateRange,
 } from "react-day-picker";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { buttonVariants } from "./button";
@@ -47,24 +47,23 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: buttonVariants({
           variant: "outline",
-          className: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          className: "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         }),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-xs",
         row: "flex w-full mt-2",
         cell: cn(
-          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            ? "[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
             : "[&:has([aria-selected])]:rounded-md",
         ),
         day: buttonVariants({
           variant: "ghost",
-          className: "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+          className: "size-9 p-0 font-normal aria-selected:opacity-100",
         }),
         day_range_start: "day-range-start",
         day_range_end: "day-range-end",

package/src/card.tsx

@@ -12,7 +12,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bg-card text-card-foreground rounded-xl border shadow",
+      "bg-card text-card-foreground rounded-lg border shadow-sm",
       className,
     )}
     {...props}

package/src/checkbox.tsx

@@ -16,8 +16,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-compound focus-visible:ring-ring peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-      "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+      "border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

package/src/command.tsx

@@ -34,16 +34,7 @@ function CommandDialog({ children, ...props }: DialogProps): React.JSX.Element {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command
-          className={cn(
-            "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium",
-            "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
-            "[&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12",
-            "[&_[cmdk-input-wrapper]_svg]:size-5",
-            "[&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3",
-            "[&_[cmdk-item]_svg]:size-5",
-          )}
-        >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>
@@ -59,12 +50,12 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
+  <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -116,8 +107,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "text-foreground overflow-hidden p-1",
-      "[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
       className,
     )}
     {...props}
@@ -152,8 +142,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
       className,
     )}
     {...props}