0.0.9

.gitignore

@@ -7,10 +7,7 @@ dist
 *.local
 .tanstack
 *.tgz
-test/coverage
-
-# Editor directories and files
-.vscode
+coverage
 
 # Sonarqube
 sonarBuild.sh

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"sonarlint.connectedMode.project": {
+		"connectionId": "mattrixwvSonarqube",
+		"projectKey": "MattrixwvReactComponents"
+	}
+}

README.md

@@ -1 +1,5 @@
+# Mattrixwv React Components
+
+[![Quality Gate Status](https://sonarqube.mattrixwv.com/api/project_badges/measure?project=MattrixwvReactComponents&metric=alert_status&token=sqb_e8b5362c32319b0612536e683cdbe2a77ec5bb32)](https://sonarqube.mattrixwv.com/dashboard?id=MattrixwvReactComponents)
+
 Under Construction

lib/component/button.ts

@@ -1,26 +0,0 @@
-import Button from "./button/Button";
-import DangerButton from "./button/DangerButton";
-import DarkButton from "./button/DarkButton";
-import InfoButton from "./button/InfoButton";
-import LightButton from "./button/LightButton";
-import MoltenButton from "./button/MoltenButton";
-import PrimaryButton from "./button/PrimaryButton";
-import SecondaryButton from "./button/SecondaryButton";
-import SuccessButton from "./button/SuccessButton";
-import TertiaryButton from "./button/TertiaryButton";
-import WarningButton from "./button/WarningButton";
-
-
-export {
-	Button,
-	DangerButton,
-	DarkButton,
-	InfoButton,
-	LightButton,
-	MoltenButton,
-	PrimaryButton,
-	SecondaryButton,
-	SuccessButton,
-	TertiaryButton,
-	WarningButton
-};

lib/component/button/Button.tsx

@@ -1,10 +1,9 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function Button({
 	className,
 	type="button",
 	rounding = "lg",
@@ -13,13 +12,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref ) => {
+}: Readonly<ButtonProps>){
 	return (
 		<button
 			data-testid="mattrixwv-button"
-			ref={ref}
 			type={type}
-			{...buttonProps}
 			disabled={disabled}
 			className={clsx(
 				className,
@@ -57,10 +54,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"cursor-not-allowed opacity-75": disabled
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-Button.displayName = "Button";
-
-export default Button;
+}

lib/component/button/DangerButton.tsx

@@ -1,21 +1,18 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
 
-const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DangerButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-danger-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -42,10 +39,7 @@ const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-danger hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-DangerButton.displayName = "DangerButton";
-
-export default DangerButton;
+}

lib/component/button/DarkButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DarkButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-dark-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-dark hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-DarkButton.displayName = "DarkButton";
-
-export default DarkButton;
+}

lib/component/button/InfoButton.tsx

@@ -1,22 +1,19 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function InfoButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-info-button"
-			{...buttonProps}
 			variant={variant}
 			disabled={disabled}
-			ref={ref}
 			className={clsx(
 				"transition duration-300",
 				className,
@@ -41,10 +38,7 @@ const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-info hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-InfoButton.displayName = "InfoButton";
-
-export default InfoButton;
+}

lib/component/button/LightButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function LightButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-light-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-light hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-LightButton.displayName = "LightButton";
-
-export default LightButton;
+}

lib/component/button/MoltenButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function MoltenButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-molten-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-molten hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-MoltenButton.displayName = "MoltenButton";
-
-export default MoltenButton;
+}

lib/component/button/PrimaryButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function PrimaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-primary-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-primary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-PrimaryButton.displayName = "PrimaryButton";
-
-export default PrimaryButton;
+}

lib/component/button/SecondaryButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SecondaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-secondary-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-secondary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-SecondaryButton.displayName = "SecondaryButton";
-
-export default SecondaryButton;
+}

lib/component/button/SuccessButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SuccessButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-success-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-success hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-SuccessButton.displayName = "SuccessButton";
-
-export default SuccessButton;
+}

lib/component/button/TertiaryButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function TertiaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-tertiary-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-tertiary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-TertiaryButton.displayName = "TertiaryButton";
-
-export default TertiaryButton;
+}

lib/component/button/WarningButton.tsx

@@ -1,20 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function WarningButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-warning-button"
-			{...buttonProps}
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -41,10 +38,7 @@ const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 					"text-warning hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
+			{...buttonProps}
 		/>
 	);
-});
-
-WarningButton.displayName = "WarningButton";
-
-export default WarningButton;
+}

lib/component/button/index.ts

@@ -0,0 +1,12 @@
+export { default as Button } from "./Button";
+export { default as DangerButton } from "./DangerButton";
+export { default as DarkButton } from "./DarkButton";
+export { default as InfoButton } from "./InfoButton";
+export { default as LightButton } from "./LightButton";
+export { default as MoltenButton } from "./MoltenButton";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as SuccessButton } from "./SuccessButton";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as WarningButton } from "./WarningButton";
+

lib/component/checkbox.ts

@@ -1,26 +0,0 @@
-import DangerCheckbox from "./input/checkbox/DangerCheckbox";
-import DarkCheckbox from "./input/checkbox/DarkCheckbox";
-import InfoCheckbox from "./input/checkbox/InfoCheckbox";
-import LightCheckbox from "./input/checkbox/LightCheckbox";
-import MattrixwvCheckbox from "./input/checkbox/MattrixwvCheckbox";
-import MoltenCheckbox from "./input/checkbox/MoltenCheckbox";
-import PrimaryCheckbox from "./input/checkbox/PrimaryCheckbox";
-import SecondaryCheckbox from "./input/checkbox/SecondaryCheckbox";
-import SuccessCheckbox from "./input/checkbox/SuccessCheckbox";
-import TertiaryCheckbox from "./input/checkbox/TertiaryCheckbox";
-import WarningCheckbox from "./input/checkbox/WarningCheckbox";
-
-
-export {
-	DangerCheckbox,
-	DarkCheckbox,
-	InfoCheckbox,
-	LightCheckbox,
-	MattrixwvCheckbox,
-	MoltenCheckbox,
-	PrimaryCheckbox,
-	SecondaryCheckbox,
-	SuccessCheckbox,
-	TertiaryCheckbox,
-	WarningCheckbox
-};

lib/component/input.ts

@@ -1,26 +0,0 @@
-import DateInput from "./input/date/DateInput";
-import DateTimeInput from "./input/date/DateTimeInput";
-import TimeInput from "./input/date/TimeInput";
-import DragAndDropFileInput from "./input/file/DragAndDropFileInput";
-import FileInput from "./input/file/FileInput";
-import NumberInput from "./input/number/NumberInput";
-import OptionInput from "./input/text/OptionInput";
-import SelectInput from "./input/text/SelectInput";
-import TextArea from "./input/text/TextArea";
-import TextInput from "./input/text/TextInput";
-
-
-export {
-	DateInput,
-	DateTimeInput,
-	DragAndDropFileInput,
-	FileInput,
-	NumberInput,
-	//NumberSlider,
-	OptionInput,
-	SelectInput,
-	TextArea,
-	TextInput,
-	TimeInput
-};
-

lib/component/input/checkbox/DangerCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function DangerCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-danger group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-danger": !box
+					"group-data-checked:bg-danger group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-danger": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-DangerCheckbox.displayName = "DangerCheckbox";
-
-export default DangerCheckbox;
+}

lib/component/input/checkbox/DarkCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function DarkCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-dark group-data-checked:stroke-light": box,
-					"group-data-checked:stroke-dark": !box
+					"group-data-checked:bg-dark group-data-checked:stroke-light": showBox,
+					"group-data-checked:stroke-dark": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-DarkCheckbox.displayName = "DarkCheckbox";
-
-export default DarkCheckbox;
+}

lib/component/input/checkbox/InfoCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function InfoCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-info group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-info": !box
+					"group-data-checked:bg-info group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-info": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-InfoCheckbox.displayName = "InfoCheckbox";
-
-export default InfoCheckbox;
+}

lib/component/input/checkbox/LightCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function LightCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-light group-data-checked:stroke-dark": box,
-					"group-data-checked:stroke-light": !box
+					"group-data-checked:bg-light group-data-checked:stroke-dark": showBox,
+					"group-data-checked:stroke-light": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-LightCheckbox.displayName = "LightCheckbox";
-
-export default LightCheckbox;
+}

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,78 +1,85 @@
 import type { CheckboxProps } from "$/types/InputTypes";
