@charcoal-ui/react 2.7.0 → 2.9.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

@@ -379,6 +379,8 @@ var RadioInput = styled5.input.attrs({ type: "radio" })`
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) => theme((o) => [
   o.borderRadius("oval"),
   o.bg.surface1.hover.press,
@@ -1075,6 +1077,7 @@ var PrefixContainer = styled9.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `;
 var SuffixContainer = styled9.span`
   position: absolute;
@@ -1302,7 +1305,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,
@@ -1328,7 +1331,7 @@ function Modal({
             }
           )
         )
-      ))
+      )))
     ))
   );
 }
@@ -1340,6 +1343,8 @@ var ModalContext = React12.createContext({
 });
 var ModalBackground = animated(styled10.div`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -1348,34 +1353,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)`
@@ -1435,6 +1458,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;
@@ -1845,7 +1869,8 @@ var SegmentedControl = forwardRef(
         ...props,
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
-        isRequired: props.required
+        isRequired: props.required,
+        "aria-label": props.name
       }),
       [props]
     );