@scaleflex/ui-tw 0.0.114 → 0.0.116

package/avatar/avatar.component.d.ts

@@ -0,0 +1,6 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React, { type ComponentProps } from 'react';
+declare function Avatar({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/avatar/avatar.component.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"];
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+function Avatar(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Root, _extends({
+    "data-slot": "avatar",
+    className: cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)
+  }, props));
+}
+function AvatarImage(_ref2) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Image, _extends({
+    "data-slot": "avatar-image",
+    className: cn('aspect-square h-full w-full', className)
+  }, props));
+}
+function AvatarFallback(_ref3) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(AvatarPrimitive.Fallback, _extends({
+    "data-slot": "avatar-fallback",
+    className: cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)
+  }, props));
+}
+export { Avatar, AvatarImage, AvatarFallback };

package/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, AvatarImage, AvatarFallback } from './avatar.component';

package/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, AvatarImage, AvatarFallback } from './avatar.component';

package/button/button.component.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["className", "children", "size", "startIcon", "endIcon", "variant", "loading", "asChild", "disabled"];
 import { Slot } from '@radix-ui/react-slot';
 import SpinnerIcon from '@scaleflex/icons-tw/spinner';
@@ -12,7 +12,7 @@ import { ButtonSize, ButtonVariant, buttonBaseClassNames, buttonSizeOptions, but
 import { createRipple, isIconSize } from './button.utils';
 import { EndIcon } from './components/end-icon';
 import { StartIcon, startIconVariants } from './components/start-icon';
-var buttonVariants = cva('', {
+var buttonVariants = cva([].concat(_toConsumableArray(buttonBaseClassNames), [focusRingClassNames]), {
   variants: {
     variant: buttonVariantOptions,
     size: buttonSizeOptions
@@ -45,6 +45,9 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var Comp = asChild ? Slot : 'button';
   var isIcon = isIconSize(size);
   var handleClick = function handleClick(e) {
+    if (e.button !== 0 || e.metaKey || e.ctrlKey) {
+      return;
+    }
     if (localRef.current) {
       createRipple(e, localRef.current);
     }
@@ -52,12 +55,12 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   return /*#__PURE__*/React.createElement(Comp, _extends({
     ref: localRef,
     "data-slot": "button",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       variant: variant,
       size: size,
       className: className
-    }), loading && 'pointer-events-none opacity-30'])),
-    disabled: disabled,
+    }), loading && 'pointer-events-none opacity-30'),
+    disabled: !asChild ? disabled : undefined,
     onMouseDown: handleClick,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter') {

package/button/components/copy-to-clipboard-button.js

@@ -30,13 +30,14 @@ export var CopyToClipboardButton = function CopyToClipboardButton(props) {
     setOpen = _useState6[1];
   var handleCopy = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      var _t;
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
-            _context.next = 3;
+            _context.next = 1;
             return navigator.clipboard.writeText(text);
-          case 3:
+          case 1:
             setTooltipText(copiedTooltip);
             setTooltipVariant('success');
             setOpen(true);
@@ -47,17 +48,17 @@ export var CopyToClipboardButton = function CopyToClipboardButton(props) {
               setTooltipText(initialTooltip);
               setTooltipVariant('default');
             }, 2000);
-            _context.next = 13;
+            _context.next = 3;
             break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 13:
+          case 2:
+            _context.prev = 2;
+            _t = _context["catch"](0);
+            console.error('Failed to copy', _t);
+          case 3:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 10]]);
+      }, _callee, null, [[0, 2]]);
     }));
     return function handleCopy() {
       return _ref.apply(this, arguments);

package/calendar/calendar.component.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -12,7 +11,6 @@ var _excluded = ["className", "classNames", "showOutsideDays", "captionLayout",
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Button, buttonVariants } from '@scaleflex/ui-tw/button';
-import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import React from 'react';
@@ -52,12 +50,12 @@ function Calendar(_ref) {
       months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
       month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
       nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-      button_previous: cn.apply(void 0, [buttonVariants({
+      button_previous: cn(buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous].concat(_toConsumableArray(buttonBaseClassNames))),
-      button_next: cn.apply(void 0, [buttonVariants({
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
+      button_next: cn(buttonVariants({
         variant: buttonVariant
-      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next].concat(_toConsumableArray(buttonBaseClassNames))),
+      }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
       month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
       dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
       dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),

package/combobox/combobox-multi-tag/combobox-multi-tag.component.js

@@ -4,7 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps", "actions", "fixedActions", "triggerProps"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
-import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { createClearHandlers } from '@scaleflex/ui-tw/combobox/combobox.utils';
 import { Pill } from '@scaleflex/ui-tw/pill';
 import { Popover, PopoverTrigger } from '@scaleflex/ui-tw/popover';
@@ -123,10 +122,10 @@ export function ComboboxMultiTag(_ref) {
     tabIndex: 0,
     "data-clear-icon": "true",
     "aria-label": "Clear all",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: buttonSize,
       variant: ButtonVariant.GhostSecondary
-    })]))
+    }))
   }, "Clear all"), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
     className: cn('text-muted-foreground/70 mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
   })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {

package/combobox/combobox-users/combobox-users.component.js

@@ -4,7 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["options", "value", "onChange", "placeholder", "className", "disabled", "size", "readOnly", "popoverClassName", "onBlur", "showGroupSeparator", "defaultOpen", "searchPlaceholder", "popoverContentProps", "actions", "fixedActions", "triggerProps"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
-import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { SelectActions } from '@scaleflex/ui-tw/combobox/combobox.component';
 import { createClearHandlers, flattenUsersOptions, isUserOptionGroup } from '@scaleflex/ui-tw/combobox/combobox.utils';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
@@ -161,10 +160,10 @@ export function ComboboxUsers(_ref) {
     tabIndex: 0,
     "data-clear-icon": "true",
     "aria-label": "Clear all",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: buttonSize,
       variant: ButtonVariant.GhostSecondary
-    })]))
+    }))
   }, "Clear all"), /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {
     className: cn('text-muted-foreground/70 mr-1.5 ml-auto shrink-0', iconSizeInTriggerOptions[size])
   })) : /*#__PURE__*/React.createElement(ChevronsUpDownIcon, {

package/combobox/combobox.component.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "open", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps"],
   _excluded2 = ["children", "open", "label", "disabled", "readOnly", "size", "className", "selected", "showClear", "onClearAll", "formItemId", "triggerProps", "icon", "iconClassName", "optionsLength", "selectedLength", "onCheckboxClick", "toggleFirstOption", "displayCount"];
 import { buttonVariants } from '@scaleflex/ui-tw/button';
-import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import { VisualCheckbox } from '@scaleflex/ui-tw/checkbox/checkbox.component';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@scaleflex/ui-tw/command';
 import { CommandCheckboxItem } from '@scaleflex/ui-tw/command/command.component';
@@ -13,7 +13,7 @@ import { PopoverContent, PopoverTrigger } from '@scaleflex/ui-tw/popover';
 import { SelectSeparator, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getBaseSelectClassNames, selectLabelSizeOptions, selectReadOnlyClassNames } from '@scaleflex/ui-tw/select/select.constants';
 import { Separator } from '@scaleflex/ui-tw/separator';
-import { focusRingClassNames, getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
+import { getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 import { getToolbarSizes } from '@scaleflex/ui-tw/textarea/textarea.utils';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -87,10 +87,10 @@ export function ComboboxTrigger(_ref2) {
     tabIndex: 0,
     "data-clear-icon": "true",
     "aria-label": "Clear all",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: iconSize,
       variant: ButtonVariant.GhostSecondary
-    })]))
+    }))
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0', iconSizeInTriggerOptions[size])
@@ -176,10 +176,10 @@ export function ComboboxCheckboxTrigger(_ref3) {
     tabIndex: 0,
     "data-clear-icon": "true",
     "aria-label": "Clear all",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: iconSize,
       variant: ButtonVariant.GhostSecondary
-    }), optionsLength === 1 && '-mr-2']))
+    }), optionsLength === 1 && '-mr-2')
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0', iconSizeInTriggerOptions[size])

