@zeturn/watercolor-react 1.2.4 → 1.2.6

package/dist/watercolor-react.es.js

@@ -86,7 +86,7 @@ var te = ({ items: e = [], multiple: t = !1, variant: n = "default", onToggle: r
 };
 te.displayName = "Accordion";
 //#endregion
-//#region ../core/src/components/Alert/utils.jsx
+//#region src/components/Alert/utils.js
 function ne(e, t) {
 	return [
 		"wc-alert",
@@ -512,7 +512,7 @@ var le = ({ value: e = null, onChange: t, options: n = [], placeholder: r = "Typ
 };
 le.displayName = "Autocomplete";
 //#endregion
-//#region ../core/src/components/Avatar/utils.jsx
+//#region src/components/Avatar/utils.js
 function ue({ size: e, variant: t, color: n, src: r, imgError: i }) {
 	let a = ["wc-avatar"];
 	return typeof e == "string" && a.push(`wc-avatar--${e}`), a.push(`wc-avatar--${t}`), (!r || i) && a.push(`wc-avatar--${n}`), a;
@@ -562,7 +562,7 @@ var he = ({ src: e = "", alt: t = "", size: n = "md", variant: r = "circular", c
 };
 he.displayName = "Avatar";
 //#endregion
-//#region ../core/src/components/Badge/utils.js
+//#region src/components/Badge/utils.js
 var X = [
 	"primary",
 	"secondary",
@@ -598,7 +598,7 @@ var ye = ({ children: e, variant: t = "primary", size: n = "md", dot: r = !1, cl
 });
 ye.displayName = "Badge";
 //#endregion
-//#region ../core/src/components/Banner/utils.js
+//#region src/components/Banner/utils.js
 function be(e, t, n) {
 	let r = [
 		"wc-banner",
@@ -692,13 +692,13 @@ function Te({ type: t = "info", position: n = "top", title: r = "", message: i =
 	});
 }
 //#endregion
-//#region ../core/src/components/Blockquote/utils.js
+//#region src/components/Blockquote/utils.js
 function Ee(e = "", t = "default", n = !0, r = !0, i = "medium", a = "default") {
 	let o = ["wc-blockquote"];
 	return t && t !== "default" && t !== "card" && o.push(`wc-blockquote--${t}`), n && o.push("wc-blockquote--no-border"), r && o.push("wc-blockquote--interactive"), i && i !== "medium" && o.push(`wc-blockquote--${i}`), a && a !== "default" && o.push(`wc-blockquote--${a}`), e && o.push(e), o.filter(Boolean).join(" ");
 }
 //#endregion
-//#region ../core/src/components/Card/utils.jsx
+//#region src/components/Card/utils.js
 function De(e = "", t = "minimal", n = "default", r = "medium", i = !1, a = !0) {
 	let o = ["wc-card"];
 	return t && o.push(`wc-card--${t}`), n && n !== "default" && o.push(`wc-card--${n}`), r && r !== "medium" && o.push(`wc-card--${r}`), i && o.push("wc-card--interactive"), a && o.push("wc-card--no-border"), e && o.push(e), o.filter(Boolean).join(" ");
@@ -776,7 +776,7 @@ function ke({ cite: e = "", children: t, className: n = "", variant: r = "defaul
 	});
 }
 //#endregion
-//#region ../core/src/components/Box/utils.jsx
+//#region src/components/Box/utils.js
 var Z = {
 	0: "0",
 	1: "0.25rem",
@@ -918,7 +918,7 @@ function Le({ component: e = "div", children: t, className: n = "", p: r, pt: i,
 	});
 }
 //#endregion
-//#region ../core/src/components/Breadcrumb/utils.js
+//#region src/components/Breadcrumb/utils.js
 function Re(e, t, n, r) {
 	let i = [...e];
 	if (t && i.length && i[0].label !== "首页" && i.unshift({
@@ -1007,7 +1007,7 @@ function We({ items: t = [], separator: n = "/", variant: r = "default", showHom
 	});
 }
 //#endregion
-//#region ../core/src/components/Button/utils.jsx
+//#region src/components/Button/utils.js
 var Ge = [
 	"primary",
 	"secondary",
@@ -1239,7 +1239,7 @@ var $e = [
 };
 tt.displayName = "Checkbox";
 //#endregion
-//#region ../core/src/components/Chip/utils.jsx
+//#region src/components/Chip/utils.jsx
 function nt(e) {
 	let { size: t = "md", variant: n = "filled", color: r = "default", clickable: i = !1, disabled: a = !1, className: o = "" } = e, s = ["wc-chip"];
 	return s.push(`wc-chip--${t}`), s.push(`wc-chip--${n}`), s.push(`wc-chip--${r}`), i && !a && s.push("wc-chip--clickable"), a && s.push("wc-chip--disabled"), o && s.push(o), s.filter(Boolean).join(" ");
@@ -1314,7 +1314,7 @@ function ot({ label: e = "", avatar: t = "", deletable: n = !1, disabled: r = !1
 	});
 }
 //#endregion
-//#region ../core/src/components/CircularProgress/utils.jsx
+//#region src/components/CircularProgress/utils.js
 function st(e, t) {
 	let n = typeof e == "string" ? parseInt(e, 10) : e, r = n / 2, i = (n - t) / 2;
 	return {
@@ -1396,7 +1396,7 @@ function pt({ value: e = 0, size: t = 40, thickness: n = 3.6, variant: r = "inde
 	});
 }
 //#endregion
-//#region ../core/src/components/ColorPicker/utils.jsx
+//#region src/components/ColorPicker/utils.js
 function mt(e) {
 	let { size: t = "md", shape: n = "circle", disabled: r = !1, className: i = "" } = e, a = ["wc-color-picker"];
 	return a.push(`wc-color-picker--${t}`), a.push(`wc-color-picker--${n}`), r && a.push("wc-color-picker--disabled"), i && a.push(i), a.filter(Boolean);
@@ -1434,7 +1434,7 @@ function _t({ value: e = "#ffffff", onChange: t, size: n = "md", shape: r = "cir
 	});
 }
 //#endregion
-//#region ../core/src/components/Container/utils.jsx
+//#region src/components/Container/utils.js
 var vt = {
 	xs: "max-w-xs",
 	sm: "max-w-sm",
@@ -1461,7 +1461,7 @@ function bt({ maxWidth: e = "lg", fluid: t = !1, fixed: n = !1, className: r = "
 	});
 }
 //#endregion
-//#region ../core/src/components/Copy/utils.jsx
+//#region src/components/Copy/utils.js
 function xt(e) {
 	let { variant: t = "default", size: n = "md", copied: r = !1, copyError: i = !1, className: a = "" } = e, o = ["wc-copy"];
 	return o.push(`wc-copy--${t}`), o.push(`wc-copy--${n}`), r && o.push("wc-copy--copied"), i && o.push("wc-copy--error"), a && o.push(a), o.filter(Boolean);
@@ -1582,7 +1582,7 @@ function Ot({ text: e, variant: t = "default", size: n = "md", showLabel: r = !0
 	});
 }
 //#endregion
-//#region ../core/src/components/DatePicker/utils.jsx
+//#region src/components/DatePicker/utils.js
 function kt(e, t = "YYYY-MM-DD") {
 	if (!e || !(e instanceof Date)) return "";
 	let n = e.getFullYear(), r = String(e.getMonth() + 1).padStart(2, "0"), i = String(e.getDate()).padStart(2, "0");
@@ -1900,7 +1900,7 @@ var Lt = ({ item: e, showAvatar: t = !0, variant: n = "timeline", color: r = "va
 };
 Rt.displayName = "Feed";
 //#endregion
-//#region ../core/src/components/Feature/utils.jsx
+//#region src/components/Feature/utils.js
 var zt = ({ align: e, size: t, background: n, reverse: r, vertical: i, clickable: a, disabled: o, className: s }) => [
 	"wc-feature-card",
 	a && "wc-feature-card--clickable",
@@ -2185,7 +2185,7 @@ var en = ({ disabled: e = !1, error: t = !1, filled: n = !1, focused: r = !1, ma
 };
 en.displayName = "FormHelperText";
 //#endregion
-//#region ../core/src/components/Grid/utils.jsx
+//#region src/components/Grid/utils.js
 var tn = {
 	xs: "xs",
 	sm: "sm",
@@ -3414,7 +3414,7 @@ var Bn = ({ value: e = "", onChange: t, type: n = "text", placeholder: r = "", d
 };
 Bn.displayName = "Input";
 //#endregion
-//#region ../core/src/components/List/utils.jsx
+//#region src/components/List/utils.js
 var Vn = (e) => {
 	let { dense: t = !1, disablePadding: n = !1, variant: r, className: i = "" } = e, a = ["list"];
 	return t && a.push("list--dense"), n && a.push("list--no-padding"), r && a.push(`list--${r}`), i && a.push(i), a;
@@ -3646,7 +3646,7 @@ var Vn = (e) => {
 };
 ir.displayName = "Menu";
 //#endregion
-//#region ../core/src/components/Modal/utils.js
+//#region src/components/Modal/utils.js
 function ar({ size: e = "md", fullWidth: t = !1, fullScreen: n = !1, scroll: r = "paper", position: i = "center", className: a = "" } = {}) {
 	let o = ["wc-modal"];
 	return e && !n && o.push(`wc-modal--${e}`), n && o.push("wc-modal--fullscreen"), t && !n && o.push("wc-modal--full-width"), r === "body" ? o.push("wc-modal--scroll-body") : o.push("wc-modal--scroll-paper"), i && i !== "center" && o.push(`wc-modal--${i}`), a && o.push(a), o.filter(Boolean).join(" ");
@@ -3906,7 +3906,7 @@ dr.displayName = "Page", dr.propTypes = {
 	children: $.default.node
 };
 //#endregion
-//#region ../core/src/components/Paper/utils.jsx
+//#region src/components/Paper/utils.js
 var fr = {
 	ELEVATION: "elevation",
 	OUTLINED: "outlined"
@@ -4675,7 +4675,7 @@ function Nr({ open: e = !1, modelValue: t = void 0, message: n = "", title: r =
 	}), document.body);
 }
 //#endregion
-//#region ../core/src/components/Status/utils.js
+//#region src/components/Status/utils.js
 var Pr = [
 	"default",
 	"success",
@@ -5084,7 +5084,7 @@ var Qr = ({ value: e = "", onChange: t, type: n = "text", label: r = "", placeho
 };
 Qr.displayName = "TextField";
 //#endregion
-//#region ../core/src/components/Toolbar/utils.js
+//#region src/components/Toolbar/utils.js
 var $r = (e, t, n = "") => {
 	let r = ["flex items-center w-full"];
 	return e === "dense" ? r.push("min-h-12 py-2") : r.push("min-h-16 py-3"), t || r.push("px-4 sm:px-6 lg:px-8"), n && r.push(n), r.join(" ");
@@ -5143,7 +5143,7 @@ function ai({ text: e, placement: t = "top", children: n, className: r = "" }) {
 	});
 }
 //#endregion
-//#region ../core/src/components/Typography/utils.js
+//#region src/components/Typography/utils.js
 var oi = {
 	h1: "h1",
 	h2: "h2",
@@ -5229,7 +5229,7 @@ var pi = ({ variant: e = "body1", component: t, color: n = "inherit", align: r =
 });
 pi.displayName = "Typography";
 //#endregion
-//#region ../core/src/components/TypingText/utils.jsx
+//#region src/components/TypingText/utils.js
 var mi = class {
 	constructor(e, t = {}) {
 		this.text = e, this.speed = t.speed || 100, this.pause = t.pause || 1500, this.loop = t.loop || !1, this.erase = t.erase || !1, this.index = 0, this.direction = 1, this.timer = null, this.onUpdate = t.onUpdate || (() => {});
@@ -5330,7 +5330,7 @@ var gi = ({ length: e = 6, value: t = "", onChange: n, onComplete: r, autoFocus:
 };
 gi.displayName = "VerificationCodeInput";
 //#endregion
-//#region ../core/src/components/VideoPlayer/utils.js
+//#region src/components/VideoPlayer/utils.js
 function _i(e) {
 	return `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
 }
@@ -5439,7 +5439,7 @@ var bi = ({ src: e, autoplay: t = !1, loop: n = !1, className: r = "", style: i
 };
 bi.displayName = "VideoPlayer";
 //#endregion
-//#region ../core/src/components/Watermark/utils.js
+//#region src/components/Watermark/utils.js
 var xi = {
 	content: "",
 	cross: !1,

package/index.d.ts

@@ -7,6 +7,7 @@ import type {
   InputHTMLAttributes,
   ReactElement,
   ReactNode,
+  CSSProperties,
   TdHTMLAttributes,
   ThHTMLAttributes,
 } from 'react'
@@ -27,7 +28,9 @@ import type {
   WatercolorThemeConfig,
 } from '@zeturn/watercolor-core'
 
-type WatercolorComponent = ComponentType<Record<string, unknown>>
+type FloatingPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'
+type HtmlComponentProps<T extends HTMLElement = HTMLElement> = HTMLAttributes<T> & { className?: string; style?: CSSProperties; children?: ReactNode }
+type PolymorphicComponent<TDefault extends ElementType, OwnProps> = <T extends ElementType = TDefault>(props: PolymorphicProps<T, OwnProps>) => ReactElement | null
 type PolymorphicProps<T extends ElementType, OwnProps> = OwnProps &
   Omit<ComponentPropsWithoutRef<T>, keyof OwnProps | 'as'> & { as?: T }
 type CompositionBaseProps = { children?: ReactNode; className?: string }
@@ -52,6 +55,9 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
   ripple?: boolean
 }
 
+export interface FabProps extends Omit<ButtonProps, 'variant'> { variant?: 'circular' | 'extended'; color?: ComponentColor | 'default'; label?: ReactNode; icon?: ReactNode }
+export interface IconButtonProps extends Omit<ButtonProps, 'variant' | 'buttonStyle' | 'fullWidth'> { color?: ComponentColor | 'default'; edge?: boolean | 'start' | 'end'; icon?: ReactNode }
+
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'value'> {
   value?: string | number | readonly string[]
   readonly?: boolean
@@ -242,6 +248,66 @@ export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellEleme
   variant?: 'head' | 'body' | 'footer'
 }
 
+export interface AccordionItem { key?: string | number; title?: ReactNode; content?: ReactNode; disabled?: boolean; [key: string]: unknown }
+export interface AccordionProps extends HtmlComponentProps<HTMLDivElement> { items?: readonly AccordionItem[]; multiple?: boolean; variant?: 'default' | 'bordered' | 'separated'; onToggle?: (key: string | number, expanded: boolean) => void }
+export interface AlertProps extends HtmlComponentProps<HTMLDivElement> { type?: 'success' | 'warning' | 'error' | 'info'; severity?: 'success' | 'warning' | 'error' | 'info'; variant?: 'filled' | 'outlined' | 'standard'; title?: ReactNode; message?: ReactNode; closable?: boolean; onClose?: () => void; icon?: ReactNode; action?: ReactNode }
+export interface AppBarProps extends HtmlComponentProps<HTMLElement> { position?: 'static' | 'fixed' | 'absolute' | 'sticky' | 'relative'; color?: string; elevation?: number; variant?: 'elevation' | 'outlined' | 'minimal' }
+export interface AutocompleteProps<Value = unknown> extends Omit<SelectProps, 'value' | 'onChange' | 'onSearch'> { value?: Value | Value[] | null; onChange?: (value: Value | Value[] | null) => void; readonly?: boolean; freeSolo?: boolean; minSearchLength?: number; noOptionsText?: ReactNode; onInputChange?: (value: string) => void; filterOptions?: (options: readonly SelectOption[], query: string) => readonly SelectOption[]; renderInput?: (props: Record<string, unknown>) => ReactNode; getOptionLabel?: (option: Value | SelectOption) => string; getOptionValue?: (option: Value | SelectOption) => string | number }
+export interface AvatarProps extends HtmlComponentProps<HTMLDivElement> { src?: string; alt?: string; size?: ComponentSize | 'xs' | 'xl' | number; variant?: 'circular' | 'rounded' | 'square'; color?: ComponentColor | 'default'; children?: ReactNode }
+export interface BadgeProps extends HtmlComponentProps<HTMLSpanElement> { variant?: ComponentColor | 'primary' | 'default'; size?: ComponentSize; dot?: boolean; children?: ReactNode }
+export interface BannerProps extends HtmlComponentProps<HTMLDivElement> { type?: 'info' | 'success' | 'warning' | 'error'; title?: ReactNode; message?: ReactNode; closable?: boolean; onClose?: () => void; sticky?: boolean; zIndex?: number; icon?: ReactNode; actions?: ReactNode }
+export interface BlockquoteProps extends HtmlComponentProps<HTMLElement> { cite?: ReactNode; variant?: 'default' | 'minimal' | 'card'; noBorder?: boolean; interactive?: boolean; size?: ComponentSize | 'medium'; color?: ComponentColor | 'default' }
+export interface BoxProps<T extends ElementType = 'div'> extends PolymorphicProps<T, { children?: ReactNode; className?: string; style?: CSSProperties; p?: unknown; pt?: unknown; pr?: unknown; pb?: unknown; pl?: unknown; px?: unknown; py?: unknown; m?: unknown; mt?: unknown; mr?: unknown; mb?: unknown; ml?: unknown; mx?: unknown; my?: unknown; display?: CSSProperties['display']; flexDirection?: CSSProperties['flexDirection']; justifyContent?: CSSProperties['justifyContent']; alignItems?: CSSProperties['alignItems']; flexWrap?: CSSProperties['flexWrap']; gap?: CSSProperties['gap']; bgcolor?: string; color?: string; border?: string | number; borderRadius?: string | number; width?: CSSProperties['width']; height?: CSSProperties['height']; minWidth?: CSSProperties['minWidth']; minHeight?: CSSProperties['minHeight']; maxWidth?: CSSProperties['maxWidth']; maxHeight?: CSSProperties['maxHeight'] }> { component?: T }
+export interface BreadcrumbItem { label?: ReactNode; href?: string; icon?: ReactNode; disabled?: boolean; current?: boolean; [key: string]: unknown }
+export interface BreadcrumbProps extends Omit<HtmlComponentProps<HTMLElement>, 'onClick'> { items?: readonly BreadcrumbItem[]; separator?: ReactNode; variant?: 'default' | 'compact'; showHome?: boolean; homeIcon?: ReactNode; maxItems?: number; onItemClick?: (item: BreadcrumbItem, index: number) => void }
+export interface CardProps extends HtmlComponentProps<HTMLDivElement> { title?: ReactNode; variant?: 'minimal' | 'default' | 'outlined' | 'elevated'; color?: ComponentColor | 'default'; size?: ComponentSize | 'medium'; interactive?: boolean; noBorder?: boolean; header?: ReactNode; footer?: ReactNode }
+export interface CardActionsProps extends HtmlComponentProps<HTMLDivElement> { disableSpacing?: boolean; disablePadding?: boolean; justifyContent?: CSSProperties['justifyContent'] }
+export interface CardContentProps extends HtmlComponentProps<HTMLDivElement> { disablePadding?: boolean; padding?: 'none' | 'compact' | 'normal' | 'comfortable' }
+export interface ChipProps extends HtmlComponentProps<HTMLDivElement> { label?: ReactNode; avatar?: ReactNode; deletable?: boolean; disabled?: boolean; clickable?: boolean; variant?: 'filled' | 'outlined' | 'minimal'; size?: ComponentSize; color?: ComponentColor | 'default'; deleteIcon?: ReactNode; onDelete?: () => void }
+export interface CircularProgressProps extends HtmlComponentProps<HTMLDivElement> { value?: number; size?: number | string; thickness?: number; variant?: 'determinate' | 'indeterminate'; color?: ComponentColor | 'inherit'; showValue?: boolean; overlay?: boolean; centered?: boolean; inline?: boolean }
+export interface ColorPickerProps extends Omit<HtmlComponentProps<HTMLDivElement>, 'onChange'> { value?: string; onChange?: (value: string) => void; size?: ComponentSize; shape?: 'circle' | 'square' | 'rounded'; disabled?: boolean }
+export interface ContainerProps extends HtmlComponentProps<HTMLDivElement> { maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | string; fluid?: boolean; fixed?: boolean }
+export interface CopyProps extends HtmlComponentProps<HTMLButtonElement> { text?: string; value?: string; copied?: boolean; error?: boolean; label?: ReactNode; copiedLabel?: ReactNode; errorLabel?: ReactNode; onCopy?: (value: string) => void; icon?: ReactNode }
+export interface DatePickerProps extends Omit<HtmlComponentProps<HTMLDivElement>, 'onChange'> { value?: Date | string | null; onChange?: (value: Date) => void; placeholder?: string; disabled?: boolean; size?: ComponentSize; variant?: 'default' | FieldVariant; format?: string; showToday?: boolean; minDate?: Date | string | null; maxDate?: Date | string | null }
+export interface DividerProps extends HtmlComponentProps<HTMLHRElement> { variant?: 'solid' | 'dashed' | 'dotted'; orientation?: 'horizontal' | 'vertical'; flexItem?: boolean }
+export interface FeatureProps extends HtmlComponentProps<HTMLDivElement> { title?: ReactNode; description?: ReactNode; icon?: ReactNode; iconSize?: number; size?: ComponentSize; align?: 'left' | 'center' | 'right'; background?: string; variant?: 'default' | 'minimal' | 'card'; bgColor?: string; reverse?: boolean; vertical?: boolean; ctaLabel?: ReactNode; ctaHref?: string; onCtaClick?: (event: unknown) => void }
+export interface FeedItem { title?: ReactNode; description?: ReactNode; avatar?: ReactNode; time?: ReactNode; children?: FeedItem[]; [key: string]: unknown }
+export interface FeedProps extends Omit<HtmlComponentProps<HTMLDivElement>, 'onClick'> { item?: FeedItem; items?: readonly FeedItem[]; showAvatar?: boolean; variant?: 'timeline' | 'list'; color?: string; dotSize?: number; lineWidth?: number; onItemClick?: (item: FeedItem) => void }
+export interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> { onChange?: (files: FileList | File[]) => void; onInvalid?: (files: FileList | File[]) => void; label?: ReactNode; helperText?: ReactNode; accept?: string; multiple?: boolean; className?: string }
+export interface FormControlProps extends HtmlComponentProps<HTMLDivElement> { disabled?: boolean; error?: boolean; required?: boolean; variant?: FieldVariant; size?: ComponentSize; fullWidth?: boolean; margin?: 'none' | 'dense' | 'normal' }
+export interface FormControlLabelProps extends HtmlComponentProps<HTMLLabelElement> { label?: ReactNode; labelPlacement?: 'start' | 'end' | 'top' | 'bottom'; disabled?: boolean; required?: boolean; checked?: boolean; value?: unknown; control?: ReactNode; onChange?: (...args: unknown[]) => void }
+export interface FormGroupProps extends HtmlComponentProps<HTMLDivElement> { row?: boolean; spacing?: 'compact' | 'normal' | 'comfortable' }
+export interface FormHelperTextProps extends HtmlComponentProps<HTMLParagraphElement> { disabled?: boolean; error?: boolean; filled?: boolean; focused?: boolean; margin?: 'none' | 'dense' | 'normal'; required?: boolean; variant?: FieldVariant; id?: string; size?: ComponentSize }
+export interface GridProps extends HtmlComponentProps<HTMLDivElement> { container?: boolean; item?: boolean; xs?: number | boolean; sm?: number | boolean; md?: number | boolean; lg?: number | boolean; xl?: number | boolean; spacing?: number | string; direction?: CSSProperties['flexDirection']; justifyContent?: CSSProperties['justifyContent']; alignItems?: CSSProperties['alignItems'] }
+export interface HoverCardProps extends HtmlComponentProps<HTMLDivElement> { triggerText?: ReactNode; cardData?: Record<string, unknown>; variant?: 'default' | 'outlined' | 'filled' | 'minimal'; size?: ComponentSize; cardSize?: ComponentSize | 'xl'; position?: FloatingPlacement; delay?: number; hideDelay?: number; showArrow?: boolean; disabled?: boolean; onShow?: () => void; onHide?: () => void; onAction?: (...args: unknown[]) => void; card?: ReactNode }
+export interface IconProps extends HtmlComponentProps<HTMLSpanElement> { name?: string; size?: number | string; color?: string; children?: ReactNode }
+export interface ImageGalleryImage { src: string; alt?: string; title?: ReactNode; description?: ReactNode; [key: string]: unknown }
+export interface ImageGalleryProps extends HtmlComponentProps<HTMLDivElement> { images?: readonly ImageGalleryImage[]; title?: ReactNode; layout?: 'grid' | 'masonry' | 'carousel'; size?: ComponentSize | 'xl'; columns?: number; gap?: number; showInfo?: boolean; showCount?: boolean; showDownload?: boolean; showPagination?: boolean; itemsPerPage?: number; lazyLoad?: boolean; loading?: boolean; onSelect?: (image: ImageGalleryImage, index: number) => void; onDownload?: (image: ImageGalleryImage) => void; onLightboxOpen?: (event: unknown) => void; onLightboxClose?: () => void }
+export interface ListProps extends HtmlComponentProps<HTMLUListElement> { dense?: boolean; disablePadding?: boolean; nav?: boolean; subheader?: ReactNode }
+export interface ListItemProps<T extends ElementType = 'li'> extends PolymorphicProps<T, { children?: ReactNode; className?: string; button?: boolean; disabled?: boolean; divider?: boolean; selected?: boolean; disableGutters?: boolean; multiselect?: boolean }> { component?: T }
+export interface ListItemIconProps extends HtmlComponentProps<HTMLSpanElement> { position?: 'start' | 'end' }
+export interface ListItemTextProps extends HtmlComponentProps<HTMLSpanElement> { primary?: ReactNode; secondary?: ReactNode; inset?: boolean }
+export interface NumberAnimationProps extends HtmlComponentProps<HTMLSpanElement> { active?: boolean; duration?: number; from?: number; to?: number; locale?: string; precision?: number; showSeparator?: boolean; prefix?: ReactNode; suffix?: ReactNode; separator?: string; formatter?: (value: number) => ReactNode; easing?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | string; onFinish?: () => void }
+export interface PaginationProps extends Omit<HtmlComponentProps<HTMLElement>, 'onChange'> { value?: number; page?: number; onChange?: (page: number) => void; total?: number; pageSize?: number; siblingCount?: number; boundaryCount?: number; size?: ComponentSize | 'xl' }
+export interface PaperProps<T extends ElementType = 'div'> extends PolymorphicProps<T, { children?: ReactNode; className?: string; style?: CSSProperties; variant?: 'elevation' | 'outlined' | 'minimal'; elevation?: number; square?: boolean; hoverable?: boolean; clickable?: boolean; color?: ComponentColor | 'default'; size?: ComponentSize | null; shape?: string | null; gradient?: boolean; frosted?: boolean; textured?: boolean }> { component?: T }
+export interface PopoverProps extends HtmlComponentProps<HTMLDivElement> { open?: boolean; onOpenChange?: (open: boolean) => void; triggerText?: ReactNode; trigger?: ReactNode; placement?: FloatingPlacement; offset?: number }
+export interface PricingPlan { title?: ReactNode; price?: ReactNode; features?: readonly ReactNode[]; highlighted?: boolean; [key: string]: unknown }
+export interface PricingTableProps extends HtmlComponentProps<HTMLDivElement> { plans?: readonly PricingPlan[]; columns?: number }
+export interface ProgressProps extends HtmlComponentProps<HTMLDivElement> { value?: number; label?: ReactNode; showPercent?: boolean; color?: ComponentColor; size?: ComponentSize; animated?: boolean }
+export interface RatingProps extends Omit<HtmlComponentProps<HTMLDivElement>, 'onChange'> { value?: number; max?: number; readOnly?: boolean; onChange?: (value: number) => void; ariaLabel?: string }
+export interface SkeletonProps<T extends ElementType = 'div'> extends PolymorphicProps<T, { children?: ReactNode; className?: string; style?: CSSProperties; animation?: false | 'pulse' | 'wave'; height?: number | string; width?: number | string; variant?: 'text' | 'rectangular' | 'rounded' | 'circular' }> { component?: T }
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'defaultValue'> { value?: number; defaultValue?: number; min?: number; max?: number; step?: number; label?: ReactNode; valueLabelDisplay?: 'off' | 'auto' | 'on'; onChange?: (value: number) => void; className?: string; style?: CSSProperties }
+export interface SlideOverProps extends HtmlComponentProps<HTMLDivElement> { open?: boolean; onClose?: () => void; placement?: 'left' | 'right' | 'top' | 'bottom'; width?: number | string; header?: ReactNode; footer?: ReactNode }
+export interface SnackbarProps extends HtmlComponentProps<HTMLDivElement> { open?: boolean; message?: ReactNode; severity?: 'success' | 'warning' | 'error' | 'info'; closable?: boolean; showIcon?: boolean; showProgress?: boolean; autoHideDuration?: number; action?: ReactNode; onClose?: () => void; onAction?: () => void }
+export interface StatusProps extends HtmlComponentProps<HTMLSpanElement> { status?: 'default' | 'success' | 'warning' | 'error' | 'info' | string; size?: ComponentSize; showText?: boolean; animated?: boolean; animationType?: 'auto' | 'glow' | 'spin' | 'bounce' | 'shake' | 'ripple'; text?: ReactNode }
+export interface ToolbarProps extends HtmlComponentProps<HTMLDivElement> { variant?: 'regular' | 'dense'; disableGutters?: boolean }
+export interface TooltipProps extends HtmlComponentProps<HTMLDivElement> { text?: ReactNode; placement?: 'top' | 'bottom' | 'left' | 'right'; children?: ReactNode }
+export interface TypographyProps<T extends ElementType = 'p'> extends PolymorphicProps<T, { children?: ReactNode; className?: string; style?: CSSProperties; variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline'; component?: T; color?: string; align?: CSSProperties['textAlign']; gutterBottom?: boolean; noWrap?: boolean }> { component?: T }
+export interface TypingTextProps extends HtmlComponentProps<HTMLSpanElement> { text?: string; speed?: number; pause?: number; loop?: boolean; erase?: boolean; showCursor?: boolean }
+export interface VerificationCodeInputProps extends Omit<HtmlComponentProps<HTMLDivElement>, 'onChange'> { length?: number; value?: string; onChange?: (value: string) => void; onComplete?: (value: string) => void; autoFocus?: boolean }
+export interface VideoPlayerProps extends HtmlComponentProps<HTMLDivElement> { src: string; autoplay?: boolean; loop?: boolean; muted?: boolean; poster?: string; controls?: boolean }
+export interface WatermarkProps extends HtmlComponentProps<HTMLDivElement> { content?: ReactNode; image?: string; fullscreen?: boolean; gap?: [number, number]; offset?: [number, number]; rotate?: number; zIndex?: number; opacity?: number; debug?: boolean; cross?: boolean }
+
 export interface ThemeContextValue extends ThemeSnapshot {
   setMode: (mode: ThemeMode) => void
   toggleMode: () => void
@@ -342,66 +408,66 @@ export type {
   SplitRatio,
 } from '@zeturn/watercolor-core'
 
-export const Accordion: WatercolorComponent
-export const Alert: WatercolorComponent
-export const AppBar: WatercolorComponent
-export const Autocomplete: WatercolorComponent
-export const Avatar: WatercolorComponent
-export const Badge: WatercolorComponent
-export const Banner: WatercolorComponent
-export const Blockquote: WatercolorComponent
-export const Box: WatercolorComponent
-export const Breadcrumb: WatercolorComponent
+export const Accordion: ComponentType<AccordionProps>
+export const Alert: ComponentType<AlertProps>
+export const AppBar: ComponentType<AppBarProps>
+export const Autocomplete: ComponentType<AutocompleteProps>
+export const Avatar: ComponentType<AvatarProps>
+export const Badge: ComponentType<BadgeProps>
+export const Banner: ComponentType<BannerProps>
+export const Blockquote: ComponentType<BlockquoteProps>
+export const Box: <T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null
+export const Breadcrumb: ComponentType<BreadcrumbProps>
 export const Button: ComponentType<ButtonProps>
-export const Card: WatercolorComponent
-export const CardActions: WatercolorComponent
-export const CardContent: WatercolorComponent
+export const Card: ComponentType<CardProps>
+export const CardActions: ComponentType<CardActionsProps>
+export const CardContent: ComponentType<CardContentProps>
 export const Checkbox: ComponentType<CheckboxProps>
-export const Chip: WatercolorComponent
-export const CircularProgress: WatercolorComponent
-export const ColorPicker: WatercolorComponent
-export const Container: WatercolorComponent
-export const Copy: WatercolorComponent
-export const DatePicker: WatercolorComponent
-export const Fab: WatercolorComponent
-export const Feed: WatercolorComponent
-export const Feature: WatercolorComponent
-export const FileInput: WatercolorComponent
-export const FormControl: WatercolorComponent
-export const FormControlLabel: WatercolorComponent
-export const FormGroup: WatercolorComponent
-export const FormHelperText: WatercolorComponent
-export const Grid: WatercolorComponent
-export const HoverCard: WatercolorComponent
-export const Icon: WatercolorComponent
-export const IconButton: WatercolorComponent
-export const ImageGallery: WatercolorComponent
+export const Chip: ComponentType<ChipProps>
+export const CircularProgress: ComponentType<CircularProgressProps>
+export const ColorPicker: ComponentType<ColorPickerProps>
+export const Container: ComponentType<ContainerProps>
+export const Copy: ComponentType<CopyProps>
+export const DatePicker: ComponentType<DatePickerProps>
+export const Fab: ComponentType<FabProps>
+export const Feed: ComponentType<FeedProps>
+export const Feature: ComponentType<FeatureProps>
+export const FileInput: ComponentType<FileInputProps>
+export const FormControl: ComponentType<FormControlProps>
+export const FormControlLabel: ComponentType<FormControlLabelProps>
+export const FormGroup: ComponentType<FormGroupProps>
+export const FormHelperText: ComponentType<FormHelperTextProps>
+export const Grid: ComponentType<GridProps>
+export const HoverCard: ComponentType<HoverCardProps>
+export const Icon: ComponentType<IconProps>
+export const IconButton: ComponentType<IconButtonProps>
+export const ImageGallery: ComponentType<ImageGalleryProps>
 export const Inline: <T extends ElementType = 'div'>(props: InlineProps<T>) => ReactElement | null
 export const Input: ComponentType<InputProps>
-export const List: WatercolorComponent
-export const ListItem: WatercolorComponent
-export const ListItemIcon: WatercolorComponent
-export const ListItemText: WatercolorComponent
+export const List: ComponentType<ListProps>
+export const ListItem: <T extends ElementType = 'li'>(props: ListItemProps<T>) => ReactElement | null
+export const ListItemIcon: ComponentType<ListItemIconProps>
+export const ListItemText: ComponentType<ListItemTextProps>
 export const Menu: ComponentType<MenuProps>
 export const Modal: ComponentType<ModalProps>
-export const NumberAnimation: WatercolorComponent
-export const Pagination: WatercolorComponent
+export const NumberAnimation: ComponentType<NumberAnimationProps>
+export const Pagination: ComponentType<PaginationProps>
 export const Page: <T extends ElementType = 'div'>(props: PageProps<T>) => ReactElement | null
-export const Paper: WatercolorComponent
-export const Popover: WatercolorComponent
-export const PricingTable: WatercolorComponent
-export const Progress: WatercolorComponent
+export const Paper: <T extends ElementType = 'div'>(props: PaperProps<T>) => ReactElement | null
+export const Popover: ComponentType<PopoverProps>
+export const PricingTable: ComponentType<PricingTableProps>
+export const Progress: ComponentType<ProgressProps>
 export const Radio: <Value = string | number | boolean>(props: RadioProps<Value>) => ReactElement | null
 export const RadioGroup: <Value = string | number | boolean>(props: RadioGroupProps<Value>) => ReactElement | null
-export const Rating: WatercolorComponent
+export const Rating: ComponentType<RatingProps>
 export const Select: <Value extends SelectValue = SelectValue>(props: SelectProps<Value>) => ReactElement | null
-export const Skeleton: WatercolorComponent
-export const Slider: WatercolorComponent
-export const SlideOver: WatercolorComponent
+export const Skeleton: <T extends ElementType = 'div'>(props: SkeletonProps<T>) => ReactElement | null
+export const Slider: ComponentType<SliderProps>
+export const SlideOver: ComponentType<SlideOverProps>
 export const Split: <T extends ElementType = 'div'>(props: SplitProps<T>) => ReactElement | null
 export const Stack: <T extends ElementType = 'div'>(props: StackProps<T>) => ReactElement | null
-export const Snackbar: WatercolorComponent
-export const Status: WatercolorComponent
+export const Snackbar: ComponentType<SnackbarProps>
+export const Status: ComponentType<StatusProps>
 export const Switch: ComponentType<SwitchProps>
 export const Table: ComponentType<TableProps> & {
   Head: ComponentType<TableHeadProps>
@@ -415,13 +481,13 @@ export const TableHead: ComponentType<TableHeadProps>
 export const TableRow: ComponentType<TableRowProps>
 export const Tabs: ComponentType<TabsProps>
 export const TextField: ComponentType<TextFieldProps>
-export const Toolbar: WatercolorComponent
-export const Tooltip: WatercolorComponent
-export const Typography: WatercolorComponent
-export const TypingText: WatercolorComponent
-export const VerificationCodeInput: WatercolorComponent
-export const VideoPlayer: WatercolorComponent
-export const Watermark: WatercolorComponent
+export const Toolbar: ComponentType<ToolbarProps>
+export const Tooltip: ComponentType<TooltipProps>
+export const Typography: <T extends ElementType = 'p'>(props: TypographyProps<T>) => ReactElement | null
+export const TypingText: ComponentType<TypingTextProps>
+export const VerificationCodeInput: ComponentType<VerificationCodeInputProps>
+export const VideoPlayer: ComponentType<VideoPlayerProps>
+export const Watermark: ComponentType<WatermarkProps>
 export const LocaleProvider: ComponentType<LocaleProviderProps>
 export const defaultLocaleMessages: WatercolorLocaleMessages
 export function useLocale(): LocaleContextValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeturn/watercolor-react",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "type": "module",
   "license": "ISC",
   "main": "dist/watercolor-react.es.js",
@@ -41,11 +41,11 @@
     "directory": "packages/react"
   },
   "peerDependencies": {
-    "@zeturn/watercolor-icons-feather": "1.2.4",
-    "@zeturn/watercolor-icons-heroicons-react": "1.2.4",
-    "@zeturn/watercolor-icons-lucide-react": "1.2.4",
-    "@zeturn/watercolor-icons-phosphor-react": "1.2.4",
-    "@zeturn/watercolor-icons-tabler-react": "1.2.4",
+    "@zeturn/watercolor-icons-feather": "1.2.6",
+    "@zeturn/watercolor-icons-heroicons-react": "1.2.6",
+    "@zeturn/watercolor-icons-lucide-react": "1.2.6",
+    "@zeturn/watercolor-icons-phosphor-react": "1.2.6",
+    "@zeturn/watercolor-icons-tabler-react": "1.2.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -67,7 +67,7 @@
     }
   },
   "dependencies": {
-    "@zeturn/watercolor-core": "1.2.4",
+    "@zeturn/watercolor-core": "1.2.6",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {