@codefast/ui 0.0.34 → 0.0.35

package/dist/toggle-group.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { createToggleGroupScope } from \"@radix-ui/react-toggle-group\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { toggleVariants, type ToggleVariantsProps } from \"./toggle\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: ToggleGroup\n * -------------------------------------------------------------------------- */\n\nconst TOGGLE_GROUP_NAME = \"ToggleGroup\";\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\n\nconst [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);\n\nconst useToggleGroupScope = createToggleGroupScope();\n\nconst [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<ToggleVariantsProps>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & ToggleVariantsProps;\n\nconst ToggleGroup = React.forwardRef<ToggleGroupElement, ToggleGroupProps>(\n  ({ __scopeToggleGroup, className, variant, size, children, ...props }: ScopedProps<ToggleGroupProps>, ref) => {\n    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);\n\n    return (\n      <ToggleGroupProvider scope={__scopeToggleGroup} size={size} variant={variant}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          className={cn(\"flex items-center justify-center gap-1\", className)}\n          {...toggleGroupScope}\n          {...props}\n        >\n          {children}\n        </ToggleGroupPrimitive.Root>\n      </ToggleGroupProvider>\n    );\n  },\n);\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: ToggleGroupItem\n * -------------------------------------------------------------------------- */\n\nconst TOGGLE_GROUP_ITEM_NAME = \"ToggleGroupItem\";\n\ntype ToggleGroupItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n  ({ __scopeToggleGroup, className, children, ...props }: ScopedProps<ToggleGroupItemProps>, ref) => {\n    const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);\n    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref}\n        className={toggleVariants({ ...context, className })}\n        {...toggleGroupScope}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps };\n"],"mappings":"+FAEA,UAAYA,MAAW,QACvB,UAAYC,MAA0B,+BACtC,OAAS,0BAAAC,MAA8B,+BACvC,OAAS,sBAAAC,MAAsC,0BA2BvC,cAAAC,MAAA,oBAnBR,IAAMC,EAAoB,cAIpB,CAACC,CAAwB,EAAIC,EAAmBF,EAAmB,CAACG,CAAsB,CAAC,EAE3FC,EAAsBD,EAAuB,EAE7C,CAACE,EAAqBC,CAAqB,EAAIL,EAA8CD,CAAiB,EAK9GO,EAAoB,aACxB,CAAC,CAAE,mBAAAC,EAAoB,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAkCC,IAAQ,CAC5G,IAAMC,EAAmBX,EAAoBI,CAAkB,EAE/D,OACET,EAACM,EAAA,CAAoB,MAAOG,EAAoB,KAAMG,EAAM,QAASD,EACnE,SAAAX,EAAsB,OAArB,CACC,IAAKe,EACL,UAAWE,EAAG,yCAA0CP,CAAS,EAChE,GAAGM,EACH,GAAGF,EAEH,SAAAD,EACH,EACF,CAEJ,CACF,EAEAL,EAAY,YAAcP,EAM1B,IAAMiB,EAAyB,kBAKzBC,EAAwB,aAC5B,CAAC,CAAE,mBAAAV,EAAoB,UAAAC,EAAW,SAAAG,EAAU,GAAGC,CAAM,EAAsCC,IAAQ,CACjG,IAAMK,EAAUb,EAAsBW,EAAwBT,CAAkB,EAC1EO,EAAmBX,EAAoBI,CAAkB,EAE/D,OACET,EAAsB,OAArB,CACC,IAAKe,EACL,UAAWM,EAAe,CAAE,GAAGD,EAAS,UAAAV,CAAU,CAAC,EAClD,GAAGM,EACH,GAAGF,EAEH,SAAAD,EACH,CAEJ,CACF,EAEAM,EAAgB,YAAcD","names":["React","ToggleGroupPrimitive","createToggleGroupScope","createContextScope","jsx","TOGGLE_GROUP_NAME","createToggleGroupContext","createContextScope","createToggleGroupScope","useToggleGroupScope","ToggleGroupProvider","useToggleGroupContext","ToggleGroup","__scopeToggleGroup","className","variant","size","children","props","ref","toggleGroupScope","cn","TOGGLE_GROUP_ITEM_NAME","ToggleGroupItem","context","toggleVariants"]}
+{"version":3,"sources":["../src/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { createToggleGroupScope } from \"@radix-ui/react-toggle-group\";\nimport { createContextScope, type Scope } from \"@radix-ui/react-context\";\nimport { toggleVariants, type ToggleVariantsProps } from \"./toggle\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: ToggleGroup\n * -------------------------------------------------------------------------- */\n\nconst TOGGLE_GROUP_NAME = \"ToggleGroup\";\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\n\nconst [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);\n\nconst useToggleGroupScope = createToggleGroupScope();\n\nconst [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<ToggleVariantsProps>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & ToggleVariantsProps;\n\nconst ToggleGroup = React.forwardRef<ToggleGroupElement, ToggleGroupProps>(\n  ({ __scopeToggleGroup, children, className, variant, size, ...props }: ScopedProps<ToggleGroupProps>, ref) => {\n    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);\n\n    return (\n      <ToggleGroupProvider scope={__scopeToggleGroup} size={size} variant={variant}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          className={cn(\"flex items-center justify-center gap-1\", className)}\n          {...toggleGroupScope}\n          {...props}\n        >\n          {children}\n        </ToggleGroupPrimitive.Root>\n      </ToggleGroupProvider>\n    );\n  },\n);\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------\n * Component: ToggleGroupItem\n * -------------------------------------------------------------------------- */\n\nconst TOGGLE_GROUP_ITEM_NAME = \"ToggleGroupItem\";\n\ntype ToggleGroupItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n  ({ __scopeToggleGroup, children, className, ...props }: ScopedProps<ToggleGroupItemProps>, ref) => {\n    const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);\n    const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref}\n        className={toggleVariants({ ...context, className })}\n        {...toggleGroupScope}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps };\n"],"mappings":"+FAEA,UAAYA,MAAW,QACvB,UAAYC,MAA0B,+BACtC,OAAS,0BAAAC,MAA8B,+BACvC,OAAS,sBAAAC,MAAsC,0BA2BvC,cAAAC,MAAA,oBAnBR,IAAMC,EAAoB,cAIpB,CAACC,CAAwB,EAAIC,EAAmBF,EAAmB,CAACG,CAAsB,CAAC,EAE3FC,EAAsBD,EAAuB,EAE7C,CAACE,EAAqBC,CAAqB,EAAIL,EAA8CD,CAAiB,EAK9GO,EAAoB,aACxB,CAAC,CAAE,mBAAAC,EAAoB,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,GAAGC,CAAM,EAAkCC,IAAQ,CAC5G,IAAMC,EAAmBX,EAAoBI,CAAkB,EAE/D,OACET,EAACM,EAAA,CAAoB,MAAOG,EAAoB,KAAMI,EAAM,QAASD,EACnE,SAAAZ,EAAsB,OAArB,CACC,IAAKe,EACL,UAAWE,EAAG,yCAA0CN,CAAS,EAChE,GAAGK,EACH,GAAGF,EAEH,SAAAJ,EACH,EACF,CAEJ,CACF,EAEAF,EAAY,YAAcP,EAM1B,IAAMiB,EAAyB,kBAKzBC,EAAwB,aAC5B,CAAC,CAAE,mBAAAV,EAAoB,SAAAC,EAAU,UAAAC,EAAW,GAAGG,CAAM,EAAsCC,IAAQ,CACjG,IAAMK,EAAUb,EAAsBW,EAAwBT,CAAkB,EAC1EO,EAAmBX,EAAoBI,CAAkB,EAE/D,OACET,EAAsB,OAArB,CACC,IAAKe,EACL,UAAWM,EAAe,CAAE,GAAGD,EAAS,UAAAT,CAAU,CAAC,EAClD,GAAGK,EACH,GAAGF,EAEH,SAAAJ,EACH,CAEJ,CACF,EAEAS,EAAgB,YAAcD","names":["React","ToggleGroupPrimitive","createToggleGroupScope","createContextScope","jsx","TOGGLE_GROUP_NAME","createToggleGroupContext","createContextScope","createToggleGroupScope","useToggleGroupScope","ToggleGroupProvider","useToggleGroupContext","ToggleGroup","__scopeToggleGroup","children","className","variant","size","props","ref","toggleGroupScope","cn","TOGGLE_GROUP_ITEM_NAME","ToggleGroupItem","context","toggleVariants"]}