package/command/command.component.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"],
@@ -10,11 +9,10 @@ var _excluded = ["className"],
   _excluded7 = ["className", "size"],
   _excluded8 = ["className"],
   _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName"],
-  _excluded10 = ["className", "size", "isGroup", "name", "email", "profileUrl", "selectedValue", "multiple", "value", "disabled", "textClassName"],
-  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
-  _excluded12 = ["className"];
+  _excluded0 = ["className", "size", "isGroup", "name", "email", "profileUrl", "selectedValue", "multiple", "value", "disabled", "textClassName"],
+  _excluded1 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
+  _excluded10 = ["className"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
-import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { Checkbox } from '@scaleflex/ui-tw/checkbox';
 import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
@@ -22,7 +20,6 @@ import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
-import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -121,10 +118,10 @@ function CommandClear(_ref4) {
     onClick: onClickClear,
     "data-clear-icon": "true",
     "aria-label": "Clear search",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: crossSize,
       variant: ButtonVariant.GhostSecondary
-    }), 'absolute top-1/2 right-2 -translate-y-1/2', className]))
+    }), 'absolute top-1/2 right-2 -translate-y-1/2', className)
   }, props), /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')
@@ -220,19 +217,19 @@ function CommandItem(_ref9) {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
   })));
 }
-function CommandUserItem(_ref10) {
-  var className = _ref10.className,
-    size = _ref10.size,
-    isGroup = _ref10.isGroup,
-    name = _ref10.name,
-    email = _ref10.email,
-    profileUrl = _ref10.profileUrl,
-    selectedValue = _ref10.selectedValue,
-    multiple = _ref10.multiple,
-    value = _ref10.value,
-    disabled = _ref10.disabled,
-    textClassName = _ref10.textClassName,
-    props = _objectWithoutProperties(_ref10, _excluded10);
+function CommandUserItem(_ref0) {
+  var className = _ref0.className,
+    size = _ref0.size,
+    isGroup = _ref0.isGroup,
+    name = _ref0.name,
+    email = _ref0.email,
+    profileUrl = _ref0.profileUrl,
+    selectedValue = _ref0.selectedValue,
+    multiple = _ref0.multiple,
+    value = _ref0.value,
+    disabled = _ref0.disabled,
+    textClassName = _ref0.textClassName,
+    props = _objectWithoutProperties(_ref0, _excluded0);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
@@ -264,19 +261,19 @@ function CommandUserItem(_ref10) {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
   })));
 }
-function CommandCheckboxItem(_ref11) {
-  var className = _ref11.className,
-    textClassName = _ref11.textClassName,
-    size = _ref11.size,
-    isGroup = _ref11.isGroup,
-    children = _ref11.children,
-    selectedValue = _ref11.selectedValue,
-    value = _ref11.value,
-    icon = _ref11.icon,
-    disabled = _ref11.disabled,
-    tooltip = _ref11.tooltip,
-    disabledTooltip = _ref11.disabledTooltip,
-    props = _objectWithoutProperties(_ref11, _excluded11);
+function CommandCheckboxItem(_ref1) {
+  var className = _ref1.className,
+    textClassName = _ref1.textClassName,
+    size = _ref1.size,
+    isGroup = _ref1.isGroup,
+    children = _ref1.children,
+    selectedValue = _ref1.selectedValue,
+    value = _ref1.value,
+    icon = _ref1.icon,
+    disabled = _ref1.disabled,
+    tooltip = _ref1.tooltip,
+    disabledTooltip = _ref1.disabledTooltip,
+    props = _objectWithoutProperties(_ref1, _excluded1);
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-checkbox-item",
@@ -305,9 +302,9 @@ function CommandCheckboxItem(_ref11) {
     tooltip: disabled ? disabledTooltip : tooltip
   }))));
 }
-function CommandShortcut(_ref12) {
-  var className = _ref12.className,
-    props = _objectWithoutProperties(_ref12, _excluded12);
+function CommandShortcut(_ref10) {
+  var className = _ref10.className,
+    props = _objectWithoutProperties(_ref10, _excluded10);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "command-shortcut",
     className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)

package/context-menu/context-menu.component.js

@@ -79,12 +79,12 @@ function ContextMenuContent(_ref9) {
     className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-secondary z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', className)
   }, props)));
 }
