@scaleflex/ui-tw 0.0.29 → 0.0.31

package/command/command.component.js

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["title", "description", "children"],
+  _excluded3 = ["className", "size"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className", "size"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut"],
+  _excluded9 = ["className"];
+import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
+import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
+import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
+import { selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
+import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+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';
+import { cva } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { CheckIcon, SearchIcon } from 'lucide-react';
+import React from 'react';
+import { selectCommandHeadingOptions } from './command.utils';
+function Command(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CommandPrimitive, _extends({
+    "data-slot": "command",
+    className: cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden', className)
+  }, props));
+}
+function CommandDialog(_ref2) {
+  var _ref2$title = _ref2.title,
+    title = _ref2$title === void 0 ? 'Command Palette' : _ref2$title,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? 'Search for a command to run...' : _ref2$description,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Dialog, props, /*#__PURE__*/React.createElement(DialogFormHeader, {
+    className: "sr-only"
+  }, /*#__PURE__*/React.createElement(DialogFormTitle, null, title), /*#__PURE__*/React.createElement(DialogFormDescription, null, description)), /*#__PURE__*/React.createElement(DialogWideContent, {
+    className: "overflow-hidden p-0"
+  }, /*#__PURE__*/React.createElement(Command, {
+    className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+  }, children)));
+}
+function CommandInput(_ref3) {
+  var className = _ref3.className,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? FormSize.Md : _ref3$size,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-slot": "command-input-wrapper",
+    className: cn('border-border flex h-10 items-center gap-2 border-b px-4', selectTriggerVariants({
+      size: size
+    }))
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    className: cn('shrink-0 opacity-50', switchThumbSizeOptions[size])
+  }), /*#__PURE__*/React.createElement(CommandPrimitive.Input, _extends({
+    "data-slot": "command-input",
+    className: cn('placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)
+  }, props)));
+}
+function CommandList(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(CommandPrimitive.List, _extends({
+    "data-slot": "command-list",
+    className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)
+  }, props));
+}
+function CommandEmpty(_ref5) {
+  var className = _ref5.className,
+    rest = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(CommandPrimitive.Empty, _extends({
+    "data-slot": "command-empty",
+    className: cn('text-muted-foreground py-6 text-center text-sm', className)
+  }, rest));
+}
+var selectCommandHeadingVariants = cva('', {
+  variants: {
+    size: selectCommandHeadingOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function CommandGroup(_ref6) {
+  var className = _ref6.className,
+    size = _ref6.size,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(CommandPrimitive.Group, _extends({
+    "data-slot": "command-group",
+    className: cn('[&_[cmdk-group-heading]]:text-secondary-foreground [&_[cmdk-group-heading]]:pointer-events-none', 'text-foreground overflow-hidden', selectCommandHeadingVariants({
+      size: size
+    }), className)
+  }, props));
+}
+function CommandSeparator(_ref7) {
+  var className = _ref7.className,
+    props = _objectWithoutProperties(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement(CommandPrimitive.Separator, _extends({
+    "data-slot": "command-separator",
+    className: cn('bg-border -mx-1 h-px', className)
+  }, props));
+}
+function CommandItem(_ref8) {
+  var className = _ref8.className,
+    size = _ref8.size,
+    isGroup = _ref8.isGroup,
+    icon = _ref8.icon,
+    tooltip = _ref8.tooltip,
+    children = _ref8.children,
+    selectedValue = _ref8.selectedValue,
+    multiple = _ref8.multiple,
+    value = _ref8.value,
+    shortcut = _ref8.shortcut,
+    props = _objectWithoutProperties(_ref8, _excluded8);
+  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",
+    className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]: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,
+      className: className
+    }), isGroup && getOptionInGroupPaddingLeft(size), selected && 'text-primary', className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center"
+  }, icon && /*#__PURE__*/React.createElement(SelectIcon, {
+    size: size,
+    icon: icon,
+    className: cn('text-muted-foreground hover:text-primary', selected && 'text-primary')
+  }), /*#__PURE__*/React.createElement("span", null, children), tooltip && /*#__PURE__*/React.createElement(LabelIcon, {
+    size: size,
+    tooltip: tooltip
+  })), shortcut && /*#__PURE__*/React.createElement(CommandShortcut, null, shortcut), /*#__PURE__*/React.createElement("span", {
+    className: "absolute right-2 flex size-3.5 items-center justify-center"
+  }, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
+  })));
+}
+function CommandShortcut(_ref9) {
+  var className = _ref9.className,
+    props = _objectWithoutProperties(_ref9, _excluded9);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    "data-slot": "command-shortcut",
+    className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)
+  }, props));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };

package/command/command.utils.d.ts

@@ -0,0 +1,5 @@
+export declare const selectCommandHeadingOptions: {
+    readonly sm: "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:h-8 [&_[cmdk-group-heading]]:text-xs";
+    readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-10 [&_[cmdk-group-heading]]:text-sm ";
+    readonly lg: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-12 [&_[cmdk-group-heading]]:text-base ";
+};

package/command/command.utils.js

@@ -0,0 +1,3 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-10 [&_[cmdk-group-heading]]:text-sm '), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:h-12 [&_[cmdk-group-heading]]:text-base ');

package/command/index.d.ts

@@ -0,0 +1 @@
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './command.component';

package/command/index.js

@@ -0,0 +1 @@
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './command.component';

package/dialog/dialog.component.d.ts

@@ -0,0 +1,22 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import React, { ComponentProps } from 'react';
+declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogWideContent({ className, children, ...props }: ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element;
+declare function DialogFormContent({ className, children, ...props }: ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element;
+declare function DialogWideHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFormHeader({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWideBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFormBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWideTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogFormTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogFormDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogFormIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFormWarningIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFormErrorIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogWideFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFormFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
+export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, };

package/dialog/dialog.component.js

@@ -0,0 +1,192 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["className"],
+  _excluded2 = ["className", "children"],
+  _excluded3 = ["className", "children"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"],
+  _excluded7 = ["className"],
+  _excluded8 = ["className"],
+  _excluded9 = ["className"],
+  _excluded10 = ["className"],
+  _excluded11 = ["className"],
+  _excluded12 = ["className"],
+  _excluded13 = ["className"],
+  _excluded14 = ["className"],
+  _excluded15 = ["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';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { CircleAlertIcon, XIcon } from 'lucide-react';
+import React from 'react';
+function Dialog(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Root, _extends({
+    "data-slot": "dialog"
+  }, props));
+}
+function DialogTrigger(_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, _extends({
+    "data-slot": "dialog-trigger"
+  }, props));
+}
+function DialogPortal(_ref3) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, _extends({
+    "data-slot": "dialog-portal"
+  }, props));
+}
+function DialogClose(_ref4) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Close, _extends({
+    "data-slot": "dialog-close"
+  }, props));
+}
+function DialogOverlay(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded);
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, _extends({
+    "data-slot": "dialog-overlay",
+    className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className)
+  }, props));
+}
+function DialogWideContent(_ref6) {
+  var className = _ref6.className,
+    children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  return /*#__PURE__*/React.createElement(DialogPortal, {
+    "data-slot": "dialog-portal"
+  }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
+    "data-slot": "dialog-content",
+    className: cn('bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 lg:max-w-[62rem] xl:max-w-5xl', '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), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
+    "data-state": "open",
+    className: cn('text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-secondary",
+    size: "icon-md"
+  }, /*#__PURE__*/React.createElement(XIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Close"))));
+}
+function DialogFormContent(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children,
+    props = _objectWithoutProperties(_ref7, _excluded3);
+  return /*#__PURE__*/React.createElement(DialogPortal, {
+    "data-slot": "dialog-portal"
+  }, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(DialogPrimitive.Content, _extends({
+    "data-slot": "dialog-content",
+    className: cn('bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200', '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), children, /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
+    "data-state": "open",
+    className: cn('text-muted-foreground absolute top-3 right-3 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", focusRingClassNames)
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost-secondary",
+    size: "icon-md"
+  }, /*#__PURE__*/React.createElement(XIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Close"))));
+}
+function DialogWideHeader(_ref8) {
+  var className = _ref8.className,
+    props = _objectWithoutProperties(_ref8, _excluded4);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-header",
+    className: cn('border-border flex h-16 items-center justify-center border-b', className)
+  }, props));
+}
+function DialogFormHeader(_ref9) {
+  var className = _ref9.className,
+    props = _objectWithoutProperties(_ref9, _excluded5);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-header",
+    className: cn('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);
+  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);
+  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);
+  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);
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Title, _extends({
+    "data-slot": "dialog-title",
+    className: cn('text-lg leading-7 font-medium', className)
+  }, props));
+}
+function DialogFormDescription(_ref14) {
+  var className = _ref14.className,
+    props = _objectWithoutProperties(_ref14, _excluded10);
+  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);
+  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-10", className)
+  }, props));
+}
+function DialogFormWarningIcon(_ref16) {
+  var className = _ref16.className,
+    props = _objectWithoutProperties(_ref16, _excluded12);
+  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);
+  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);
+  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);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "dialog-footer",
+    className: cn('flex justify-end gap-3 p-6', className)
+  }, props));
+}
+export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter };

package/dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter, } from './dialog.component';

package/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogWideFooter, DialogOverlay, DialogPortal, DialogTrigger, DialogWideTitle, DialogWideHeader, DialogWideContent, DialogWideBody, DialogFormContent, DialogFormDescription, DialogFormIcon, DialogFormWarningIcon, DialogFormErrorIcon, DialogFormHeader, DialogFormTitle, DialogFormBody, DialogFormFooter } from './dialog.component';

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

@@ -1,5 +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;
+declare function FormSelectField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ selectProps, showGroupSeparator, ...rest }: FormSelectFieldProps<TFieldValues, TName>): React.JSX.Element;
 export { FormSelectField };

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

@@ -1,10 +1,10 @@
 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';
+  _excluded2 = ["selectProps", "showGroupSeparator"];
+import { 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 { Selector } from '@scaleflex/ui-tw/select';
 import React from 'react';
 function FormSelectInner(_ref) {
   var field = _ref.field,
@@ -12,7 +12,8 @@ function FormSelectInner(_ref) {
     selectProps = _ref.selectProps,
     readOnly = _ref.readOnly,
     disabled = _ref.disabled,
-    className = _ref.className;
+    className = _ref.className,
+    showGroupSeparator = _ref.showGroupSeparator;
   var _useFormField = useFormField(),
     error = _useFormField.error,
     formItemId = _useFormField.formItemId;
@@ -21,56 +22,25 @@ function FormSelectInner(_ref) {
     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,
+  return /*#__PURE__*/React.createElement(Selector, _extends({
+    value: field.value,
+    onChange: field.onChange,
+    placeholder: placeholder,
+    disabled: disabled,
     readOnly: readOnly,
+    size: args === null || args === void 0 ? void 0 : args.size,
     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));
-  })));
+    icon: icon,
+    options: options || [],
+    showGroupSeparator: showGroupSeparator,
+    formItemId: formItemId,
+    "aria-invalid": !!error
+  }, restSelectProps));
 }
-function FormSelectField(_ref4) {
-  var selectProps = _ref4.selectProps,
-    rest = _objectWithoutProperties(_ref4, _excluded2);
+function FormSelectField(_ref3) {
+  var selectProps = _ref3.selectProps,
+    showGroupSeparator = _ref3.showGroupSeparator,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
   var readOnly = rest.readOnly,
     disabled = rest.disabled;
   return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
@@ -79,7 +49,8 @@ function FormSelectField(_ref4) {
       args: args,
       selectProps: selectProps,
       readOnly: readOnly,
-      disabled: disabled
+      disabled: disabled,
+      showGroupSeparator: showGroupSeparator
     });
   });
 }

package/form/form.types.d.ts

@@ -65,6 +65,7 @@ export type FormSelectProps = SelectProps & {
 };
 export type FormSelectFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
     icon?: ReactElement;
+    showGroupSeparator?: boolean;
     selectProps?: FormSelectProps;
 };
 export interface FormSelectInnerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> {
@@ -72,6 +73,7 @@ export interface FormSelectInnerProps<TFieldValues extends FieldValues, TName ex
     args: FormFieldArgs | undefined;
     selectProps?: FormSelectProps;
     readOnly?: boolean;
+    showGroupSeparator?: boolean;
     disabled?: boolean;
     className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -14,14 +14,16 @@
   "dependencies": {
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-popover": "^1.0.2",
     "@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.29",
+    "@scaleflex/icons-tw": "^0.0.31",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
     "lodash.merge": "^4.6.2",
     "lucide-react": "^0.487.0",
     "prop-types": "^15.7.2",

package/pill/pill.types.d.ts

@@ -1,7 +1,7 @@
 import { pillVariants } from '@scaleflex/ui-tw/pill/pill.component';
 import type { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
+import { ComponentProps, MouseEvent } from 'react';
 export interface PillProps extends ComponentProps<'div'>, VariantProps<typeof pillVariants> {
     removable?: boolean;
-    onRemove?: () => void;
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
 }

package/popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './popover.component';

package/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './popover.component';

package/popover/popover.component.d.ts

@@ -0,0 +1,7 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import React, { ComponentProps } from 'react';
+declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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;