@scaleflex/ui-tw 0.0.40 → 0.0.42

package/badge/badge.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BadgeProps } from './badge.types';
+declare function Badge({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
+export { Badge };

package/badge/badge.component.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "variant", "size"];
+import { badgeVariants } from '@scaleflex/ui-tw/badge/badge.constants';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+function Badge(_ref) {
+  var className = _ref.className,
+    variant = _ref.variant,
+    size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "badge",
+    className: cn('inline-flex items-center rounded-md py-0.5 font-normal ring-1 ring-inset', badgeVariants({
+      variant: variant,
+      size: size
+    }), className)
+  }, props));
+}
+export { Badge };

package/badge/badge.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "green" | "yellow" | "greenSoft" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/badge/badge.constants.js

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+export var badgeVariants = cva('', {
+  variants: {
+    variant: {
+      neutral: 'bg-border text-foreground ring-input',
+      green: 'bg-success text-white ring-success-foreground/10',
+      yellow: 'bg-warning text-white ring-warning-foreground/10',
+      greenSoft: 'bg-success/15 text-success-foreground ring-success/10'
+    },
+    size: {
+      md: 'text-sm px-2',
+      lg: 'text-md px-3'
+    }
+  },
+  defaultVariants: {
+    variant: 'neutral',
+    size: 'md'
+  }
+});

package/badge/badge.types.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import { badgeVariants } from './badge.constants';
+export type BadgeProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;

package/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from './badge.component';

package/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from './badge.component';

package/button/button.component.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ButtonProps } from './button.types';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "md" | "lg" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -68,6 +68,7 @@ export var CopyToClipboardButton = function CopyToClipboardButton(props) {
     variant: tooltipVariant,
     open: open ? true : undefined
   }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     variant: "ghost-secondary",
     size: size,
     onClick: handleCopy,

package/button/components/start-icon.d.ts

@@ -2,7 +2,7 @@ import type { StartIconProps } from '@scaleflex/ui-tw/button/button.types';
 import React from 'react';
 declare const startIconVariants: (props?: ({
     variant?: "primary" | "secondary" | "outline" | "ghost-primary" | "ghost-secondary" | "error-primary" | "warning-primary" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "md" | "lg" | "xs" | "sm" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const StartIcon: (props: StartIconProps) => React.JSX.Element | null;
 export { StartIcon, startIconVariants };

package/date-picker/date-picker.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './date-picker.types';
-declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, onKeyDown, onBlur, ...rest }: DatePickerProps): React.JSX.Element;
 export { DatePicker };

package/date-picker/date-picker.component.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps"];
+var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps", "onKeyDown", "onBlur"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -13,7 +13,7 @@ import { getBaseInputClasses } 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 { CalendarIcon } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { buttonSizeInTriggerOptions, iconSizeInTriggerOptions } from './date-picker.constants';
 import { parseDateString, toHtmlDateString } from './date-picker.utils';
 function DatePicker(_ref) {
@@ -31,7 +31,11 @@ function DatePicker(_ref) {
     _ref$defaultOpen = _ref.defaultOpen,
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     popoverContentProps = _ref.popoverContentProps,
+    onKeyDown = _ref.onKeyDown,
+    onBlur = _ref.onBlur,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = useRef(null);
+  var isEscapeBlur = useRef(false);
   var _useState = useState(defaultOpen),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -61,18 +65,44 @@ function DatePicker(_ref) {
   };
   var handleCalendarSelect = function handleCalendarSelect(date) {
     if (date) {
+      var _inputRef$current;
       setSelectedDate(date);
       setInputValue(toHtmlDateString(date));
       setCalendarMonth(date);
       setOpen(false);
       onChange === null || onChange === void 0 || onChange(date);
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     }
   };
+  var handleKeyDown = function handleKeyDown(event) {
+    var allowed = '0123456789/';
+    if (event.key.length === 1 && !allowed.includes(event.key)) {
+      event.preventDefault();
+    }
+    if (event.key === 'Escape') {
+      var _inputRef$current2;
+      event.preventDefault();
+      isEscapeBlur.current = true;
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    }
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+  };
+  var handleBlur = function handleBlur(event) {
+    if (event.relatedTarget instanceof HTMLButtonElement && event.relatedTarget.id === 'date-picker') {
+      return;
+    }
+    if (isEscapeBlur.current) {
+      isEscapeBlur.current = false;
+      return;
+    }
+    onBlur === null || onBlur === void 0 || onBlur(event);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col gap-2"
   }, /*#__PURE__*/React.createElement("div", {
     className: "relative flex gap-2"
   }, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: inputRef,
     id: "date",
     type: "text",
     inputMode: "numeric",
@@ -85,12 +115,8 @@ function DatePicker(_ref) {
       size: size
     }), readOnly && selectReadOnlyClassNames, !isInputValid && 'border-destructive'])),
     onChange: handleInputChange,
