@charcoal-ui/react 3.11.0 → 3.13.0-beta.0

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { default as Switch, type SwitchProps } from './components/Switch';
 export { default as TextField, type TextFieldProps, } from './components/TextField';
 export { default as TextArea, type TextAreaProps } from './components/TextArea';
 export { default as Icon, type IconProps } from './components/Icon';
-export { default as Modal, type ModalProps } from './components/Modal';
+export { default as Modal, type ModalProps, ModalCloseButton, } from './components/Modal';
 export { ModalHeader, ModalAlign, ModalBody, ModalButtons, } from './components/Modal/ModalPlumbing';
 export { default as LoadingSpinner, LoadingSpinnerIcon, } from './components/LoadingSpinner';
 export { default as DropdownSelector, type DropdownSelectorProps, } from './components/DropdownSelector';

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,GACpB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC/E,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,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,gDAAgD,CAAA;AACvD,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,kBAAkB,GACxB,MAAM,6CAA6C,CAAA;AACpD,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"}
+{"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,GACpB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EACL,OAAO,IAAI,KAAK,EAChB,KAAK,UAAU,EACf,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,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,GAC3B,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,gDAAgD,CAAA;AACvD,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,KAAK,kBAAkB,GACxB,MAAM,6CAA6C,CAAA;AACpD,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

@@ -179,7 +179,7 @@ var IconButton = forwardRef4(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
+  return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ jsx5("pixiv-icon", { "aria-hidden": "true", name: icon }) });
 });
 var IconButton_default = IconButton;
 var StyledIconButton = styled3(Clickable_default).attrs(styledProps).withConfig({
@@ -936,7 +936,8 @@ var Modal = forwardRef13(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
   const ref = useObjectRef2(external);
   const {
@@ -1001,7 +1002,7 @@ var Modal = forwardRef13(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ jsx14(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ jsx14(ModalCloseButton, { size: "S", icon: "24/Close", type: "button", "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var Modal_default = memo4(Modal);
@@ -1019,7 +1020,7 @@ var ModalBackground = animated2(styled11.div.withConfig({
 }) => zIndex, ({
   theme
 }) => maxWidth2(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css7(["padding:0;"])));
-var ModalCrossButton = styled11(IconButton_default).withConfig({
+var ModalCloseButton = styled11(IconButton_default).withConfig({
   componentId: "ccl__sc-h2bc55-1"
 })(["position:absolute;top:8px;right:8px;color:var(--charcoal-text3);transition:0.2s color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}}"]);
 function ModalTitle(props) {
@@ -1586,7 +1587,7 @@ var Checkbox = forwardRef16(function CheckboxInner({
   const {
     inputProps
   } = useCheckbox(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+  const isDisabled = props.disabled ?? false;
   return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
     /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
       /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
@@ -1599,13 +1600,13 @@ var Checkbox_default = memo7(Checkbox);
 var hiddenCss = css11(["visibility:hidden;"]);
 var InputRoot = styled21.label.withConfig({
   componentId: "ccl__sc-wrdmwj-0"
-})(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
+})(["position:relative;display:flex;cursor:pointer;gap:4px;&:has(input[readonly]){cursor:default;}&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
 var CheckboxRoot = styled21.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
 var CheckboxInput = styled21.input.withConfig({
   componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], focusVisibleFocusRingCss7);
+})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&[readonly]{cursor:default;opacity:0.32;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], focusVisibleFocusRingCss7);
 var CheckboxInputOverlay = styled21.div.withConfig({
   componentId: "ccl__sc-wrdmwj-3"
 })(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
@@ -1736,6 +1737,7 @@ export {
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
   MultiSelect_default as MultiSelect,
   MultiSelectGroup,