@scaleflex/ui-tw 0.0.26 → 0.0.27

package/form/components/form-select-field.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { FormSelectFieldProps } from '../form.types';
+declare function FormSelectField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ selectProps, ...rest }: FormSelectFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormSelectField };

package/form/components/form-select-field.component.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "placeholder", "options"],
+  _excluded2 = ["selectProps"];
+import { isOptionGroup, useFormField } from '@scaleflex/ui-tw/form';
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@scaleflex/ui-tw/select';
+import React from 'react';
+function FormSelectInner(_ref) {
+  var field = _ref.field,
+    args = _ref.args,
+    selectProps = _ref.selectProps,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    className = _ref.className;
+  var _useFormField = useFormField(),
+    error = _useFormField.error,
+    formItemId = _useFormField.formItemId;
+  var _ref2 = selectProps || {},
+    icon = _ref2.icon,
+    placeholder = _ref2.placeholder,
+    options = _ref2.options,
+    restSelectProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    onValueChange: readOnly ? undefined : field.onChange,
+    defaultValue: field.value,
+    disabled: disabled || readOnly
+  }, restSelectProps), /*#__PURE__*/React.createElement(SelectTrigger, {
+    id: formItemId,
+    "aria-invalid": !!error,
+    size: args === null || args === void 0 ? void 0 : args.size,
+    readOnly: readOnly,
+    className: className,
+    icon: icon
+  }, /*#__PURE__*/React.createElement(SelectValue, {
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Select'
+  })), /*#__PURE__*/React.createElement(SelectContent, null, options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {
+    if (isOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(SelectGroup, {
+        key: groupIndex
+      }, option.label && /*#__PURE__*/React.createElement(SelectLabel, {
+        size: args === null || args === void 0 ? void 0 : args.size
+      }, option.label), option.options.map(function (_ref3) {
+        var label = _ref3.label,
+          value = _ref3.value,
+          disabled = _ref3.disabled,
+          icon = _ref3.icon,
+          tooltip = _ref3.tooltip;
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          key: value,
+          value: value,
+          disabled: disabled,
+          size: args === null || args === void 0 ? void 0 : args.size,
+          icon: icon,
+          tooltip: tooltip,
+          isGroup: !!option.label
+        }, label);
+      }), groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
+    }
+    return /*#__PURE__*/React.createElement(SelectGroup, {
+      key: "default"
+    }, /*#__PURE__*/React.createElement(SelectItem, {
+      value: option.value,
+      disabled: option.disabled,
+      size: args === null || args === void 0 ? void 0 : args.size,
+      icon: option.icon,
+      tooltip: option.tooltip
+    }, option.label));
+  })));
+}
+function FormSelectField(_ref4) {
+  var selectProps = _ref4.selectProps,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
+  var readOnly = rest.readOnly,
+    disabled = rest.disabled;
+  return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
+    return /*#__PURE__*/React.createElement(FormSelectInner, {
+      field: field,
+      args: args,
+      selectProps: selectProps,
+      readOnly: readOnly,
+      disabled: disabled
+    });
+  });
+}
+export { FormSelectField };

package/form/form.types.d.ts

@@ -1,4 +1,5 @@
 import { InputProps } from '@scaleflex/ui-tw/input';
+import { SelectProps } from '@scaleflex/ui-tw/select/select.types';
 import { SwitchProps } from '@scaleflex/ui-tw/switch/switch.types';
 import { TextareaProps } from '@scaleflex/ui-tw/textarea';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
@@ -45,3 +46,32 @@ export type FormInputFieldProps<TFieldValues extends FieldValues, TName extends
 export type FormTextareaFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
     textareaProps?: TextareaProps;
 };
+export interface FlatOption {
+    label: ReactElement | string;
+    value: string;
+    disabled?: boolean;
+    icon?: ReactElement;
+    tooltip?: ReactElement | string;
+}
+export interface OptionGroup {
+    label?: ReactElement | string;
+    options: FlatOption[];
+}
+export type SelectOption = FlatOption | OptionGroup;
+export type FormSelectProps = SelectProps & {
+    options: SelectOption[];
+    placeholder?: string;
+    icon?: ReactElement;
+};
+export type FormSelectFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    icon?: ReactElement;
+    selectProps?: FormSelectProps;
+};
+export interface FormSelectInnerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    args: FormFieldArgs | undefined;
+    selectProps?: FormSelectProps;
+    readOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+}

package/form/form.utils.d.ts

@@ -0,0 +1,2 @@
+import { FlatOption, OptionGroup } from '@scaleflex/ui-tw/form';
+export declare const isOptionGroup: (option: FlatOption | OptionGroup) => option is OptionGroup;