-    onKeyDown: function onKeyDown(e) {
-      var allowed = '0123456789/';
-      if (e.key.length === 1 && !allowed.includes(e.key)) {
-        e.preventDefault();
-      }
-    }
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur
   }, rest)), /*#__PURE__*/React.createElement(Popover, {
     open: open,
     defaultOpen: defaultOpen,

package/date-picker/date-picker.types.d.ts

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
-import { ComponentProps } from 'react';
+import type { ComponentProps, FocusEvent, KeyboardEvent } from 'react';
 export type DatePickerProps = {
     minDate?: Date;
     maxDate?: Date;
@@ -12,5 +12,7 @@ export type DatePickerProps = {
     disabled?: boolean;
     defaultOpen?: boolean;
     onChange?: (date: Date) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
 };

package/dropdown-menu/dropdown-menu.component.d.ts

@@ -0,0 +1,25 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

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

@@ -0,0 +1,152 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["className", "sideOffset"],
+  _excluded2 = ["className", "inset", "variant"],
+  _excluded3 = ["className", "children", "checked"],
+  _excluded4 = ["className", "children"],
+  _excluded5 = ["className", "inset"],
+  _excluded6 = ["className"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className", "inset", "children"],
+  _excluded9 = ["className"];
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from 'react';
+function DropdownMenu(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root, _extends({
+    "data-slot": "dropdown-menu"
+  }, props));
+}
+function DropdownMenuPortal(_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, _extends({
+    "data-slot": "dropdown-menu-portal"
+  }, props));
+}
+function DropdownMenuTrigger(_ref3) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, _extends({
+    "data-slot": "dropdown-menu-trigger"
+  }, props));
+}
+function DropdownMenuContent(_ref4) {
+  var className = _ref4.className,
+    _ref4$sideOffset = _ref4.sideOffset,
+    sideOffset = _ref4$sideOffset === void 0 ? 4 : _ref4$sideOffset,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, _extends({
+    "data-slot": "dropdown-menu-content",
+    sideOffset: sideOffset,
+    className: cn('bg-popover text-popover-foreground border-border z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', 'max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin)', '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)
+  }, props)));
+}
+function DropdownMenuGroup(_ref5) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Group, _extends({
+    "data-slot": "dropdown-menu-group"
+  }, props));
+}
+function DropdownMenuItem(_ref6) {
+  var className = _ref6.className,
+    inset = _ref6.inset,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, _extends({
+    "data-slot": "dropdown-menu-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn('relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', 'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'focus:bg-accent focus:text-accent-foreground', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
+  }, props));
+}
+function DropdownMenuCheckboxItem(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children,
+    checked = _ref7.checked,
+    props = _objectWithoutProperties(_ref7, _excluded3);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.CheckboxItem, _extends({
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn('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', 'focus:bg-accent focus:text-accent-foreground', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    checked: checked
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: "size-4"
+  }))), children);
+}
+function DropdownMenuRadioGroup(_ref8) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref8), _ref8));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioGroup, _extends({
+    "data-slot": "dropdown-menu-radio-group"
+  }, props));
+}
+function DropdownMenuRadioItem(_ref9) {
+  var className = _ref9.className,
+    children = _ref9.children,
+    props = _objectWithoutProperties(_ref9, _excluded4);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioItem, _extends({
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn('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', 'focus:bg-accent focus:text-accent-foreground', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className)
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /*#__PURE__*/React.createElement(CircleIcon, {
+    className: "size-2 fill-current"
+  }))), children);
+}
+function DropdownMenuLabel(_ref10) {
+  var className = _ref10.className,
+    inset = _ref10.inset,
+    props = _objectWithoutProperties(_ref10, _excluded5);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Label, _extends({
+    "data-slot": "dropdown-menu-label",
+    "data-inset": inset,
+    className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)
+  }, props));
+}
+function DropdownMenuSeparator(_ref11) {
+  var className = _ref11.className,
+    props = _objectWithoutProperties(_ref11, _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,
+    props = _objectWithoutProperties(_ref12, _excluded7);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)
+  }, props));
+}
+function DropdownMenuSub(_ref13) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref13), _ref13));
+  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,
+    props = _objectWithoutProperties(_ref14, _excluded8);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubTrigger, _extends({
+    "data-slot": "dropdown-menu-sub-trigger",
+    "data-inset": inset,
+    className: cn('focus:bg-accent focus:text-accent-foreground', 'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', 'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className)
+  }, props), children, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    className: "ml-auto size-4"
+  }));
+}
+function DropdownMenuSubContent(_ref15) {
+  var className = _ref15.className,
+    props = _objectWithoutProperties(_ref15, _excluded9);
+  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)
+  }, props));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };

package/dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from './dropdown-menu.component';

package/dropdown-menu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from './dropdown-menu.component';

package/input/input.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { InputProps } from './input.types';
 declare const inputVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Input({ className, type, size, disabled, readOnly, ...props }: InputProps): React.JSX.Element;
 export { Input, inputVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "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-checkbox": "^1.3.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.3.7",
@@ -22,7 +23,8 @@
     "@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.40",
+    "@scaleflex/icons-tw": "^0.0.42",
+    "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",

package/pill/pill.component.d.ts

@@ -1,8 +1,8 @@
 import type { PillProps } from '@scaleflex/ui-tw/pill/pill.types';
 import React from 'react';
 declare const pillVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "outline" | "default" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Pill({ className, size, variant, removable, onRemove, ...props }: PillProps): React.JSX.Element;
 export { Pill, pillVariants };

package/select/select.component.d.ts

@@ -5,7 +5,7 @@ declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root
 declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 export declare const selectTriggerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function SelectTrigger({ className, size, children, readOnly, icon, ...props }: SelectTriggerProps): React.JSX.Element;
 declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;

package/table/index.d.ts

@@ -0,0 +1 @@
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from './table.component';

package/table/index.js

@@ -0,0 +1 @@
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './table.component';

package/table/table.component.d.ts

@@ -0,0 +1,15 @@
+import React, { type ComponentProps } from 'react';
+declare function Table({ className, sticky, wrapperClassName, ...props }: ComponentProps<'table'> & {
+    sticky?: boolean;
+    wrapperClassName?: string;
+}): React.JSX.Element;
+declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): React.JSX.Element;
+declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): React.JSX.Element;
+declare function TableFooter({ className, ...props }: ComponentProps<'tfoot'>): React.JSX.Element;
+declare function TableRow({ className, ...props }: ComponentProps<'tr'>): React.JSX.Element;
+declare function TableHead({ className, sticky, ...props }: ComponentProps<'th'> & {
+    sticky?: boolean;
+}): React.JSX.Element;
+declare function TableCell({ className, ...props }: ComponentProps<'td'>): React.JSX.Element;
+declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/table/table.component.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "sticky", "wrapperClassName"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className", "sticky"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className"];
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+function Table(_ref) {
+  var className = _ref.className,
+    sticky = _ref.sticky,
+    wrapperClassName = _ref.wrapperClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-slot": "table-container",
+    className: cn('relative w-full overflow-x-auto', sticky && 'max-h-[400px] overflow-auto', wrapperClassName)
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    "data-slot": "table",
+    className: cn('w-full caption-bottom text-sm', className)
+  }, props)));
+}
+function TableHeader(_ref2) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("thead", _extends({
+    "data-slot": "table-header",
+    className: cn('[&_tr]:border-b-border [&_tr]:border-b [&_tr]:hover:bg-transparent', className)
+  }, props));
+}
+function TableBody(_ref3) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    "data-slot": "table-body",
+    className: cn('[&_tr:last-child]:border-0', className)
+  }, props));
+}
+function TableFooter(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement("tfoot", _extends({
+    "data-slot": "table-footer",
+    className: cn('bg-muted/50 border-t-border border-t font-medium [&>tr]:last:border-b-0', className)
+  }, props));
+}
+function TableRow(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    "data-slot": "table-row",
+    className: cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b-border border-b transition-colors', className)
+  }, props));
+}
+function TableHead(_ref6) {
+  var className = _ref6.className,
+    sticky = _ref6.sticky,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement("th", _extends({
+    "data-slot": "table-head",
+    className: cn(sticky && 'sticky top-0 z-10', 'bg-background text-secondary-foreground h-12 px-4 text-left align-middle text-sm font-normal whitespace-nowrap', '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)
+  }, props));
+}
+function TableCell(_ref7) {
+  var className = _ref7.className,
+    props = _objectWithoutProperties(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement("td", _extends({
+    "data-slot": "table-cell",
+    className: cn('px-4 py-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)
+  }, props));
+}
+function TableCaption(_ref8) {
+  var className = _ref8.className,
+    props = _objectWithoutProperties(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement("caption", _extends({
+    "data-slot": "table-caption",
+    className: cn('text-muted-foreground mt-4 text-sm', className)
+  }, props));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/textarea/components/left-toolbar-buttons.js

@@ -9,6 +9,7 @@ export var LeftToolbarButtons = function LeftToolbarButtons(props) {
   var _getToolbarSizes = getToolbarSizes(size),
     buttonSize = _getToolbarSizes.buttonSize;
   return /*#__PURE__*/React.createElement(React.Fragment, null, onGenerate && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     variant: "ghost-primary",
     size: buttonSize,
     startIcon: /*#__PURE__*/React.createElement(SparkleIcon, {
@@ -16,6 +17,7 @@ export var LeftToolbarButtons = function LeftToolbarButtons(props) {
     }),
     onClick: onGenerate
   }, "Generate"), onClearAll && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     variant: "ghost-secondary",
     size: buttonSize,
     onClick: onClearAll

package/textarea/components/right-toolbar-buttons.js

@@ -16,6 +16,7 @@ export var RightToolbarButtons = function RightToolbarButtons(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, onTranslate && /*#__PURE__*/React.createElement(WithTooltip, {
     content: translateActionTooltip
   }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
     variant: "ghost-primary",
     size: iconSize,
     onClick: onTranslate

package/textarea/components/textarea-with-actions.d.ts

@@ -1,4 +1,4 @@
 import type { TextareaWithActionsProps } from '@scaleflex/ui-tw/textarea/textarea.types';
 import React from 'react';
-declare function TextareaWithActions({ leftToolbar, rightToolbar, className, ...textareaProps }: TextareaWithActionsProps): React.JSX.Element;
+declare function TextareaWithActions({ leftToolbar, rightToolbar, className, onBlur, ...textareaProps }: TextareaWithActionsProps): React.JSX.Element;
 export { TextareaWithActions };

package/textarea/components/textarea-with-actions.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leftToolbar", "rightToolbar", "className"];
-import { textareaWithActionsSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
+var _excluded = ["leftToolbar", "rightToolbar", "className", "onBlur"];
+import { textareaBottomActionAreaPadding, textareaWithActionsSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
-import React from 'react';
+import React, { useRef } from 'react';
 import { Textarea } from '../';
 var textareaWithActionsVariants = cva('', {
   variants: {
@@ -19,19 +19,41 @@ function TextareaWithActions(_ref) {
   var leftToolbar = _ref.leftToolbar,
     rightToolbar = _ref.rightToolbar,
     className = _ref.className,
+    onBlur = _ref.onBlur,
     textareaProps = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = textareaProps || {},
-    size = _ref2.size;
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? FormSize.Md : _ref2$size;
+  var textareaRef = useRef(null);
+  var handleActionClick = function handleActionClick(e) {
+    var _textareaRef$current;
+    e.preventDefault();
+    (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+  };
+  var handleBlur = function handleBlur(e) {
+    var relatedTarget = e.relatedTarget;
+    if (relatedTarget !== null && relatedTarget !== void 0 && relatedTarget.closest('[data-action-area]')) {
+      return;
+    }
+    onBlur === null || onBlur === void 0 || onBlur(e);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
     className: cn(className, textareaWithActionsVariants({
       size: size
-    }))
-  })), leftToolbar && /*#__PURE__*/React.createElement("div", {
+    })),
+    ref: textareaRef,
+    onBlur: handleBlur
+  })), (leftToolbar || rightToolbar) && /*#__PURE__*/React.createElement("div", {
+    "data-action-area": true,
+    className: cn('bg-background absolute right-2.5 bottom-0.25 left-2.5', textareaBottomActionAreaPadding[size]),
+    onClick: handleActionClick,
+    tabIndex: -1
+  }, leftToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute bottom-1.5 left-1.5 flex items-center gap-0.5"
   }, leftToolbar), rightToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute right-1.5 bottom-1.5 flex items-center gap-0.5"
-  }, rightToolbar));
+  }, rightToolbar)));
 }
 export { TextareaWithActions };

package/textarea/textarea.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextareaProps } from './textarea.types';
 declare const textareaVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Textarea({ className, size, disabled, readOnly, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea, textareaVariants };

package/textarea/textarea.constants.d.ts

@@ -4,7 +4,12 @@ export declare const textareaSizeOptions: {
     readonly lg: "py-3 px-4 text-lg min-h-20 max-h-60";
 };
 export declare const textareaWithActionsSizeOptions: {
-    readonly sm: "pb-10";
-    readonly md: "pb-12";
-    readonly lg: "pb-14";
+    readonly sm: "pb-10 scroll-pb-10";
+    readonly md: "pb-12 scroll-pb-12";
+    readonly lg: "pb-14 scroll-pb-14";
+};
+export declare const textareaBottomActionAreaPadding: {
+    readonly sm: "h-8";
+    readonly md: "h-10";
+    readonly lg: "h-12";
 };

package/textarea/textarea.constants.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm min-h-14 max-h-44'), FormSize.Md, 'py-3 px-4 text-base min-h-16 max-h-48'), FormSize.Lg, 'py-3 px-4 text-lg min-h-20 max-h-60');
-export var textareaWithActionsSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pb-10'), FormSize.Md, 'pb-12'), FormSize.Lg, 'pb-14');
+export var textareaWithActionsSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pb-10 scroll-pb-10'), FormSize.Md, 'pb-12 scroll-pb-12'), FormSize.Lg, 'pb-14 scroll-pb-14');
+export var textareaBottomActionAreaPadding = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-8'), FormSize.Md, 'h-10'), FormSize.Lg, 'h-12');