@scaleflex/ui-tw 0.0.144 → 0.0.146

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import type { FormFieldGroupProps } from '../form.types';
-declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, disabledTooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
+declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, disabledTooltip, highlight, horizontal, horizontalLabelWidth, showCharCount, maxLength, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
 export { FormFieldGroup };

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

@@ -1,7 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { cn } from '@scaleflex/ui-tw/utils/cn';
 import React from 'react';
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../form.component';
-import { labelHeightVariants } from '../form.constants';
+import { formMessageSizeOptions, labelHeightVariants } from '../form.constants';
 function FormFieldGroup(_ref) {
   var control = _ref.control,
     name = _ref.name,
@@ -19,6 +22,9 @@ function FormFieldGroup(_ref) {
     _ref$horizontal = _ref.horizontal,
     horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
     horizontalLabelWidth = _ref.horizontalLabelWidth,
+    _ref$showCharCount = _ref.showCharCount,
+    showCharCount = _ref$showCharCount === void 0 ? false : _ref$showCharCount,
+    maxLength = _ref.maxLength,
     children = _ref.children;
   return /*#__PURE__*/React.createElement(FormField, {
     control: control,
@@ -26,25 +32,33 @@ function FormFieldGroup(_ref) {
     disabled: disabled,
     render: function render(_ref2) {
       var field = _ref2.field;
+      var charCount = typeof field.value === 'string' ? field.value.length : 0;
+      var showLabelRow = label || showCharCount;
       return /*#__PURE__*/React.createElement(FormItem, {
         className: "group",
         horizontal: horizontal,
         firstColumnWidth: horizontalLabelWidth,
         "data-disabled": disabled,
         "data-highlight": highlight
-      }, label && /*#__PURE__*/React.createElement(FormLabel, {
-        className: cn(horizontal && 'self-start', horizontal && labelHeightVariants[size]),
+      }, showLabelRow && /*#__PURE__*/React.createElement("div", {
+        className: cn('flex items-center justify-between gap-2', horizontal && labelHeightVariants[size])
+      }, label ? /*#__PURE__*/React.createElement(FormLabel, {
+        className: cn(horizontal && 'self-start'),
         size: size,
         tooltip: tooltip,
         disabledTooltip: disabledTooltip,
         disabled: disabled
-      }, label), /*#__PURE__*/React.createElement("div", {
+      }, label) : /*#__PURE__*/React.createElement("span", null), showCharCount && /*#__PURE__*/React.createElement("span", {
+        className: cn('text-muted-foreground shrink-0 tabular-nums', 'group-data-[disabled=true]:opacity-50', maxLength && charCount >= maxLength && 'text-destructive-foreground', formMessageSizeOptions[size])
+      }, maxLength ? "".concat(charCount, " / ").concat(maxLength) : charCount)), /*#__PURE__*/React.createElement("div", {
         className: "grid gap-1.5"
-      }, /*#__PURE__*/React.createElement(FormControl, null, children(field, {
+      }, /*#__PURE__*/React.createElement(FormControl, null, children(field, _objectSpread({
         size: size,
         readOnly: readOnly,
         disabled: disabled
-      })), description && /*#__PURE__*/React.createElement(FormDescription, {
+      }, maxLength !== undefined && {
+        maxLength: maxLength
+      }))), description && /*#__PURE__*/React.createElement(FormDescription, {
         size: size
       }, description), /*#__PURE__*/React.createElement(FormMessage, {
         size: size

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

@@ -10,7 +10,9 @@ function FormInputField(_ref) {
   return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
     return /*#__PURE__*/React.createElement(Input, _extends({
       placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder
-    }, args, field, inputProps));
+    }, args, field, {
+      maxLength: args === null || args === void 0 ? void 0 : args.maxLength
+    }, inputProps));
   });
 }
 export { FormInputField };

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

@@ -10,7 +10,9 @@ function FormTextareaField(_ref) {
   return /*#__PURE__*/React.createElement(FormFieldGroup, rest, function (field, args) {
     return /*#__PURE__*/React.createElement(Textarea, _extends({
       placeholder: textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.placeholder
-    }, field, args, textareaProps));
+    }, field, args, {
+      maxLength: args === null || args === void 0 ? void 0 : args.maxLength
+    }, textareaProps));
   });
 }
 export { FormTextareaField };

package/form/form.types.d.ts

@@ -25,6 +25,7 @@ export interface FormFieldArgs {
     size?: FormSizeType;
     readOnly?: boolean;
     disabled?: boolean;
+    maxLength?: number;
 }
 interface FormBaseFieldProps {
     label?: ReactElement | string;
@@ -33,6 +34,8 @@ interface FormBaseFieldProps {
     disabled?: boolean;
     tooltip?: ReactElement | string;
     disabledTooltip?: ReactElement | string;
+    showCharCount?: boolean;
+    maxLength?: number;
 }
 export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName>, FormBaseFieldProps {
     children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;

package/highlight-text/highlight-text.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HighlightTextProps } from './highlight-text.types';
+declare function HighlightText({ text, highlight, variant, highlightClassName, className, ...props }: HighlightTextProps): React.JSX.Element;
+export { HighlightText };

package/highlight-text/highlight-text.component.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["text", "highlight", "variant", "highlightClassName", "className"];
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React from 'react';
+import { highlightVariants } from './highlight-text.constants';
+import { escapeRegExp } from './highlight-text.utils';
+function HighlightText(_ref) {
+  var text = _ref.text,
+    highlight = _ref.highlight,
+    variant = _ref.variant,
+    highlightClassName = _ref.highlightClassName,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (!(highlight !== null && highlight !== void 0 && highlight.trim())) {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      "data-slot": "highlight-text",
+      className: className
+    }, props), text);
+  }
+  var regex = new RegExp("(".concat(escapeRegExp(highlight), ")"), 'gi');
+  var parts = text.split(regex);
+  var normalizedHighlight = highlight.toLowerCase();
+  return /*#__PURE__*/React.createElement("span", _extends({
+    "data-slot": "highlight-text",
+    className: className
+  }, props), parts.map(function (part, i) {
+    return part.toLowerCase() === normalizedHighlight ? /*#__PURE__*/React.createElement("mark", {
+      key: i,
+      className: cn(highlightVariants({
+        variant: variant
+      }), highlightClassName)
+    }, part) : part;
+  }));
+}
+export { HighlightText };

package/highlight-text/highlight-text.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const highlightVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "primary" | "destructive" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/highlight-text/highlight-text.constants.js

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority';
+export var highlightVariants = cva('text-inherit', {
+  variants: {
+    variant: {
+      primary: 'bg-primary/30',
+      warning: 'bg-warning/30',
+      success: 'bg-success/30',
+      info: 'bg-info/30',
+      destructive: 'bg-destructive/30'
+    }
+  },
+  defaultVariants: {
+    variant: 'primary'
+  }
+});

package/highlight-text/highlight-text.types.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import { highlightVariants } from './highlight-text.constants';
+export interface HighlightTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>, VariantProps<typeof highlightVariants> {
+    text: string;
+    highlight: string;
+    highlightClassName?: string;
+}

package/highlight-text/highlight-text.types.js

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

package/highlight-text/highlight-text.utils.d.ts

@@ -0,0 +1 @@
+export declare function escapeRegExp(string: string): string;

package/highlight-text/highlight-text.utils.js

@@ -0,0 +1,3 @@
+export function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/highlight-text/index.d.ts

@@ -0,0 +1,3 @@
+export { HighlightText } from './highlight-text.component';
+export type { HighlightTextProps } from './highlight-text.types';
+export { highlightVariants } from './highlight-text.constants';

package/highlight-text/index.js

@@ -0,0 +1,2 @@
+export { HighlightText } from './highlight-text.component';
+export { highlightVariants } from './highlight-text.constants';

package/package.json

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

package/tabs/tabs.component.js

@@ -11,7 +11,6 @@ var _excluded = ["className"],
   _excluded7 = ["className"],
   _excluded8 = ["className"];
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import * as React from 'react';
 
@@ -40,7 +39,7 @@ function TabsTrigger(_ref3) {
     props = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, _extends({
     "data-slot": "tabs-trigger",
-    className: cn(focusRingClassNames, 'inline-flex cursor-pointer items-center justify-center disabled:pointer-events-none disabled:opacity-50', className)
+    className: cn('inline-flex cursor-pointer items-center justify-center disabled:pointer-events-none disabled:opacity-50', 'focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:outline-offset-4', className)
   }, props));
 }
 function TabsContent(_ref4) {