@charcoal-ui/react 3.2.0 → 3.3.0

package/dist/index.esm.js

@@ -39,10 +39,11 @@ function CharcoalProvider({
   defaultTheme = themeMap[":root"],
   components = {},
   injectTokens = true,
-  children
+  children,
+  background
 }) {
   return /* @__PURE__ */ jsx2(SSRProvider, { children: /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
-    injectTokens && /* @__PURE__ */ jsx2(TokenInjector, { theme: themeMap }),
+    injectTokens && /* @__PURE__ */ jsx2(TokenInjector, { theme: themeMap, background }),
     /* @__PURE__ */ jsx2(ComponentAbstraction, { components, children: /* @__PURE__ */ jsx2(OverlayProvider, { children }) })
   ] }) });
 }
@@ -198,7 +199,7 @@ var StyledButton = styled3(Clickable_default)`
 
   ${(p) => theme((o) => [
   o.font[variantToFont(p.$variant)].hover.press,
-  o.bg[variantToBackgraund(p.$variant)].hover.press,
+  o.bg[variantToBackground(p.$variant)].hover.press,
   o.typography(14).bold.preserveHalfLeading,
   o.padding.horizontal(p.$size === "M" ? 24 : 16),
   o.disabled,
@@ -209,7 +210,7 @@ var StyledButton = styled3(Clickable_default)`
   /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackgraund(variant) {
+function variantToBackground(variant) {
   switch (variant) {
     case "Overlay":
       return "surface4";
@@ -1532,7 +1533,7 @@ var LoadingSpinnerRoot = styled13.div.attrs({ role: "progressbar" })`
   transparent ? o.bg.transparent : o.bg.background1
 ])}
 `;
-var scaleout = keyframes`
+var scaleOut = keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -1548,7 +1549,7 @@ var Icon2 = styled13.div.attrs({ role: "presentation" })`
   height: 1em;
   border-radius: 1em;
   background-color: currentColor;
-  animation: ${scaleout} 1s both ease-out;
+  animation: ${scaleOut} 1s both ease-out;
   animation-iteration-count: ${(p) => p.once ? 1 : "infinite"};
 
   &[data-reset-animation] {
@@ -2181,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);
@@ -2198,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 })
@@ -2242,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;