package/form/form.utils.js

@@ -0,0 +1,3 @@
+export var isOptionGroup = function isOptionGroup(option) {
+  return 'options' in option;
+};

package/form/index.d.ts

@@ -1,6 +1,9 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, } from './form.component';
+export { isOptionGroup } from './form.utils';
+export { SelectOption, FlatOption, OptionGroup } from './form.types';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
 export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
 export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSelectField } from './components/form-select-field.component';

package/form/index.js

@@ -1,6 +1,9 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField } from './form.component';
+export { isOptionGroup } from './form.utils';
+export { SelectOption, FlatOption, OptionGroup } from './form.types';
 export { FormFieldGroup } from './components/form-field-group.component';
 export { FormInputField } from './components/form-input-field.component';
 export { FormPasswordField } from './components/form-password-field.component';
 export { FormTextareaField } from './components/form-textarea-field.component';
-export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSwitchField } from './components/form-switch-field.component';
+export { FormSelectField } from './components/form-select-field.component';

package/input/input.component.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "type", "size", "disabled", "readOnly"];
+import { getBaseInputClasses } from '@scaleflex/ui-tw/input/input.utils';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -30,10 +32,10 @@ function Input(_ref) {
     "data-slot": "input",
     disabled: disabled,
     readOnly: readOnly,
-    className: cn('border-input text-foreground bg-background flex w-full min-w-0 rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'focus-visible:border-secondary-foreground/50 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:border-secondary-foreground/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20', inputVariants({
+    className: cn.apply(void 0, ['flex w-full min-w-0'].concat(_toConsumableArray(getBaseInputClasses()), ['read-only:bg-secondary read-only:text-foreground read-only:cursor-default', 'selection:bg-primary selection:text-primary-foreground', inputVariants({
       size: size,
       className: className
-    }))
+    })]))
   }, props));
 }
 export { Input, inputVariants };

package/input/input.constants.d.ts

@@ -1,5 +1,5 @@
 export declare const inputSizeOptions: {
-    readonly sm: "py-2 px-3 text-sm h-8";
+    readonly sm: "py-2 px-3 h-8 text-sm";
     readonly md: "py-3 px-4 h-10 text-base ";
     readonly lg: "py-3 px-4 h-12 text-lg ";
 };