-import { Checkbox } from "@headlessui/react";
+import { Checkbox, Field, Label } from "@headlessui/react";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
-const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
-	id,
+export default function MattrixwvCheckbox({
 	className,
 	labelClassName,
 	name,
 	size = "sm",
-	box = true,
+	showBox = true,
 	onChange,
 	checked,
 	defaultChecked,
 	strokeWidth = 2,
 	value,
+	disabled,
 	children
-}, ref ) => {
+}: Readonly<CheckboxProps>){
 	return (
-		<Checkbox
-			id={id}
-			className={clsx(
-				"group cursor-pointer",
-				"flex flex-row items-center justify-center gap-x-2"
-			)}
-			name={name}
-			checked={checked}
-			defaultChecked={defaultChecked}
-			onChange={onChange}
-			value={value}
-			ref={ref}
+		<Field
+			className="flex flex-row items-center justify-center gap-x-2"
 		>
-			<div
+			<Checkbox
+				data-testid="mattrixwv-checkbox"
 				className={clsx(
-					className,
+					"group",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 					{
-						"rounded border": box
-					},
-					{
-						"": size === "none",
-						"size-3": size === "xs",
-						"size-4": size === "sm",
-						"size-5": size === "md",
-						"size-6": size === "lg",
-						"size-7": size === "xl"
+						"cursor-pointer": !disabled,
+						"cursor-not-allowed": disabled
 					}
 				)}
+				name={name}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				onChange={onChange}
+				value={value}
+				disabled={disabled}
 			>
-				<svg
-					viewBox="0 0 14 14"
-					fill="none"
-					aria-label="checkbox"
-				>
-					<path
-						d="M3 8L6 11L11 3.5"
-						strokeWidth={strokeWidth}
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					/>
-				</svg>
-			</div>
-			{
-				children &&
+				{/* Checkbox */}
 				<div
-					className={labelClassName}
+					data-testid="mattrixwv-checkbox-graphic"
+					className={clsx(
+						className,
+						{
+							"border rounded": showBox
+						},
+						{
+							"": size === "none",
+							"size-3": size === "xs",
+							"size-4": size === "sm",
+							"size-5": size === "md",
+							"size-6": size === "lg",
+							"size-7": size === "xl"
+						}
+					)}
 				>
-					{children}
+					<svg
+						viewBox="0 0 14 14"
+						fill="none"
+						aria-hidden="true"
+					>
+						<path
+							d="M3 8L6 11L11 3.5"
+							strokeWidth={strokeWidth}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						/>
+					</svg>
 				</div>
-			}
-		</Checkbox>
+			</Checkbox>
+			{/* Label */}
+				{
+					children &&
+					<Label
+						data-testid="mattrixwv-checkbox-label"
+						className={labelClassName}
+					>
+						{children}
+					</Label>
+				}
+		</Field>
 	);
-});
-
-MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
-
-export default MattrixwvCheckbox;
+}

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function MoltenCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-molten group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-molten": !box
+					"group-data-checked:bg-molten group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-molten": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-MoltenCheckbox.displayName = "MoltenCheckbox";
-
-export default MoltenCheckbox;
+}

lib/component/input/checkbox/PrimaryCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function PrimaryCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-primary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-primary": !box
+					"group-data-checked:bg-primary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-primary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-PrimaryCheckbox.displayName = "PrimaryCheckbox";
-
-export default PrimaryCheckbox;
+}

lib/component/input/checkbox/SecondaryCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function SecondaryCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-secondary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-secondary": !box
+					"group-data-checked:bg-secondary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-secondary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-SecondaryCheckbox.displayName = "SecondaryCheckbox";
-
-export default SecondaryCheckbox;
+}

lib/component/input/checkbox/SuccessCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function SuccessCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-success group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-success": !box
+					"group-data-checked:bg-success group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-success": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-SuccessCheckbox.displayName = "SuccessCheckbox";
-
-export default SuccessCheckbox;
+}

lib/component/input/checkbox/TertiaryCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function TertiaryCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-tertiary group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-tertiary": !box
+					"group-data-checked:bg-tertiary group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-tertiary": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-TertiaryCheckbox.displayName = "TertiaryCheckbox";
-
-export default TertiaryCheckbox;
+}

lib/component/input/checkbox/WarningCheckbox.tsx

@@ -1,30 +1,24 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function WarningCheckbox({
 	className,
-	box = true,
+	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-warning group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-warning": !box
+					"group-data-checked:bg-warning group-data-checked:stroke-white": showBox,
+					"group-data-checked:stroke-warning": !showBox
 				}
 			)}
-			box={box}
+			showBox={showBox}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-WarningCheckbox.displayName = "WarningCheckbox";
-
-export default WarningCheckbox;
+}

lib/component/input/date/DateInput.tsx

