@e-burgos/tucu-ui 1.0.0 → 1.1.0

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/components/forms/input-searcher.d.ts

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

package/components/forms/input.d.ts

@@ -1,3 +1,4 @@
+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;
@@ -9,6 +10,7 @@ export type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLI
     suffix?: React.ReactNode;
     suffixClassName?: string;
     icon?: React.ReactNode;
+    dateFormat?: DateFormat;
 };
 export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
 export default Input;

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

@@ -1,17 +1,18 @@
 import { default as React } from 'react';
 declare const inputClasses: {
     base: string;
+    numberType: string;
     error: string;
     size: {
         sm: string;
-        DEFAULT: string;
+        md: string;
         lg: string;
         xl: string;
     };
     rounded: {
         none: string;
         sm: string;
-        DEFAULT: string;
+        md: string;
         lg: string;
         full: string;
     };
@@ -19,7 +20,6 @@ declare const inputClasses: {
         active: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;
@@ -31,7 +31,6 @@ declare const inputClasses: {
         flat: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;
@@ -43,7 +42,6 @@ declare const inputClasses: {
         outline: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;

package/components/forms/radio.d.ts

@@ -3,7 +3,7 @@ declare const inputClasses: {
     base: string;
     size: {
         sm: string;
-        DEFAULT: string;
+        md: string;
         lg: string;
         xl: string;
     };
@@ -11,7 +11,6 @@ declare const inputClasses: {
         outline: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;
@@ -23,7 +22,6 @@ declare const inputClasses: {
         flat: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;
@@ -35,7 +33,6 @@ declare const inputClasses: {
         active: {
             base: string;
             color: {
-                DEFAULT: string;
                 primary: string;
                 secondary: string;
                 danger: string;
@@ -52,7 +49,7 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     /** 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)['outline']['color'];
+    color?: keyof typeof inputClasses.variant.outline.color;
     /** Available directions of the label are: */
     labelPlacement?: 'start' | 'end';
     /** Whether the input is disabled */