-function ContextMenuItem(_ref10) {
-  var className = _ref10.className,
-    inset = _ref10.inset,
-    _ref10$variant = _ref10.variant,
-    variant = _ref10$variant === void 0 ? 'default' : _ref10$variant,
-    props = _objectWithoutProperties(_ref10, _excluded4);
+function ContextMenuItem(_ref0) {
+  var className = _ref0.className,
+    inset = _ref0.inset,
+    _ref0$variant = _ref0.variant,
+    variant = _ref0$variant === void 0 ? 'default' : _ref0$variant,
+    props = _objectWithoutProperties(_ref0, _excluded4);
   return /*#__PURE__*/React.createElement(ContextMenuPrimitive.Item, _extends({
     "data-slot": "context-menu-item",
     "data-inset": inset,
@@ -92,11 +92,11 @@ function ContextMenuItem(_ref10) {
     className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
   }, props));
 }
-function ContextMenuCheckboxItem(_ref11) {
-  var className = _ref11.className,
-    children = _ref11.children,
-    checked = _ref11.checked,
-    props = _objectWithoutProperties(_ref11, _excluded5);
+function ContextMenuCheckboxItem(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children,
+    checked = _ref1.checked,
+    props = _objectWithoutProperties(_ref1, _excluded5);
   return /*#__PURE__*/React.createElement(ContextMenuPrimitive.CheckboxItem, _extends({
     "data-slot": "context-menu-checkbox-item",
     className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
@@ -107,10 +107,10 @@ function ContextMenuCheckboxItem(_ref11) {
     className: "size-4"
   }))), children);
 }
-function ContextMenuRadioItem(_ref12) {
-  var className = _ref12.className,
-    children = _ref12.children,
-    props = _objectWithoutProperties(_ref12, _excluded6);
+function ContextMenuRadioItem(_ref10) {
+  var className = _ref10.className,
+    children = _ref10.children,
+    props = _objectWithoutProperties(_ref10, _excluded6);
   return /*#__PURE__*/React.createElement(ContextMenuPrimitive.RadioItem, _extends({
     "data-slot": "context-menu-radio-item",
     className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
@@ -120,27 +120,27 @@ function ContextMenuRadioItem(_ref12) {
     className: "size-2 fill-current"
   }))), children);
 }
-function ContextMenuLabel(_ref13) {
-  var className = _ref13.className,
-    inset = _ref13.inset,
-    props = _objectWithoutProperties(_ref13, _excluded7);
+function ContextMenuLabel(_ref11) {
+  var className = _ref11.className,
+    inset = _ref11.inset,
+    props = _objectWithoutProperties(_ref11, _excluded7);
   return /*#__PURE__*/React.createElement(ContextMenuPrimitive.Label, _extends({
     "data-slot": "context-menu-label",
     "data-inset": inset,
     className: cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)
   }, props));
 }
-function ContextMenuSeparator(_ref14) {
-  var className = _ref14.className,
-    props = _objectWithoutProperties(_ref14, _excluded8);
+function ContextMenuSeparator(_ref12) {
+  var className = _ref12.className,
+    props = _objectWithoutProperties(_ref12, _excluded8);
   return /*#__PURE__*/React.createElement(ContextMenuPrimitive.Separator, _extends({
     "data-slot": "context-menu-separator",
     className: cn('bg-border -mx-1 my-1 h-px', className)
   }, props));
 }
-function ContextMenuShortcut(_ref15) {
-  var className = _ref15.className,
-    props = _objectWithoutProperties(_ref15, _excluded9);
+function ContextMenuShortcut(_ref13) {
+  var className = _ref13.className,
+    props = _objectWithoutProperties(_ref13, _excluded9);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "context-menu-shortcut",
     className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)

package/dialog/dialog.component.js

@@ -10,12 +10,12 @@ var _excluded = ["className"],
   _excluded7 = ["className"],
   _excluded8 = ["className"],
   _excluded9 = ["className"],
+  _excluded0 = ["className"],
+  _excluded1 = ["className"],
   _excluded10 = ["className"],
   _excluded11 = ["className"],
   _excluded12 = ["className"],
-  _excluded13 = ["className"],
-  _excluded14 = ["className"],
-  _excluded15 = ["className"];
+  _excluded13 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
@@ -116,82 +116,82 @@ function DialogFormHeader(_ref9) {
     className: cn('text-foreground flex flex-col items-center justify-center p-6 pt-8 text-center', className)
   }, props));
 }
-function DialogWideBody(_ref10) {
-  var className = _ref10.className,
-    props = _objectWithoutProperties(_ref10, _excluded6);
+function DialogWideBody(_ref0) {
+  var className = _ref0.className,
+    props = _objectWithoutProperties(_ref0, _excluded6);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-body",
     className: cn('p-6', className)
   }, props));
 }
