@e-burgos/tucu-ui 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,103 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2024-12-19
+
+### Added
+
+- **Radio Component**: Enhanced hover experience when radio is checked
+  - Added darker color on hover (`checked:hover:enabled:bg-*/90` or `checked:hover:enabled:bg-*-600`)
+  - Added subtle scale effect (`checked:hover:enabled:scale-105`)
+  - Improved transitions with `transition-all duration-200`
+- **Checkbox Component**: Enhanced hover experience when checkbox is checked
+  - Added darker color on hover for checked state
+  - Added subtle scale effect on hover
+  - Improved transitions for smoother animations
+- **PinCode Component**: Hide native number input spinners
+  - Added styles to hide webkit and moz spinners when `type="number"`
+  - Improved visual consistency for numeric pin codes
+
+### Changed
+
+- **Radio Component**: Removed "DEFAULT" values
+  - Changed default `size` from `'DEFAULT'` to `'md'`
+  - Changed default `color` from `'DEFAULT'` to `'primary'`
+  - Updated internal class mappings to use explicit values
+- **RadioGroup Component**: Removed "DEFAULT" values
+  - Changed default `size` from `'DEFAULT'` to `'md'`
+  - Changed default `color` from `'DEFAULT'` to `'primary'`
+  - Updated Storybook stories to reflect new defaults
+- **PinCode Component**: Removed "DEFAULT" values
+  - Changed default `size` from `'DEFAULT'` to `'md'`
+  - Changed default `rounded` from `'DEFAULT'` to `'md'`
+  - Changed default `color` from `'DEFAULT'` to `'primary'`
+  - Updated internal class mappings (`inputClasses.size`, `inputClasses.rounded`, `inputClasses.variant.*.color`)
+  - Updated Storybook stories to reflect new defaults
+
+### Fixed
+
+- **Radio Component**: Fixed variant and color props not displaying correctly
+  - Added `appearance-none` to remove native browser styles
+  - Implemented custom checked indicator using `peer-checked` utility
+  - Fixed color classes to properly apply `checked:border-*` and `checked:bg-*` styles
+- **PinCode Component**: Fixed native number input spinners appearing in numeric pin codes
+  - Added cross-browser support for hiding spinners (Chrome, Safari, Edge, Firefox)
+
+### Documentation
+
+- Updated Storybook stories for Radio, RadioGroup, and PinCode components
+  - Removed "DEFAULT" from argTypes options
+  - Updated default args to use explicit values (`'md'`, `'primary'`)
+  - Ensured consistency across all form component stories
+
+## [Unreleased]
+
+## [1.0.0] - Initial Release
+
+### Added
+
+- **Input Component**:
+  - Password visibility toggle with eye icon
+  - Custom date picker with year selection
+  - Support for multiple date formats (DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD)
+  - Default date format: DD-MM-YYYY
+- **InputSearcher Component**:
+  - Internal state management (removed external `value` and `onChange` props)
+  - Option filtering after 3 characters typed
+  - Error message display when no matches found (after 3+ characters)
+  - Text highlighting for matching characters in dropdown options
+  - Multiple selection support with `multiple` prop
+  - Selected options displayed as chips below the input
+  - Custom error message support via `noMatchesMessage` prop
+- **Tab Component**:
+  - Animated tab panel transitions using Framer Motion
+  - Smooth fade and slide animations
+
+### Changed
+
+- **Input Component**:
+  - Improved `onChange` prop handling to prevent read-only warnings
+  - Enhanced date picker UI with custom calendar dropdown
+- **InputSearcher Component**:
+  - Refactored to be internally controlled
+  - Improved state management to prevent infinite loops
+  - Enhanced user experience with better error handling
+
+### Fixed
+
+- **Input Component**: Fixed `onChange` prop not being passed to native input element
+- **InputSearcher Component**:
+  - Fixed infinite loop issues with `useEffect` dependencies
+  - Fixed input not being writable
+  - Fixed state synchronization with `initialValue` prop
+
+---
+
+## Version History
+
+- **1.1.0** - Enhanced form components with improved hover states, removed DEFAULT values, and bug fixes
+- **1.0.0** - Initial release with core form components and UI elements

package/README.md