package/input/input.constants.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm h-8'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');
+export var inputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-sm'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');
 export var InputType = {
   Text: 'text',
   Email: 'email',

package/input/input.utils.d.ts

@@ -0,0 +1 @@
+export declare const getBaseInputClasses: () => string[];

package/input/input.utils.js

@@ -0,0 +1,3 @@
+export var getBaseInputClasses = function getBaseInputClasses() {
+  return ['rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'border-input text-foreground bg-background', 'placeholder:text-muted-foreground/80 hover:border-secondary-foreground/50', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-secondary-foreground/50 focus-visible:ring-ring ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive', 'focus-visible:group-data-[highlight=true]:border-warning group-data-[highlight=true]:border-warning hover:group-data-[highlight=true]:border-warning/60 group-data-[highlight=true]:focus-visible:ring-warning/20'];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -14,11 +14,12 @@
   "dependencies": {
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.6",
     "@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.26",
+    "@scaleflex/icons-tw": "^0.0.27",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",

package/select/components/select-icon.d.ts

@@ -0,0 +1,2 @@
+import { SelectIconProps } from '@scaleflex/ui-tw/select/select.types';
+export declare const SelectIcon: (props: SelectIconProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/select/components/select-icon.js

@@ -0,0 +1,22 @@
+import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
+import { getIconMarginRightInRem } from '@scaleflex/ui-tw/select/select.utils';
+import { cloneElement, useMemo } from 'react';
+export var SelectIcon = function SelectIcon(props) {
+  var size = props.size,
+    icon = props.icon;
+  var sizeInRem = useMemo(function () {
+    return getIconSizeInRem(size);
+  }, [size]);
+  var marginRight = useMemo(function () {
+    return getIconMarginRightInRem(size);
+  }, [size]);
+  if (!icon) return null;
+  return /*#__PURE__*/cloneElement(icon, {
+    size: sizeInRem,
+    style: {
+      width: sizeInRem,
+      height: sizeInRem,
+      marginRight: marginRight
+    }
+  });
+};

package/select/index.d.ts

@@ -0,0 +1 @@
+export { Select, SelectGroup, SelectItem, SelectLabel, SelectContent, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectValue, SelectTrigger, } from './select.component';

package/select/index.js

@@ -0,0 +1 @@
+export { Select, SelectGroup, SelectItem, SelectLabel, SelectContent, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectValue, SelectTrigger } from './select.component';

package/select/select.component.d.ts

@@ -0,0 +1,14 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { SelectItemProps, SelectLabelProps, SelectTriggerProps } from '@scaleflex/ui-tw/select/select.types';
+import React, { ComponentProps } from 'react';
+declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+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;
+declare function SelectLabel({ className, size, ...props }: SelectLabelProps): React.JSX.Element;
+declare function SelectItem({ className, children, size, icon, tooltip, isGroup, ...props }: SelectItemProps): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/select/select.component.js

@@ -0,0 +1,165 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["className", "size", "children", "readOnly", "icon"],
+  _excluded2 = ["className", "children", "position"],
+  _excluded3 = ["className", "size"],
+  _excluded4 = ["className", "children", "size", "icon", "tooltip", "isGroup"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"],
+  _excluded7 = ["className"];
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
+import { getBaseInputClasses } from '@scaleflex/ui-tw/input/input.utils';
+import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
+import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
+import { selectLabelSizeOptions } from '@scaleflex/ui-tw/select/select.constants';
+import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { cva } from 'class-variance-authority';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import React from 'react';
+function Select(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Root, _extends({
+    "data-slot": "select"
+  }, props));
+}
+function SelectGroup(_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Group, _extends({
+    "data-slot": "select-group"
+  }, props));
+}
+function SelectValue(_ref3) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Value, _extends({
+    "data-slot": "select-value"
+  }, props));
+}
+var selectTriggerVariants = cva('', {
+  variants: {
+    size: inputSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var selectLabelVariants = cva('', {
+  variants: {
+    size: selectLabelSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function SelectTrigger(_ref4) {
+  var className = _ref4.className,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? FormSize.Md : _ref4$size,
+    children = _ref4.children,
+    _ref4$readOnly = _ref4.readOnly,
+    readOnly = _ref4$readOnly === void 0 ? false : _ref4$readOnly,
+    icon = _ref4.icon,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Trigger, _extends({
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn.apply(void 0, ['flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm whitespace-nowrap'].concat(_toConsumableArray(getBaseInputClasses()), ['data-[placeholder]:text-muted-foreground/80 hover:border-secondary-foreground/50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectTriggerVariants({
+      size: size,
+      className: className
+    }), readOnly && 'bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100', className]))
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
+    size: size,
+    icon: icon
+  }), children), /*#__PURE__*/React.createElement(SelectPrimitive.Icon, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    className: cn('opacity-50', size === FormSize.Lg ? 'size-5' : 'size-4.5')
+  })));
+}
+function SelectContent(_ref5) {
+  var className = _ref5.className,
+    children = _ref5.children,
+    _ref5$position = _ref5.position,
+    position = _ref5$position === void 0 ? 'popper' : _ref5$position,
+    props = _objectWithoutProperties(_ref5, _excluded2);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Portal, null, /*#__PURE__*/React.createElement(SelectPrimitive.Content, _extends({
+    "data-slot": "select-content",
+    className: cn('bg-popover text-popover-foreground relative z-50 max-h-(--max-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md', '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', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+    position: position
+  }, props), /*#__PURE__*/React.createElement(SelectScrollUpButton, null), /*#__PURE__*/React.createElement(SelectPrimitive.Viewport, {
+    className: cn(position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1')
+  }, children), /*#__PURE__*/React.createElement(SelectScrollDownButton, null)));
+}
+function SelectLabel(_ref6) {
+  var className = _ref6.className,
+    size = _ref6.size,
+    props = _objectWithoutProperties(_ref6, _excluded3);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Label, _extends({
+    "data-slot": "select-label",
+    className: cn('text-secondary-foreground font-medium', selectLabelVariants({
+      size: size
+    }), className)
+  }, props));
+}
+function SelectItem(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children,
+    size = _ref7.size,
+    icon = _ref7.icon,
+    tooltip = _ref7.tooltip,
+    isGroup = _ref7.isGroup,
+    props = _objectWithoutProperties(_ref7, _excluded4);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Item, _extends({
+    "data-slot": "select-item",
+    className: cn('relative flex w-full cursor-pointer items-center gap-2 text-sm outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectTriggerVariants({
+      size: size
+    }), isGroup && getOptionInGroupPaddingLeft(size), className)
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "absolute right-2 flex size-3.5 items-center justify-center"
+  }, /*#__PURE__*/React.createElement(SelectPrimitive.ItemIndicator, null, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: cn('text-primary', size === FormSize.Lg ? 'size-5' : 'size-4.5')
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
+    size: size,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, null, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
+    size: size,
+    tooltip: tooltip
+  })));
+}
+function SelectSeparator(_ref8) {
+  var className = _ref8.className,
+    props = _objectWithoutProperties(_ref8, _excluded5);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.Separator, _extends({
+    "data-slot": "select-separator",
+    className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)
+  }, props));
+}
+function SelectScrollUpButton(_ref9) {
+  var className = _ref9.className,
+    props = _objectWithoutProperties(_ref9, _excluded6);
+  return /*#__PURE__*/React.createElement(SelectPrimitive.ScrollUpButton, _extends({
+    "data-slot": "select-scroll-up-button",
+    className: cn('flex cursor-default items-center justify-center py-1', className)
+  }, props), /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    className: "size-4"
+  }));
+}
+function SelectScrollDownButton(_ref10) {
+  var className = _ref10.className,
+    props = _objectWithoutProperties(_ref10, _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)
+  }, props), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    className: "size-4"
+  }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/select/select.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const selectLabelSizeOptions: {
+    readonly sm: "py-2 px-3 h-8 text-sm";
+    readonly md: "py-3 px-4 h-10 text-base ";
+    readonly lg: "py-3 px-4 h-12 text-lg ";
+};

