@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/form/checkbox/checkbox.d.mts

@@ -1,9 +1,11 @@
 import { ChangeEvent, FC, InputHTMLAttributes, Ref } from "react";
 //#region src/components/form/checkbox/checkbox.d.ts
 type BaseProps = {
+  indeterminate?: boolean;
   invalid?: boolean;
   itemValue?: string;
   label: string;
+  labelHidden?: boolean;
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
 type ControlledProps = {
@@ -17,6 +19,5 @@ type UncontrolledProps = {
   onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const Checkbox: FC<Props>;
-//#endregion
-export { Checkbox };
+export declare const Checkbox: FC<Props>;
+//#endregion

package/dist/components/form/checkbox/checkbox.mjs

@@ -1,56 +1,58 @@
 "use client";
-import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { CheckIcon } from "../../icons/lucide.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { CheckIcon, MinusIcon } from "../../icons/lucide.mjs";
+import { ignoreClick } from "../../_internal/ignore-changes.mjs";
 import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
+import checkbox_module_default from "./checkbox.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useMemo } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox/checkbox.tsx
-const Checkbox = ({ name, itemValue, disabled = false, invalid = false, label, checked, defaultChecked, onChange, ref, ...rest }) => {
+const Checkbox = ({ name, itemValue, disabled = false, indeterminate = false, invalid = false, label, labelHidden = false, checked, defaultChecked, onChange, ref, ...rest }) => {
 	const groupContext = useCheckboxGroupContext();
 	const { pending } = useFormStatus();
-	const [internalChecked, setInternalChecked] = useControllableState({
-		value: checked,
-		defaultValue: defaultChecked ?? false
-	});
 	const groupItemValue = itemValue ?? "";
 	if (groupContext && (itemValue === void 0 || itemValue === "")) throw new Error("Checkbox inside CheckboxGroup requires itemValue");
-	const isControlled = checked !== void 0;
-	const disabledResolved = disabled || groupContext?.disabled === true || pending;
-	const isChecked = groupContext ? groupContext.currentValue.includes(groupItemValue) : internalChecked;
-	const setChecked = (nextChecked, event) => {
-		setInternalChecked(nextChecked);
-		onChange?.(nextChecked, event);
-	};
+	const indeterminateRef = useCallback((input) => {
+		if (input !== null) input.indeterminate = indeterminate;
+	}, [indeterminate]);
+	const mergedRef = useMemo(() => mergeRefs(ref, indeterminateRef), [ref, indeterminateRef]);
+	const disabledNative = disabled || groupContext?.disabled === true;
+	const disabledResolved = disabledNative || pending;
+	const isChecked = groupContext ? groupContext.value?.includes(groupItemValue) : checked;
+	const isDefaultChecked = groupContext ? groupContext.defaultValue.includes(groupItemValue) : defaultChecked;
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("inline-flex items-center gap-2 text-left", disabledResolved ? "cursor-not-allowed text-fg-mute" : "cursor-pointer"),
+		className: clsx(checkbox_module_default.root, !labelHidden && checkbox_module_default.withLabel, disabledResolved && checkbox_module_default.disabled),
+		onClickCapture: pending ? ignoreClick : void 0,
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				...rest,
-				...groupContext || isControlled ? { checked: isChecked } : { defaultChecked },
+				...isChecked === void 0 ? { defaultChecked: isDefaultChecked } : { checked: isChecked },
+				"aria-disabled": pending || void 0,
 				"aria-invalid": invalid,
-				className: "peer sr-only",
-				disabled: disabledResolved,
+				className: clsx(sr_only_module_default.srOnly, checkbox_module_default.input),
+				disabled: disabledNative,
 				name: groupContext?.name ?? name,
 				onChange: (event) => {
 					if (groupContext) {
-						groupContext.toggleValue(groupItemValue);
+						groupContext.notifyChange(event);
 						return;
 					}
-					setChecked(event.target.checked, event);
+					onChange?.(event.target.checked, event);
 				},
-				ref,
+				ref: mergedRef,
 				type: "checkbox",
-				value: groupContext ? groupItemValue : void 0
+				value: itemValue
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", FOCUS_RING_PEER, disabledResolved && "border-border-mute bg-bg-mute", isChecked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base", invalid && "border-border-error"),
-				children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
+				className: clsx(checkbox_module_default.box, invalid && checkbox_module_default.invalid),
+				children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon, { size: "sm" }) : /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "text-lg",
+				className: labelHidden ? sr_only_module_default.srOnly : checkbox_module_default.label,
 				children: label
 			})
 		]