package/dist/tooltip.js

@@ -1,2 +1,2 @@
-"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 a = _interopRequireWildcard(_react);var _reacttooltip = require('@radix-ui/react-tooltip'); var t = _interopRequireWildcard(_reacttooltip);var _jsxruntime = require('react/jsx-runtime');var m=t.Provider,T= exports.Tooltip =t.Root,P= exports.TooltipTrigger =t.Trigger,d= exports.TooltipContent =a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>_jsxruntime.jsx.call(void 0, t.Portal,{children:_jsxruntime.jsx.call(void 0, t.Content,{ref:l,sideOffset:e,className:_chunkQZCQ42BPjs.b.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",o),...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>_jsxruntime.jsx.call(void 0, t.Arrow,{ref:i,className:_chunkQZCQ42BPjs.b.call(void 0, "fill-primary",o),...e}));s.displayName=t.Arrow.displayName;exports.Tooltip = T; exports.TooltipArrow = s; exports.TooltipContent = d; exports.TooltipProvider = m; exports.TooltipTrigger = P;
+"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 a = _interopRequireWildcard(_react);var _reacttooltip = require('@radix-ui/react-tooltip'); var t = _interopRequireWildcard(_reacttooltip);var _jsxruntime = require('react/jsx-runtime');var m=t.Provider,T= exports.Tooltip =t.Root,P= exports.TooltipTrigger =t.Trigger,d= exports.TooltipContent =a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>_jsxruntime.jsx.call(void 0, t.Portal,{children:_jsxruntime.jsx.call(void 0, t.Content,{ref:l,sideOffset:e,className:_chunkQZCQ42BPjs.b.call(void 0, "bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in 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 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",o),...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>_jsxruntime.jsx.call(void 0, t.Arrow,{ref:i,className:_chunkQZCQ42BPjs.b.call(void 0, "fill-primary",o),...e}));s.displayName=t.Arrow.displayName;exports.Tooltip = T; exports.TooltipArrow = s; exports.TooltipContent = d; exports.TooltipProvider = m; exports.TooltipTrigger = P;
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tooltip.tsx"],"names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"],"mappings":"qDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,WAAYF,EACZ,UAAWG,EACT,kwBACAJ,CACF,EACC,GAAGE,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","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\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...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\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(\"fill-primary\", className)} {...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  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"]}
+{"version":3,"sources":["../src/tooltip.tsx"],"names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"],"mappings":"qDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,WAAYF,EACZ,UAAWG,EACT,8vBACAJ,CACF,EACC,GAAGE,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","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\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...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 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 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\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(\"fill-primary\", className)} {...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  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"]}