-function DialogFormBody(_ref11) {
-  var className = _ref11.className,
-    props = _objectWithoutProperties(_ref11, _excluded7);
+function DialogFormBody(_ref1) {
+  var className = _ref1.className,
+    props = _objectWithoutProperties(_ref1, _excluded7);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-body",
     className: cn('px-6', className)
   }, props));
 }
-function DialogWideTitle(_ref12) {
-  var className = _ref12.className,
-    props = _objectWithoutProperties(_ref12, _excluded8);
+function DialogWideTitle(_ref10) {
+  var className = _ref10.className,
+    props = _objectWithoutProperties(_ref10, _excluded8);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
     "data-slot": "dialog-title",
     className: cn('text-lg leading-7', className)
   }, props));
 }
-function DialogFormTitle(_ref13) {
-  var className = _ref13.className,
-    props = _objectWithoutProperties(_ref13, _excluded9);
+function DialogFormTitle(_ref11) {
+  var className = _ref11.className,
+    props = _objectWithoutProperties(_ref11, _excluded9);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
     "data-slot": "dialog-title",
     className: cn('text-foreground text-lg leading-7 font-medium', className)
   }, props));
 }
-function DialogFormDescription(_ref14) {
-  var className = _ref14.className,
-    props = _objectWithoutProperties(_ref14, _excluded10);
+function DialogFormDescription(_ref12) {
+  var className = _ref12.className,
+    props = _objectWithoutProperties(_ref12, _excluded0);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
     "data-slot": "dialog-description",
     className: cn('text-muted-foreground text-sm', className)
   }, props));
 }
-function DialogFormIcon(_ref15) {
-  var className = _ref15.className,
-    props = _objectWithoutProperties(_ref15, _excluded11);
+function DialogFormIcon(_ref13) {
+  var className = _ref13.className,
+    props = _objectWithoutProperties(_ref13, _excluded1);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn('bg-accent mb-2 flex h-16 w-16 items-center justify-center rounded-full', "[&_svg:not([class*='text-'])]:text-primary [&_svg:not([class*='size-'])]:size-9", className)
   }, props));
 }
-function DialogFormWarningIcon(_ref16) {
-  var className = _ref16.className,
-    props = _objectWithoutProperties(_ref16, _excluded12);
+function DialogFormWarningIcon(_ref14) {
+  var className = _ref14.className,
+    props = _objectWithoutProperties(_ref14, _excluded10);
   return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
     className: cn(className, 'bg-warning-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-warning"
   }));
 }
-function DialogFormErrorIcon(_ref17) {
-  var className = _ref17.className,
-    props = _objectWithoutProperties(_ref17, _excluded13);
+function DialogFormErrorIcon(_ref15) {
+  var className = _ref15.className,
+    props = _objectWithoutProperties(_ref15, _excluded11);
   return /*#__PURE__*/React.createElement(DialogFormIcon, _extends({
     className: cn(className, 'bg-destructive-10')
   }, props), /*#__PURE__*/React.createElement(CircleAlertIcon, {
     className: "text-destructive"
   }));
 }
-function DialogWideFooter(_ref18) {
-  var className = _ref18.className,
-    props = _objectWithoutProperties(_ref18, _excluded14);
+function DialogWideFooter(_ref16) {
+  var className = _ref16.className,
+    props = _objectWithoutProperties(_ref16, _excluded12);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-footer",
     className: cn('border-border flex flex-col-reverse gap-3 border-t p-6 sm:flex-row sm:justify-end', className)
   }, props));
 }
