@ahrowe/ui 0.19.4 → 0.21.0

package/dist/types/package/common/button/button.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export declare enum ButtonStyleType {
     Primary = "primary",
@@ -26,7 +26,7 @@ export interface ButtonProps extends HtmlProps {
     size?: ButtonSize;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
     children?: React.ReactNode;
-    icon?: IconDefinition;
+    icon?: IconContent;
     isLoading?: boolean;
     disabled?: boolean;
     title?: string;

package/dist/types/package/common/configProvider/configProvider.types.d.ts

@@ -27,6 +27,8 @@ import { RevealLensProps } from '../revealLens/revealLens.types';
 import { TiltProps } from '../tilt/tilt.types';
 import { FlipProps } from '../flip/flip.types';
 import { OptionPickerProps } from '../optionPicker/optionPicker.types';
+import { TimerProps } from '../timer/timer.types';
+import { OtpInputProps } from '../otpInput/otpInput.types';
 /**
  * Global default props keyed by component name.
  *
@@ -70,6 +72,8 @@ export interface ComponentDefaults {
     Tilt?: Partial<TiltProps>;
     Flip?: Partial<FlipProps>;
     OptionPicker?: Partial<OptionPickerProps>;
+    Timer?: Partial<TimerProps>;
+    OtpInput?: Partial<OtpInputProps>;
 }
 export interface ConfigProviderProps {
     children: React.ReactNode;

package/dist/types/package/common/emptyState/emptyState.types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { HtmlProps } from '../types/slots.types';
 export interface EmptyStateProps extends HtmlProps {
     className?: string;
-    icon?: IconDefinition;
+    icon?: IconContent;
     children?: ReactNode;
 }

package/dist/types/package/common/fab/fab.types.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { HtmlProps } from '../types/slots.types';
 export type FabSize = 'default' | 'mini';
 export interface FabMenuEntry {
     id: string;
-    icon: IconDefinition;
+    icon: IconContent;
     label?: string;
 }
 export interface FabProps extends HtmlProps {

package/dist/types/package/common/otpInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './otpInput';
+export * from './otpInput.types';

package/dist/types/package/common/otpInput/otpInput.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { OtpInputProps } from './otpInput.types';
+declare function OtpInput(props: OtpInputProps): ReactElement;
+export default OtpInput;

package/dist/types/package/common/otpInput/otpInput.types.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { FormValidator } from '../../services/formValidation';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export type OtpInputSlots = 'root' | 'label' | 'inputs' | 'input' | 'separator';
+export declare enum OtpInputCharset {
+    /** Digits only (0-9). Shows a numeric mobile keyboard. */
+    Numeric = "numeric",
+    /** Letters and digits. */
+    Alphanumeric = "alphanumeric"
+}
+export interface OtpInputProps extends HtmlProps {
+    /** Number of character boxes. Default 6. */
+    length?: number;
+    /** Current code as a plain string, e.g. "123456". */
+    value?: string;
+    /** Fired on every change with the full current code (may be shorter than `length`). */
+    onChange?: ((value: string) => void) | null;
+    /** Fired once, when the code reaches `length` characters. */
+    onComplete?: ((value: string) => void) | null;
+    formValidator?: FormValidator | null;
+    /** Restricts which characters can be typed and picks the mobile keyboard. Default `numeric`. */
+    charset?: OtpInputCharset;
+    /** Render each box's value as a dot, like a password field. */
+    masked?: boolean;
+    /** Draw a small gap after these 1-based box indices, e.g. `[3]` to split 6 boxes into 3+3. */
+    groupAfter?: number[];
+    label?: string;
+    isValid?: boolean;
+    /** Shown in an error Tooltip on focus/hover once `isValid` is `false` (or, with a
+     * `formValidator`, once it's touched and has an error). Persists until the value changes
+     * `isValid`/`formValidator`'s error state itself — see `clearOnError` to auto-dismiss it. */
+    errorMessage?: string;
+    isRequired?: boolean;
+    /** When an error newly appears (`isValid`/`formValidator` turning invalid), clear every box and
+     * refocus the first one after `clearErrorDelay`, so the next attempt starts clean instead of the
+     * user editing individual wrong digits (and re-triggering `onComplete` on every keystroke while
+     * the code stays at full length). Default `false`. */
+    clearOnError?: boolean;
+    /** Delay in ms before `clearOnError` clears the boxes, so the wrong code and error message are
+     * still visible for a moment first. Default `900`. */
+    clearErrorDelay?: number;
+    disabled?: boolean;
+    /** Focuses the first empty box (or the first box) on mount. */
+    autoFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<OtpInputSlots>;
+    styles?: SlotStyles<OtpInputSlots>;
+}

package/dist/types/package/common/rating/rating.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type RatingSlots = 'root' | 'item' | 'iconEmpty' | 'iconFilled';
 export interface RatingProps extends HtmlProps {
@@ -11,7 +11,7 @@ export interface RatingProps extends HtmlProps {
     allowClear?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
-    icon?: IconDefinition;
+    icon?: IconContent;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<RatingSlots>;

package/dist/types/package/common/sectionHeader/sectionHeader.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 import { IconAction } from '../types/actions.types';
 export declare enum SectionHeaderSize {
@@ -12,7 +12,7 @@ export type SectionHeaderSlots = 'root' | 'leading' | 'titles' | 'title' | 'subt
 export interface SectionHeaderProps extends HtmlProps {
     title?: ReactNode;
     subtitle?: ReactNode;
-    icon?: IconDefinition;
+    icon?: IconContent;
     thumbnail?: string | ReactNode;
     left?: ReactNode;
     center?: ReactNode;

package/dist/types/package/common/splitButton/splitButton.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { ButtonStyleType, ButtonSize } from '../button/button.types';
 import { Align } from '../floatingMenu/floatingMenu.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
@@ -8,7 +8,7 @@ export interface SplitButtonAction {
     label: ReactNode;
     onClick: () => void;
     disabled?: boolean;
-    icon?: IconDefinition;
+    icon?: IconContent;
 }
 export type SplitButtonSlots = 'root' | 'primaryButton' | 'triggerButton' | 'menu' | 'menuItem';
 export interface SplitButtonProps extends HtmlProps {

package/dist/types/package/common/stepper/stepper.types.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 /** Layout direction of the stepper. */
 export declare enum StepperAlignment {
@@ -46,8 +46,8 @@ export interface StepperStep {
     description?: React.ReactNode;
     /** Collapsible body content, rendered under the label (vertical only). */
     content?: React.ReactNode;
-    /** FontAwesome icon shown in the marker instead of the step number. */
-    icon?: IconDefinition;
+    /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */
+    icon?: IconContent;
     /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */
     error?: boolean;
     /** `true` renders an "Optional" hint; a node renders custom hint text. */

package/dist/types/package/common/tabHeader/tabHeader.types.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type TabHeaderSlots = 'root' | 'tab' | 'icon' | 'labels' | 'title' | 'subtitle';
 export interface TabHeaderTab {
     id: string;
-    icon: IconDefinition;
+    icon: IconContent;
     title?: string;
     subtitle?: string;
     disabled?: boolean;

package/dist/types/package/common/themeProvider/theme.types.d.ts

@@ -109,6 +109,20 @@ export interface ThemeVariables {
     '--stepper-gap'?: string;
     /** Text/check colour on a filled marker. Falls back to --text-on-primary. */
     '--stepper-text-on-marker'?: string;
+    /** Timer ring track (unfilled) colour. Falls back to --background-accent-light. */
+    '--timer-track-color'?: string;
+    /** Timer ring progress (remaining time) colour. Falls back to --primary-color. */
+    '--timer-progress-color'?: string;
+    /** Timer ring colour once inside the urgent threshold. Falls back to --error-color. */
+    '--timer-urgent-color'?: string;
+    /** Timer ring diameter. Falls back to 160px (also settable per instance via the `size` prop). */
+    '--timer-size'?: string;
+    /** Timer ring stroke thickness. Falls back to 10px (also settable per instance via `strokeWidth`). */
+    '--timer-stroke-width'?: string;
+    /** Timer MM:SS readout text colour. Falls back to --text-color. */
+    '--timer-text-color'?: string;
+    /** Timer label (below the readout) text colour. Falls back to --text-dark. */
+    '--timer-label-color'?: string;
     /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
     '--kanban-empty-column-width'?: string;
     '--option-picker-padding'?: string;

package/dist/types/package/common/timeline/timeline.types.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 /** Layout of entries relative to the connecting line. */
 export declare enum TimelineAlignment {
@@ -28,8 +28,8 @@ export interface TimelineItem {
     description?: React.ReactNode;
     /** Rendered next to the title, e.g. a date or relative time ("2 hours ago"). */
     timestamp?: React.ReactNode;
-    /** FontAwesome icon shown in the marker instead of a plain dot. */
-    icon?: IconDefinition;
+    /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */
+    icon?: IconContent;
     /** Semantic marker colour (default `Default`). */
     status?: TimelineItemStatus;
     /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */

package/dist/types/package/common/timer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './timer';
+export * from './timer.types';

package/dist/types/package/common/timer/timer.chime.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CHIME_DATA_URI = "data:audio/wav;base64,UklGRkYeAABXQVZFZm10IBAAAAABAAEAESsAACJWAAACABAAZGF0YSIeAAAAAAkAIAA4AEQANwAPANH/jv9b/07/cf/F/zkAsAAJAScB+QCCANv/K/+h/mX+j/4d//P/3QChAQkC8QFZAV0AOP80/pb9i/0g/jj/kgDaAbsC9gJzAkwBwv82/gz9k/zz/Bz+y/+ZARMD1QOoA44CxQC6/u782PvD+778kv7SAO8CYQTGBPwDLALE/1j9hfvD+kz7Bf2J/zwCcgSbBWUF1QNGAVX+vPsk+vj5TPvU/fYA7QP6BZYGkAUjA+D/k/wP+vj4nPna+y3/xQK+BVkHKActBeABC/6h+nz4LPjN+QD9AAHTBIQHYggvBy4EFgDn+6v4NPfm9576uP4zA/YGDAnsCJUGkgLc/Zz54vZh9kL4FfzvAKAF/AgqCtYITQVmAFX7W/d49Sv2Ufkq/ocDFgizCrIKCQhaA8f9sPhY9Zr0rfYW+8QAUwZiCuoLgwp9BtAA3voh9sjzb/T194T9wAMgCUwMdQyJCTgEzv3d9+Dz2fIR9QT6fwDsBrMLoQ00DL4HUgGC+v30JPKy8o32yPzeAxAK1A01DhILKwXu/ST3evIf8W/z4PghAGsH7wxMD+YNDQnrAUH68fOP8PjwGfX2++ED6ApKD+4PowwxBin+hfYq8W/vyfGs96r/zgcTDusQmQ9pCpwCGvr+8gvvQu+d8xD7ygOkC60QoBE5DkcHff4C9u/vy+0i8Gr2HP8WCCAPeRJIEc8LYgMP+iXyme2S7RnyF/qYA0YM+hFHE9IPbgjp/pn1zO407HzuHPV3/kIIEhD3E/MSPg07BB/6ZvE87OvrkPAN+U4DzQwxE+EUbBGjCW3/TfXC7a7q2ezD87z9UwjrEGEVlhS0DigFSfrD8PTqT+oF7/P36gI4DVAUbhYEE+QKCAAc9dLsOek862Hy7vxKCKkRuBYxFi8QJgaM+jzww+nA6Hnty/ZvAocNVhXqF5kULwy5AAf1/OvY56Xp+vAM/CYISxL4F8AXrBE0B+j60O+r6EDn7+uY9d0Bug1BFlQZKRaDDX0BDPVB64vmGOiN7xr76AfREiAZQxkpE08IXPuB76zn0OVo6lr0NQHSDRIXqhqxF90OVAIs9aPqVeWX5h/uGPqSBzsTMBq2GqUUdgnn+07vx+Zy5OfoFPN6AM4NxxfrGzAZOxA8A2b1Ieo35CPlsOwI+SMHiBMmGxgcHRanCof8Nu/+5SnjbufH8av/sA1gGBUdohqbETQEufW76TLjvuND6+z3nga5EwEcaB2OF+ELPP0671Hl9eH/5XfwzP53DdwYJx4HHPsSOgUk9nLpR+Jr4tvpx/YDBs4TwRyjHvcYIA0D/lnvwOTY4J3kJe/d/SYNOxkgH1wdWRRLBqb2Rul34SvheeiZ9VMFxxNkHcgfVhpjDtz+ku9N5NTfSOPT7eD8vAx9Gf4fnx6yFWYHPvc26cPg/98f52b0kQSlE+od1SCpG6gPxP/l7/bj6t4D4oPs1/s7DKMZwSDPHwUXiQjr90HpLODq3tDlL/O9A2kTVB7KIe0c7RC6AFDwveMa3tHgOOvF+qMLrBlnIeogTxiyCar4aemy3+3djeT18doCExOfHqUiIh4vErsB0/Cg42bdsd/06ar5+AqZGfEh7iGPGd8Ke/mr6VXfCN1Z473w6QGkEs4eZCNEH20TxwJr8aHjz9yn3rjoivg5CmoZXSLbIsIaDgxb+gbqFt8+3DXih+/sAB4S3x4IJFIgpBTbAxnyvuNV3LTdh+dm92kJIBmrIq4j5xs8DUr7e+r03o/bJOFV7uX/ghHTHpAkSyHSFfQE2fL24/jb2Nxj5kD2iQi8GNwiZyT7HGgORPwH6/De/Nom4Crt1v7QEKoe+SQuIvUWEgar80rkudsW3E3lG/WbB0AY7yIFJfwdjw9I/anrCd+G2j3fCOzC/QwQZh5GJfgiDBgxB430uOSY22/bSOT486EGqxfkIoYl6h6vEFX+Yew/3y3abN7x6qn8Ng8HHnQlqCMTGU8IffU+5ZXb49pW49nynQUBF7wi6yXCH8YRZ/8s7ZHf8tmz3efpjvtQDo0dhCU+JAsabAl59t3lsNtz2nfiwvGQBEEWeCIyJoQg0xJ+AAju/t/W2RPd7Oh0+lwN+hx2Jbkk8BqDCn/3kubo2yHaruGz8H4DbhUXIlsmLSHSE5YB9e6G4NfZjtwB6Fz5WwxPHEslFyXAG5QLjvhc5z3c7Nn84K/vaAKJFJshZia8IcMUrgLv7ybh9tkl3CjnSfhRC44bAiVYJXwcnAyi+TrortzU2WLguO5QAZMTBCFTJjEipBXDA/bw3+E02tjbY+Y99z4KtxqcJHslIB2ZDbv6Kuk63dvZ4t/Q7TgAkBJUICEmiiJyFtQECPKu4o7aqNu05Tn2JQnNGRokgSWsHYoO1fsp6uHdANp83/jsIv+AEY0f0iXHIiwX3gUh85LjBtuV2xzlQPUHCNEYfCNpJR8ebA/v/DfroN5D2jHfMuwR/mYQrh5mJeci0RfgBkH0iuSZ26DbnORU9OgGxRfFIjIldx49EAf+Uux436TaA9+B6wf9RA+7Hd0k6iJfGNcHZfWU5Ujcyds15HbzyQWrFvQh3iS0Hv0QG/927WfgItvy3uTqBfwcDrQcOCTPItUYwQiL9q7mEd0Q3OnjqfKtBIUVCyFsJNUeqREoAKPuauG92/7eXuoO++8Mmxt3I5YiMhmdCbD31efz3XXcuOPt8ZUDVBQMIN0j2R4/EiwB1u+B4nPcJ9/w6SP6wAtzGp0iPyJ0GWkK1PgK6e3e+Nyi40bxgwIbE/geMiPAHr8SJgIN8anjRd1v35vpRvmSCjwZqiHLIZwZIwvz+Ujq/d+X3arjs/B6AdwR0R1qIooeJxMUA0by4uQw3tPfYel6+GYJ+RefIDohpxnJCwv7j+si4VLezuM28HsAmBCYHIghNh52E/MDf/Mo5jTfVeBB6cD3PgisFn4fjCCXGVoMG/zb7FniKd8P5NLviP9TD1AbjSDFHawTwgS29HrnT+D04DzpGPcdB1cVSR7BH2oZ1Qwh/Szuo+Mb4G3khu+k/g4O+Rl5HzcdxhN/Bej11+iB4bDhVOmG9gQG/BMAHdweHxk5DRr+fu/75Cbh6eRT79D9zAyXGE0ejBzGEyoGFPc76sbih+KI6Qr29gSeEqcb3R24GIQNBf/Q8GLmSeKB5TzvDv2OCysXDR3EG6kTvwY3+KXrHuR549nppfX0Az0RPhrEHDUYtg3h/x/y1OeC4zbmP+9e/FcKuBW4G+IacRM/B0/5Eu2H5YXkRupZ9QAD3Q/IGJMblBfNDaoAavNP6dHkB+de78T7KAk/FFEa5RkcE6cHXPqB7v/mquXQ6ib1HAKADkcXTBrYFskNYQGu9NLqNObz55nvP/sECMIS2RjOGKoS9wda++/vhOjn5nbrDfVKASgNvRXwGAAWqg0DAur1Wuyp5/no8O/R+uwGRRFTF58XHRIuCEj8W/EU6jnoOOwO9YoA1gsrFIEXDRVvDY8CG/fl7S7pGOpj8Hv64gXID8AVWRZzEUsIJf3B8q3roOkV7Sv14P+NCpUSARYAFBkNBAM/+HHvwepP6/LwP/rpBE4OIxT9FK4QTQju/SH0TO0a6w3uZPVL/08J+xBwFNsSpwxhA1X5/PBg7J3snPEc+gEE2gx9Eo0Tzw80CKP+d/Xw7qXsHe+39c3+HghhD9ISnhEZDKUDW/qD8gnuAO5i8hT6LANtC9EQCxLVDgEIQv/C9pfwP+5H8Cf2Z/77BskNKBFLEG8LzwNP+wX0u+9370LzJvpsAgkKIQ94EMINsgfK/wH4PfLm74fxsfYZ/ukFNAx0D+MOqwrgAzD8gPVy8f/wO/RT+sEBsAhuDdYOlwxHBzsAMfni85nx3vJX9+b96ASmCrkNZw3NCdUD/Pzx9i3zmPJO9Zz6LgFlB7wLJw1WC8IGkgBQ+oP1VfNI9Bf4zP37Ax4J+AvaC9YIsAOy/Vb46vRA9Hj2//qyACgGDAptC/8JIgbRAF37HvcZ9cb18fjN/SIDoQc0Cj4KxgdwA1L+rvmn9vT1uPd9+08A/ARgCKsJlAhnBfUAV/yw+OH2VPfk+ej9XwIwBm4IkwifBhUD2f73+mD4svcO+Rb8BgDjA7sG4gcWB5ME/gA8/Tj6rfjy+O/6H/60Ac0EqgbdBmMFoAJI/y/8Ffp4+Xb6yfzX/90CHwUUBogFpwPtAAv+tPt4+p36Efxw/iABeQPoBB0FEQQQAp3/VP3D+0X78fuV/cH/7AGNA0QE7AOjAsIAwv4i/UP8VPxI/dv+pgA2Ai0DVQOtAmYB2P9l/mf9Fv18/Xn+x/8RAQgCdAJCAogBfABi/4D+Cv4U/pP+Yf9FAAYBeAGHATcBpAD5/2H/Af/o/hX/dP/n/04AkQClAI4AWQAbAOj/zf/L/9v/8v8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANACUAKwAKAMr/kv+R/9n/TwCxALwAVwCs/xb/8/5p/0YAFgFfAeYA3f/N/lP+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";

package/dist/types/package/common/timer/timer.d.ts

@@ -0,0 +1,3 @@
+import { TimerHandle, TimerProps } from './timer.types';
+declare const Timer: import('react').ForwardRefExoticComponent<TimerProps & import('react').RefAttributes<TimerHandle>>;
+export default Timer;

package/dist/types/package/common/timer/timer.types.d.ts

@@ -0,0 +1,101 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+export type TimerSlots = 'root' | 'ringWrapper' | 'ringSvg' | 'ringTrack' | 'ringProgress' | 'ripples' | 'ripple' | 'display' | 'time' | 'label' | 'controls' | 'addButton' | 'removeButton' | 'pauseButton' | 'cancelButton';
+export type TimerStatus = 'idle' | 'running' | 'paused' | 'completed' | 'cancelled';
+export interface TimerHandle {
+    /** Starts (or restarts, if idle/completed/cancelled) the countdown from its current duration. */
+    start: () => void;
+    /** Pauses a running timer. No-op if not running. */
+    pause: () => void;
+    /** Resumes a paused timer from where it left off. No-op if not paused. */
+    resume: () => void;
+    /** Adds seconds to the remaining time. Clamped to `maxSeconds` if set. */
+    addTime: (seconds: number) => void;
+    /** Removes seconds from the remaining time. Clamped to 0, which triggers completion. */
+    removeTime: (seconds: number) => void;
+    /** Stops the timer and resets it back to idle at its original starting duration. Does not fire onComplete. */
+    cancel: () => void;
+    /** Resets to idle at `durationSeconds` without starting. */
+    reset: () => void;
+    /** Current status snapshot. */
+    getStatus: () => TimerStatus;
+    /** Current remaining time in ms, read synchronously. */
+    getRemainingMs: () => number;
+}
+export interface TimerProps extends HtmlProps {
+    /** Starting duration in seconds. Changing this prop while mounted resets the timer to the new duration. */
+    durationSeconds: number;
+    /** Start ticking automatically on mount (and whenever `durationSeconds` changes). @default true */
+    autoStart?: boolean;
+    /** When `durationSeconds` changes after mount, restart from the new duration immediately (`true`) or only update the idle baseline (`false`). @default true */
+    resetOnDurationChange?: boolean;
+    /** Fires roughly every 200ms with the live remaining ms. */
+    onTick?: (remainingMs: number) => void;
+    /** Fires exactly once when the countdown reaches zero. */
+    onComplete?: () => void;
+    /** Fires when the timer transitions to running (initial start or resume). */
+    onStart?: () => void;
+    /** Fires when paused. */
+    onPause?: () => void;
+    /** Fires when resumed from pause. */
+    onResume?: () => void;
+    /** Fires when cancelled (via button or ref). */
+    onCancel?: () => void;
+    /** Fires whenever time is added, with the seconds added and the new total remaining seconds. */
+    onAddTime?: (secondsAdded: number, newRemainingSeconds: number) => void;
+    /** Fires whenever time is removed. */
+    onRemoveTime?: (secondsRemoved: number, newRemainingSeconds: number) => void;
+    /** Show the built-in control buttons (add/remove/pause-resume/cancel). @default true */
+    showControls?: boolean;
+    /** Individually hide the add-time button while keeping the others. */
+    hideAddButton?: boolean;
+    /** Individually hide the remove-time button while keeping the others. */
+    hideRemoveButton?: boolean;
+    /** Individually hide the pause/resume button while keeping the others. */
+    hidePauseButton?: boolean;
+    /** Individually hide the cancel button while keeping the others. */
+    hideCancelButton?: boolean;
+    /** Seconds added/removed per click of the add/remove buttons. @default 30 */
+    adjustSeconds?: number;
+    /** Optional cap on remaining time when adding. Unset = uncapped. */
+    maxSeconds?: number;
+    /** Label rendered under the time readout, e.g. "Boil pasta". */
+    label?: ReactNode;
+    /** Format the MM:SS (or H:MM:SS) readout. Defaults to a built-in formatter. */
+    formatTime?: (remainingMs: number) => ReactNode;
+    /** Diameter of the ring, any CSS length. Sets `--timer-size`. @default '160px' */
+    size?: string;
+    /** Ring stroke width in px. Sets `--timer-stroke-width`. @default 10 */
+    strokeWidth?: number;
+    /** Sweeps the depleting boundary counter-clockwise instead of the default clockwise (matching a clock face). @default false */
+    counterClockwise?: boolean;
+    /** Fraction of total duration (0-1) at which the ring switches to its urgent colour and the pulse (if enabled) kicks in. @default 0.1 */
+    urgentThreshold?: number;
+    /**
+     * Floor, in seconds, for how much time the urgent state gets — whichever of this or
+     * `urgentThreshold` (as a fraction of the total duration) produces the larger window wins.
+     * Without this, a short timer's `urgentThreshold` fraction can resolve to under a second,
+     * making the urgent/critical state barely perceptible. @default 3
+     */
+    urgentMinSeconds?: number;
+    /** Enables the heartbeat/pulse effect once inside `urgentThreshold`. @default true */
+    pulseOnUrgent?: boolean;
+    /** Shows a thin ring pulsing outward from the dial's own edge and fading out while running (a beacon/live-indicator-style halo). @default false */
+    showRunningRipples?: boolean;
+    /** Play a short built-in chime on completion. @default false */
+    playSoundOnComplete?: boolean;
+    /** Overrides the built-in sound with a consumer-supplied audio URL. */
+    soundUrl?: string;
+    /** Volume 0-1 for the completion sound. @default 0.5 */
+    soundVolume?: number;
+    /** Show a browser Notification on completion (permission requested lazily on first `start()`, fails silently if denied/unsupported). @default false */
+    notifyOnComplete?: boolean;
+    /** Notification title when `notifyOnComplete` is set. @default 'Timer done' */
+    notificationTitle?: string;
+    /** Notification body when `notifyOnComplete` is set. Falls back to `label` when it's a string. */
+    notificationBody?: string;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<TimerSlots>;
+    styles?: SlotStyles<TimerSlots>;
+}

package/dist/types/package/common/types/actions.types.d.ts

@@ -1,7 +1,7 @@
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { IconContent } from './icon.types';
 /** A single icon-triggered action, rendered as an `ActionIcon` */
 export interface IconAction {
     title?: string;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    icon: IconDefinition;
+    icon: IconContent;
 }

package/dist/types/package/common/types/icon.types.d.ts

@@ -0,0 +1,17 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ReactElement } from 'react';
+/**
+ * Anything a component will accept for an `icon` prop: either a FontAwesome
+ * `IconDefinition` (rendered through `FontAwesomeIcon`) or an arbitrary React
+ * element (rendered as-is) — an `<img>`, an inline `<svg>`, another icon
+ * library's component, …
+ *
+ * Deliberately `ReactElement` rather than `ReactNode`: `ReactNode` also covers
+ * strings, numbers and booleans, so a required icon prop would stop catching
+ * `icon="star"` at compile time and silently render the text instead. Matches
+ * what `Input` has always accepted for its own icon prop.
+ *
+ * Render one with `renderIcon` from `components/common/utils/renderIcon`, which
+ * picks the right branch.
+ */
+export type IconContent = IconDefinition | ReactElement;

package/dist/types/package/common/utils/renderIcon.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconContent } from '../types/icon.types';
+interface RenderIconOptions {
+    /** Class applied to the rendered icon (or to the wrapper span for a custom element). */
+    className?: string;
+    /** Inline style applied to the rendered icon (or to the wrapper span for a custom element). */
+    style?: CSSProperties;
+}
+/**
+ * Narrows an `IconContent` to a FontAwesome `IconDefinition`.
+ *
+ * Both halves of the union are plain objects (a React element is one too), so
+ * they can only be told apart structurally: an icon definition always carries
+ * `prefix`, `iconName` and the `icon` tuple.
+ */
+export declare function isIconDefinition(icon: IconContent | null | undefined): icon is IconDefinition;
+/**
+ * Renders an `icon` prop that may be either a FontAwesome `IconDefinition` or an
+ * arbitrary React element.
+ *
+ * A definition goes through `FontAwesomeIcon`; an element is returned untouched
+ * unless a `className`/`style` was given, in which case it is wrapped in a
+ * `<span>` carrying them so component and consumer slot styling still lands
+ * somewhere. Note that a custom element is not sized by FontAwesome's `1em`
+ * geometry — size it yourself if the surrounding layout expects a square icon.
+ */
+export declare function renderIcon(icon: IconContent | null | undefined, options?: RenderIconOptions): ReactNode;
+export {};

package/dist/types/package/index.d.ts

@@ -78,6 +78,8 @@ export { default as NumberInput } from './common/numberInput';
 export * from './common/numberInput';
 export { default as OptionPicker } from './common/optionPicker';
 export * from './common/optionPicker';
+export { default as OtpInput } from './common/otpInput';
+export * from './common/otpInput';
 export { default as Overscroll } from './common/overscroll';
 export * from './common/overscroll';
 export { default as Popover } from './common/popover';
@@ -129,6 +131,8 @@ export { default as TimeInput } from './common/timeInput';
 export * from './common/timeInput';
 export { default as Timeline } from './common/timeline';
 export * from './common/timeline';
+export { default as Timer } from './common/timer';
+export * from './common/timer';
 export { default as ToastProvider } from './common/toast';
 export * from './common/toast';
 export { default as Tooltip } from './common/tooltip';

package/docs/ActionIcon.md

@@ -23,7 +23,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `icon` | `IconDefinition` | FontAwesome icon (required) |
+| `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (required) |
 | `title` | `string` | Tooltip / accessible label |
 | `onClick` | `(event: MouseEvent) => void` | Click handler |
 | `className` | `string` | Root element class |

package/docs/Alert.md

@@ -57,7 +57,7 @@ import { faRocket } from '@fortawesome/free-solid-svg-icons';
 | `title` | `ReactNode` | Optional bold heading above the description |
 | `children` | `ReactNode` | The message body |
 | `styleType` | `AlertStyleType` | Colour variant and default icon (default `Default`) |
-| `icon` | `IconDefinition` | Overrides the default FontAwesome icon for `styleType` |
+| `icon` | `IconDefinition \| ReactElement` | Overrides the default icon for `styleType` — FontAwesome icon or any React element |
 | `hideIcon` | `boolean` | Hide the leading icon entirely |
 | `onClose` | `() => void` | Shows a close button and is called when it's clicked. `Alert` doesn't hide itself, so stop rendering it (or update your own state) in the handler |
 

package/docs/Avatar.md

@@ -46,7 +46,7 @@ import { Avatar, AvatarGroup } from '@ahrowe/ui';
 | `src` | `string` | Image URL |
 | `alt` | `string` | Image alt text (falls back to `name`) |
 | `name` | `string` | Used to derive fallback initials, and as `alt` text when `alt` isn't given |
-| `icon` | `IconDefinition` | FontAwesome icon shown when there's no `src` and no `name` (default a person icon) |
+| `icon` | `IconDefinition \| ReactElement` | Icon shown when there's no `src` and no `name` — FontAwesome icon or any React element (default a person icon) |
 | `content` | `ReactNode` | Custom fallback content overriding the computed initials/icon (e.g. `"+3"` — what `AvatarGroup` uses for its overflow indicator) |
 | `status` | `'online' \| 'away' \| 'busy' \| 'offline'` | Small status dot on the bottom-right corner, rendered via `Badge` |
 | `className` / `style` | | Root element — sizing is `em`-based, so `style={{ fontSize }}` scales the whole avatar. Shape defaults to `var(--default-border-radius)`; override via the `--avatar-radius` custom property (e.g. `'50%'` for fully circular) |

package/docs/Breadcrumb.md

@@ -89,7 +89,7 @@ function Example() {
 | `id` | `string` | Optional stable key; falls back to the item's index |
 | `label` | `ReactNode` | The crumb's text |
 | `href` | `string` | Renders the crumb as a real `<a>`. Omit to render a plain clickable element (with `onClick`) or static text |
-| `icon` | `IconDefinition` | Optional leading FontAwesome icon |
+| `icon` | `IconDefinition \| ReactElement` | Optional leading icon — FontAwesome icon or any React element |
 | `onClick` | `(event: MouseEvent) => void` | Click handler. Works alongside `href`: call `event.preventDefault()` to stop the native navigation and hand off to a client-side router's own navigate function (see the react-router example above). Also works on its own, with no `href` |
 | `disabled` | `boolean` | Dims the crumb and makes it non-interactive, regardless of `href`/`onClick` |
 

package/docs/Button.md

@@ -46,7 +46,7 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 | `styleType` | `ButtonStyleType` | Visual variant |
 | `size` | `ButtonSize` | Size variant |
 | `type` | `ButtonType` | HTML button type |
-| `icon` | `IconDefinition` | FontAwesome icon shown before label |
+| `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element, shown before label |
 | `isLoading` | `boolean` | Replaces content with a spinner |
 | `disabled` | `boolean` | |
 | `onClick` | `(e: MouseEvent) => void \| Promise<void>` | |

package/docs/CLAUDE.md

@@ -90,6 +90,28 @@ Most components expose `classNames` and `styles` props for styling inner element
 
 Slot keys per component are documented in each component's doc file below.
 
+## Icon props (`IconDefinition | ReactElement`)
+
+Every `icon` prop (and every icon field inside an item/action object) accepts either a
+FontAwesome `IconDefinition` or an arbitrary React node — an inline `<svg>`, an `<img>`,
+or another icon library's component.
+
+```tsx
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+
+<Button icon={faPen}>Edit</Button>                    // FontAwesome
+<Button icon={<MyIcon />}>Edit</Button>               // any React node
+<Button icon={<img src="/pen.svg" alt="" />}>Edit</Button>
+```
+
+A definition is rendered through `FontAwesomeIcon`; an element is rendered as-is, wrapped in a
+`<span>` carrying the component's icon class when that slot is styled. A custom element is not
+sized by FontAwesome's `1em` geometry, so give it its own width/height if the surrounding
+layout expects a square icon.
+
+`IconPicker` and the internal `AnimatedIcon` are the exceptions — their behaviour depends on
+FontAwesome internals, so they still take an `IconDefinition` only.
+
 ## Component docs
 
 @Accordion.md
@@ -135,6 +157,7 @@ Slot keys per component are documented in each component's doc file below.
 @Modal.md
 @NumberInput.md
 @OptionPicker.md
+@OtpInput.md
 @Overscroll.md
 @Popover.md
 @ProgressBar.md
@@ -159,6 +182,7 @@ Slot keys per component are documented in each component's doc file below.
 @Tilt.md
 @TimeInput.md
 @Timeline.md
+@Timer.md
 @Toast.md
 @Tooltip.md
 @VirtualList.md

package/docs/ConfigProvider.md

@@ -60,8 +60,8 @@ So a global default only fills in props a given instance left out — any instan
 
 Each entry is a `Partial<...Props>`, so any of that component's props can be defaulted:
 
-- **Form inputs:** `Input` · `Textarea` · `NumberInput` · `Dropdown` · `InputDropdown` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `OptionPicker`
-- **Display:** `Button` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider`
+- **Form inputs:** `Input` · `Textarea` · `NumberInput` · `Dropdown` · `InputDropdown` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `OptionPicker` · `OtpInput`
+- **Display:** `Button` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider` · `Timer`
 - **Overlays:** `ConfirmModal`
 
 ```tsx

package/docs/EmptyState.md

@@ -25,6 +25,6 @@ import { faInbox } from '@fortawesome/free-solid-svg-icons';
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `icon` | `IconDefinition` | FontAwesome icon shown above the message |
+| `icon` | `IconDefinition \| ReactElement` | Icon shown above the message — FontAwesome icon or any React element |
 | `children` | `ReactNode` | Message body (defaults to `"No entries available"`) |
 | `className` | `string` | Root element class |