package/dist/tooltip.mjs

@@ -1,2 +1,2 @@
-"use client";import{b as r}from"./chunk-JTI7KCLO.mjs";import*as a from"react";import*as t from"@radix-ui/react-tooltip";import{jsx as p}from"react/jsx-runtime";var m=t.Provider,T=t.Root,P=t.Trigger,d=a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>p(t.Portal,{children:p(t.Content,{ref:l,sideOffset:e,className:r("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",o),...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>p(t.Arrow,{ref:i,className:r("fill-primary",o),...e}));s.displayName=t.Arrow.displayName;export{T as Tooltip,s as TooltipArrow,d as TooltipContent,m as TooltipProvider,P as TooltipTrigger};
+"use client";import{b as r}from"./chunk-JTI7KCLO.mjs";import*as a from"react";import*as t from"@radix-ui/react-tooltip";import{jsx as p}from"react/jsx-runtime";var m=t.Provider,T=t.Root,P=t.Trigger,d=a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>p(t.Portal,{children:p(t.Content,{ref:l,sideOffset:e,className:r("bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in 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 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",o),...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>p(t.Arrow,{ref:i,className:r("fill-primary",o),...e}));s.displayName=t.Arrow.displayName;export{T as Tooltip,s as TooltipArrow,d as TooltipContent,m as TooltipProvider,P as 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\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...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\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(\"fill-primary\", className)} {...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  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"],"mappings":"sDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,WAAYF,EACZ,UAAWG,EACT,kwBACAJ,CACF,EACC,GAAGE,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"]}
+{"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\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...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 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 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\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn(\"fill-primary\", className)} {...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  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"],"mappings":"sDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,WAAYF,EACZ,UAAWG,EACT,8vBACAJ,CACF,EACC,GAAGE,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"

package/src/accordion.tsx

@@ -33,18 +33,15 @@ type AccordionTriggerElement = React.ElementRef<typeof AccordionPrimitive.Trigge
 type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
 
 const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         ref={ref}
-        className={cn(
-          "group flex flex-1 items-center justify-between py-4 text-sm font-medium transition hover:underline",
-          className,
-        )}
+        className={cn("group flex flex-1 items-center justify-between py-4 text-sm font-medium", className)}
         {...props}
       >
         {children}
-        <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition duration-200 group-data-[state=open]:rotate-180" />
+        <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition group-data-[state=open]:rotate-180" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   ),
@@ -60,10 +57,10 @@ type AccordionContentElement = React.ElementRef<typeof AccordionPrimitive.Conten
 type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
 
 const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <AccordionPrimitive.Content
       ref={ref}
-      className="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up overflow-hidden text-sm"
+      className="data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden text-sm"
       {...props}
     >
       <div className={cn("pb-4 pt-0", className)}>{children}</div>

package/src/alert-dialog.tsx

@@ -29,11 +29,11 @@ type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialog
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
   ({ className, ...props }, ref) => (
     <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.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
       <AlertDialogPrimitive.Content
         ref={ref}
         className={cn(
-          "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 animation-duration-200 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 sm:rounded-lg",
+          "bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] 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 sm:rounded-lg",
           className,
         )}
         {...props}

package/src/alert.tsx

@@ -41,7 +41,7 @@ Alert.displayName = "Alert";
 type AlertTitleElement = HTMLHeadingElement;
 type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
-const AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>(({ className, children, ...props }, ref) => (
+const AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>(({ children, className, ...props }, ref) => (
   <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}>
     {children}
   </h5>

package/src/card.tsx

@@ -34,7 +34,7 @@ CardHeader.displayName = "CardHeader";
 type CardTitleElement = HTMLParagraphElement;
 type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
-const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ className, children, ...props }, ref) => (
+const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ children, className, ...props }, ref) => (
   <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props}>
     {children}
   </h3>

package/src/carousel.tsx

@@ -49,7 +49,7 @@ type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
 
 const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
   (
-    { __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }: ScopedProps<CarouselProps>,
+    { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
     ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(

package/src/checkbox-cards.tsx

@@ -29,14 +29,9 @@ interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof C
 }
 
 const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
-  ({ className, children, checkboxClassName, ...props }, ref) => {
+  ({ children, className, checkboxClassName, ...props }, ref) => {
     return (
-      <label
-        className={cn(
-          "border-compound/70 hover:border-compound flex items-center justify-center gap-4 rounded-md border p-4",
-          className,
-        )}
-      >
+      <label className={cn("flex items-center justify-center gap-4 rounded-md border p-4", className)}>
         {children}
         <CheckboxGroupPrimitive.Item
           ref={ref}

package/src/collapsible.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import type * as React from "react";
+import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Collapsible
@@ -21,8 +22,23 @@ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
  * Component: CollapsibleContent
  * -------------------------------------------------------------------------- */
 
+type CollapsibleContentElement = React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>;
 type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
+  ({ className, ...props }, ref) => (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn(
+        "data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/command.tsx

@@ -139,7 +139,7 @@ const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(({ cl
   <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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:outline",
+      "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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:outline aria-selected:outline-2",
       className,
     )}
     {...props}

package/src/context-menu.tsx

@@ -51,11 +51,11 @@ interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<type
 }
 
 const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
-  ({ className, inset, children, ...props }, ref) => (
+  ({ children, className, inset, ...props }, ref) => (
     <ContextMenuPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline focus:outline-2",
         inset && "pl-8",
         className,
       )}
@@ -82,7 +82,7 @@ const ContextMenuSubContent = React.forwardRef<ContextMenuSubContentElement, Con
       <ContextMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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 min-w-32 rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out 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 min-w-32 rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
@@ -106,7 +106,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       <ContextMenuPrimitive.Content
         ref={ref}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
@@ -132,7 +132,7 @@ const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItem
     <ContextMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         inset && "pl-8",
         className,
       )}
@@ -151,11 +151,11 @@ type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimiti
 type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
 
 const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
-  ({ className, children, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, ref) => (
     <ContextMenuPrimitive.CheckboxItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       checked={checked}
@@ -181,11 +181,11 @@ type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.
 type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
 
 const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <ContextMenuPrimitive.RadioItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       {...props}

package/src/dialog.tsx

@@ -34,13 +34,13 @@ type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
 
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.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" />
+      <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "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 animation-duration-200 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 sm:rounded-lg",
+          "bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] 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 sm:rounded-lg",
           className,
         )}
         {...props}

package/src/drawer.tsx

@@ -36,7 +36,7 @@ type DrawerContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
 type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>;
 
 const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <DrawerPrimitive.Portal>
       <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
       <DrawerPrimitive.Content

package/src/dropdown-menu.tsx

@@ -51,11 +51,11 @@ interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typ
 }
 
 const DropdownMenuSubTrigger = React.forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
-  ({ className, inset, children, ...props }, ref) => (
+  ({ children, className, inset, ...props }, ref) => (
     <DropdownMenuPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
+        "focus:bg-accent focus:bg-outline focus:bg-outline-2 data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
         inset && "pl-8",
         className,
       )}
@@ -83,7 +83,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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 min-w-32 rounded-md border p-1 shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out 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 min-w-32 rounded-md border p-1 shadow-md",
         className,
       )}
       {...props}
@@ -107,7 +107,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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 min-w-32 rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out 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 min-w-32 rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
@@ -133,7 +133,7 @@ const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuI
     <DropdownMenuPrimitive.Item
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm transition focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm transition focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         inset && "pl-8",
         className,
       )}
@@ -152,11 +152,11 @@ type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimi
 type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
 
 const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
-  ({ className, children, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, ref) => (
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       checked={checked}
@@ -182,11 +182,11 @@ type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitiv
 type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
 
 const DropdownMenuRadioItem = React.forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       {...props}

package/src/form.tsx

@@ -176,7 +176,7 @@ FormDescription.displayName = "FormDescription";
 type FormMessageElement = HTMLParagraphElement;
 type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ className, children, ...props }, ref) => {
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ children, className, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
 

package/src/hover-card.tsx

@@ -33,7 +33,7 @@ const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardCont
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md",
           className,
         )}
         {...props}

package/src/input-otp.tsx

@@ -71,7 +71,7 @@ const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({
       {slot?.char}
       {slot?.hasFakeCaret ? (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px" />
+          <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
         </div>
       ) : null}
     </div>

package/src/menubar.tsx

@@ -61,7 +61,7 @@ const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerPro
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium focus:outline",
+      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium focus:outline focus:outline-2",
       className,
     )}
     {...props}
@@ -81,11 +81,11 @@ interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof M
 }
 
 const MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(
-  ({ className, inset, children, ...props }, ref) => (
+  ({ children, className, inset, ...props }, ref) => (
     <MenubarPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline focus:outline-2",
         inset && "pl-8",
         className,
       )}
@@ -112,7 +112,7 @@ const MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubC
       <MenubarPrimitive.SubContent
         ref={ref}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
@@ -139,7 +139,7 @@ const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentPro
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
@@ -164,7 +164,7 @@ const MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(({ cl
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -182,11 +182,11 @@ type MenubarCheckboxItemElement = React.ElementRef<typeof MenubarPrimitive.Check
 type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>;
 
 const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(
-  ({ className, children, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, ref) => (
     <MenubarPrimitive.CheckboxItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       checked={checked}
@@ -212,11 +212,11 @@ type MenubarRadioItemElement = React.ElementRef<typeof MenubarPrimitive.RadioIte
 type MenubarRadioItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>;
 
 const MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(
-  ({ className, children, ...props }, ref) => (
+  ({ children, className, ...props }, ref) => (
     <MenubarPrimitive.RadioItem
       ref={ref}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline focus:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50",
         className,
       )}
       {...props}