@scaleflex/ui-tw 0.0.104 → 0.0.106

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

@@ -19,9 +19,10 @@ import { getToolbarSizes } from '@scaleflex/ui-tw/textarea/textarea.utils';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
+import { useCommandState } from 'cmdk';
 import { ChevronsUpDownIcon, UserCircle2Icon } from 'lucide-react';
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { comboboxMultiTagsDefaultSizeOptions, iconSizeInTriggerOptions } from '../combobox.constants';
 var selectLabelVariants = cva('', {
   variants: {
@@ -89,6 +90,22 @@ export function ComboboxUsers(_ref) {
     onBlur === null || onBlur === void 0 || onBlur([]);
     setOpen(false);
   };
+  var AutoScrollToSelected = function AutoScrollToSelected() {
+    var search = useCommandState(function (s) {
+      return s.search;
+    });
+    useEffect(function () {
+      var list = document.querySelector('[cmdk-list]');
+      if (!list) return;
+      requestAnimationFrame(function () {
+        var selected = list.querySelector('[data-selected="true"]');
+        if (selected) selected.scrollIntoView({
+          block: 'nearest'
+        });
+      });
+    }, [search]);
+    return null;
+  };
   var _createClearHandlers = createClearHandlers(onClearAll),
     handleOnTriggerClick = _createClearHandlers.onClick,
     handleOnTriggerKeyDown = _createClearHandlers.onKeyDown;
@@ -159,7 +176,7 @@ export function ComboboxUsers(_ref) {
     filter: function filter(value, search) {
       return value.includes(search.trim().toLowerCase()) ? 1 : 0;
     }
-  }, /*#__PURE__*/React.createElement(CommandInput, {
+  }, /*#__PURE__*/React.createElement(AutoScrollToSelected, null), /*#__PURE__*/React.createElement(CommandInput, {
     size: size,
     placeholder: searchPlaceholder
   }), /*#__PURE__*/React.createElement(CommandList, null, /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), options === null || options === void 0 ? void 0 : options.map(function (option, groupIndex) {

package/form/components/form-input-group-field.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import type { FormInputGroupFieldProps } from '../form.types';
+declare function FormInputGroupField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ className, children, size, onBlur, ...rest }: FormInputGroupFieldProps<TFieldValues, TName>): React.JSX.Element;
+export { FormInputGroupField };

package/form/components/form-input-group-field.component.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "size", "onBlur"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { InputGroup } from '@scaleflex/ui-tw/input-group';
+import React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
+import { FormFieldGroup } from './form-field-group.component';
+function FormInputGroupField(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    size = _ref.size,
+    _onBlur = _ref.onBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(FormFieldGroup, _extends({
+    size: size
+  }, rest), function (field, args) {
+    return /*#__PURE__*/React.createElement(InputGroup, {
+      className: className,
+      size: size
+    }, Children.map(children, function (child) {
+      return /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread(_objectSpread({}, args), field), {}, {
+        onBlur: function onBlur(e) {
+          field.onBlur();
+          _onBlur === null || _onBlur === void 0 || _onBlur(e);
+        }
+      })) : child;
+    }));
+  });
+}
+export { FormInputGroupField };

package/form/form.types.d.ts

@@ -162,4 +162,9 @@ export interface FormTagsInnerProps<TFieldValues extends FieldValues, TName exte
     disabled?: boolean;
     className?: string;
 }
+export type FormInputGroupFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    className?: string;
+    children: ReactNode;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
+};
 export {};

package/form/index.d.ts

@@ -13,3 +13,4 @@ export { FormCheckboxGroupField } from './components/form-checkbox-group-field.c
 export { FormRadioGroupField } from './components/form-radio-group-field.component';
 export { FormDatePickerField } from './components/form-date-picker-field.component';
 export { FormTagsField } from './components/form-tags-field.component';
+export { FormInputGroupField } from './components/form-input-group-field.component';

package/form/index.js

@@ -11,4 +11,5 @@ export { FormCheckboxField } from './components/form-checkbox-field.component';
 export { FormCheckboxGroupField } from './components/form-checkbox-group-field.component';
 export { FormRadioGroupField } from './components/form-radio-group-field.component';
 export { FormDatePickerField } from './components/form-date-picker-field.component';
