@charcoal-ui/react 3.3.0-beta.0 → 3.3.0

package/dist/index.esm.js

@@ -2182,16 +2182,17 @@ import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector6, px as px3 } from "@charcoal-ui/utils";
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef15(
-  function CheckboxInner(props, ref) {
+  function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = useMemo3(
       () => ({
         ...props,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
+        validationState: invalid ? "invalid" : "valid",
         "aria-label": "children" in props ? void 0 : props.label,
         isDisabled: props.disabled
       }),
-      [props]
+      [invalid, props]
     );
     const state = useToggleState2(ariaCheckboxProps);
     const objectRef = useObjectRef3(ref);
@@ -2199,7 +2200,7 @@ var Checkbox = forwardRef15(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
       /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
-        /* @__PURE__ */ jsx26(CheckboxInput, { type: "checkbox", ...inputProps }),
+        /* @__PURE__ */ jsx26(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
         /* @__PURE__ */ jsx26(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx26(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
       "children" in props && /* @__PURE__ */ jsx26(InputLabel, { children: props.children })
@@ -2243,6 +2244,7 @@ var CheckboxInput = styled21.input`
       border-color: ${({ theme: theme3 }) => theme3.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
 
     /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
     transition: all 0.2s !important;