@charcoal-ui/react 3.2.0 → 3.3.0

package/dist/components/Button/index.test.d.ts

@@ -1,4 +1,4 @@
 import 'jest-styled-components';
-import renderder from 'react-test-renderer';
-export declare function render(children: JSX.Element): renderder.ReactTestRendererJSON | renderder.ReactTestRendererJSON[] | null;
+import renderer from 'react-test-renderer';
+export declare function render(children: JSX.Element): renderer.ReactTestRendererJSON | renderer.ReactTestRendererJSON[] | null;
 //# sourceMappingURL=index.test.d.ts.map

package/dist/components/Button/index.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAG/B,OAAO,SAAS,MAAM,qBAAqB,CAAA;AAI3C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,8EAI3C"}
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAG/B,OAAO,QAAQ,MAAM,qBAAqB,CAAA;AAI1C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,4EAI3C"}

package/dist/components/Checkbox/index.d.ts

@@ -12,6 +12,7 @@ export type CheckboxProps = CheckboxLabelProps & {
     readonly defaultChecked?: boolean;
     readonly disabled?: boolean;
     readonly readonly?: boolean;
+    readonly invalid?: boolean;
     readonly onClick?: () => void;
     readonly onChange?: (isSelected: boolean) => void;
     readonly onBlur?: () => void;

package/dist/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,kBAAkB,GACnB;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GACD;IACE,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAEL,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAE3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;;AAoCD,wBAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,KAAK,kBAAkB,GACnB;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GACD;IACE,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAEL,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAE3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;;AAqCD,wBAA6B"}

package/dist/components/Checkbox/index.story.d.ts

@@ -10,6 +10,7 @@ type Props = {
     disabled: boolean;
     readonly: boolean;
     className?: string;
+    invalid: boolean;
 };
 export declare const Labelled: Story<Props>;
 export declare const Unlabelled: Story<Props>;

package/dist/components/Checkbox/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAkCjC,CAAA;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAcnC,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,cAAc,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAkCjC,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAcnC,CAAA"}

package/dist/components/Checkbox/performance.test.d.ts

@@ -1,4 +1,4 @@
 import 'jest-styled-components';
-import renderder from 'react-test-renderer';
-export declare function render(children: JSX.Element): renderder.ReactTestRendererJSON | renderder.ReactTestRendererJSON[] | null;
+import renderer from 'react-test-renderer';
+export declare function render(children: JSX.Element): renderer.ReactTestRendererJSON | renderer.ReactTestRendererJSON[] | null;
 //# sourceMappingURL=performance.test.d.ts.map

package/dist/components/Checkbox/performance.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"performance.test.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/performance.test.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAA;AAG/B,OAAO,SAAS,MAAM,qBAAqB,CAAA;AAI3C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,8EAI3C"}
+{"version":3,"file":"performance.test.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/performance.test.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAA;AAG/B,OAAO,QAAQ,MAAM,qBAAqB,CAAA;AAI1C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,4EAI3C"}

package/dist/components/LoadingSpinner/index.story.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
     title: string;
     component: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import(".").LoadingSpinnerProps & import("react").RefAttributes<HTMLDivElement>>>;
-    decorators: ((...args: any) => any)[];
+    decorators: any[];
 };
 export default _default;
 export declare function Basic(): JSX.Element;

package/dist/core/CharcoalProvider.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { Components } from './ComponentAbstraction';
 import { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector';
-import { CharcoalTheme } from '@charcoal-ui/theme';
+import { CharcoalTheme, ThemeColor } from '@charcoal-ui/theme';
 export type CharcoalProviderProps = React.PropsWithChildren<{
     themeMap: ThemeMap<CharcoalTheme>;
     defaultTheme?: CharcoalTheme;
     injectTokens?: boolean;
     components?: Partial<Components>;
+    background?: keyof ThemeColor;
 }>;
-export declare function CharcoalProvider({ themeMap, defaultTheme, components, injectTokens, children, }: CharcoalProviderProps): JSX.Element;
+export declare function CharcoalProvider({ themeMap, defaultTheme, components, injectTokens, children, background, }: CharcoalProviderProps): JSX.Element;
 //# sourceMappingURL=CharcoalProvider.d.ts.map

package/dist/core/CharcoalProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CharcoalProvider.d.ts","sourceRoot":"","sources":["../../src/core/CharcoalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAA6B,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEzE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAKlD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1D,QAAQ,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAA;IACjC,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CACjC,CAAC,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,YAAgC,EAChC,UAAe,EACf,YAAmB,EACnB,QAAQ,GACT,EAAE,qBAAqB,eAWvB"}
+{"version":3,"file":"CharcoalProvider.d.ts","sourceRoot":"","sources":["../../src/core/CharcoalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAA6B,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEzE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAK9D,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1D,QAAQ,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAA;IACjC,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,UAAU,CAAA;CAC9B,CAAC,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,YAAgC,EAChC,UAAe,EACf,YAAmB,EACnB,QAAQ,EACR,UAAU,GACX,EAAE,qBAAqB,eAavB"}

package/dist/index.cjs.js

@@ -99,10 +99,11 @@ function CharcoalProvider({
   defaultTheme = themeMap[":root"],
   components = {},
   injectTokens = true,
-  children
+  children,
+  background
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ssr.SSRProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_styled_components.ThemeProvider, { theme: defaultTheme, children: [
-    injectTokens && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled.TokenInjector, { theme: themeMap }),
+    injectTokens && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_styled.TokenInjector, { theme: themeMap, background }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentAbstraction, { components, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_overlays.OverlayProvider, { children }) })
   ] }) });
 }
@@ -258,7 +259,7 @@ var StyledButton = (0, import_styled_components4.default)(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,
@@ -269,7 +270,7 @@ var StyledButton = (0, import_styled_components4.default)(Clickable_default)`
   /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackgraund(variant) {
+function variantToBackground(variant) {
   switch (variant) {
     case "Overlay":
       return "surface4";
@@ -1588,7 +1589,7 @@ var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({ role: "p
   transparent ? o.bg.transparent : o.bg.background1
 ])}
 `;
-var scaleout = import_styled_components14.keyframes`
+var scaleOut = import_styled_components14.keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -1604,7 +1605,7 @@ var Icon2 = import_styled_components14.default.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] {
@@ -2234,16 +2235,17 @@ var import_react_stately3 = require("react-stately");
 var import_utils11 = require("@charcoal-ui/utils");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Checkbox = (0, import_react21.forwardRef)(
-  function CheckboxInner(props, ref) {
+  function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = (0, import_react21.useMemo)(
       () => ({
         ...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 = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
     const objectRef = (0, import_utils10.useObjectRef)(ref);
@@ -2251,7 +2253,7 @@ var Checkbox = (0, import_react21.forwardRef)(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CheckboxRoot, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInput, { type: "checkbox", ...inputProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
       "children" in props && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InputLabel, { children: props.children })
@@ -2295,6 +2297,7 @@ var CheckboxInput = import_styled_components22.default.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;