-export { FormTagsField } from './components/form-tags-field.component';
+export { FormTagsField } from './components/form-tags-field.component';
+export { FormInputGroupField } from './components/form-input-group-field.component';

package/input-group/index.d.ts

@@ -0,0 +1 @@
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, } from './input-group.component';

package/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from './input-group.component';

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

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import { ButtonProps } from '../button';
+import { TextareaProps } from '../textarea';
+declare const inputGroupVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function InputGroup({ className, size, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare function InputGroupButton({ className, type, variant, size, ...props }: ButtonProps): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: ComponentProps<'input'>): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: TextareaProps): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

package/input-group/input-group.component.js

@@ -0,0 +1,133 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size"],
+  _excluded2 = ["className", "align"],
+  _excluded3 = ["className", "type", "variant", "size"],
+  _excluded4 = ["className"],
+  _excluded5 = ["className"],
+  _excluded6 = ["className"];
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Button, ButtonSize, ButtonVariant } from '../button';
+import { getBaseInputClasses } from '../styles/shared-classes';
+import { Textarea } from '../textarea';
+import { FormSize } from '../types/form-size';
+import { cn } from '../utils/cn';
+import { ariaInvalidClassNames, focusRingClassNames, inputGroupInputAlignSizeOptions, inputGroupInputSizeOptions, inputGroupSizeOptions, readOnlyClassNames } from './input-group.constants';
+var inputGroupVariants = cva('', {
+  variants: {
+    size: inputGroupSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var inputGroupInputVariants = cva('', {
+  variants: {
+    size: inputGroupInputSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+var inputGroupInputAlignVariants = cva('', {
+  variants: {
+    size: inputGroupInputAlignSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function InputGroup(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-slot": "input-group",
+    role: "group",
+    className: cn('group/input-group border-input relative flex w-full items-center rounded-md border p-0.5 shadow-xs transition-[color,box-shadow] outline-none', inputGroupVariants({
+      size: size
+    }), inputGroupInputVariants({
+      size: size
+    }), inputGroupInputAlignVariants({
+      size: size
+    }), 'min-w-0 has-[>textarea]:h-auto', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col', focusRingClassNames, ariaInvalidClassNames, readOnlyClassNames, className)
+  }, props));
+}
+var inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+  variants: {
+    align: {
+      'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+      'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+      'block-start': 'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+      'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5'
+    }
+  },
+  defaultVariants: {
+    align: 'inline-start'
+  }
+});
+function InputGroupAddon(_ref2) {
+  var className = _ref2.className,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? 'inline-start' : _ref2$align,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": align,
+    className: cn(inputGroupAddonVariants({
+      align: align
+    }), className),
+    onClick: function onClick(e) {
+      var _e$currentTarget$pare;
+      if (e.target.closest('button')) {
+        return;
+      }
+      (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector('input')) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    }
+  }, props));
+}
+function InputGroupButton(_ref3) {
+  var className = _ref3.className,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'button' : _ref3$type,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? ButtonVariant.GhostPrimary : _ref3$variant,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? ButtonSize.Md : _ref3$size,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    type: type,
+    "data-size": size,
+    size: size,
+    variant: variant,
+    className: className
+  }, props));
+}
+function InputGroupText(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className)
+  }, props));
+}
+function InputGroupInput(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement("input", _extends({
+    "data-slot": "input-group-control",
+    className: cn.apply(void 0, _toConsumableArray(getBaseInputClasses(false, false)).concat(['flex h-full min-w-0 flex-1 rounded-none border-0 shadow-none', className]))
+  }, props));
+}
+function InputGroupTextarea(_ref6) {
+  var className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(Textarea, _extends({
+    "data-slot": "input-group-control",
+    className: cn('flex-1 resize-none rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0', className)
+  }, props));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

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

@@ -0,0 +1,18 @@
+export declare const inputGroupSizeOptions: {
+    readonly sm: "h-8 text-sm";
+    readonly md: "h-10 text-base";
+    readonly lg: "h-12 text-lg";
+};
+export declare const inputGroupInputSizeOptions: {
+    readonly sm: "[&>input]:py-1 [&>input]:px-2";
+    readonly md: "[&>input]:py-2 [&>input]:px-3";
+    readonly lg: "[&>input]:py-3 [&>input]:px-4";
+};
+export declare const inputGroupInputAlignSizeOptions: {
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+};
+export declare const focusRingClassNames = "has-[[data-slot=input-group-control]:focus-visible]:ring-ring ring-offset-background has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:outline-none";
+export declare const ariaInvalidClassNames = "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive";
+export declare const readOnlyClassNames = "has-[[data-slot=input-group-control]:read-only]:bg-secondary has-[[data-slot=input-group-control]:read-only]:[&>input]:bg-secondary has-[[data-slot=input-group-control]:read-only]:text-foreground has-[[data-slot=input-group-control]:read-only]:cursor-default";

package/input-group/input-group.constants.js

@@ -0,0 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '../types/form-size';
+export var inputGroupSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'h-8 text-sm'), FormSize.Md, 'h-10 text-base'), FormSize.Lg, 'h-12 text-lg');
+export var inputGroupInputSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&>input]:py-1 [&>input]:px-2'), FormSize.Md, '[&>input]:py-2 [&>input]:px-3'), FormSize.Lg, '[&>input]:py-3 [&>input]:px-4');
+export var inputGroupInputAlignSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, ['has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:[&>input]:pb-1.5', 'has-[>[data-align=block-end]]:[&>input]:pt-1.5'].join(' ')), FormSize.Md, ['has-[>[data-align=inline-start]]:[&>input]:pl-3', 'has-[>[data-align=inline-end]]:[&>input]:pr-3', 'has-[>[data-align=block-start]]:[&>input]:pb-2.5', 'has-[>[data-align=block-end]]:[&>input]:pt-2.5'].join(' ')), FormSize.Lg, ['has-[>[data-align=inline-start]]:[&>input]:pl-3', 'has-[>[data-align=inline-end]]:[&>input]:pr-3', 'has-[>[data-align=block-start]]:[&>input]:pb-2.5', 'has-[>[data-align=block-end]]:[&>input]:pt-2.5'].join(' '));
+export var focusRingClassNames = 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring ring-offset-background has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:outline-none';
+export var ariaInvalidClassNames = 'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive';
+export var readOnlyClassNames = 'has-[[data-slot=input-group-control]:read-only]:bg-secondary has-[[data-slot=input-group-control]:read-only]:[&>input]:bg-secondary has-[[data-slot=input-group-control]:read-only]:text-foreground has-[[data-slot=input-group-control]:read-only]:cursor-default';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -25,7 +25,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.104",
+    "@scaleflex/icons-tw": "^0.0.106",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/styles/shared-classes.d.ts

@@ -2,4 +2,4 @@ export declare const focusRingClassNames = "focus-visible:ring-ring ring-offset-
 export declare const selectionHighlightClassNames = "selection:bg-primary selection:text-primary-foreground";
 export declare const readOnlyClassNames = "read-only:bg-secondary read-only:text-foreground read-only:cursor-default";
 export declare const ariaInvalidClassNames = "aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive";
-export declare const getBaseInputClasses: () => string[];
+export declare const getBaseInputClasses: (focusRing?: boolean, ariaInvalid?: boolean) => (string | false)[];

package/styles/shared-classes.js

@@ -3,5 +3,7 @@ export var selectionHighlightClassNames = 'selection:bg-primary selection:text-p
 export var readOnlyClassNames = 'read-only:bg-secondary read-only:text-foreground read-only:cursor-default';
 export var ariaInvalidClassNames = 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive hover:aria-invalid:border-destructive/60 focus-visible:aria-invalid:border-destructive';
 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: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', ariaInvalidClassNames, focusRingClassNames];
+  var focusRing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var ariaInvalid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  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: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', ariaInvalid && ariaInvalidClassNames, focusRing && focusRingClassNames];
 };