@scaleflex/ui-tw 0.0.29 → 0.0.30

package/popover/popover.component.js

@@ -0,0 +1,40 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["className", "align", "sideOffset"];
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+function Popover(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Root, _extends({
+    "data-slot": "popover"
+  }, props));
+}
+function PopoverTrigger(_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, _extends({
+    "data-slot": "popover-trigger"
+  }, props));
+}
+function PopoverContent(_ref3) {
+  var className = _ref3.className,
+    _ref3$align = _ref3.align,
+    align = _ref3$align === void 0 ? 'start' : _ref3$align,
+    _ref3$sideOffset = _ref3.sideOffset,
+    sideOffset = _ref3$sideOffset === void 0 ? 4 : _ref3$sideOffset,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, _extends({
+    "data-slot": "popover-content",
+    align: align,
+    sideOffset: sideOffset,
+    className: cn('bg-popover text-popover-foreground border-border z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-sm outline-hidden', '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', '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', className)
+  }, props)));
+}
+function PopoverAnchor(_ref4) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, _extends({
+    "data-slot": "popover-anchor"
+  }, props));
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/select/components/select-icon.js

@@ -3,7 +3,8 @@ 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;
+    icon = props.icon,
+    className = props.className;
   var sizeInRem = useMemo(function () {
     return getIconSizeInRem(size);
   }, [size]);
@@ -17,6 +18,7 @@ export var SelectIcon = function SelectIcon(props) {
       width: sizeInRem,
       height: sizeInRem,
       marginRight: marginRight
-    }
+    },
+    className: className
   });
 };

package/select/components/selector.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectorProps } from '../select.types';
+export declare function Selector({ value, onChange, placeholder, disabled, readOnly, size, className, icon, options, showGroupSeparator, formItemId, ...rest }: SelectorProps): React.JSX.Element;

package/select/components/selector.js

@@ -0,0 +1,66 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onChange", "placeholder", "disabled", "readOnly", "size", "className", "icon", "options", "showGroupSeparator", "formItemId"];
+import { isOptionGroup } from '@scaleflex/ui-tw/form';
+import React from 'react';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '../';
+export function Selector(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select' : _ref$placeholder,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    size = _ref.size,
+    className = _ref.className,
+    icon = _ref.icon,
+    options = _ref.options,
+    showGroupSeparator = _ref.showGroupSeparator,
+    formItemId = _ref.formItemId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Select, {
+    value: value,
+    onValueChange: readOnly ? undefined : onChange,
+    disabled: disabled || readOnly
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    id: formItemId,
+    "aria-invalid": rest['aria-invalid'],
+    size: size,
+    readOnly: readOnly,
+    className: className,
+    icon: icon
+  }, /*#__PURE__*/React.createElement(SelectValue, {
+    placeholder: placeholder
+  })), /*#__PURE__*/React.createElement(SelectContent, null, options.map(function (option, groupIndex) {
+    if (isOptionGroup(option)) {
+      return /*#__PURE__*/React.createElement(SelectGroup, {
+        key: groupIndex
+      }, option.label && /*#__PURE__*/React.createElement(SelectLabel, {
+        size: size
+      }, option.label), option.options.map(function (_ref2) {
+        var label = _ref2.label,
+          value = _ref2.value,
+          disabled = _ref2.disabled,
+          icon = _ref2.icon,
+          tooltip = _ref2.tooltip;
+        return /*#__PURE__*/React.createElement(SelectItem, {
+          key: value,
+          value: value,
+          disabled: disabled,
+          size: size,
+          icon: icon,
+          tooltip: tooltip,
+          isGroup: !!option.label
+        }, label);
+      }), showGroupSeparator && 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: size,
+      icon: option.icon,
+      tooltip: option.tooltip
+    }, option.label));
+  })));
+}

package/select/index.d.ts

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

package/select/index.js

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

package/select/select.component.d.ts

@@ -4,6 +4,9 @@ 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;
+export declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | 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;
 declare function SelectLabel({ className, size, ...props }: SelectLabelProps): React.JSX.Element;

package/select/select.component.js

@@ -13,7 +13,6 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { inputSizeOptions } from '@scaleflex/ui-tw/input/input.constants';
 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 { getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
@@ -21,6 +20,7 @@ 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';
+import { getBaseSelectClassNames, selectLabelSizeOptions, selectReadOnlyClassNames } from './select.constants';
 function Select(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(SelectPrimitive.Root, _extends({
@@ -39,7 +39,7 @@ function SelectValue(_ref3) {
     "data-slot": "select-value"
   }, props));
 }
-var selectTriggerVariants = cva('', {
+export var selectTriggerVariants = cva('', {
   variants: {
     size: inputSizeOptions
   },
@@ -67,10 +67,10 @@ function SelectTrigger(_ref4) {
   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', '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"].concat(_toConsumableArray(getBaseInputClasses()), [selectTriggerVariants({
+    className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['data-[placeholder]:text-muted-foreground/80 hover:border-secondary-foreground/50', selectTriggerVariants({
       size: size,
       className: className
-    }), readOnly && 'bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100', className]))
+    }), readOnly && selectReadOnlyClassNames, className]))
   }, props), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center"
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
@@ -90,7 +90,7 @@ function SelectContent(_ref5) {
     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),
+    className: cn('border-border bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md', 'max-h-(--max-select-content-available-height) origin-(--radix-select-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', 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')
@@ -102,7 +102,7 @@ function SelectLabel(_ref6) {
     props = _objectWithoutProperties(_ref6, _excluded3);
   return /*#__PURE__*/React.createElement(SelectPrimitive.Label, _extends({
     "data-slot": "select-label",
-    className: cn('text-secondary-foreground font-medium', selectLabelVariants({
+    className: cn('text-secondary-foreground', selectLabelVariants({
       size: size
     }), className)
   }, props));
@@ -117,7 +117,7 @@ function SelectItem(_ref7) {
     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({
+    className: cn('relative flex w-full cursor-pointer items-center gap-2 outline-hidden select-none', 'focus:bg-accent focus:text-accent-foreground', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[state=checked]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_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", {
@@ -128,7 +128,8 @@ function SelectItem(_ref7) {
     className: "flex items-center"
   }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
     size: size,
-    icon: icon
+    icon: icon,
+    className: "text-muted-foreground data-[state=checked]:text-primary"
   }), /*#__PURE__*/React.createElement(SelectPrimitive.ItemText, null, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
     tooltip: tooltip

package/select/select.constants.d.ts

@@ -1,5 +1,7 @@
 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 ";
+    readonly sm: "py-2 px-3 h-8 text-xs";
+    readonly md: "py-3 px-4 h-10 text-sm ";
+    readonly lg: "py-3 px-4 h-12 text-base ";
 };
+export declare const selectReadOnlyClassNames = "bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100";
+export declare const getBaseSelectClassNames: () => string[];

package/select/select.constants.js

@@ -1,3 +1,7 @@
 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 ');
+export var selectLabelSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 h-8 text-xs'), FormSize.Md, 'py-3 px-4 h-10 text-sm '), FormSize.Lg, 'py-3 px-4 h-12 text-base ');
+export var selectReadOnlyClassNames = 'bg-secondary text-foreground pointer-events-none cursor-default disabled:opacity-100';
+export var getBaseSelectClassNames = function getBaseSelectClassNames() {
+  return ['flex w-full cursor-pointer items-center justify-between gap-2 whitespace-nowrap', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"];
+};

package/select/select.types.d.ts

@@ -1,4 +1,5 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { SelectOption } from '@scaleflex/ui-tw/form';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import { ComponentProps, ReactElement } from 'react';
 export interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
@@ -20,3 +21,17 @@ export interface SelectLabelProps extends ComponentProps<typeof SelectPrimitive.
 }
 export interface SelectIconProps extends ComponentProps<'span'>, Pick<SelectTriggerProps, 'size' | 'icon'> {
 }
+export interface SelectorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: FormSizeType;
+    className?: string;
+    icon?: ReactElement;
+    options: SelectOption[];
+    showGroupSeparator?: boolean;
+    formItemId?: string;
+    'aria-invalid'?: boolean;
+}