@scaleflex/ui-tw 0.0.8 → 0.0.10

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

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

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["textareaProps"];
+import { FormFieldGroup } from '@scaleflex/ui-tw/form';
+import { Textarea } from '@scaleflex/ui-tw/textarea';
+import React from 'react';
+function FormTextareaField(_ref) {
+  var textareaProps = _ref.textareaProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  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
+    }, args, textareaProps, field));
+  });
+}
+export { FormTextareaField };

package/form/form.types.d.ts

@@ -1,8 +1,9 @@
 import { FormMessageSize, SwitchLayout } from '@scaleflex/ui-tw/form/form.constants';
 import { InputProps } from '@scaleflex/ui-tw/input';
+import { TextareaProps } from '@scaleflex/ui-tw/textarea';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
 import type { Values } from '@scaleflex/ui-tw/types/values';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { ControllerRenderProps, type FieldPath, FieldValues, Path, UseControllerProps } from 'react-hook-form';
 export type FormMessageSizeType = Values<typeof FormMessageSize>;
 export type SwitchLayoutType = Values<typeof SwitchLayout>;
@@ -18,24 +19,27 @@ export interface FormFieldArgs {
     disabled?: boolean;
 }
 export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName> {
-    label?: string;
-    description?: string;
-    tooltip?: string;
+    children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
+    label?: ReactElement | string;
+    description?: ReactElement | string;
+    tooltip?: ReactElement | string;
     size?: FormSizeType;
     readOnly?: boolean;
     highlight?: boolean;
     horizontal?: boolean;
     horizontalLabelWidth?: string;
-    children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
 }
 export interface FormSwitchFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> extends UseControllerProps<TFieldValues, TName> {
-    label: string;
+    label: ReactElement | string;
     size?: FormSizeType;
-    description?: string;
+    description?: ReactElement | string;
     disabled?: boolean;
     layout?: SwitchLayoutType;
-    tooltip?: string;
+    tooltip?: ReactElement | string;
 }
 export type FormInputFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
     inputProps?: InputProps;
 };
+export type FormTextareaFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = Omit<FormFieldGroupProps<TFieldValues, TName>, 'children'> & {
+    textareaProps?: TextareaProps;
+};

package/form/index.d.ts

@@ -1,4 +1,5 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField, } from './form.component';
 export { FormFieldGroup } from './components/form-field-group.component';
-export { FormSwitchField } from './components/form-switch-field.component';
 export { FormInputField } from './components/form-input-field.component';
+export { FormTextareaField } from './components/form-textarea-field.component';
+export { FormSwitchField } from './components/form-switch-field.component';

package/form/index.js

@@ -1,4 +1,5 @@
 export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, useFormField } from './form.component';
 export { FormFieldGroup } from './components/form-field-group.component';
-export { FormSwitchField } from './components/form-switch-field.component';
-export { FormInputField } from './components/form-input-field.component';
+export { FormInputField } from './components/form-input-field.component';
+export { FormTextareaField } from './components/form-textarea-field.component';
+export { FormSwitchField } from './components/form-switch-field.component';

package/label/label.types.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps, ReactElement } from 'react';
 export interface LabelProps extends Omit<ComponentProps<typeof LabelPrimitive.Root>, 'size'> {
     size?: FormSizeType;
     icon?: ReactElement;
-    tooltip?: string;
+    tooltip?: ReactElement | string;
 }
 export interface LabelIconProps extends ComponentProps<'span'>, Pick<LabelProps, 'size' | 'tooltip'> {
     icon?: ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -17,7 +17,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.8",
+    "@scaleflex/icons-tw": "^0.0.10",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",
     "lodash.merge": "^4.6.2",

package/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea, textareaVariants } from './textarea.component';
+export type { TextareaProps } from './textarea.types';

package/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea, textareaVariants } from './textarea.component';

package/textarea/textarea.component.d.ts

@@ -0,0 +1,7 @@
+import { TextareaProps } from '@scaleflex/ui-tw/textarea/textarea.types';
+import React from 'react';
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Textarea({ className, size, disabled, readOnly, ...props }: TextareaProps): React.JSX.Element;
+export { Textarea, textareaVariants };

package/textarea/textarea.component.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "size", "disabled", "readOnly"];
+import { textareaSizeOptions } from '@scaleflex/ui-tw/textarea/textarea.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 React from 'react';
+var textareaVariants = cva('', {
+  variants: {
+    size: textareaSizeOptions
+  },
+  defaultVariants: {
+    size: FormSize.Md
+  }
+});
+function Textarea(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? FormSize.Md : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("textarea", _extends({
+    "data-slot": "textarea",
+    disabled: disabled,
+    readOnly: readOnly,
+    className: cn('field-sizing-content', 'border-input text-foreground bg-background flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none', 'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground 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', 'group-data-[highlight=true]:border-warning group-data-[highlight=true]:focus-visible:ring-warning/20', textareaVariants({
+      size: size,
+      className: className
+    }))
+  }, props));
+}
+export { Textarea, textareaVariants };

package/textarea/textarea.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const textareaSizeOptions: {
+    readonly sm: "py-2 px-3 text-sm min-h-14 max-h-44";
+    readonly md: "py-3 px-4 text-base min-h-16 max-h-48";
+    readonly lg: "py-3 px-4 text-lg min-h-20 max-h-60";
+};

package/textarea/textarea.constants.js

@@ -0,0 +1,3 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+export var textareaSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'py-2 px-3 text-sm min-h-14 max-h-44'), FormSize.Md, 'py-3 px-4 text-base min-h-16 max-h-48'), FormSize.Lg, 'py-3 px-4 text-lg min-h-20 max-h-60');

package/textarea/textarea.types.d.ts

@@ -0,0 +1,6 @@
+import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import { ComponentProps } from 'react';
+export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'> {
+    size?: FormSizeType;
+    'aria-invalid'?: boolean;
+}

package/textarea/textarea.types.js

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