@charcoal-ui/react 2.6.0 → 2.8.0

package/dist/index.d.ts

@@ -13,8 +13,8 @@ export { default as Icon, type IconProps } from './components/Icon';
 export { default as Modal, type ModalProps } from './components/Modal';
 export { ModalHeader, ModalAlign, ModalBody, ModalButtons, } from './components/Modal/ModalPlumbing';
 export { default as LoadingSpinner, LoadingSpinnerIcon, } from './components/LoadingSpinner';
-export { default as DropdownSelector, DropdownSelectorItem, } from './components/DropdownSelector';
+export { default as DropdownSelector, type DropdownSelectorProps, DropdownSelectorItem, } from './components/DropdownSelector';
 export { default as SegmentedControl, type SegmentedControlProps, } from './components/SegmentedControl';
-export { default as Checkbox } from './components/Checkbox';
+export { default as Checkbox, type CheckboxProps } from './components/Checkbox';
 export { default as TagItem, type TagItemProps } from './components/TagItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,uBAAuB,EACvB,KAAK,SAAS,GACf,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,OAAO,IAAI,KAAK,EAChB,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AACzC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,oBAAoB,GACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,uBAAuB,EACvB,KAAK,SAAS,GACf,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,OAAO,IAAI,KAAK,EAChB,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,KAAK,gBAAgB,EACrB,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,GACb,MAAM,kCAAkC,CAAA;AACzC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,EAC1B,oBAAoB,GACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/index.esm.js

@@ -406,6 +406,9 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
     }
 
     ${theme((o) => o.outline.default.focus)}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var RadioLabel = styled5.div`
@@ -693,6 +696,10 @@ var Label = styled7.label`
 
   ${theme((o) => o.disabled)}
 
+  :active > input {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
   ${disabledSelector3} {
     cursor: default;
   }
@@ -707,42 +714,63 @@ var LabelInner = styled7.div`
 var SwitchInput = styled7.input.attrs({
   type: "checkbox"
 })`
-  &[type='checkbox'] {
-    appearance: none;
-    display: inline-flex;
-    position: relative;
-    box-sizing: border-box;
-    width: 28px;
-    border: 2px solid transparent;
-    transition: box-shadow 0.2s, background-color 0.2s;
-    cursor: inherit;
-    ${theme((o) => [
-  o.borderRadius(16),
-  o.height.px(16),
-  o.bg.text4.hover.press,
-  o.outline.default.focus,
-  o.margin.all(0)
-])}
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
 
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      transform: translateX(0);
-      transition: transform 0.2s;
-      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
-    }
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+  cursor: inherit;
 
-    &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+  :hover {
+    background-color: var(--charcoal-text4-hover);
+  }
+  :active {
+    background-color: var(--charcoal-text4-press);
+  }
+  :focus {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 
-      &::after {
-        transform: translateX(12px);
-      }
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    transition: transform 0.2s;
+    border-radius: 1024px;
+    background-color: var(--charcoal-text5);
+    :hover {
+      background-color: var(--charcoal-text5-hover);
+    }
+    :active {
+      background-color: var(--charcoal-text5-press);
+    }
+  }
+
+  &:checked {
+    background-color: var(--charcoal-brand);
+    :hover {
+      background-color: var(--charcoal-brand-hover);
+    }
+    :active {
+      background-color: var(--charcoal-brand-press);
+    }
+    &::after {
+      transform: translateX(12px);
+      transition: transform 0.2s;
     }
   }
 `;
@@ -1105,6 +1133,13 @@ var StyledTextareaContainer = styled9.div`
   o.borderRadius(4)
 ])}
 
+  /**
+   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
+   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
+   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
+   */
+  transition: box-shadow 0.2s;
+
   &:focus-within {
     ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
   }
@@ -1267,7 +1302,7 @@ function Modal({
         ...underlayProps,
         style: transitionEnabled ? { backgroundColor } : {}
       },
-      /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ React12.createElement(
         ModalDialog,
         {
           ref,
@@ -1293,7 +1328,7 @@ function Modal({
             }
           )
         )
-      ))
+      )))
     ))
   );
 }
@@ -1305,6 +1340,8 @@ var ModalContext = React12.createContext({
 });
 var ModalBackground = animated(styled10.div`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -1313,34 +1350,52 @@ var ModalBackground = animated(styled10.div`
 
   ${theme((o) => [o.bg.surface4])}
 `);
+var DialogContainer = styled10.div`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+  switch (p.size) {
+    case "S": {
+      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "M": {
+      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "L": {
+      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    default: {
+      return unreachable(p.size);
+    }
+  }
+}}px;
+
+  @media ${({ theme: theme4 }) => maxWidth(theme4.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && css4`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === "full" ? "height: 100%" : ""};
+      `}
+  }
+`;
 var ModalDialog = animated(styled10.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme: theme4 }) => maxWidth(theme4.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet === "full" ? css4`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          ` : p.bottomSheet ? css4`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          ` : css4`
-            width: calc(100% - 48px);
-          `}
+    ${(p) => p.bottomSheet !== false && css4`
+        border-radius: 0;
+        ${p.bottomSheet === "full" && css4`
+          height: 100%;
+        `}
+      `}
   }
 `);
 var ModalCrossButton = styled10(IconButton_default)`
@@ -1363,7 +1418,6 @@ var ModalHeading = styled10.h3`
 // src/components/Modal/ModalPlumbing.tsx
 import React13 from "react";
 import styled11 from "styled-components";
-import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
 function ModalHeader() {
   return /* @__PURE__ */ React13.createElement(ModalHeaderRoot, null, /* @__PURE__ */ React13.createElement(StyledModalTitle, null));
 }
@@ -1377,11 +1431,7 @@ var StyledModalTitle = styled11(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
 var ModalAlign = styled11.div`
-  ${theme((o) => [o.padding.horizontal(24)])}
-
-  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16)])}
 `;
 var ModalBody = styled11.div`
   ${theme((o) => [o.padding.bottom(40)])}
@@ -1390,11 +1440,8 @@ var ModalButtons = styled11.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
-  ${theme((o) => [o.padding.horizontal(24).top(16)])}
 
-  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16).top(16)])}
 `;
 
 // src/components/LoadingSpinner/index.tsx
@@ -1408,6 +1455,7 @@ function LoadingSpinner({
   return /* @__PURE__ */ React14.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ React14.createElement(LoadingSpinnerIcon, null));
 }
 var LoadingSpinnerRoot = styled12.div.attrs({ role: "progressbar" })`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;
@@ -1818,7 +1866,8 @@ var SegmentedControl = forwardRef(
         ...props,
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
-        isRequired: props.required
+        isRequired: props.required,
+        "aria-label": props.name
       }),
       [props]
     );
@@ -1975,6 +2024,9 @@ var CheckboxInput = styled20.input`
       border-color: ${({ theme: theme4 }) => theme4.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var CheckboxInputOverlay = styled20.div`
@@ -2021,6 +2073,7 @@ var TagItem = forwardRef3(
     size = "M",
     disabled,
     status = "default",
+    className,
     ...props
   }, _ref) {
     const ref = useObjectRef2(_ref);
@@ -2040,7 +2093,8 @@ var TagItem = forwardRef3(
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
-        ...buttonProps
+        ...buttonProps,
+        className
       },
       /* @__PURE__ */ React23.createElement(Background, { bgColor, bgImage, status }),
       /* @__PURE__ */ React23.createElement(Inner, null, /* @__PURE__ */ React23.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React23.createElement(TranslatedLabel, null, /* @__PURE__ */ React23.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React23.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React23.createElement(Icon_default, { name: "16/Remove" }))