@@ -1,26 +1,47 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import { type ChangeEvent } from "react";
 
 
 export default function DateInput({
-	id,
 	className,
-	defaultValue,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	//Used to translate the string from the input to a date for onChange
+	const changeDate = (e: ChangeEvent<HTMLInputElement>) => {
+		const [ year, month, day ] = e.target.value.split("-").map(Number);
+		const newDate = new Date(year, month - 1, day);
+
+		onChange(Number.isNaN(newDate.getTime()) ? undefined : newDate);
+	};
+
+
 	return (
 		<input
 			type="date"
-			id={id}
 			className={clsx(
 				"border rounded-lg px-2 py-1",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DD") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
+			value={formatDate(value)}
+			onChange={changeDate}
+			{...inputProps}
 		/>
 	);
 }
+
+
+//Used to translate the date to a string for the input
+function formatDate(date: Date | undefined): string{
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+
+	return `${year}-${month}-${day}`;
+}

lib/component/input/date/DateTimeInput.tsx

@@ -1,15 +1,38 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import type { ChangeEvent } from "react";
 
 
 export default function DateTimeInput({
 	id,
 	className,
-	defaultValue,
+	step = 60,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	const changeDateTime = (e: ChangeEvent<HTMLInputElement>) => {
+		const match = new RegExp(/^(\d+)-(\d+)-(\d+)T(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
+
+		if(!match){
+			onChange(undefined);
+			return;
+		}
+
+		const [ ,
+			y, mo, d,
+			h, mi, s = "0", ms = "0"
+		] = match;
+
+		const date = new Date(
+			Number(y), Number(mo) - 1, Number(d),
+			Number(h), Number(mi), Number(s), Number(ms)
+		);
+
+		onChange(Number.isNaN(date.getTime()) ? undefined : date);
+	}
+
+
 	return (
 		<input
 			type="datetime-local"
@@ -18,9 +41,28 @@ export default function DateTimeInput({
 				"border rounded-lg px-2 py-1 outline-none",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+			value={formatDateTime(value)}
+			onChange={changeDateTime}
+			step={step}
+			{...inputProps}
 		/>
 	);
 }
+
+
+function formatDateTime(date: Date | undefined){
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const y = date.getFullYear();
+	const mo = String(date.getMonth() + 1).padStart(2, "0");
+	const d = String(date.getDate()).padStart(2, "0");
+
+	const h = String(date.getHours()).padStart(2, "0");
+	const mi = String(date.getMinutes()).padStart(2, "0");
+	const s = String(date.getSeconds()).padStart(2, "0");
+	const ms = String(date.getMilliseconds()).padStart(2, "0");
+
+	return `${y}-${mo}-${d}T${h}:${mi}:${s}.${ms}`;
+}

lib/component/input/date/TimeInput.tsx

@@ -1,15 +1,33 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import type { ChangeEvent } from "react";
 
 
 export default function TimeInput({
 	id,
 	className,
-	defaultValue,
+	step = 60,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	const changeTime = (e: ChangeEvent<HTMLInputElement>) => {
+		const match = new RegExp(/^(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
+
+		if(!match){
+			onChange(undefined);
+			return;
+		}
+
+		const [ , h, m, s = "0", ms = "0"] = match;
+
+		const newDate = new Date();
+		newDate.setHours(Number(h), Number(m), Number(s), Number(ms));
+
+		onChange(Number.isNaN(newDate) ? undefined : newDate);
+	}
+
+
 	return (
 		<input
 			type="time"
@@ -18,9 +36,32 @@ export default function TimeInput({
 				"border rounded-lg px-2 py-1 outline-none",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+			value={formatTime(value, step)}
+			onChange={changeTime}
+			step={step}
+			{...inputProps}
 		/>
 	);
 }
+
+
+function formatTime(date: Date | undefined, step: number){
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const h = String(date.getHours()).padStart(2, "0");
+	const m = String(date.getMinutes()).padStart(2, "0");
+	const s = String(date.getSeconds()).padStart(2, "0");
+	const ms = String(date.getMilliseconds()).padStart(3, "0");
+
+	let time = `${h}:${m}`;
+	if(step < 60){
+		time += `:${s}`;
+	}
+	if(step < 1){
+		time += `.${ms}`;
+	}
+
+	return time;
+}

lib/component/input/file/DragAndDropFileInput.tsx

@@ -1,41 +1,50 @@
+import { DangerButton } from "$/component/button";
 import type { FileInputProps } from "$/types/InputTypes";
 import { humanReadableBytes } from "$/util/FileUtil";
 import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
+import { MdClose } from "react-icons/md";
 
 
 export default function DragAndDropFileInput({
 	id,
 	className,
 	name,
+	ariaLabel,
 	minSize,
 	maxSize,
-	showFileName,
-	showSize,
+	showFileName = true,
+	showSize = true,
 	onChange,
 	disabled,
 	children
-}: FileInputProps){
+}: Readonly<FileInputProps>){
 	const [ file, setFile ] = useState<File>();
 	const inputRef = useRef<HTMLInputElement>(null);
 
 
-	useEffect(() => {
-		onChange?.(file);
-	}, [ file, onChange ]);
-
 	return (
 		<label
 			className={clsx(
-				"flex flex-col items-center justify-center border-2 rounded-lg w-full h-full cursor-pointer",
+				"flex flex-col items-center justify-center border-2 rounded-lg cursor-pointer",
+				"data-drag:border-primary data-drag:text-primary",
 				className
 			)}
-			onDragOver={(e) => e.preventDefault()}
+			onDragOver={(e) => { e.preventDefault(); e.currentTarget.dataset.drag = "true"; }}
+			onDragLeave={(e) => { e.preventDefault(); delete e.currentTarget.dataset.drag; }}
 			onDrop={(e) => {
 				e.preventDefault();
-				setFile(e.dataTransfer.files[0]);
+				delete e.currentTarget.dataset.drag;
+
+				const currentFile = e.dataTransfer.files[0];
+				setFile(currentFile);
+
+				if ((minSize && currentFile.size < minSize) || (maxSize && currentFile.size > maxSize)) return;
+
+				onChange?.(currentFile);
 				if(inputRef.current){ inputRef.current.files = e.dataTransfer.files; }
 			}}
+			aria-label={ariaLabel}
 		>
 			<input
 				ref={inputRef}
@@ -43,24 +52,40 @@ export default function DragAndDropFileInput({
 				id={id}
 				className="sr-only"
 				name={name}
-				onChange={(e) => setFile(e.target.files?.[0])}
+				onChange={(e) => {
+					const currentFile = e.target.files?.[0];
+					setFile(currentFile);
+					if ((minSize && currentFile && currentFile.size < minSize) || (maxSize && currentFile && currentFile.size > maxSize)) return;
+					onChange?.(currentFile);
+				}}
 				disabled={disabled}
 			/>
 			<div
-				className="flex flex-col items-center justify-between w-full h-full px-2"
+				className="flex flex-col items-center justify-between px-2"
 			>
-				{children}
+				<div className="flex flex-row items-center justify-center">
+					{children}
+				</div>
 				<div
-					className="flex flex-row items-center justify-between gap-x-8 w-full"
+					className="flex flex-row items-center justify-between gap-x-2 w-full"
 				>
 					{
 						showFileName &&
-						<div
-							className="text-center"
-						>
+						<div className="flex flex-row items-center justify-center gap-x-2">
 							{file?.name}
 						</div>
 					}
+					{
+						file &&
+						<DangerButton
+							className="mr-4"
+							shape="square"
+							variant="icon"
+							onClick={(e) => { e.preventDefault(); setFile(undefined); onChange?.(undefined); }}
+						>
+							<MdClose size={22} className="fill-danger"/>
+						</DangerButton>
+					}
 					{
 						showSize &&
 						<div

lib/component/input/file/FileInput.tsx

@@ -1,22 +1,25 @@
-import { SecondaryButton } from "$/component/button";
+import { DangerButton, SecondaryButton } from "$/component/button";
 import type { FileInputProps } from "$/types/InputTypes";
 import { humanReadableBytes } from "$/util/FileUtil";
 import clsx from "clsx";
 import { useRef, useState } from "react";
+import { FaRegFolderOpen } from "react-icons/fa6";
+import { MdClose } from "react-icons/md";
 
 
 export default function FileInput({
 	id,
 	className,
 	name,
+	ariaLabel,
 	minSize,
 	maxSize,
-	showFileName,
-	showSize,
+	showFileName = true,
+	showSize = true,
 	onChange,
 	disabled,
 	children
-}: FileInputProps){
+}: Readonly<FileInputProps>){
 	const inputRef = useRef<HTMLInputElement>(null);
 	const [ file, setFile ] = useState<File>();
 
@@ -24,7 +27,7 @@ export default function FileInput({
 	return (
 		<div
 			className={clsx(
-				"flex flex-row items-center justify-between w-full border-2 rounded-lg",
+				"flex flex-row items-center justify-between border-2 rounded-lg",
 				className
 			)}
 		>
@@ -34,7 +37,13 @@ export default function FileInput({
 				type="file"
 				className="sr-only"
 				name={name}
-				onChange={(e) => { setFile(e.target.files?.[0]); onChange?.(e.target.files?.[0]); }}
+				aria-label={ariaLabel}
+				onChange={(e) => {
+					const currentFile = e.target.files?.[0];
+					setFile(currentFile);
+					if ((minSize && currentFile && currentFile.size < minSize) || (maxSize && currentFile && currentFile.size > maxSize)) return;
+					onChange?.(currentFile);
+				}}
 				disabled={disabled}
 			/>
 			<div
@@ -48,6 +57,16 @@ export default function FileInput({
 					showFileName &&
 					<div>{file?.name}</div>
 				}
+				{
+					file &&
+					<DangerButton
+						shape="square"
+						variant="icon"
+						onClick={(e) => { e.preventDefault(); setFile(undefined); onChange?.(undefined); }}
+					>
+						<MdClose size={22} className="fill-danger"/>
+					</DangerButton>
+				}
 				{
 					!children && !showFileName &&
 					<>&nbsp;</>
@@ -56,12 +75,13 @@ export default function FileInput({
 					showSize &&
 					<div
 						className={clsx(
+							"ml-4",
 							{
-								"text-red-600": minSize && file?.size && file?.size < minSize,
-								"text-red-600 ": maxSize && file?.size && file?.size > maxSize,
-								"text-green-600": minSize && !maxSize && file?.size && file?.size > minSize,
-								"text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize,
-								" text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
+								"text-danger": minSize && file?.size && file?.size < minSize,
+								"text-danger ": maxSize && file?.size && file?.size > maxSize,
+								"text-success": minSize && !maxSize && file?.size && file?.size > minSize,
+								"text-success ": !minSize && maxSize && file?.size && file?.size < maxSize,
+								" text-success": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
 							}
 						)}
 					>
@@ -75,10 +95,13 @@ export default function FileInput({
 				<SecondaryButton
 					className="text-nowrap rounded-r-lg"
 					rounding="none"
+					shape="square"
+					size="lg"
 					onClick={() => { inputRef.current?.click(); }}
 					disabled={disabled}
+					aria-label="Select File"
 				>
-					Click Me
+					<FaRegFolderOpen />
 				</SecondaryButton>
 			</div>
 		</div>

lib/component/input/index.ts

@@ -0,0 +1,53 @@
+//? Checkboxes
+export { default as DangerCheckbox } from "./checkbox/DangerCheckbox";
+export { default as DarkCheckbox } from "./checkbox/DarkCheckbox";
+export { default as InfoCheckbox } from "./checkbox/InfoCheckbox";
+export { default as LightCheckbox } from "./checkbox/LightCheckbox";
+export { default as MattrixwvCheckbox } from "./checkbox/MattrixwvCheckbox";
+export { default as MoltenCheckbox } from "./checkbox/MoltenCheckbox";
+export { default as PrimaryCheckbox } from "./checkbox/PrimaryCheckbox";
+export { default as SecondaryCheckbox } from "./checkbox/SecondaryCheckbox";
+export { default as SuccessCheckbox } from "./checkbox/SuccessCheckbox";
+export { default as TertiaryCheckbox } from "./checkbox/TertiaryCheckbox";
+export { default as WarningCheckbox } from "./checkbox/WarningCheckbox";
+
+//? Radio Buttons
+export { default as DangerRadioButton } from "./radio/DangerRadioButton";
+export { default as DarkRadioButton } from "./radio/DarkRadioButton";
+export { default as InfoRadioButton } from "./radio/InfoRadioButton";
+export { default as LightRadioButton } from "./radio/LightRadioButton";
+export { default as MoltenRadioButton } from "./radio/MoltenRadioButton";
+export { default as PrimaryRadioButton } from "./radio/PrimaryRadioButton";
+export { default as RadioButton } from "./radio/RadioButton";
+export { default as RadioList } from "./radio/RadioList";
+export { default as SecondaryRadioButton } from "./radio/SecondaryRadioButton";
+export { default as SuccessRadioButton } from "./radio/SuccessRadioButton";
+export { default as TertiaryRadioButton } from "./radio/TertiaryRadioButton";
+export { default as WarningRadioButton } from "./radio/WarningRadioButton";
+
+//? Switches
+export { default as ButtonSwitch } from "./switch/ButtonSwitch";
+export { default as DangerSwitch } from "./switch/DangerSwitch";
+export { default as DarkSwitch } from "./switch/DarkSwitch";
+export { default as LightSwitch } from "./switch/LightSwitch";
+export { default as MattrixwvSwitch } from "./switch/MattrixwvSwitch";
+export { default as PrimarySwitch } from "./switch/PrimarySwitch";
+export { default as SecondarySwitch } from "./switch/SecondarySwitch";
+export { default as SuccessDangerSwitch } from "./switch/SuccessDangerSwitch";
+export { default as SuccessSwitch } from "./switch/SuccessSwitch";
+export { default as TertiarySwitch } from "./switch/TertiarySwitch";
+export { default as WarningSwitch } from "./switch/WarningSwitch";
+
+
+//? Other imports
+export { default as DateInput } from "./date/DateInput";
+export { default as DateTimeInput } from "./date/DateTimeInput";
+export { default as TimeInput } from "./date/TimeInput";
+export { default as DragAndDropFileInput } from "./file/DragAndDropFileInput";
+export { default as FileInput } from "./file/FileInput";
+export { default as NumberInput } from "./number/NumberInput";
+export { default as OptionInput } from "./text/OptionInput";
+export { default as SelectInput } from "./text/SelectInput";
+export { default as TextArea } from "./text/TextArea";
+export { default as TextInput } from "./text/TextInput";
+

lib/component/input/number/NumberInput.tsx

@@ -10,38 +10,42 @@ export default function NumberInput({
 	name,
 	min,
 	max,
-	defaultValue,
+	step,
+	prefix,
+	suffix,
 	value,
 	onChange,
 	disabled,
 	children
-}: NumberInputProps){
+}: Readonly<NumberInputProps>){
 	return (
 		<div
 			className={clsx(
-				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
+				"flex flex-row items-center justify-center rounded-lg border-2",
 				className
 			)}
 		>
-			<div
-				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
-			>
-				<input
-					type="number"
-					id={id}
-					className={clsx(
-						"peer bg-transparent outline-none placeholder-transparent w-full",
-						"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-						inputClassName
-					)}
-					name={name}
-					min={min}
-					max={max}
-					defaultValue={defaultValue}
-					value={value}
-					onChange={(e) => onChange?.(e.target.valueAsNumber)}
-					disabled={disabled}
-				/>
+			<div className="relative flex flex-row items-center justify-center px-2 py-1 w-full">
+				<div className="flex flex-row items-center justify-start">
+					{ prefix && <span>{prefix}</span> }
+					<input
+						type="number"
+						id={id}
+						className={clsx(
+							"peer bg-transparent outline-none placeholder-transparent w-full",
+							"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+							inputClassName
+						)}
+						name={name}
+						min={min}
+						max={max}
+						step={step}
+						value={value}
+						onChange={(e) => onChange(e.target.valueAsNumber || 0)}
+						disabled={disabled}
+					/>
+					{ suffix && <span>{suffix}</span> }
+				</div>
 				<label
 					className={clsx(
 						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",

lib/component/input/number/NumberSlider.tsx

@@ -9,28 +9,31 @@ export default function NumberSlider({
 	min,
 	max,
 	step,
-	defaultValue,
 	value,
 	onChange,
-	disabled
-}: NumberSliderProps){
+	disabled,
+	ariaLabel
+}: Readonly<NumberSliderProps>){
 	return (
 		<input
 			type="range"
 			id={id}
 			className={clsx(
-				"w-full appearance-none [-moz-range-thumb:background:#04AA6D]",
-				"h-6 bg-blue-300 accent-blue-600",
+				"appearance-none [-moz-range-thumb:background:#04AA6D]",
+				"h-5 px-0.5 rounded-full bg-primary",
 				className
 			)}
 			name={name}
 			min={min}
 			max={max}
 			step={step}
-			defaultValue={defaultValue}
 			value={value}
-			onChange={(e) => onChange?.(e.target.valueAsNumber)}
+			onChange={(e) => onChange(e.target.valueAsNumber || 0)}
 			disabled={disabled}
+			aria-label={ariaLabel}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={value}
 		/>
 	);
 }

lib/component/input/radio/DangerRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const DangerRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function DangerRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-danger",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-DangerRadioButton.displayName = "DangerRadioButton";
-
-export default DangerRadioButton;
+}

lib/component/input/radio/DarkRadioButton.tsx

@@ -1,13 +1,12 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const DarkRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function DarkRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
@@ -15,11 +14,6 @@ const DarkRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 				className
 			)}
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-DarkRadioButton.displayName = "DarkRadioButton";
-
-export default DarkRadioButton;
+}

lib/component/input/radio/InfoRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const InfoRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function InfoRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-cyan-500",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-InfoRadioButton.displayName = "InfoRadioButton";
-
-export default InfoRadioButton;
+}

lib/component/input/radio/LightRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const LightRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function LightRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-light",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-LightRadioButton.displayName = "LightRadioButton";
-
-export default LightRadioButton;
+}

lib/component/input/radio/MoltenRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const MoltenRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function MoltenRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-molten",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-MoltenRadioButton.displayName = "MoltenRadioButton";
-
-export default MoltenRadioButton;
+}

lib/component/input/radio/PrimaryRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const PrimaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function PrimaryRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-primary",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-PrimaryRadioButton.displayName = "PrimaryRadioButton";
-
-export default PrimaryRadioButton;
+}

lib/component/input/radio/RadioButton.tsx

@@ -1,23 +1,32 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import { Radio } from "@headlessui/react";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
-const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
-	id,
+export default function RadioButton({
+	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
 	size = "sm",
 	value,
+	disabled,
 	children
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<Radio
 			id={id}
 			value={value}
-			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
-			ref={ref}
+			className={clsx(
+				"group",
+				"flex flex-row items-center justify-center gap-x-2",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+				{
+					"cursor-pointer": !disabled,
+					"cursor-not-allowed": disabled
+				}
+			)}
+			disabled={disabled}
+			aria-labelledby={`${id}Label`}
 		>
 			<div
 				className={clsx(
@@ -35,16 +44,13 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 			/>
 			{
 				children &&
-				<div
+				<span
+					id={`${id}Label`}
 					className={labelClassName}
 				>
 					{children}
-				</div>
+				</span>
 			}
 		</Radio>
 	);
-});
-
-RadioButton.displayName = "RadioButton";
-
-export default RadioButton;
+}

lib/component/input/radio/RadioList.tsx

@@ -17,11 +17,11 @@ export default function RadioList({
 		<RadioGroup
 			id={id}
 			className={clsx(
-				"flex items-center justify-center",
+				"flex",
 				className,
 				{
-					"flex-row gap-x-8": direction === "horizontal",
-					"flex-col gap-y-2": direction === "vertical"
+					"flex-row items-center justify-center gap-x-8": direction === "horizontal",
+					"flex-col items-start justify-center gap-y-2": direction === "vertical"
 				}
 			)}
 			name={name}

lib/component/input/radio/SecondaryRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const SecondaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function SecondaryRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-secondary",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SecondaryRadioButton.displayName = "SecondaryRadioButton";
-
-export default SecondaryRadioButton;
+}

lib/component/input/radio/SuccessRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const SuccessRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function SuccessRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-green-600",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SuccessRadioButton.displayName = "SuccessRadioButton";
-
-export default SuccessRadioButton;
+}

lib/component/input/radio/TertiaryRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const TertiaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function TertiaryRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-tertiary",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-TertiaryRadioButton.displayName = "TertiaryRadioButton";
-
-export default TertiaryRadioButton;
+}

lib/component/input/radio/WarningRadioButton.tsx

@@ -1,25 +1,19 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-const WarningRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function WarningRadioButton({
 	className,
 	...props
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-warning",
 				className
 			)}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-WarningRadioButton.displayName = "WarningRadioButton";
-
-export default WarningRadioButton;
+}

lib/component/input/switch/ButtonSwitch.tsx

@@ -1,9 +1,8 @@
 import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
 import { Switch } from "@headlessui/react";
-import { forwardRef } from "react";
 
 
-const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>(({
+export default function ButtonSwitch({
 	id,
 	className,
 	name,
@@ -14,7 +13,7 @@ const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>((
 	disabled,
 	onNode,
 	offNode
-}, ref ) => {
+}: Readonly<MattrixwvButtonSwitchProps>){
 	return (
 		<Switch
 			id={id}
@@ -25,7 +24,6 @@ const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>((
 			checked={checked}
 			onChange={onChange}
 			disabled={disabled}
-			ref={ref}
 		>
 			{({ checked }) => (
 				<>
@@ -34,8 +32,4 @@ const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>((
 			)}
 		</Switch>
 	);
-});
-
-ButtonSwitch.displayName = "ButtonSwitch";
-
-export default ButtonSwitch;
+}

lib/component/input/switch/DangerSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function DangerSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-DangerSwitch.displayName = "DangerSwitch";
-
-export default DangerSwitch;
+}

lib/component/input/switch/DarkSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function DarkSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-DarkSwitch.displayName = "DarkSwitch";
-
-export default DarkSwitch;
+}

lib/component/input/switch/InfoSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function InfoSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-gray-400",
 				className,
@@ -29,11 +27,7 @@ const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-InfoSwitch.displayName = "InfoSwitch";
-
-export default InfoSwitch;
+}

lib/component/input/switch/LightSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function LightSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-LightSwitch.displayName = "LightSwitch";
-
-export default LightSwitch;
+}

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -1,11 +1,10 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import { Field, Label, Switch } from "@headlessui/react";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 
-const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function MattrixwvSwitch({
 	id,
 	className,
 	knobClassName,
@@ -20,7 +19,7 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	children,
 	offText,
 	onText
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<Field as={Fragment}>
 			<Switch
@@ -30,7 +29,7 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 					className,
 					{
 						"cursor-pointer": !disabled,
-						"cursor-default": disabled
+						"cursor-not-allowed": disabled
 					},
 					{
 						//Normal
@@ -54,7 +53,6 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
-				ref={ref}
 			>
 				{
 					offText &&
@@ -99,7 +97,7 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				className={clsx(
 					{
 						"cursor-pointer": !disabled,
-						"cursor-default": disabled
+						"cursor-not-allowed": disabled
 					}
 				)}
 			>
@@ -107,8 +105,4 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 			</Label>
 		</Field>
 	);
-});
-
-MattrixwvSwitch.displayName = "MattrixwvSwitch";
-
-export default MattrixwvSwitch;
+}

lib/component/input/switch/MoltenSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function MoltenSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-MoltenSwitch.displayName = "MoltenSwitch";
-
-export default MoltenSwitch;
+}

lib/component/input/switch/PrimarySwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function PrimarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-PrimarySwitch.displayName = "PrimarySwitch";
-
-export default PrimarySwitch;
+}

lib/component/input/switch/SecondarySwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SecondarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-SecondarySwitch.displayName = "SecondarySwitch";
-
-export default SecondarySwitch;
+}

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SuccessDangerSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				className,
 				{
@@ -28,11 +26,7 @@ const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
-
-export default SuccessDangerSwitch;
+}

lib/component/input/switch/SuccessSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SuccessSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-SuccessSwitch.displayName = "SuccessSwitch";
-
-export default SuccessSwitch;
+}

lib/component/input/switch/TertiarySwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function TertiarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-gray-400",
 				className,
@@ -29,11 +27,7 @@ const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-TertiarySwitch.displayName = "TertiarySwitch";
-
-export default TertiarySwitch;
+}

lib/component/input/switch/WarningSwitch.tsx

@@ -1,18 +1,16 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function WarningSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
-			{...props}
 			className={clsx(
 				"bg-neutral-mid",
 				className,
@@ -29,11 +27,7 @@ const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
+			{...props}
 		/>
 	);
-});
-
-WarningSwitch.displayName = "WarningSwitch";
-
-export default WarningSwitch;
+}

lib/component/input/text/OptionInput.tsx

@@ -3,15 +3,13 @@ import { ListboxOption } from "@headlessui/react";
 import clsx from "clsx";
 
 
-export default function OptionInput(props: OptionInputProps){
-	const {
-		id,
-		className,
-		value,
-		children
-	} = props;
-
-
+export default function OptionInput({
+	id,
+	className,
+	value,
+	disabled,
+	children
+}: Readonly<OptionInputProps>){
 	return (
 		<ListboxOption
 			id={id}
@@ -20,6 +18,7 @@ export default function OptionInput(props: OptionInputProps){
 				className
 			)}
 			value={value}
+			disabled={disabled}
 		>
 			{children}
 		</ListboxOption>

lib/component/input/text/SelectInput.tsx

@@ -4,28 +4,28 @@ import clsx from "clsx";
 import { BsChevronDown } from "react-icons/bs";
 
 
-export default function SelectInput(props: SelectInputProps){
-	const {
-		label,
-		value,
-		onChange,
-		children
-	} = props;
-
-
+export default function SelectInput({
+	placeholder,
+	value,
+	onChange,
+	disabled,
+	children
+}: Readonly<SelectInputProps>){
 	return (
 		<Listbox
 			value={value}
 			onChange={onChange}
+			disabled={disabled}
 		>
 			<ListboxButton
 				className={clsx(
 					"group relative flex flex-row items-center justify-between w-full",
-					"border-2 px-2 py-1 rounded-lg"
+					"border-2 px-2 py-1 rounded-lg",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
 					//"not-data-open:rounded-lg data-open:rounded-t-lg"
 				)}
 			>
-				<span>{label}</span>
+				<span>{placeholder}</span>
 				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
 			</ListboxButton>
 			<ListboxOptions

lib/component/input/text/TextArea.tsx

@@ -1,23 +1,27 @@
 import type { TextAreaProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextArea({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
 	name,
 	maxLength,
-	rows,
+	rows = 3,
 	cols,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextAreaProps){
+}: Readonly<TextAreaProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -29,7 +33,7 @@ export default function TextArea({
 				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
 			>
 				<textarea
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -39,7 +43,6 @@ export default function TextArea({
 					maxLength={maxLength}
 					rows={rows}
 					cols={cols}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -54,7 +57,7 @@ export default function TextArea({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>

lib/component/input/text/TextInput.tsx

@@ -1,9 +1,10 @@
 import type { TextInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextInput({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
@@ -11,11 +12,14 @@ export default function TextInput({
 	maxLength,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextInputProps){
+}: Readonly<TextInputProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -28,7 +32,7 @@ export default function TextInput({
 			>
 				<input
 					type="text"
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -36,7 +40,6 @@ export default function TextInput({
 					name={name}
 					placeholder={placeholder}
 					maxLength={maxLength}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -51,7 +54,7 @@ export default function TextInput({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>

lib/component/loading.ts

@@ -1,90 +0,0 @@
-
-import CenterGrowingBars from "./loading/bar/CenterGrowingBars";
-import CircleBars from "./loading/bar/CircleBars";
-import FadingBars from "./loading/bar/FadingBars";
-import FadingGrowingBars from "./loading/bar/FadingGrowingBars";
-import GrowingBars from "./loading/bar/GrowingBars";
-import PulsingBlocks from "./loading/block/PulsingBlocks";
-import SlidingBlocks2 from "./loading/block/SlidingBlocks2";
-import SlidingBlocks3 from "./loading/block/SlidingBlocks3";
-import WaveBlocks from "./loading/block/WaveBlocks";
-import BouncingDots from "./loading/dot/BouncingDots";
-import CircleCenterDots from "./loading/dot/CircleCenterDots";
-import CircleFadingDots from "./loading/dot/CircleFadingDots";
-import CirclePulsingDots from "./loading/dot/CirclePulsingDots";
-import CircleRotatingDots from "./loading/dot/CircleRotatingDots";
-import CircleShrinkingDots from "./loading/dot/CircleShrinkingDots";
-import CircleSpinningDot from "./loading/dot/CircleSpinningDot";
-import CyclingDots from "./loading/dot/CyclingDots";
-import FadingDots from "./loading/dot/FadingDots";
-import PulsingDots from "./loading/dot/PulsingDots";
-import RotatingDots from "./loading/dot/RotatingDots";
-import SwellingDots from "./loading/dot/SwellingDots";
-import DoubleDrop from "./loading/drop/DoubleDrop";
-import DoubleWaveDrop from "./loading/drop/DoubleWaveDrop";
-import Drop from "./loading/drop/Drop";
-import QuickDrop from "./loading/drop/QuickDrop";
-import QuickWaveDrop from "./loading/drop/QuickWaveDrop";
-import TripleDrop from "./loading/drop/TripleDrop";
-import TripleWaveDrop from "./loading/drop/TripleWaveDrop";
-import WaveDrop from "./loading/drop/WaveDrop";
-import HalfSpinner from "./loading/spinner/HalfSpinner";
-import QuarterSpinner from "./loading/spinner/QuarterSpinner";
-import RubberSpinner from "./loading/spinner/RubberSpinner";
-import ThreeQuarterSpinner from "./loading/spinner/ThreeQuarterSpinner";
-import BouncingDot from "./loading/various/BouncingDot";
-import PulsingLine from "./loading/various/PulsingLine";
-import SpinningBinary from "./loading/various/SpinningBinary";
-import SpinningClock from "./loading/various/SpinningClock";
-import SpinningEclipse from "./loading/various/SpinningEclipse";
-import SpinningEclipseHalf from "./loading/various/SpinningEclipseHalf";
-import SpinningGalaxy from "./loading/various/SpinningGalaxy";
-import SpinningTadpole from "./loading/various/SpinningTadpole";
-import Wifi from "./loading/various/Wifi";
-
-
-export {
-	BouncingDot,
-	BouncingDots,
-	CenterGrowingBars,
-	CircleBars,
-	CircleCenterDots,
-	CircleFadingDots,
-	CirclePulsingDots,
-	CircleRotatingDots,
-	CircleShrinkingDots,
-	CircleSpinningDot,
-	CyclingDots,
-	DoubleDrop,
-	DoubleWaveDrop,
-	Drop,
-	FadingBars,
-	FadingDots,
-	FadingGrowingBars,
-	GrowingBars,
-	HalfSpinner,
-	PulsingBlocks,
-	PulsingDots,
-	PulsingLine,
-	QuarterSpinner,
-	QuickDrop,
-	QuickWaveDrop,
-	RotatingDots,
-	RubberSpinner,
-	SlidingBlocks2,
-	SlidingBlocks3,
-	SpinningBinary,
-	SpinningClock,
-	SpinningEclipse,
-	SpinningEclipseHalf,
-	SpinningGalaxy,
-	SpinningTadpole,
-	SwellingDots,
-	ThreeQuarterSpinner,
-	TripleDrop,
-	TripleWaveDrop,
-	WaveBlocks,
-	WaveDrop,
-	Wifi
-};
-

lib/component/loading/bar/CenterGrowingBars.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function CenterGrowingBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale-middle.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -26,22 +36,22 @@ export default function CenterGrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
@@ -52,22 +62,22 @@ export default function CenterGrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
@@ -78,23 +88,23 @@ export default function CenterGrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle3_${id}`}
-					begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
+					begin={`0;rectangle5_${id}.end-${dur / 6}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
 				<animate
-					begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
+					begin={`0;rectangle5_${id}.end-${dur / 6}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
@@ -105,22 +115,22 @@ export default function CenterGrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
@@ -131,23 +141,23 @@ export default function CenterGrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle5_${id}`}
-					begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>
 				<animate
-					begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle3_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".14,.73,.34,1;.65,.26,.82,.45"
 				/>

lib/component/loading/bar/CircleBars.tsx

@@ -1,21 +1,30 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function CircleBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-rotate-fade.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,8 +36,8 @@ export default function CircleBars({
 					height="5"
 					opacity=".14"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -38,8 +47,8 @@ export default function CircleBars({
 					transform="rotate(30 12 12)"
 					opacity=".29"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -49,8 +58,8 @@ export default function CircleBars({
 					transform="rotate(60 12 12)"
 					opacity=".43"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -60,8 +69,8 @@ export default function CircleBars({
 					transform="rotate(90 12 12)"
 					opacity=".57"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -71,8 +80,8 @@ export default function CircleBars({
 					transform="rotate(120 12 12)"
 					opacity=".71"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -82,8 +91,8 @@ export default function CircleBars({
 					transform="rotate(150 12 12)"
 					opacity=".86"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -92,14 +101,14 @@ export default function CircleBars({
 					height="5"
 					transform="rotate(180 12 12)"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
 					calcMode="discrete"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/bar/FadingBars.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function FadingBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-fade.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,14 +37,14 @@ export default function FadingBars({
 				height="14"
 				opacity="1"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_${id}`}
-					begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
+					begin={`0;rectangle3_${id}.end-${dur / 3}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -46,13 +56,13 @@ export default function FadingBars({
 				height="14"
 				opacity=".4"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -64,14 +74,14 @@ export default function FadingBars({
 				height="14"
 				opacity=".3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle3_${id}`}
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>

lib/component/loading/bar/FadingGrowingBars.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function FadingGrowingBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale-fade.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,28 +37,28 @@ export default function FadingGrowingBars({
 				height="14"
 				opacity="1"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_${id}`}
-					begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
+					begin={`0;rectangle3_${id}.end-${dur / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;5"
 					fill="freeze"
 				/>
 				<animate
-					begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
+					begin={`0;rectangle3_${id}.end-${dur / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="22;14"
 					fill="freeze"
 				/>
 				<animate
-					begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
+					begin={`0;rectangle3_${id}.end-${dur / 3}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -60,27 +70,27 @@ export default function FadingGrowingBars({
 				height="14"
 				opacity=".4"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur / 5}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;5"
 					fill="freeze"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur / 5}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="22;14"
 					fill="freeze"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -92,28 +102,28 @@ export default function FadingGrowingBars({
 				height="14"
 				opacity=".3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle3_${id}`}
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 5}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;5"
 					fill="freeze"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 5}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="22;14"
 					fill="freeze"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>

lib/component/loading/bar/GrowingBars.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function GrowingBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -26,23 +36,23 @@ export default function GrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_${id}`}
-					begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
+					begin={`0;rectangle5_${id}.end-${dur / 6}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
 				<animate
-					begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
+					begin={`0;rectangle5_${id}.end-${dur / 6}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
@@ -53,22 +63,22 @@ export default function GrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_${id}.begin+${dur / 6}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_${id}.begin+${dur / 6}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
@@ -79,22 +89,22 @@ export default function GrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_${id}.begin+${dur / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_${id}.begin+${dur / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
@@ -105,22 +115,22 @@ export default function GrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
@@ -131,23 +141,23 @@ export default function GrowingBars({
 				width="2.8"
 				height="12"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle5_${id}`}
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="y"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="6;1;6"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="height"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;22;12"
 					keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
 				/>

lib/component/loading/block/PulsingBlocks.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBlocksProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function PulsingBlocks({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingBlocksProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBlocksProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-scale.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,35 +37,35 @@ export default function PulsingBlocks({
 				width="9"
 				height="9"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_${id}`}
-					begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
+					begin={`0;rectangle4_${id}.end+${dur / 4}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;.5;1.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
+					begin={`0;rectangle4_${id}.end+${dur / 4}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;.5;1.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
+					begin={`0;rectangle4_${id}.end+${dur / 4}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
+					begin={`0;rectangle4_${id}.end+${dur / 4}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
@@ -67,34 +77,34 @@ export default function PulsingBlocks({
 				width="9"
 				height="9"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur / 4}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13.5;12.5;13.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur / 4}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;.5;1.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur / 4}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur / 4}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
@@ -106,34 +116,34 @@ export default function PulsingBlocks({
 				width="9"
 				height="9"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13.5;12.5;13.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13.5;12.5;13.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_${id}.begin+${dur / 2}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
@@ -145,35 +155,35 @@ export default function PulsingBlocks({
 				width="9"
 				height="9"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle4_${id}`}
-					begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur * 3 / 4}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;.5;1.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur * 3 / 4}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13.5;12.5;13.5"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur * 3 / 4}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>
 				<animate
-					begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
+					begin={`rectangle1_${id}.begin+${dur * 3 / 4}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="9;11;9"
 					keyTimes="0;.2;1"
 				/>

lib/component/loading/block/SlidingBlocks2.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBlocksProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function SlidingBlocks2({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.2,
+	animationDuration = 200,
+	color,
 	stroke,
-	fill
-}: LoadingBlocksProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBlocksProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-2.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,14 +37,14 @@ export default function SlidingBlocks2({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_1_${id}`}
 					begin={`0;rectangle2_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -42,7 +52,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_2_${id}`}
 					begin={`rectangle2_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -50,7 +60,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_3_${id}`}
 					begin={`rectangle2_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -58,7 +68,7 @@ export default function SlidingBlocks2({
 					id={`rectangle1_4_${id}`}
 					begin={`rectangle2_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -70,14 +80,14 @@ export default function SlidingBlocks2({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle2_1_${id}`}
 					begin={`rectangle1_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -85,7 +95,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_2_${id}`}
 					begin={`rectangle1_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -93,7 +103,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_3_${id}`}
 					begin={`rectangle1_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -101,7 +111,7 @@ export default function SlidingBlocks2({
 					id={`rectangle2_4_${id}`}
 					begin={`rectangle1_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>

lib/component/loading/block/SlidingBlocks3.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBlocksProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function SlidingBlocks3({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.2,
+	animationDuration = 200,
+	color,
 	stroke,
-	fill
-}: LoadingBlocksProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBlocksProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-3.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,14 +37,14 @@ export default function SlidingBlocks3({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_1_${id}`}
 					begin={`0;rectangle3_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -42,7 +52,7 @@ export default function SlidingBlocks3({
 					id={`rectangle1_2_${id}`}
 					begin={`rectangle3_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -50,7 +60,7 @@ export default function SlidingBlocks3({
 					id={`rectangle1_3_${id}`}
 					begin={`rectangle3_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -58,7 +68,7 @@ export default function SlidingBlocks3({
 					id={`rectangle1_4_${id}`}
 					begin={`rectangle3_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -70,14 +80,14 @@ export default function SlidingBlocks3({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle2_1_${id}`}
 					begin={`rectangle1_1_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -85,7 +95,7 @@ export default function SlidingBlocks3({
 					id={`rectangle2_2_${id}`}
 					begin={`rectangle1_2_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -93,7 +103,7 @@ export default function SlidingBlocks3({
 					id={`rectangle2_3_${id}`}
 					begin={`rectangle1_3_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -101,7 +111,7 @@ export default function SlidingBlocks3({
 					id={`rectangle2_4_${id}`}
 					begin={`rectangle1_4_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -113,14 +123,14 @@ export default function SlidingBlocks3({
 				width="10"
 				height="10"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle3_1_${id}`}
 					begin={`rectangle2_1_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -128,7 +138,7 @@ export default function SlidingBlocks3({
 					id={`rectangle3_2_${id}`}
 					begin={`rectangle2_2_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="13;1"
 					fill="freeze"
 				/>
@@ -136,7 +146,7 @@ export default function SlidingBlocks3({
 					id={`rectangle3_3_${id}`}
 					begin={`rectangle2_3_${id}.end`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>
@@ -144,7 +154,7 @@ export default function SlidingBlocks3({
 					id={`rectangle3_4_${id}`}
 					begin={`rectangle2_4_${id}.end`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;13"
 					fill="freeze"
 				/>

lib/component/loading/block/WaveBlocks.tsx

@@ -1,22 +1,32 @@
 import type { LoadingBlocksProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function WaveBlocks({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingBlocksProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBlocksProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-wave.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -26,32 +36,32 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle1_1_${id}`}
-					begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
+					begin={`0;rectangle9_1_${id}.end+${dur / 3}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
+					begin={`0;rectangle9_1_${id}.end+${dur / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
+					begin={`0;rectangle9_1_${id}.end+${dur / 3}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
+					begin={`0;rectangle9_1_${id}.end+${dur / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -61,31 +71,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -95,31 +105,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 6}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -129,31 +139,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -163,31 +173,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -197,31 +207,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="1;4;1"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -231,31 +241,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -265,31 +275,31 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="8.33;11.33;8.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
+					begin={`rectangle1_1_${id}.begin+${dur / 2}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>
@@ -299,32 +309,32 @@ export default function WaveBlocks({
 				width="7.33"
 				height="7.33"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`rectangle9_1_${id}`}
-					begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="x"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="y"
-					dur={animationDuration}
+					dur={dur}
 					values="15.66;18.66;15.66"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="width"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 				<animate
-					begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`rectangle1_1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="height"
-					dur={animationDuration}
+					dur={dur}
 					values="7.33;1.33;7.33"
 				/>
 			</rect>

lib/component/loading/dot/BouncingDots.tsx

@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function BouncingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-bounce.svg?short_path=50864c0
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,15 +35,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstBouncingDots_${id}`}
-					begin={`0;lastBouncingDots_${id}.end+${animationDuration / 2}s`}
+					begin={`0;lastBouncingDots_${id}.end+${dur / 2}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>
@@ -43,15 +53,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondBouncingDots_${id}`}
-					begin={`firstBouncingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`firstBouncingDots_${id}.begin+${dur / 5}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>
@@ -61,15 +71,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastBouncingDots_${id}`}
-					begin={`secondBouncingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`secondBouncingDots_${id}.begin+${dur / 5}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>

lib/component/loading/dot/CircleCenterDots.tsx

@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function CircleCenterDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale-middle.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,15 +35,15 @@ export default function CircleCenterDots({
 				cy="3"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle1_${id}`}
-					begin={`0;circle3_${id}.end-${animationDuration * 5 / 6}s`}
+					begin={`0;circle3_${id}.end-${dur * 5 / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -43,15 +53,15 @@ export default function CircleCenterDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle2_${id}`}
-					begin={`circle1_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle1_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -61,15 +71,15 @@ export default function CircleCenterDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle3_${id}`}
-					begin={`circle5_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle5_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -79,15 +89,15 @@ export default function CircleCenterDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle4_${id}`}
-					begin={`circle2_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle2_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -97,15 +107,15 @@ export default function CircleCenterDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle5_${id}`}
-					begin={`circle7_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle7_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -115,14 +125,14 @@ export default function CircleCenterDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
+				stroke={color ?? stroke}
 			>
 				<animate
 					id={`circle6_${id}`}
-					begin={`circle4_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle4_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -132,15 +142,15 @@ export default function CircleCenterDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle7_${id}`}
-					begin={`circle9_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle9_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -150,15 +160,15 @@ export default function CircleCenterDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle8_${id}`}
-					begin={`circle6_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle6_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -168,15 +178,15 @@ export default function CircleCenterDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle9_${id}`}
-					begin={`circle11_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle11_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -186,15 +196,15 @@ export default function CircleCenterDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle10_${id}`}
-					begin={`circle8_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle8_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -204,15 +214,15 @@ export default function CircleCenterDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle11_${id}`}
-					begin={`circle12_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle12_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -221,16 +231,16 @@ export default function CircleCenterDots({
 				cx="12"
 				cy="21"
 				r="0"
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 				className={className}
 			>
 				<animate
 					id={`circle12_${id}`}
-					begin={`circle10_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle10_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>

lib/component/loading/dot/CircleFadingDots.tsx

@@ -1,19 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function CircleFadingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-rotate.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,8 +35,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".14"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="16.75"
@@ -33,8 +44,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".29"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20.23"
@@ -42,8 +53,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".43"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="21.50"
@@ -51,8 +62,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".57"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20.23"
@@ -60,8 +71,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".71"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="16.75"
@@ -69,22 +80,22 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".86"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="21.5"
 					r="1.5"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
 					calcMode="discrete"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/dot/CirclePulsingDots.tsx

@@ -1,23 +1,34 @@
 import type { CirclePulsingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function CirclePulsingDots({
+	size,
 	width,
 	height,
 	className,
-	rotationAnimationDuration = 6,
-	growingAnimationDuration = 0.6,
+	rotationAnimationDuration = 6000,
+	growingAnimationDuration = 600,
+	color,
 	stroke,
-	fill
-}: CirclePulsingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<CirclePulsingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/12-dots-scale-rotate.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const rotationAnimationDur = reducedMotion ? rotationAnimationDuration / 100 : rotationAnimationDuration / 1000;
+	const growingAnimationDur = reducedMotion ? growingAnimationDuration / 100 : growingAnimationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -27,15 +38,15 @@ export default function CirclePulsingDots({
 					cy="3"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle1_${id}`}
-						begin={`0;circle3_${id}.end-${growingAnimationDuration * 5 / 6}s`}
+						begin={`0;circle3_${id}.end-${growingAnimationDur * 5 / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -45,15 +56,15 @@ export default function CirclePulsingDots({
 					cy="4.21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle2_${id}`}
-						begin={`circle1_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle1_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -63,15 +74,15 @@ export default function CirclePulsingDots({
 					cy="4.21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle3_${id}`}
-						begin={`circle5_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle5_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -81,15 +92,15 @@ export default function CirclePulsingDots({
 					cy="7.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle4_${id}`}
-						begin={`circle2_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle2_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -99,15 +110,15 @@ export default function CirclePulsingDots({
 					cy="7.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle5_${id}`}
-						begin={`circle7_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle7_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -117,15 +128,15 @@ export default function CirclePulsingDots({
 					cy="12.00"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle6_${id}`}
-						begin={`circle4_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle4_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -135,15 +146,15 @@ export default function CirclePulsingDots({
 					cy="12.00"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle7_${id}`}
-						begin={`circle9_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle9_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -153,15 +164,15 @@ export default function CirclePulsingDots({
 					cy="16.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle8_${id}`}
-						begin={`circle6_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle6_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -171,15 +182,15 @@ export default function CirclePulsingDots({
 					cy="16.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle9_${id}`}
-						begin={`circle11_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle11_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -189,15 +200,15 @@ export default function CirclePulsingDots({
 					cy="19.79"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle10_${id}`}
-						begin={`circle8_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle8_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -207,15 +218,15 @@ export default function CirclePulsingDots({
 					cy="19.79"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle11_${id}`}
-						begin={`circle12_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle12_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -225,15 +236,15 @@ export default function CirclePulsingDots({
 					cy="21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle12_${id}`}
-						begin={`circle10_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle10_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -241,7 +252,7 @@ export default function CirclePulsingDots({
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={rotationAnimationDuration}
+					dur={rotationAnimationDur}
 					values="360 12 12;0 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/dot/CircleRotatingDots.tsx

@@ -1,21 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function CircleRotatingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.5,
+	animationDuration = 1500,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/8-dots-rotate.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,69 +34,69 @@ export default function CircleRotatingDots({
 					cy="12"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="21"
 					cy="12"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="21"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="3"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="5.64"
 					cy="5.64"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="18.36"
 					cy="18.36"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="5.64"
 					cy="18.36"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="18.36"
 					cy="5.64"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/dot/CircleShrinkingDots.tsx

@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function CircleShrinkingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale.svg?short_path=17d1946
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,15 +35,15 @@ export default function CircleShrinkingDots({
 				cy="3"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstShrinkingDot_${id}`}
-					begin={`0;thirdShrinkingDot_${id}.end-${animationDuration * 4 / 5}s`}
+					begin={`0;thirdShrinkingDot_${id}.end-${dur * 4 / 5}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -45,15 +55,15 @@ export default function CircleShrinkingDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondShrinkingDot_${id}`}
-					begin={`firstShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`firstShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -65,15 +75,15 @@ export default function CircleShrinkingDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`thirdShrinkingDot_${id}`}
-					begin={`fifthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`fifthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -85,15 +95,15 @@ export default function CircleShrinkingDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fourthShrinkingDot_${id}`}
-					begin={`secondShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`secondShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73" fill="freeze"
@@ -104,15 +114,15 @@ export default function CircleShrinkingDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fifthShrinkingDot_${id}`}
-					begin={`seventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`seventhShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -124,15 +134,15 @@ export default function CircleShrinkingDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`sixthShrinkingDot_${id}`}
-					begin={`fourthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`fourthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -144,15 +154,15 @@ export default function CircleShrinkingDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`seventhShrinkingDot_${id}`}
-					begin={`ninthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`ninthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -164,15 +174,15 @@ export default function CircleShrinkingDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`eighthShrinkingDot_${id}`}
-					begin={`sixthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`sixthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -184,15 +194,15 @@ export default function CircleShrinkingDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`ninthShrinkingDot_${id}`}
-					begin={`eleventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`eleventhShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -204,15 +214,15 @@ export default function CircleShrinkingDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`tenthShrinkingDot_${id}`}
-					begin={`eighthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`eighthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -224,15 +234,15 @@ export default function CircleShrinkingDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`eleventhShrinkingDot_${id}`}
-					begin={`twelfthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`twelfthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -244,15 +254,15 @@ export default function CircleShrinkingDots({
 				cy="21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`twelfthShrinkingDot_${id}`}
-					begin={`tenthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`tenthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"

lib/component/loading/dot/CircleSpinningDot.tsx

@@ -1,21 +1,33 @@
 import type { CircleSpinningDotProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+
 
 export default function CircleSpinningDot({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: CircleSpinningDotProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<CircleSpinningDotProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/dot-revolve.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -30,13 +42,13 @@ export default function CircleSpinningDot({
 				cy="2.5"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/dot/CyclingDots.tsx

@@ -1,21 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function CyclingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.5,
+	animationDuration = 500,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-move.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,14 +35,14 @@ export default function CyclingDots({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -40,7 +51,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -49,7 +60,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -59,7 +70,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -78,14 +89,14 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -94,7 +105,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -104,7 +115,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -121,7 +132,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -132,14 +143,14 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -149,7 +160,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -166,7 +177,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -175,7 +186,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -186,15 +197,15 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fourthDotFirstAnimate_${id}`}
 					begin="0;spinner_z0Or.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -211,7 +222,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -220,7 +231,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -229,7 +240,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"

lib/component/loading/dot/FadingDots.tsx

@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function FadingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-fade.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -26,14 +36,14 @@ export default function FadingDots({
 				r="3"
 				opacity="1"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstFadingDots_${id}`}
-					begin={`0;lastFadingDots_${id}.end-${animationDuration / 3}s`}
+					begin={`0;lastFadingDots_${id}.end-${dur / 3}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -44,14 +54,14 @@ export default function FadingDots({
 				r="3"
 				opacity=".4"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondFadingDots_${id}`}
-					begin={`firstFadingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`firstFadingDots_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -62,14 +72,14 @@ export default function FadingDots({
 				r="3"
 				opacity=".3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastFadingDots_${id}`}
-					begin={`secondFadingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`secondFadingDots_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>

lib/component/loading/dot/PulsingDots.tsx

@@ -1,19 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function PulsingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale-middle.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -22,12 +33,12 @@ export default function PulsingDots({
 				cy="12"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;3;1.5"
 					repeatCount="indefinite"
 				/>
@@ -37,12 +48,12 @@ export default function PulsingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;1.5;3"
 					repeatCount="indefinite"
 				/>
@@ -52,12 +63,12 @@ export default function PulsingDots({
 				cy="12"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;3;1.5"
 					repeatCount="indefinite"
 				/>

lib/component/loading/dot/RotatingDots.tsx

@@ -1,18 +1,29 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 export default function RotatingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-rotate.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -21,8 +32,8 @@ export default function RotatingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			/>
 			<g>
 				<circle
@@ -30,22 +41,22 @@ export default function RotatingDots({
 					cy="12"
 					r="3"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20"
 					cy="12"
 					r="3"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1;.36,.6,.31,1"
 					values="0 12 12;180 12 12;360 12 12"
 					repeatCount="indefinite"

lib/component/loading/dot/SwellingDots.tsx

@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function SwellingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,14 +35,14 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstDot_${id}`}
-					begin={`0;lastDot_${id}.end-${animationDuration / 3}s`}
+					begin={`0;lastDot_${id}.end-${dur / 3}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>
@@ -41,13 +51,13 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`firstDot_${id}.end-${animationDuration * 4 / 5}s`}
+					begin={`firstDot_${id}.end-${dur * 4 / 5}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>
@@ -56,14 +66,14 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastDot_${id}`}
-					begin={`firstDot_${id}.end-${animationDuration * 2 / 3}s`}
+					begin={`firstDot_${id}.end-${dur * 2 / 3}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>

lib/component/loading/drop/DoubleDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function DoubleDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-2.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,24 +35,24 @@ export default function DoubleDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop1_${id}`}
-					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					begin={`0;drop2_${id}.begin+${dur / 2}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					begin={`0;drop2_${id}.begin+${dur / 2}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -53,24 +63,24 @@ export default function DoubleDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					begin={`drop1_${id}.begin+${dur / 2}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					begin={`drop1_${id}.begin+${dur / 2}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"

lib/component/loading/drop/DoubleWaveDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function DoubleWaveDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-2.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,34 +34,34 @@ export default function DoubleWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop1_${id}`}
-					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					begin={`0;drop2_${id}.begin+${dur / 2}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					begin={`0;drop2_${id}.begin+${dur / 2}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					begin={`0;drop2_${id}.begin+${dur / 2}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -60,34 +70,34 @@ export default function DoubleWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					begin={`drop1_${id}.begin+${dur / 2}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					begin={`drop1_${id}.begin+${dur / 2}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					begin={`drop1_${id}.begin+${dur / 2}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>

lib/component/loading/drop/Drop.tsx

@@ -1,21 +1,30 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function Drop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,13 +33,13 @@ export default function Drop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					repeatCount="indefinite"
@@ -38,7 +47,7 @@ export default function Drop({
 				<animate
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					repeatCount="indefinite"

lib/component/loading/drop/QuickDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function QuickDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-multiple.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,15 +35,15 @@ export default function QuickDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop1_${id}`}
 					begin={`0;drop3_${id}.end`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -42,7 +52,7 @@ export default function QuickDrop({
 					begin={`0;drop3_${id}.end`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -53,24 +63,24 @@ export default function QuickDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 6}`}
+					begin={`drop1_${id}.begin+${dur / 6}`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 6}`}
+					begin={`drop1_${id}.begin+${dur / 6}`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -81,24 +91,24 @@ export default function QuickDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop3_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 3}`}
+					begin={`drop1_${id}.begin+${dur / 3}`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 3}`}
+					begin={`drop1_${id}.begin+${dur / 3}`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"

lib/component/loading/drop/QuickWaveDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function QuickWaveDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-multiple.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,8 +34,8 @@ export default function QuickWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop1_${id}`}
@@ -33,7 +43,7 @@ export default function QuickWaveDrop({
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -43,7 +53,7 @@ export default function QuickWaveDrop({
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -51,7 +61,7 @@ export default function QuickWaveDrop({
 					begin={`0;drop3_${id}.end`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -60,34 +70,34 @@ export default function QuickWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 6}s`}
+					begin={`drop1_${id}.begin+${dur / 6}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`drop1_${id}.begin+${animationDuration / 6}s`}
+					begin={`drop1_${id}.begin+${dur / 6}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 6}s`}
+					begin={`drop1_${id}.begin+${dur / 6}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -96,34 +106,34 @@ export default function QuickWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop3_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>

lib/component/loading/drop/TripleDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function TripleDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-3.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -25,24 +35,24 @@ export default function TripleDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop1_${id}`}
-					begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
+					begin={`0;drop3_${id}.begin+${dur / 3}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
+					begin={`0;drop3_${id}.begin+${dur / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -53,24 +63,24 @@ export default function TripleDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
@@ -81,24 +91,24 @@ export default function TripleDrop({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`drop3_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`drop1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;11"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`drop1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					fill="freeze"

lib/component/loading/drop/TripleWaveDrop.tsx

@@ -1,22 +1,32 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";
 
 
 export default function TripleWaveDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-3.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -24,34 +34,34 @@ export default function TripleWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop1_${id}`}
-					begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
+					begin={`0;drop3_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
+					begin={`0;drop3_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
+					begin={`0;drop3_${id}.begin+${dur / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -60,34 +70,34 @@ export default function TripleWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop2_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration / 3}s`}
+					begin={`drop1_${id}.begin+${dur / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>
@@ -96,34 +106,34 @@ export default function TripleWaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					id={`drop3_${id}`}
-					begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`drop1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animateTransform
-					begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`drop1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="transform"
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 				/>
 				<animate
-					begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
+					begin={`drop1_${id}.begin+${dur * 2 / 3}s`}
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 				/>

lib/component/loading/drop/WaveDrop.tsx

@@ -1,21 +1,30 @@
 import type { LoadingPulseProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function WaveDrop({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.2,
+	animationDuration = 1200,
+	color,
 	stroke,
-	fill
-}: LoadingPulseProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingPulseProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-ring.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -23,14 +32,14 @@ export default function WaveDrop({
 				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
 				transform="translate(12, 12) scale(0)"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					calcMode="spline"
 					type="translate"
-					dur={animationDuration}
+					dur={dur}
 					values="12 12;0 0"
 					keySplines=".52,.6,.25,.99"
 					repeatCount="indefinite"
@@ -40,7 +49,7 @@ export default function WaveDrop({
 					calcMode="spline"
 					additive="sum"
 					type="scale"
-					dur={animationDuration}
+					dur={dur}
 					values="0;1"
 					keySplines=".52,.6,.25,.99"
 					repeatCount="indefinite"
@@ -48,7 +57,7 @@ export default function WaveDrop({
 				<animate
 					attributeName="opacity"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="1;0"
 					keySplines=".52,.6,.25,.99"
 					repeatCount="indefinite"

lib/component/loading/index.ts

@@ -0,0 +1,44 @@
+
+export { default as CenterGrowingBars } from "./bar/CenterGrowingBars";
+export { default as CircleBars } from "./bar/CircleBars";
+export { default as FadingBars } from "./bar/FadingBars";
+export { default as FadingGrowingBars } from "./bar/FadingGrowingBars";
+export { default as GrowingBars } from "./bar/GrowingBars";
+export { default as PulsingBlocks } from "./block/PulsingBlocks";
+export { default as SlidingBlocks2 } from "./block/SlidingBlocks2";
+export { default as SlidingBlocks3 } from "./block/SlidingBlocks3";
+export { default as WaveBlocks } from "./block/WaveBlocks";
+export { default as BouncingDots } from "./dot/BouncingDots";
+export { default as CircleCenterDots } from "./dot/CircleCenterDots";
+export { default as CircleFadingDots } from "./dot/CircleFadingDots";
+export { default as CirclePulsingDots } from "./dot/CirclePulsingDots";
+export { default as CircleRotatingDots } from "./dot/CircleRotatingDots";
+export { default as CircleShrinkingDots } from "./dot/CircleShrinkingDots";
+export { default as CircleSpinningDot } from "./dot/CircleSpinningDot";
+export { default as CyclingDots } from "./dot/CyclingDots";
+export { default as FadingDots } from "./dot/FadingDots";
+export { default as PulsingDots } from "./dot/PulsingDots";
+export { default as RotatingDots } from "./dot/RotatingDots";
+export { default as SwellingDots } from "./dot/SwellingDots";
+export { default as DoubleDrop } from "./drop/DoubleDrop";
+export { default as DoubleWaveDrop } from "./drop/DoubleWaveDrop";
+export { default as Drop } from "./drop/Drop";
+export { default as QuickDrop } from "./drop/QuickDrop";
+export { default as QuickWaveDrop } from "./drop/QuickWaveDrop";
+export { default as TripleDrop } from "./drop/TripleDrop";
+export { default as TripleWaveDrop } from "./drop/TripleWaveDrop";
+export { default as WaveDrop } from "./drop/WaveDrop";
+export { default as HalfSpinner } from "./spinner/HalfSpinner";
+export { default as QuarterSpinner } from "./spinner/QuarterSpinner";
+export { default as RubberSpinner } from "./spinner/RubberSpinner";
+export { default as ThreeQuarterSpinner } from "./spinner/ThreeQuarterSpinner";
+export { default as BouncingDot } from "./various/BouncingDot";
+export { default as PulsingLine } from "./various/PulsingLine";
+export { default as SpinningBinary } from "./various/SpinningBinary";
+export { default as SpinningClock } from "./various/SpinningClock";
+export { default as SpinningEclipse } from "./various/SpinningEclipse";
+export { default as SpinningEclipseHalf } from "./various/SpinningEclipseHalf";
+export { default as SpinningGalaxy } from "./various/SpinningGalaxy";
+export { default as SpinningTadpole } from "./various/SpinningTadpole";
+export { default as Wifi } from "./various/Wifi";
+

lib/component/loading/spinner/HalfSpinner.tsx

@@ -1,22 +1,33 @@
 import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function HalfSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	className,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: LoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/180-ring-with-bg.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -29,13 +40,13 @@ export default function HalfSpinner({
 			<path
 				d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/spinner/QuarterSpinner.tsx

@@ -1,22 +1,33 @@
 import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function QuarterSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	className,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: LoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/90-ring-with-bg.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -29,13 +40,13 @@ export default function QuarterSpinner({
 			<path
 				d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>

lib/component/loading/spinner/RubberSpinner.tsx

@@ -1,23 +1,35 @@
 import type { RubberLoadingSpinnerProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function RubberSpinner({
+	size,
 	width,
 	height,
-	animationDuration = 2,
-	stretchDuration = 1.5,
+	animationDuration = 2000,
+	stretchDuration = 1500,
+	color,
 	className,
 	stroke,
 	fill = "none",
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: RubberLoadingSpinnerProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<RubberLoadingSpinnerProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/ring-resize.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const animationDur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
+	const stretchDur = reducedMotion ? stretchDuration / 100 : stretchDuration / 1000;
+
+
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -33,14 +45,14 @@ export default function RubberSpinner({
 					cy="12"
 					r="9.5"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 					strokeWidth="3"
 					strokeLinecap="round"
 				>
 					<animate
 						attributeName="stroke-dasharray"
-						dur={stretchDuration}
+						dur={stretchDur}
 						calcMode="spline"
 						values="0 150;42 150;42 150;42 150"
 						keyTimes="0;0.475;0.95;1"
@@ -49,7 +61,7 @@ export default function RubberSpinner({
 					/>
 					<animate
 						attributeName="stroke-dashoffset"
-						dur={stretchDuration}
+						dur={stretchDur}
 						calcMode="spline"
 						values="0;-16;-59;-59"
 						keyTimes="0;0.475;0.95;1"
@@ -60,7 +72,7 @@ export default function RubberSpinner({
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={animationDur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>