-function DialogFormFooter(_ref19) {
-  var className = _ref19.className,
-    props = _objectWithoutProperties(_ref19, _excluded15);
+function DialogFormFooter(_ref17) {
+  var className = _ref17.className,
+    props = _objectWithoutProperties(_ref17, _excluded13);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "dialog-footer",
     className: cn('flex justify-end gap-3 p-6', className)

package/dropdown-menu/dropdown-menu.component.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "sideOffset"],
   _excluded7 = ["className", "size"],
   _excluded8 = ["className", "inset", "children", "size"],
   _excluded9 = ["className", "children", "label", "labelClassName", "size", "icon", "asChild"],
-  _excluded10 = ["className"];
+  _excluded0 = ["className"];
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
 import { DropdownMenuItemSize, dropdownMenuButtonTriggerOptions, dropdownMenuCheckboxItemSizeOptions, dropdownMenuIconSizeOptions, dropdownMenuItemIconSizeOptions, dropdownMenuItemIndicatorSizeOptions, dropdownMenuItemSizeOptions, dropdownMenuShortcutSizeOptions } from '@scaleflex/ui-tw/dropdown-menu/dropdown-menu.constants';
@@ -188,11 +188,11 @@ function DropdownMenuRadioItem(_ref9) {
     className: "size-2 fill-current"
   }))), children);
 }
-function DropdownMenuLabel(_ref10) {
-  var className = _ref10.className,
-    _ref10$size = _ref10.size,
-    size = _ref10$size === void 0 ? DropdownMenuItemSize.Sm : _ref10$size,
-    props = _objectWithoutProperties(_ref10, _excluded5);
+function DropdownMenuLabel(_ref0) {
+  var className = _ref0.className,
+    _ref0$size = _ref0.size,
+    size = _ref0$size === void 0 ? DropdownMenuItemSize.Sm : _ref0$size,
+    props = _objectWithoutProperties(_ref0, _excluded5);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Label, _extends({
     "data-slot": "dropdown-menu-label",
     className: cn(dropdownMenuLabelVariants({
@@ -200,18 +200,18 @@ function DropdownMenuLabel(_ref10) {
     }), className)
   }, props));
 }
-function DropdownMenuSeparator(_ref11) {
-  var className = _ref11.className,
-    props = _objectWithoutProperties(_ref11, _excluded6);
+function DropdownMenuSeparator(_ref1) {
+  var className = _ref1.className,
+    props = _objectWithoutProperties(_ref1, _excluded6);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, _extends({
     "data-slot": "dropdown-menu-separator",
     className: cn('bg-border -mx-1 my-1 h-px', className)
   }, props));
 }
-function DropdownMenuShortcut(_ref12) {
-  var className = _ref12.className,
-    size = _ref12.size,
-    props = _objectWithoutProperties(_ref12, _excluded7);
+function DropdownMenuShortcut(_ref10) {
+  var className = _ref10.className,
+    size = _ref10.size,
+    props = _objectWithoutProperties(_ref10, _excluded7);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "dropdown-menu-shortcut",
     className: cn('text-muted-foreground absolute tracking-widest', dropdownMenuShortcutVariants({
@@ -219,19 +219,19 @@ function DropdownMenuShortcut(_ref12) {
     }), className)
   }, props));
 }
-function DropdownMenuSub(_ref13) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref13), _ref13));
+function DropdownMenuSub(_ref11) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref11), _ref11));
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Sub, _extends({
     "data-slot": "dropdown-menu-sub"
   }, props));
 }
-function DropdownMenuSubTrigger(_ref14) {
-  var className = _ref14.className,
-    inset = _ref14.inset,
-    children = _ref14.children,
-    _ref14$size = _ref14.size,
-    size = _ref14$size === void 0 ? DropdownMenuItemSize.Sm : _ref14$size,
-    props = _objectWithoutProperties(_ref14, _excluded8);
+function DropdownMenuSubTrigger(_ref12) {
+  var className = _ref12.className,
+    inset = _ref12.inset,
+    children = _ref12.children,
+    _ref12$size = _ref12.size,
+    size = _ref12$size === void 0 ? DropdownMenuItemSize.Sm : _ref12$size,
+    props = _objectWithoutProperties(_ref12, _excluded8);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubTrigger, _extends({
     "data-slot": "dropdown-menu-sub-trigger",
     "data-inset": inset,
@@ -244,17 +244,17 @@ function DropdownMenuSubTrigger(_ref14) {
     }))
   }));
 }
-function DropdownMenuButtonTrigger(_ref15) {
-  var className = _ref15.className,
-    children = _ref15.children,
-    label = _ref15.label,
-    labelClassName = _ref15.labelClassName,
-    _ref15$size = _ref15.size,
-    size = _ref15$size === void 0 ? DropdownMenuItemSize.Sm : _ref15$size,
-    icon = _ref15.icon,
-    _ref15$asChild = _ref15.asChild,
-    asChild = _ref15$asChild === void 0 ? false : _ref15$asChild,
-    props = _objectWithoutProperties(_ref15, _excluded9);
+function DropdownMenuButtonTrigger(_ref13) {
+  var className = _ref13.className,
+    children = _ref13.children,
+    label = _ref13.label,
+    labelClassName = _ref13.labelClassName,
+    _ref13$size = _ref13.size,
+    size = _ref13$size === void 0 ? DropdownMenuItemSize.Sm : _ref13$size,
+    icon = _ref13.icon,
+    _ref13$asChild = _ref13.asChild,
+    asChild = _ref13$asChild === void 0 ? false : _ref13$asChild,
+    props = _objectWithoutProperties(_ref13, _excluded9);
   var Comp = asChild ? Slot : 'button';
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, _extends({
     asChild: true
@@ -278,9 +278,9 @@ function DropdownMenuButtonTrigger(_ref15) {
     }))
   })));
 }