@@ -409,7 +409,7 @@ function ThemeControls() {
 ### **Comprehensive Form Components**
 
 ```tsx
-import { Form, FormField, Input, Textarea, Checkbox, RadioGroup, InputSelect, PinCode, FileInput, Button } from '@e-burgos/tucu-ui';
+import { Form, FormField, Input, Textarea, Checkbox, RadioGroup, Select, PinCode, FileInput, Button } from '@e-burgos/tucu-ui';
 ```
 
 ### **Centralized Validation**
@@ -469,7 +469,7 @@ function UserRegistrationForm() {
       </FormField>
 
       <FormField<UserFormData> name="country" label="Country">
-        <InputSelect
+        <Select
           options={[
             { name: 'United States', value: 'us' },
             { name: 'Canada', value: 'ca' },

package/components/common/index.d.ts

@@ -2,6 +2,5 @@ export * from './avatar';
 export * from './badge';
 export * from './collapse';
 export * from './scrollbar';
-export * from './menu-item';
 export * from './scrollbar-native';
 export * from './skeleton';

package/components/dialog/drawer.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { LogoPropTypes } from '../logos/logo';
-import { IMenuItem } from '../common/menu-item';
+import { IMenuItem } from '../layouts/menus/menu-item';
 export interface DrawerProps {
     children?: React.ReactNode;
     type: 'sidebar' | 'sidebar-menu';

package/components/dialog/modal.d.ts

@@ -6,6 +6,8 @@ export interface ModalProps {
     children?: React.ReactNode;
     buttonContainer?: React.ReactNode;
     className?: string;
+    contentClassName?: string;
+    titleContainerClassName?: string;
     text?: {
         title?: string;
         content?: string;

package/components/dialog/sidebar-menu.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { LogoPropTypes } from '../logos/logo';
-import { IMenuItem } from '../common/menu-item';
+import { IMenuItem } from '../layouts/menus/menu-item';
 export declare function SidebarMenu({ className, menuItems, children, title, actionContent, onClose, logo, }: {
     className?: string;
     menuItems: IMenuItem[];

package/components/forms/example/index.d.ts

@@ -0,0 +1,4 @@
+export * from './error-container-example';
+export * from './form-example';
+export * from './form-methods-example';
+export * from './validations';

package/components/forms/index.d.ts

@@ -1,17 +1,5 @@
-export * from './checkbox';
-export * from './field-error-text';
-export * from './field-helper-text';
-export * from './file-input';
-export * from './input-label';
-export * from './input-searcher';
-export * from './input-switch';
-export * from './input';
-export * from './input-select';
-export * from './pin-code';
-export * from './radio';
-export * from './radio-group';
-export * from './textarea';
-export * from './toggle-bar';
-export * from './uploader-two';
-export * from './uploader';
-export * from './form-system';
+export * from './example';
+export * from './form-field';
+export * from './form';
+export * from './types';
+export * from './hook-form';

package/components/forms/types/extend-react-hook-form.type.d.ts

@@ -0,0 +1,19 @@
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+export type BrowserNativeObject = Date | FileList | File;
+export type IsEqual<T1, T2> = T1 extends T2 ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2 ? true : false : false;
+export type IsTuple<T extends ReadonlyArray<unknown>> = number extends T['length'] ? false : true;
+export type TupleKeys<T extends ReadonlyArray<unknown>> = Exclude<keyof T, keyof unknown[]>;
+export type ValidateResult = string | boolean | undefined;
+export type ArrayKey = '[number]';
+type AnyIsEqual<T1, T2> = T1 extends T2 ? IsEqual<T1, T2> extends true ? true : never : never;
+type PathImpl<K extends string | number, V, TraversedTypes, ArrayK extends string | number> = V extends Primitive | BrowserNativeObject ? `${K}` : true extends AnyIsEqual<TraversedTypes, V> ? `${K}` : `${K}` | `${K}.${FieldPathInternal<V, ArrayK, TraversedTypes | V>}`;
+export type FieldPathInternal<T, ArrayK extends string | number, TraversedTypes = T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
+    [K in TupleKeys<T>]-?: PathImpl<K & string, T[K], TraversedTypes, ArrayK>;
+}[TupleKeys<T>] : PathImpl<ArrayK, V, TraversedTypes, ArrayK> : {
+    [K in keyof T]-?: PathImpl<K & string, T[K], TraversedTypes, ArrayK>;
+}[keyof T];
+export type InternalValidate<TFieldValue, TFormValues> = (value: TFieldValue, formValues: TFormValues, options: {
+    index: number | null;
+    name: string | null;
+}) => ValidateResult | Promise<ValidateResult>;
+export {};

package/components/forms/types/validations.type.d.ts

@@ -0,0 +1,8 @@
+import { FieldValues, RegisterOptions, FieldPath, FieldPathValue } from 'react-hook-form';
+import { FieldPathInternal, ArrayKey, InternalValidate } from './extend-react-hook-form.type';
+export type Rules<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RegisterOptions<TFieldValues>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled' | 'validate'> & {
+    validate?: InternalValidate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues> | Record<never, InternalValidate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>>;
+};
+export type FormValidations<TFieldValues extends FieldValues = FieldValues> = {
+    [key in FieldPathInternal<TFieldValues, ArrayKey>]?: Rules<TFieldValues>;
+};

package/components/icons/chevron-left.d.ts

@@ -0,0 +1 @@
+export declare function ChevronLeft(props: React.SVGAttributes<SVGElement>): import("react/jsx-runtime").JSX.Element;

package/components/icons/index.d.ts

@@ -15,6 +15,7 @@ export * from './check';
 export * from './checkmark';
 export * from './chevron-down';
 export * from './chevron-forward';
+export * from './chevron-left';
 export * from './chevron-right';
 export * from './classic-layout-icon';
 export * from './close';

package/components/index.d.ts

@@ -5,7 +5,6 @@ export * from './cards';
 export * from './carousel';
 export * from './common';
 export * from './dialog';
-export * from './forms';
 export * from './tabs';
 export * from './icons';
 export * from './links';
@@ -14,3 +13,5 @@ export * from './logos';
 export * from './notifications';
 export * from './typography';
 export * from './utils';
+export * from './forms';
+export * from './inputs';

package/components/inputs/checkbox.d.ts

@@ -0,0 +1,42 @@
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** The size of the component */
+    size?: 'sm' | 'md' | 'lg';
+    /** Change input color */
+    color?: 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning';
+    /** Available directions of the label are: */
+    labelPlacement?: 'start' | 'end';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Set field label */
+    label?: React.ReactNode;
+    /** Show error message using this prop */
+    error?: string;
+    /** Add helper text. It could be string or a React component */
+    helperText?: React.ReactNode;
+    /** Use className prop to apply style for entire component */
+    className?: string;
+    /** Use activeClassName prop to apply style on active component from checkboxGroup */
+    activeClassName?: string;
+    /** Use containerClassName prop to apply some additional style for label and checkbox container */
+    containerClassName?: string;
+    /** Use iconClassName prop to apply some additonal style for check mark icon */
+    iconClassName?: string;
+    /** Use labelClassName prop to apply some addition style for the field label */
+    labelClassName?: string;
+    /** Add custom classes for the input filed extra style */
+    inputClassName?: string;
+    /** This prop allows you to customize the error message style */
+    errorClassName?: string;
+    /** This prop allows you to customize the helper message style */
+    helperClassName?: string;
+    /** The variant of the component */
+    variant?: 'ghost' | 'solid' | 'transparent';
+    /** The shape of the component */
+    shape?: 'rounded' | 'square';
+}
+/**
+ * A simplified checkbox component that uses a single color-based styling approach.
+ * The checkbox changes appearance based on its state (unchecked, checked, hover, focus, disabled).
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/components/inputs/helpers/field-error-text.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+declare const fieldErrorClasses: {
+    base: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+    tag?: 'div' | 'span';
+    error: string | null | undefined;
+    size?: keyof typeof fieldErrorClasses.size;
+    className?: string;
+    id?: string;
+}
+export declare function FieldError({ tag, error, size, className, id, ...props }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export default FieldError;

package/components/inputs/helpers/field-helper-text.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+declare const helperTextClasses: {
+    base: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export interface FieldHelperTextProps extends React.HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+    tag?: 'div' | 'span';
+    size?: keyof typeof helperTextClasses.size;
+    className?: string;
+    id?: string;
+}
+export declare function FieldHelperText({ size, tag, children, className, id, ...props }: React.PropsWithChildren<FieldHelperTextProps>): import("react/jsx-runtime").JSX.Element;
+export default FieldHelperText;

package/components/inputs/index.d.ts

@@ -0,0 +1,15 @@
+export * from './checkbox';
+export * from './helpers/field-error-text';
+export * from './helpers/field-helper-text';
+export * from './helpers/input-label';
+export * from './input-searcher';
+export * from './input';
+export * from './pin-code';
+export * from './radio-group';
+export * from './radio';
+export * from './select';
+export * from './switch';
+export * from './textarea';
+export * from './toggle-bar';
+export * from './uploader-two';
+export * from './uploader';

package/components/inputs/input-searcher.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { SelectOption } from './select';
+export declare function InputSearcher({ label, onOptionSelect, options, initialValue, noMatchesMessage, multiple, variant, disabled, ...props }: {
+    label?: string;
+    initialValue?: string | number;
+    onOptionSelect?: (option: SelectOption | SelectOption[]) => void;
+    options?: SelectOption[];
+    noMatchesMessage?: string;
+    multiple?: boolean;
+    variant?: 'ghost' | 'solid' | 'transparent';
+    disabled?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>): import("react/jsx-runtime").JSX.Element;
+export default InputSearcher;

package/components/inputs/input.d.ts

@@ -0,0 +1,22 @@
+export type DateFormat = 'DD-MM-YYYY' | 'MM-DD-YYYY' | 'YYYY-MM-DD' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD';
+export type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    label?: string;
+    error?: string;
+    variant?: 'ghost' | 'solid' | 'transparent';
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    useUppercaseLabel?: boolean;
+    helperText?: string;
+    suffix?: React.ReactNode;
+    suffixClassName?: string;
+    icon?: React.ReactNode;
+    dateFormat?: DateFormat;
+};
+export declare const inputVariantClasses: {
+    ghost: string;
+    solid: string;
+    transparent: string;
+};
+export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;

package/components/inputs/pin-code.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+declare const inputClasses: {
+    base: string;
+    numberType: string;
+    error: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    variant: {
+        ghost: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+        solid: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+        transparent: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+    };
+};
+export interface PinCodeProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {
+    /** Current value of the pin code */
+    value?: string;
+    /** Callback function called when pin code changes */
+    onChange?: (value: string) => void;
+    /** This Pin Code component only support these two types */
+    type?: 'text' | 'number';
+    /** Mask and unmask to hide and show pin code */
+    mask?: boolean;
+    /** Set pin code length */
+    length?: number;
+    /** Make pin code horizontally center */
+    center?: boolean;
+    /** Set placeholder text */
+    placeholder?: string;
+    /** The size of the component. `"sm"` is equivalent to the dense input styling. */
+    size?: keyof typeof inputClasses.size;
+    /** The rounded variants are: */
+    rounded?: keyof typeof inputClasses.rounded;
+    /** The variants of the component are: */
+    variant?: keyof typeof inputClasses.variant;
+    /** Change input color */
+    color?: keyof (typeof inputClasses.variant)['ghost']['color'];
+    /** Show error message using this prop */
+    error?: string;
+    /** Add custom classes for the input filed extra style */
+    inputClassName?: string;
+    /** This prop allows you to customize the error message style */
+    errorClassName?: string;
+    /** This prop allows you to add a helper text to the pin code component */
+    helperText?: string;
+    /** This prop allows you to add a helper text to the pin code component */
+    helperTextClassName?: string;
+    /** This prop allows you to make the pin code component full width */
+    fullWidth?: boolean;
+}
+/**
+ * A basic widget for getting pin code. Here is the API documentation of the Pin Code component.
+ * And the rest of the props of PinCode are the same as the original html input field.
+ * You can use props like `disabled`, `placeholder`, `defaultValue` etc.
+ */
+export declare function PinCode({ type, value, onChange, mask, length, center, size, rounded, variant, color, placeholder, error, className, inputClassName, errorClassName, helperText, helperTextClassName, fullWidth, ...props }: PinCodeProps): import("react/jsx-runtime").JSX.Element;
+export default PinCode;

package/components/inputs/radio.d.ts

@@ -0,0 +1,84 @@
+import { default as React } from 'react';
+declare const inputClasses: {
+    base: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        ghost: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+        solid: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+        transparent: {
+            base: string;
+            color: {
+                primary: string;
+                secondary: string;
+                danger: string;
+                info: string;
+                success: string;
+                warning: string;
+            };
+        };
+    };
+};
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** The variants of the component are: */
+    variant?: keyof typeof inputClasses.variant;
+    /** The size of the component. `"sm"` is equivalent to the dense input styling. */
+    size?: keyof typeof inputClasses.size;
+    /** Change radio button color */
+    color?: keyof typeof inputClasses.variant.ghost.color;
+    /** Available directions of the label are: */
+    labelPlacement?: 'start' | 'end';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Set field label */
+    label?: React.ReactNode;
+    /** Show error message using this prop */
+    error?: string;
+    /** Add helper text. It could be string or a React component */
+    helperText?: React.ReactNode;
+    /** Use className prop to apply style for entire component */
+    className?: string;
+    /** Use activeClassName prop to apply style on active component from radioGroup */
+    activeClassName?: string;
+    /** Use containerClassName prop to apply some additional style for label and radio container */
+    containerClassName?: string;
+    /** Use labelClassName prop to apply some addition style for the field label */
+    labelClassName?: string;
+    /** Add custom classes for the input filed extra style */
+    inputClassName?: string;
+    /** This prop allows you to customize the error message style */
+    errorClassName?: string;
+    /** This prop allows you to customize the helper message style */
+    helperClassName?: string;
+}
+/**
+ * A basic widget for getting the user input of radio. Here is the API documentation of the Radio component.
+ * And the rest of the props of Checkbox are the same as the original html input field.
+ * You can use props like `value`, `disabled`, `onChange`, `onFocus`, `onBlur` etc.
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/components/inputs/select.d.ts

@@ -0,0 +1,26 @@
+export type SelectOption = {
+    name: string;
+    value: string;
+    icon?: React.ReactNode;
+};
+export interface SelectTypes {
+    options: SelectOption[];
+    selectedOption?: SelectOption;
+    onChange?: React.Dispatch<React.SetStateAction<SelectOption>> | ((value: SelectOption) => void);
+    children?: React.ReactNode;
+    onSelect?: (value: string) => void;
+    variant?: 'ghost' | 'solid' | 'transparent';
+    className?: string;
+    disabled?: boolean;
+    label?: string;
+    useUppercaseLabel?: boolean;
+    required?: boolean;
+    value?: string;
+    name?: string;
+    errorMessage?: string;
+    helperText?: string;
+    placeholder?: string;
+    buttonClassName?: string;
+}
+export declare function Select({ options, onChange, onSelect, variant, selectedOption: propSelectedOption, className, children, disabled, label, useUppercaseLabel, required, value, name, errorMessage, helperText, placeholder, buttonClassName, }: SelectTypes): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/components/inputs/switch.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface SwitchProps {
+    label?: string | React.ReactNode;
+    offLabel?: string | React.ReactNode;
+    onLabel?: string | React.ReactNode;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    variant?: 'ghost' | 'solid' | 'transparent';
+    className?: string;
+    errorMessage?: string;
+    helperText?: string;
+    disabled?: boolean;
+}
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/components/inputs/textarea.d.ts

@@ -0,0 +1,16 @@
+export declare const textareaVariantClasses: {
+    ghost: string;
+    solid: string;
+    transparent: string;
+};
+export type TextareaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    label?: string;
+    error?: string;
+    variant?: 'ghost' | 'solid' | 'transparent';
+    className?: string;
+    inputClassName?: string;
+    useUppercaseLabel?: boolean;
+    helperText?: string;
+};
+export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/components/layouts/{classic/layout.d.ts → admin-layout/index.d.ts}

@@ -1,6 +1,6 @@
 import { LogoPropTypes } from '../../logos';
-import { IMenuItem } from '../../common/menu-item';
-interface ClassicLayoutProps {
+import { IMenuItem } from '../menus/menu-item';
+interface AdminLayoutProps {
     children: React.ReactNode;
     menuItems: IMenuItem[];
     rightButton?: React.ReactNode;
@@ -12,5 +12,5 @@ interface ClassicLayoutProps {
     fullWidth?: boolean;
     setIsOpen: (isOpen: boolean) => void;
 }
-export declare function ClassicLayout({ logo, children, menuItems, rightButton, isOpen, className, headerClassName, contentClassName, fullWidth, setIsOpen, }: ClassicLayoutProps): import("react/jsx-runtime").JSX.Element;
-export default ClassicLayout;
+export declare function AdminLayout({ logo, children, menuItems, rightButton, isOpen, className, headerClassName, contentClassName, fullWidth, setIsOpen, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default AdminLayout;

package/components/layouts/{authentication/layout.d.ts → clean-layout/index.d.ts}

@@ -1,5 +1,5 @@
-export declare function AuthLayout({ children, className, }: {
+export declare function CleanLayout({ children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export default AuthLayout;
+export default CleanLayout;