oihana-next-ui 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "private": false,
   "description": "Oihana Next.js UI component library — reusable components, hooks and utilities built with React 19, Next.js, Tailwind CSS and DaisyUI",
   "author": {
@@ -50,29 +50,29 @@
     "./themes/*": "./src/themes/*"
   },
   "peerDependencies": {
-    "next": "^16.0.0",
+    "next": "16.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "daisyui": "^5.0.0"
   },
   "dependencies": {
-    "@maskito/core": "^5.1.1",
-    "@maskito/kit": "^5.1.1",
-    "@maskito/react": "^5.1.1",
+    "@maskito/core": "^5.2.2",
+    "@maskito/kit": "^5.2.2",
+    "@maskito/react": "^5.2.2",
     "@use-gesture/react": "^10.3.1",
     "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.20",
     "flag-icons": "^7.5.0",
     "html-react-parser": "^5.2.17",
     "ky": "^1.14.3",
-    "motion": "^12.35.0",
-    "next": "16.1.6",
+    "motion": "^12.38.0",
+    "next": "16.2.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-icons": "^5.6.0",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.5",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "react-use": "^17.6.0",
@@ -80,24 +80,24 @@
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "sanitize-html": "^2.17.1",
+    "sanitize-html": "^2.17.3",
     "tailwind-merge": "^3.5.0",
-    "validator": "^13.15.26",
+    "validator": "^13.15.35",
     "vegas-js-core": "^1.0.47"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.6.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/sanitize-html": "^2.16.0",
+    "@types/sanitize-html": "^2.16.1",
     "babel-plugin-react-compiler": "1.0.0",
     "daisyui": "^5.5.19",
     "raw-loader": "^4.0.2",
     "sharp": "^0.34.5",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.4",
     "tailwindcss-animated": "^2.0.0",
     "tailwindcss-opentype": "^1.2.0"
   },

package/src/components/inputs/InputHexColor.jsx

@@ -17,6 +17,7 @@ import { MdColorLens as ColorIcon } from 'react-icons/md' ;
  *
  * @param {Object} props
  * @param {boolean} [props.alpha=false] - Allow alpha channel (8 chars: #RRGGBBAA)
+ * @param {number} [props.length] - Explicit hex length (3, 4, 6 or 8). Overrides the default derived from `alpha`. When set, validation requires exactly this length.
  * @param {boolean} [props.prefixed=true] - Display "#" prefix
  * @param {boolean} [props.showColorPreview=true] - Show color preview in icon background
  * @param {boolean} [props.showValidationError=false] - Show error message for invalid colors
@@ -71,6 +72,7 @@ const InputHexColor =
     error: externalError,
     icon,
     iconClassName = 'aspect-square',
+    length,
     onChange: onChangeFromProps,
     prefixed = true,
     showColorPreview = true,
@@ -85,6 +87,10 @@ const InputHexColor =
     const [ currentColor , setCurrentColor ] = useState( externalValue || defaultValue || '' ) ;
     const [ internalError, setInternalError ] = useState( '' ) ;
 
+    // --------- Resolve max length (explicit length wins over alpha default)
+
+    const maxLength = length ?? ( alpha ? 8 : 6 ) ;
+
     // --------- Transformations
 
     const transform = value =>
@@ -94,8 +100,7 @@ const InputHexColor =
             return '' ;
         }
 
-        const cleaned   = value.replace( /([^0-9A-F]+)/gi, '' ) ;
-        const maxLength = alpha ? 8 : 6 ;
+        const cleaned = value.replace( /([^0-9A-F]+)/gi, '' ) ;
 
         return cleaned.substring( 0, maxLength ).toUpperCase() ;
     } ;
@@ -108,19 +113,21 @@ const InputHexColor =
             return true ;
         }
 
-        const isValid = validateHexColor( value , alpha ) ;
+        // When length is explicit, require exact length; otherwise accept any valid hex form.
+        const isValid = length !== undefined
+            ? ( value.length === length && validateHexColor( value, alpha ) )
+            : validateHexColor( value, alpha ) ;
 
         if ( showValidationError )
         {
             if ( !isValid )
             {
-                const expectedLength = alpha ? 8 : 6 ;
                 const defaultPattern = 'Invalid hex color (expected {0} characters: 0-9, A-F)' ;
 
                 setInternalError( fastFormat
                 (
                     validationError ?? defaultPattern,
-                    String( expectedLength )
+                    String( maxLength )
                 ) ) ;
             }
             else
@@ -134,12 +141,14 @@ const InputHexColor =
 
     const format = prefixed ? value =>
     {
-        return value ? `#${value}` : '' ;
+        if ( !value ) return '' ;
+        return value.startsWith( '#' ) ? value : `#${value}` ;
     } : undefined ;
 
     const process = ( value ) =>
     {
-        return value ? `#${value}` : '' ;
+        if ( !value ) return '' ;
+        return value.startsWith( '#' ) ? value : `#${value}` ;
     } ;
 
     // --------- Intercept onChange to update currentColor

package/src/contexts/lang/provider.js

@@ -51,6 +51,8 @@ const LangProvider =
 
     const lang = useSyncExternalStore( subscribe , getSnapshot , getServerSnapshot ) ;
 
+    dayjs.locale( lang ) ;
+
     const setLang = useCallback( ( code ) =>
     {
         if ( isValidLang( code ) )

package/src/demo/inputs/InputHexColorDemo.jsx

@@ -60,11 +60,12 @@ const InputHexColorDemo = () =>
 
             {/* Short format (3 chars) */}
             <InputHexColor
-                label       = "Short Format (3 chars)"
+                length       = { 3 }
+                label        = "Short Format (3 chars)"
                 defaultValue = "F53"
-                icon        = { <ColorIcon /> }
-                placeholder = "FFF"
-                helper      = "Short format: #rgb"
+                icon         = { <ColorIcon /> }
+                placeholder  = "FFF"
+                helper       = "Short format: #rgb"
             />
 
             {/* With validation error */}

package/src/version.js

@@ -1,3 +1,3 @@
-const version = "0.1.44" ;
+const version = "0.1.46" ;
 
 export default version ;