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

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

@@ -1,21 +1,11 @@
 import { ClickableElement, ClickableProps } from '../Clickable';
 type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation';
 type Size = 'S' | 'M';
-interface StyledProps {
-    /**
-     * ボタンのスタイル
-     */
+export type ButtonProps = Partial<{
     variant: Variant;
-    /**
-     * ボタンのサイズ
-     */
     size: Size;
-    /**
-     * 幅を最大まで広げて描画
-     */
     fullWidth: boolean;
-}
-export type ButtonProps = Partial<StyledProps> & ClickableProps;
+}> & ClickableProps;
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<ClickableElement>>;
 export default Button;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,UAAU,WAAW;IACnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,0GAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAQrB,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAC,GACA,cAAc,CAAA;AAEhB,QAAA,MAAM,MAAM,0GAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}

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/performance.test.d.ts

@@ -0,0 +1,4 @@
+import 'jest-styled-components';
+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

@@ -0,0 +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,QAAQ,MAAM,qBAAqB,CAAA;AAI1C,wBAAgB,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,4EAI3C"}

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

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+//# sourceMappingURL=snapshot.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.test.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/snapshot.test.tsx"],"names":[],"mappings":"AAOA,OAAO,wBAAwB,CAAA"}

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 }) })
   ] }) });
 }
@@ -238,21 +239,17 @@ var Button2 = (0, import_react2.forwardRef)(function Button3({
     {
       ...rest,
       disabled,
-      variant,
-      size,
-      fullWidth: fixed,
+      $variant: variant,
+      $size: size,
+      $fullWidth: fixed,
       ref,
       children
     }
   );
 });
 var Button_default = Button2;
-var StyledButton = (0, import_styled_components4.default)(Clickable_default).withConfig({
-  shouldForwardProp(prop) {
-    return prop !== "fullWidth";
-  }
-}).attrs(styledProps)`
-  width: ${(p) => p.fullWidth ? "stretch" : "min-content"};
+var StyledButton = (0, import_styled_components4.default)(Clickable_default)`
+  width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
   align-items: center;
   justify-content: center;
@@ -261,53 +258,48 @@ var StyledButton = (0, import_styled_components4.default)(Clickable_default).wit
   white-space: nowrap;
 
   ${(p) => theme((o) => [
-  o.font[p.font].hover.press,
-  o.bg[p.background].hover.press,
+  o.font[variantToFont(p.$variant)].hover.press,
+  o.bg[variantToBackground(p.$variant)].hover.press,
   o.typography(14).bold.preserveHalfLeading,
-  o.padding.horizontal(p.padding),
+  o.padding.horizontal(p.$size === "M" ? 24 : 16),
   o.disabled,
   o.borderRadius("oval"),
   o.outline.default.focus
 ])}
 
   /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => p.height}px;
+  height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function styledProps(props) {
-  return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size)
-  };
-}
-function variantToProps(variant) {
+function variantToBackground(variant) {
   switch (variant) {
     case "Overlay":
-      return { font: "text5", background: "surface4" };
+      return "surface4";
     case "Default":
-      return { font: "text2", background: "surface3" };
+      return "surface3";
     case "Primary":
-      return { font: "text5", background: "brand" };
+      return "brand";
     case "Navigation":
-      return { font: "text5", background: "surface6" };
+      return "surface6";
     case "Danger":
-      return { font: "text5", background: "assertive" };
+      return "assertive";
     default:
       return unreachable(variant);
   }
 }
-function sizeToProps(size) {
-  switch (size) {
-    case "S":
-      return {
-        height: 32,
-        padding: 16
-      };
-    case "M":
-      return {
-        height: 40,
-        padding: 24
-      };
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
   }
 }
 
@@ -322,7 +314,7 @@ var IconButton = (0, import_react3.forwardRef)(
   }
 );
 var IconButton_default = IconButton;
-var StyledIconButton = (0, import_styled_components5.default)(Clickable_default).attrs(styledProps2)`
+var StyledIconButton = (0, import_styled_components5.default)(Clickable_default).attrs(styledProps)`
   user-select: none;
 
   width: ${(p) => p.width}px;
@@ -339,14 +331,14 @@ var StyledIconButton = (0, import_styled_components5.default)(Clickable_default)
   o.outline.default.focus
 ])}
 `;
-function styledProps2(props) {
+function styledProps(props) {
   return {
     ...props,
-    ...variantToProps2(props.variant),
-    ...sizeToProps2(props.size)
+    ...variantToProps(props.variant),
+    ...sizeToProps(props.size)
   };
 }
-function variantToProps2(variant) {
+function variantToProps(variant) {
   switch (variant) {
     case "Default":
       return { font: "text3", background: "transparent" };
@@ -354,7 +346,7 @@ function variantToProps2(variant) {
       return { font: "text5", background: "surface4" };
   }
 }
-function sizeToProps2(size) {
+function sizeToProps(size) {
   switch (size) {
     case "XS":
       return {
@@ -1597,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;
@@ -1613,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] {