-function DropdownMenuSubContent(_ref16) {
-  var className = _ref16.className,
-    props = _objectWithoutProperties(_ref16, _excluded10);
+function DropdownMenuSubContent(_ref14) {
+  var className = _ref14.className,
+    props = _objectWithoutProperties(_ref14, _excluded0);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubContent, _extends({
     "data-slot": "dropdown-menu-sub-content",
     className: cn('origin-(--radix-dropdown-menu-content-transform-origin)', 'bg-popover text-popover-foreground border-border z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className)

package/input-group/input-group.component.d.ts

@@ -8,7 +8,7 @@ declare const inputGroupVariants: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function InputGroup({ className, size, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare function InputGroupButton({ className, type, variant, size, ...props }: ButtonProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -14,6 +14,7 @@
   "dependencies": {
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -25,7 +26,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.114",
+    "@scaleflex/icons-tw": "^0.0.116",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/search/search.component.js

@@ -1,13 +1,11 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "size", "disabled", "readOnly", "onChange"];
 import { buttonVariants } from '@scaleflex/ui-tw/button';
-import { ButtonVariant, buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
+import { ButtonVariant } from '@scaleflex/ui-tw/button/button.constants';
 import { Input } from '@scaleflex/ui-tw/input';
 import { crossSizeOptions, iconSizeOptions, searchPaddingMap } from '@scaleflex/ui-tw/search/search.constants';
-import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { Search as SearchIcon, XIcon } from 'lucide-react';
@@ -58,10 +56,10 @@ export function Search(_ref) {
     onClick: handleClear,
     "data-clear-icon": "true",
     "aria-label": "Clear",
-    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+    className: cn(buttonVariants({
       size: crossSize,
       variant: ButtonVariant.GhostSecondary
-    }), 'absolute top-1/2 right-2 -translate-y-1/2']))
+    }), 'absolute top-1/2 right-2 -translate-y-1/2')
   }, /*#__PURE__*/React.createElement(XIcon, {
     "data-clear-icon": true,
     className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')

package/select/select.component.js

@@ -168,9 +168,9 @@ function SelectScrollUpButton(_ref9) {
     className: "text-muted-foreground/70 size-4"
   }));
 }
-function SelectScrollDownButton(_ref10) {
-  var className = _ref10.className,
-    props = _objectWithoutProperties(_ref10, _excluded7);
+function SelectScrollDownButton(_ref0) {
+  var className = _ref0.className,
+    props = _objectWithoutProperties(_ref0, _excluded7);
   return /*#__PURE__*/React.createElement(SelectPrimitive.ScrollDownButton, _extends({
     "data-slot": "select-scroll-down-button",
     className: cn('flex cursor-default items-center justify-center py-1', className)

package/tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsListUnderline, TabsTriggerUnderline, TabsListSidebar, TabsTriggerSidebar, } from './tabs.component';

package/tabs/index.js

@@ -0,0 +1,5 @@
+export {
+// primitives
+Tabs, TabsList, TabsTrigger, TabsContent,
+// variants
+TabsListUnderline, TabsTriggerUnderline, TabsListSidebar, TabsTriggerSidebar } from './tabs.component';

package/tabs/tabs.component.d.ts

@@ -0,0 +1,15 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
+declare function Tabs({ className, ...props }: TabsProps): React.JSX.Element;
+type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
+declare function TabsList({ className, ...props }: TabsListProps): React.JSX.Element;
+type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): React.JSX.Element;
+type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content>;
+declare function TabsContent({ className, ...props }: TabsContentProps): React.JSX.Element;
+declare function TabsListUnderline({ className, ...props }: TabsListProps): React.JSX.Element;
+declare function TabsTriggerUnderline({ className, ...props }: TabsTriggerProps): React.JSX.Element;
+declare function TabsListSidebar({ className, ...props }: TabsListProps): React.JSX.Element;
+declare function TabsTriggerSidebar({ className, ...props }: TabsTriggerProps): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsListUnderline, TabsTriggerUnderline, TabsListSidebar, TabsTriggerSidebar, };

package/tabs/tabs.component.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className"];
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import * as React from 'react';
+
+/* -------------------------------------------------------------------------- */
+/*                                  Primitives                                 */
+/* -------------------------------------------------------------------------- */
+
+function Tabs(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Root, _extends({
+    "data-slot": "tabs",
+    className: cn(className)
+  }, props));
+}
+function TabsList(_ref2) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.List, _extends({
+    "data-slot": "tabs-list",
+    className: cn(className)
+  }, props));
+}
+function TabsTrigger(_ref3) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, _extends({
+    "data-slot": "tabs-trigger",
+    className: cn(focusRingClassNames, 'inline-flex cursor-pointer items-center justify-center disabled:pointer-events-none disabled:opacity-50', className)
+  }, props));
+}
+function TabsContent(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Content, _extends({
+    "data-slot": "tabs-content",
+    className: cn('flex-1 outline-none', className)
+  }, props));
+}
+
+/* -------------------------------------------------------------------------- */
+/*                              Styled variants                                */
+/* -------------------------------------------------------------------------- */
+
+/* ---------------------------- Underline (horizontal) ---------------------------- */
+
+function TabsListUnderline(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(TabsList, _extends({
+    className: cn('border-border mb-3 inline-flex w-full items-end justify-start gap-6 border-b bg-transparent p-0', className)
+  }, props));
+}
+function TabsTriggerUnderline(_ref6) {
+  var className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(TabsTrigger, _extends({
+    className: cn('relative rounded-none px-0 pt-3 pb-3 text-base leading-none focus-visible:rounded-md', 'text-foreground transition-colors', 'data-[state=active]:text-primary',
+    // underline indicator
+    "after:bg-primary after:absolute after:right-0 after:bottom-[-2px] after:left-0 after:h-0.5 after:rounded-full after:content-['']", 'after:opacity-0 data-[state=active]:after:opacity-100', className)
+  }, props));
+}
+
+/* ------------------------------ Sidebar (vertical) ------------------------------ */
+
+function TabsListSidebar(_ref7) {
+  var className = _ref7.className,
+    props = _objectWithoutProperties(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement(TabsList, _extends({
+    className: cn('flex w-72 flex-col items-stretch justify-start gap-1 bg-transparent p-0', className)
+  }, props));
+}
+function TabsTriggerSidebar(_ref8) {
+  var className = _ref8.className,
+    props = _objectWithoutProperties(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement(TabsTrigger, _extends({
+    className: cn("text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground inline-flex w-full items-center justify-start gap-1.5 rounded-md px-4 py-3 text-base whitespace-nowrap transition-colors", 'data-[state=active]:bg-accent data-[state=active]:text-primary data-[state=active]:[&_svg:not([class*="text-"])]:text-primary', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5", className)
+  }, props));
+}
+export {
+// primitives
+Tabs, TabsList, TabsTrigger, TabsContent,
+// variants
+TabsListUnderline, TabsTriggerUnderline, TabsListSidebar, TabsTriggerSidebar };