package/dist/components/form/checkbox/checkbox.module.mjs

@@ -0,0 +1,13 @@
+import './checkbox.css';
+//#region src/components/form/checkbox/checkbox.module.css
+var checkbox_module_default = {
+	"box": "_23lHGa_box",
+	"disabled": "_23lHGa_disabled",
+	"input": "_23lHGa_input",
+	"invalid": "_23lHGa_invalid",
+	"label": "_23lHGa_label",
+	"root": "_23lHGa_root",
+	"withLabel": "_23lHGa_withLabel"
+};
+//#endregion
+export { checkbox_module_default as default };

package/dist/components/form/checkbox-card/checkbox-card.css

@@ -0,0 +1,138 @@
+@layer properties, theme, base;
+
+@layer components {
+  .VWx-oW_root {
+    min-width: 0;
+    gap: calc(var(--spacing) * 3);
+    border-width: 0;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    display: grid;
+  }
+
+  .VWx-oW_rootDisabled {
+    opacity: .7;
+  }
+
+  .VWx-oW_card {
+    min-width: 0;
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-base);
+    inline-size: 100%;
+    padding: calc(var(--spacing) * 4);
+    text-align: left;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    display: flex;
+  }
+
+  .VWx-oW_card:has(input:focus-visible) {
+    box-shadow: var(--shadow-ring-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .VWx-oW_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  .VWx-oW_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-subtle);
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    .VWx-oW_card:where(:not(.VWx-oW_invalid)):hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  .VWx-oW_card:has(:checked) {
+    border-color: var(--color-primary-border);
+    background-color: var(--color-primary-bg-subtle);
+  }
+
+  .VWx-oW_invalid:has(:checked) {
+    border-color: var(--color-border-error);
+  }
+
+  .VWx-oW_disabled:has(:checked) {
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-subtle);
+  }
+
+  @media (hover: hover) {
+    .VWx-oW_card:has(:checked):hover {
+      background-color: var(--color-primary-bg-mute);
+    }
+  }
+
+  .VWx-oW_visual {
+    margin-right: calc(var(--spacing) * 4);
+    flex-shrink: 0;
+  }
+
+  .VWx-oW_text {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .VWx-oW_label {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-base);
+  }
+
+  .VWx-oW_description {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+  }
+
+  .VWx-oW_box {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    margin-top: calc(var(--spacing) * .5);
+    margin-left: calc(var(--spacing) * 4);
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-base);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    @scope (&) {
+      & > * {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .VWx-oW_input:checked ~ .VWx-oW_box {
+    border-color: var(--color-border-base);
+    background-color: var(--color-primary-bg);
+    color: var(--color-fg-base);
+
+    @scope (&) {
+      & > * {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/checkbox-card/checkbox-card.d.mts

@@ -1,6 +1,6 @@
 import { FC, FieldsetHTMLAttributes, ReactNode, Ref } from "react";
 //#region src/components/form/checkbox-card/checkbox-card.d.ts
-type CheckboxCardOption = Readonly<{
+export type CheckboxCardOption = Readonly<{
   value: string;
   label: string;
   description?: string;
@@ -24,6 +24,5 @@ type UncontrolledProps = {
   onChange?: (value: string[]) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const CheckboxCard: FC<Props>;
-//#endregion
-export { CheckboxCard, CheckboxCardOption };
+export declare const CheckboxCard: FC<Props>;
+//#endregion

package/dist/components/form/checkbox-card/checkbox-card.mjs

@@ -1,70 +1,64 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
+import checkbox_card_module_default from "./checkbox-card.module.mjs";
+import { clsx } from "clsx";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox-card/checkbox-card.tsx
 const CheckboxCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, options, value, defaultValue, onChange, ref, ...rest }) => {
 	const groupId = useId();
-	const [selectedValues, setSelectedValues] = useControllableState({
-		value,
-		defaultValue: defaultValue ?? [],
-		onChange
-	});
-	const handleToggle = (nextValue, checked) => {
-		const nextValues = checked ? [...selectedValues, nextValue] : selectedValues.filter((item) => item !== nextValue);
-		setSelectedValues(nextValues);
+	const isControlled = value !== void 0;
+	const handleChange = (event) => {
+		const inputs = event.currentTarget.closest("fieldset")?.querySelectorAll("input[type=\"checkbox\"]") ?? [];
+		onChange?.([...inputs].filter((input) => input.checked).map((input) => input.value));
 	};
 	return /* @__PURE__ */ jsx("fieldset", {
 		...rest,
 		"aria-labelledby": labelledbyId,
-		className: cn("m-0 min-w-0 border-0 p-0 inline-full", "grid gap-3", disabled && "opacity-70"),
+		className: clsx(checkbox_card_module_default.root, disabled && checkbox_card_module_default.rootDisabled),
 		ref,
 		role: "group",
 		children: options.map((option) => {
-			const checked = selectedValues.includes(option.value);
 			const optionDisabled = disabled || option.disabled === true;
 			const hasDescription = option.description !== void 0 && option.description !== "";
 			const hasVisual = option.visual !== void 0 && option.visual !== null;
 			const optionId = `${groupId}-${option.value}`;
 			return /* @__PURE__ */ jsxs("label", {
-				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: clsx(checkbox_card_module_default.card, invalid && checkbox_card_module_default.invalid, optionDisabled && checkbox_card_module_default.disabled),
 				id: optionId,
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
 						"aria-labelledby": `${optionId}-label`,
-						checked,
-						className: "sr-only",
+						...isControlled ? { checked: value.includes(option.value) } : { defaultChecked: defaultValue?.includes(option.value) },
+						className: clsx(sr_only_module_default.srOnly, checkbox_card_module_default.input),
 						disabled: optionDisabled,
 						name,
-						onChange: (event) => {
-							handleToggle(option.value, event.target.checked);
-						},
+						onChange: handleChange,
 						type: "checkbox",
 						value: option.value
 					}),
 					hasVisual ? /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "mr-4 shrink-0",
+						className: checkbox_card_module_default.visual,
 						children: option.visual
 					}) : null,
 					/* @__PURE__ */ jsxs("span", {
-						className: "flex min-w-0 flex-1 flex-col gap-1",
+						className: checkbox_card_module_default.text,
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-fg-base font-medium",
+							className: checkbox_card_module_default.label,
 							id: `${optionId}-label`,
 							children: option.label
 						}), hasDescription ? /* @__PURE__ */ jsx("span", {
-							className: "text-fg-mute text-sm",
+							className: checkbox_card_module_default.description,
 							id: `${optionId}-description`,
 							children: option.description
 						}) : null]
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("mt-0.5 ml-4 inline-flex size-5 shrink-0 items-center justify-center rounded-md border", checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base text-transparent"),
+						className: checkbox_card_module_default.box,
 						children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
 					})
 				]

package/dist/components/form/checkbox-card/checkbox-card.module.mjs

@@ -0,0 +1,17 @@
+import './checkbox-card.css';
+//#region src/components/form/checkbox-card/checkbox-card.module.css
+var checkbox_card_module_default = {
+	"box": "VWx-oW_box",
+	"card": "VWx-oW_card",
+	"description": "VWx-oW_description",
+	"disabled": "VWx-oW_disabled",
+	"input": "VWx-oW_input",
+	"invalid": "VWx-oW_invalid",
+	"label": "VWx-oW_label",
+	"root": "VWx-oW_root",
+	"rootDisabled": "VWx-oW_rootDisabled",
+	"text": "VWx-oW_text",
+	"visual": "VWx-oW_visual"
+};
+//#endregion
+export { checkbox_card_module_default as default };

package/dist/components/form/checkbox-group/checkbox-group.css

@@ -0,0 +1,15 @@
+@layer properties, theme, base;
+
+@layer components {
+  .TaM1Za_root {
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .TaM1Za_disabled {
+    cursor: not-allowed;
+  }
+}
+
+@layer utilities;

package/dist/components/form/checkbox-group/checkbox-group.d.mts

@@ -1,12 +1,14 @@
-import { FC, FieldsetHTMLAttributes, PropsWithChildren, Ref } from "react";
+import { ChangeEvent, FC, FieldsetHTMLAttributes, PropsWithChildren, Ref } from "react";
 //#region src/components/form/checkbox-group/checkbox-group.d.ts
 type CheckboxGroupContextValue = {
-  currentValue: string[];
+  /** 制御モードの値。非制御では undefined で、各項目は defaultValue から始める */
+  value: string[] | undefined;
+  defaultValue: string[];
   disabled: boolean;
   name: string;
-  toggleValue: (value: string) => void;
+  notifyChange: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | undefined;
+export declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | undefined;
 type RootBaseProps = PropsWithChildren<{
   'aria-labelledby': string;
   invalid?: boolean;
@@ -26,4 +28,4 @@ type RootUncontrolledProps = {
 type RootProps = RootBaseProps & (RootControlledProps | RootUncontrolledProps);
 declare const Root: FC<RootProps>;
 //#endregion
-export { Root as CheckboxGroupRoot, useCheckboxGroupContext };
+export { Root as CheckboxGroupRoot };

package/dist/components/form/checkbox-group/checkbox-group.mjs

@@ -1,37 +1,33 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { createContext, use, useCallback, useMemo } from "react";
+import checkbox_group_module_default from "./checkbox-group.module.mjs";
+import { clsx } from "clsx";
+import { createContext, use, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/form/checkbox-group/checkbox-group.tsx
 const CheckboxGroupContext = createContext(void 0);
 const useCheckboxGroupContext = () => use(CheckboxGroupContext);
 const Root = ({ "aria-labelledby": labelledbyId, children, defaultValue, disabled = false, invalid = false, name, onChange, ref, value, ...rest }) => {
-	const [currentValue, setCurrentValue] = useControllableState({
+	const contextValue = useMemo(() => ({
 		value,
 		defaultValue: defaultValue ?? [],
-		onChange
-	});
-	const toggleValue = useCallback((targetValue) => {
-		const nextValue = currentValue.includes(targetValue) ? currentValue.filter((item) => item !== targetValue) : [...currentValue, targetValue];
-		setCurrentValue(nextValue);
-	}, [currentValue, setCurrentValue]);
-	const contextValue = useMemo(() => ({
-		currentValue,
 		disabled,
 		name,
-		toggleValue
+		notifyChange: (event) => {
+			const inputs = event.currentTarget.closest("fieldset")?.querySelectorAll(`input[type="checkbox"][name="${CSS.escape(name)}"]`) ?? [];
+			onChange?.([...inputs].filter((input) => input.checked).map((input) => input.value));
+		}
 	}), [
-		currentValue,
+		value,
+		defaultValue,
 		disabled,
 		name,
-		toggleValue
+		onChange
 	]);
 	return /* @__PURE__ */ jsx("fieldset", {
 		...rest,
 		"aria-invalid": invalid,
 		"aria-labelledby": labelledbyId,
-		className: cn("flex flex-col gap-2", disabled && "cursor-not-allowed"),
+		className: clsx(checkbox_group_module_default.root, disabled && checkbox_group_module_default.disabled),
 		ref,
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
 			value: contextValue,

package/dist/components/form/checkbox-group/checkbox-group.module.mjs

@@ -0,0 +1,8 @@
+import './checkbox-group.css';
+//#region src/components/form/checkbox-group/checkbox-group.module.css
+var checkbox_group_module_default = {
+	"disabled": "TaM1Za_disabled",
+	"root": "TaM1Za_root"
+};
+//#endregion
+export { checkbox_group_module_default as default };

package/dist/components/form/checkbox-group/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/form/checkbox-group/index.d.ts
-declare const CheckboxGroup: {
+export declare const CheckboxGroup: {
   readonly Root: import("react").FC<{
     'aria-labelledby': string;
     invalid?: boolean;
@@ -17,9 +17,11 @@ declare const CheckboxGroup: {
     onChange?: (value: string[]) => void;
   })>;
   readonly Item: import("react").FC<{
+    indeterminate?: boolean;
     invalid?: boolean;
     itemValue?: string;
     label: string;
+    labelHidden?: boolean;
     ref?: import("react").Ref<HTMLInputElement>;
   } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "children" | "className" | "defaultChecked" | "onChange" | "style" | "type" | "value"> & ({
     checked: boolean;
@@ -31,5 +33,4 @@ declare const CheckboxGroup: {
     onChange?: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
   })>;
 };
-//#endregion
-export { CheckboxGroup };
+//#endregion