package/select/select.constants.js

@@ -0,0 +1,3 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var selectLabelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-sm'), FormSize.Md, 'py-3 px-4 h-10 text-base '), FormSize.Lg, 'py-3 px-4 h-12 text-lg ');

package/select/select.types.d.ts

@@ -0,0 +1,22 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { ComponentProps, ReactElement } from 'react';
+export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
+}
+export interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
+    size?: FormSizeType;
+    icon?: ReactElement;
+    readOnly?: boolean;
+    'aria-invalid'?: boolean;
+}
+export interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
+    icon?: ReactElement;
+    size?: FormSizeType;
+    tooltip?: ReactElement | string;
+    isGroup?: boolean;
+}
+export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.Label> {
+    size?: FormSizeType;
+}
+export interface SelectIconProps extends ComponentProps<'span'>, Pick<SelectTriggerProps, 'size' | 'icon'> {
+}

package/select/select.types.js

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

package/select/select.utils.d.ts

@@ -0,0 +1,3 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+export declare const getIconMarginRightInRem: (sizeName?: FormSizeType | null) => string;
+export declare const getOptionInGroupPaddingLeft: (sizeName?: FormSizeType | null) => string;

package/select/select.utils.js

@@ -0,0 +1,28 @@
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var getIconMarginRightInRem = function getIconMarginRightInRem(sizeName) {
+  switch (sizeName) {
+    case FormSize.Lg:
+      return '0.75rem';
+    // 12px
+    case FormSize.Md:
+      return '0.625rem';
+    // 10px
+    case FormSize.Sm:
+      return '0.625rem';
+    // 10px
+    default:
+      return '0.625rem';
+  }
+};
+export var getOptionInGroupPaddingLeft = function getOptionInGroupPaddingLeft(sizeName) {
+  switch (sizeName) {
+    case FormSize.Lg:
+      return 'pl-8';
+    case FormSize.Md:
+      return 'pl-8';
+    case FormSize.Sm:
+      return 'pl-6';
+    default:
+      return 'pl-8';
+  }
+};

package/styles/variables.css

@@ -52,6 +52,8 @@
   --panel-border: oklch(0.9103 0.0177 246.73);
   --panel-input: oklch(1 0 0);
   --panel-ring: oklch(0.578 0.198 268.129 / 0.7);
+
+  --max-select-content-available-height: 27.5rem;
 }
 
 :root.dark {

package/tooltip/tooltip.component.js

@@ -41,7 +41,7 @@ var tooltipVariants = cva('', {
 function TooltipContent(_ref4) {
   var className = _ref4.className,
     _ref4$sideOffset = _ref4.sideOffset,
-    sideOffset = _ref4$sideOffset === void 0 ? 0 : _ref4$sideOffset,
+    sideOffset = _ref4$sideOffset === void 0 ? 6 : _ref4$sideOffset,
     children = _ref4.children,
     _ref4$variant = _ref4.variant,
     variant = _ref4$variant === void 0 ? TooltipVariant.Default : _ref4$variant,
@@ -49,14 +49,10 @@ function TooltipContent(_ref4) {
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, _extends({
     "data-slot": "tooltip-content",
     sideOffset: sideOffset,
-    className: cn('animate-in fade-in-0 zoom-in-95 text-md z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2', '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=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
+    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-50 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 shadow-sm', '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=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
       variant: variant
     }), className)
-  }, props), children, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: cn('z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] fill-transparent', tooltipVariants({
-      variant: variant
-    }))
-  })));
+  }, props), children));
 }
 function WithTooltip(_ref5) {
   var variant = _ref5.variant,