@udixio/ui-react 2.9.12 → 2.9.14

package/dist/lib/styles/icon-button.style.d.ts

@@ -11,6 +11,7 @@ export declare const iconButtonStyle: (states: (({
     variant: any;
     disabled: any;
     activated: any;
+    title: any;
     shape: any;
     allowShapeTransformation: any;
     transition: any;
@@ -26,6 +27,7 @@ export declare const iconButtonStyle: (states: (({
     variant: any;
     disabled: any;
     activated: any;
+    title: any;
     shape: any;
     allowShapeTransformation: any;
     transition: any;
@@ -33,7 +35,7 @@ export declare const iconButtonStyle: (states: (({
 }) & (({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -41,6 +43,7 @@ export declare const iconButtonStyle: (states: (({
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -49,7 +52,7 @@ export declare const iconButtonStyle: (states: (({
 }) | ({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -57,6 +60,7 @@ export declare const iconButtonStyle: (states: (({
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -68,7 +72,7 @@ export declare const iconButtonStyle: (states: (({
 export declare const useIconButtonStyle: (states: import('..').IconButtonStates & ((({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -76,6 +80,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
@@ -84,7 +89,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
 }) | ({
     label?: string;
     children?: string;
-    icon: import('..').Icon;
+    icon?: import('..').Icon;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
     iconSelected?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
@@ -92,6 +97,7 @@ export declare const useIconButtonStyle: (states: import('..').IconButtonStates
     variant?: import('..').IconButtonVariant;
     disabled?: boolean;
     activated?: boolean;
+    title?: string | null;
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;

package/dist/lib/styles/icon-button.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/icon-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAyJlB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0EAG3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAG9B,CAAC"}
+{"version":3,"file":"icon-button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/icon-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAyJlB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0EAG3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EAG9B,CAAC"}

package/dist/lib/styles/index.d.ts

@@ -2,6 +2,7 @@ export * from './button.style';
 export * from './card.style';
 export * from './carousel-item.style';
 export * from './carousel.style';
+export * from './checkbox.style';
 export * from './chip.style';
 export * from './chips.style';
 export * from './divider.style';

package/dist/lib/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/lib/styles/text-field.style.d.ts

@@ -14,47 +14,56 @@ export declare const textFieldStyle: (states: {
     showSupportingText: any;
     suffix: any;
     value: any;
+    defaultValue: any;
+    id: any;
+    style: any;
     variant: any;
     type: any;
     autoComplete: any;
-    textLine: any;
+    multiline: any;
 } & {
     placeholder?: string;
-    name: string;
+    name?: string;
     label: string;
     disabled?: boolean;
     errorText?: string | null;
     supportingText?: string;
     trailingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
     leadingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
-    onChange?: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     showSupportingText?: boolean;
     suffix?: string;
-    value: string;
+    value?: string;
+    defaultValue?: string;
+    id?: string;
+    style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
     type?: "text" | "password" | "number";
     autoComplete?: "on" | "off" | string;
-    textLine?: "singleLine" | "multiLine" | "textAreas";
+    multiline?: boolean;
 } & import('..').TextFieldStates & {
     className: string | ClassNameComponent<TextFieldInterface> | undefined;
 }) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
 export declare const useTextFieldStyle: (states: import('..').TextFieldStates & {
     placeholder?: string;
-    name: string;
+    name?: string;
     label: string;
     disabled?: boolean;
     errorText?: string | null;
     supportingText?: string;
     trailingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
     leadingIcon?: React.ReactElement<typeof import('..').IconButton> | import('..').Icon;
-    onChange?: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     showSupportingText?: boolean;
     suffix?: string;
-    value: string;
+    value?: string;
+    defaultValue?: string;
+    id?: string;
+    style?: React.CSSProperties;
     variant?: import('..').TextFieldVariant;
     type?: "text" | "password" | "number";
     autoComplete?: "on" | "off" | string;
-    textLine?: "singleLine" | "multiLine" | "textAreas";
+    multiline?: boolean;
 } & {
     className?: string | ClassNameComponent<TextFieldInterface> | undefined;
 }) => Record<"content" | "input" | "label" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;

package/dist/lib/styles/text-field.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}
+{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.12",
+  "version": "2.9.14",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.11",
-    "@udixio/tailwind": "2.4.11"
+    "@udixio/theme": "2.1.13",
+    "@udixio/tailwind": "2.4.13"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Button.tsx

@@ -1,3 +1,4 @@
+
 import { classNames, ReactProps } from '../utils';
 import { ButtonInterface } from '../interfaces';
 import { useButtonStyle } from '../styles';

package/src/lib/components/Card.tsx

@@ -9,7 +9,7 @@ import { State } from '../effects';
  * @status beta
  * @category Layout
  * @devx
- * - `isInteractive` only adds a state layer; add your own click/role semantics.
+ * - `interactive` only adds a state layer; add your own click/role semantics.
  * @limitations
  * - No built-in header/actions slots; layout is fully custom via children.
  */
@@ -17,18 +17,23 @@ export const Card = ({
   variant = 'outlined',
   className,
   children,
-  isInteractive = false,
+  interactive = false,
   ref,
   ...rest
 }: ReactProps<CardInterface>) => {
-  const styles = useCardStyle({ className, isInteractive, variant, children });
+  const styles = useCardStyle({
+    className,
+    isInteractive: interactive,
+    variant,
+    children,
+  });
 
   const defaultRef = useRef<HTMLDivElement>(null);
   const resolvedRef = ref || defaultRef;
 
   return (
     <div {...rest} ref={resolvedRef} className={styles.card}>
-      {isInteractive && (
+      {interactive && (
         <State
           className={styles.stateLayer}
           colorName={'on-surface'}

package/src/lib/components/Checkbox.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useId, useState } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { useCheckboxStyle } from '../styles/checkbox.style';
+import { classNames } from '../utils';
+import { ReactProps } from '../utils/component';
+import { CheckboxInterface } from '../interfaces/checkbox.interface';
+import { Icon } from '../icon';
+import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons';
+import { State } from '../effects';
+
+/**
+ * Checkboxes allow the user to select one or more items from a set.
+ * @status beta
+ * @category Selection
+ * @devx
+ * - Supports controlled (`checked`) and uncontrolled (`defaultChecked`) modes.
+ * - Handles `indeterminate` state strictly as visual (updates UI, but underlying input is checked/unchecked based on logic).
+ * @a11y
+ * - Uses native input for accessibility.
+ * - Supports standard keyboard interaction.
+ */
+export const Checkbox = ({
+  checked: checkedProp,
+  defaultChecked,
+  indeterminate = false,
+  disabled = false,
+  error = false,
+  onChange,
+  id: idProp,
+  name,
+  value,
+  style,
+  className,
+  ...restProps
+}: ReactProps<CheckboxInterface>) => {
+  const generatedId = useId();
+  const id = idProp || generatedId;
+
+  const isControlled = checkedProp !== undefined;
+  const [internalChecked, setInternalChecked] = useState(
+    defaultChecked ?? false,
+  );
+  const isChecked = isControlled ? checkedProp : internalChecked;
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Sync indeterminate state to input element for a11y
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    if (!isControlled) {
+      setInternalChecked(e.target.checked);
+    }
+
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const styles = useCheckboxStyle({
+    isChecked: !!isChecked,
+    isIndeterminate: indeterminate,
+    isDisabled: disabled,
+    isError: error,
+    isFocused,
+    isHovered: false, // Not used in style logic but requested by strict type if defined in interface? style config keys are flexible usually.
+  });
+
+  return (
+    <div
+      className={classNames(styles.checkbox, className, 'group/checkbox')}
+      style={style}
+    >
+      <State
+        stateClassName={styles.stateLayer}
+        colorName={isChecked || indeterminate ? 'primary' : 'on-surface'}
+      >
+        <input
+          ref={inputRef}
+          type="checkbox"
+          id={id}
+          name={name}
+          value={value}
+          checked={isChecked}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          className={styles.input}
+          {...(restProps as any)}
+        />
+        <div className={styles.box}></div>
+        <AnimatePresence>
+          {(isChecked || indeterminate) && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.5 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.5 }}
+              transition={{ duration: 0.15 }}
+              className={styles.icon}
+            >
+              <Icon
+                icon={indeterminate ? faMinus : faCheck}
+                className="size-3.5" // ~14px icon
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </State>
+    </div>
+  );
+};