@charcoal-ui/react 6.0.0-rc.2 → 6.0.0-rc.4

package/dist/index.css

@@ -421,6 +421,49 @@
   grid-template-columns: 1fr;
   grid-gap: 8px;
 }
+.charcoal-icon {
+  display: inline-flex;
+  width: var(--charcoal-icon-size);
+  height: var(--charcoal-icon-size);
+}
+
+pixiv-icon:not(:defined) {
+  --pixiv-icon-base: 24px;
+  --pixiv-icon-scale: 1;
+  --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
+
+  display: inline-flex;
+  /* --charcoal-icon-size がセットされていればそれを優先、
+     なければ name / scale から導出した --pixiv-icon-size をフォールバック */
+  width: var(--charcoal-icon-size, var(--pixiv-icon-size));
+  height: var(--charcoal-icon-size, var(--pixiv-icon-size));
+}
+
+pixiv-icon:not(:defined)[name^='16/'] {
+    --pixiv-icon-base: 16px;
+    --pixiv-icon-size: 16px;
+  }
+
+pixiv-icon:not(:defined)[name^='24/'][scale='2'] {
+      --pixiv-icon-scale: 2;
+    }
+
+pixiv-icon:not(:defined)[name^='24/'][scale='3'] {
+      --pixiv-icon-scale: 3;
+    }
+
+pixiv-icon:not(:defined)[name^='32/'] {
+    --pixiv-icon-base: 32px;
+    --pixiv-icon-size: 32px;
+  }
+
+pixiv-icon:not(:defined)[name^='Inline/'] {
+    --pixiv-icon-base: 16px;
+  }
+
+pixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {
+      --pixiv-icon-scale: 2;
+    }
 .charcoal-multi-select {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -956,7 +999,7 @@
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: var(--charcoal-color-container-neutral-default);
+  background-color: var(--charcoal-color-background-overlay);
 }
 
   @media (max-width: 743px) {

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import*as e from"react";import t,{Children as n,Fragment as r,createContext as i,forwardRef as a,isValidElement as o,memo as s,useCallback as c,useContext as l,useDebugValue as u,useEffect as d,useImperativeHandle as f,useLayoutEffect as p,useMemo as m,useRef as h,useState as g,useSyncExternalStore as _,version as v}from"react";import{SSRProvider as y}from"react-aria/SSRProvider";import{OverlayProvider as b}from"react-aria/private/overlays/useModal";import{jsx as x,jsxs as S}from"react/jsx-runtime";import C from"warning";import{calcActualSize as w}from"@charcoal-ui/icons";import"@charcoal-ui/icons/css/icon.css";import{useId as T}from"react-aria/useId";import{useVisuallyHidden as E}from"react-aria/VisuallyHidden";import{animated as D,easings as O,useTransition as k}from"@react-spring/web";import{useDialog as A}from"react-aria/useDialog";import{ariaHideOutside as j}from"react-aria/private/overlays/ariaHideOutside";import{useOverlayFocusContain as M}from"react-aria/private/overlays/Overlay";import{useOverlay as N}from"react-aria/useOverlay";import{DismissButton as P,Overlay as F}from"react-aria/Overlay";import{useObjectRef as I}from"react-aria/useObjectRef";import{usePopover as L}from"react-aria/usePopover";import{useRadio as R,useRadioGroup as ee}from"react-aria/useRadioGroup";import{useRadioGroupState as z}from"react-stately/useRadioGroupState";import{mergeProps as te,useFocusRing as ne,useKeyboard as B,useLink as V}from"react-aria";import{c as H}from"react-compiler-runtime";function U(e){let t=parseInt(v.split(`.`)[0],10);return Number.isFinite(t)?t>=e:!1}const W=U(18)?r:y;function re({children:e}){return x(W,{children:x(b,{children:e})})}const G=`charcoal-theme`,ie=`theme`,ae=new RegExp(/^(\w|-)+$/);function K(e){if(!ae.test(e))throw Error(`Unexpected key :${e}, expect: /^(\\w|-)+$/`)}const oe=(e=ie)=>t=>{K(e),t===void 0?delete document.documentElement.dataset[e]:document.documentElement.dataset[e]=t},se=oe();function ce(e,t){return`:root[data-${t??`theme`}='${e}']`}function le(e){return`@media (prefers-color-scheme: ${e})`}function ue({key:e=G,setter:t=se}={}){let[n,,r]=fe(e);d(()=>{n!==void 0&&t(r?void 0:n)},[t,r,n])}function de(e=G){return localStorage.getItem(e)}const fe=(e=G)=>{K(e);let t=ge(`(prefers-color-scheme: dark)`),n=t===void 0?void 0:t?`dark`:`light`,[r,i,a]=pe(e);return[!a||n===void 0?void 0:r??n,i,r===void 0]};function pe(e,t){let[n,r]=g(!1),[i,a]=g(),o=m(()=>t?.(),[t]),s=c(()=>{let t=localStorage.getItem(e);a((t===null?null:me(t))??o),r(!0)},[o,e]),l=c(t=>{t.storageArea===localStorage&&t.key===e&&s()},[s,e]);return d(()=>(s(),window.addEventListener(`storage`,l),()=>{window.removeEventListener(`storage`,l)}),[s,l]),[i??o,t=>{if(t===void 0)localStorage.removeItem(e);else{let n=he(t);localStorage.setItem(e,n)}let n=new StorageEvent(`storage`,{bubbles:!0,cancelable:!1,key:e,url:location.href,storageArea:localStorage});dispatchEvent(n)},n]}function me(e){try{return JSON.parse(e)}catch{return e}}function he(e){return typeof e==`string`?e:JSON.stringify(e)}function ge(e){let[t,n]=g();return d(()=>{let t=window.matchMedia(e),r=()=>{n(t.matches)};return t.addEventListener(`change`,r),n(t.matches),()=>{t.removeEventListener(`change`,r)}},[e]),t}function _e({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}=q){return K(e),K(t),`'use strict';
+import*as e from"react";import t,{Children as n,Fragment as r,createContext as i,forwardRef as a,isValidElement as o,memo as s,useCallback as c,useContext as l,useDebugValue as u,useEffect as d,useImperativeHandle as f,useLayoutEffect as p,useMemo as m,useRef as h,useState as g,useSyncExternalStore as _,version as v}from"react";import{SSRProvider as y}from"react-aria/SSRProvider";import{OverlayProvider as b}from"react-aria/private/overlays/useModal";import{jsx as x,jsxs as S}from"react/jsx-runtime";import C from"warning";import{calcActualSize as w}from"@charcoal-ui/icons";import{useId as T}from"react-aria/useId";import{useVisuallyHidden as E}from"react-aria/VisuallyHidden";import{animated as D,easings as O,useTransition as k}from"@react-spring/web";import{useDialog as A}from"react-aria/useDialog";import{ariaHideOutside as j}from"react-aria/private/overlays/ariaHideOutside";import{useOverlayFocusContain as M}from"react-aria/private/overlays/Overlay";import{useOverlay as N}from"react-aria/useOverlay";import{DismissButton as P,Overlay as F}from"react-aria/Overlay";import{useObjectRef as I}from"react-aria/useObjectRef";import{usePopover as L}from"react-aria/usePopover";import{useRadio as R,useRadioGroup as ee}from"react-aria/useRadioGroup";import{useRadioGroupState as z}from"react-stately/useRadioGroupState";import{mergeProps as te,useFocusRing as ne,useKeyboard as B,useLink as V}from"react-aria";import{c as H}from"react-compiler-runtime";function U(e){let t=parseInt(v.split(`.`)[0],10);return Number.isFinite(t)?t>=e:!1}const W=U(18)?r:y;function re({children:e}){return x(W,{children:x(b,{children:e})})}const G=`charcoal-theme`,ie=`theme`,ae=new RegExp(/^(\w|-)+$/);function K(e){if(!ae.test(e))throw Error(`Unexpected key :${e}, expect: /^(\\w|-)+$/`)}const oe=(e=ie)=>t=>{K(e),t===void 0?delete document.documentElement.dataset[e]:document.documentElement.dataset[e]=t},se=oe();function ce(e,t){return`:root[data-${t??`theme`}='${e}']`}function le(e){return`@media (prefers-color-scheme: ${e})`}function ue({key:e=G,setter:t=se}={}){let[n,,r]=fe(e);d(()=>{n!==void 0&&t(r?void 0:n)},[t,r,n])}function de(e=G){return localStorage.getItem(e)}const fe=(e=G)=>{K(e);let t=ge(`(prefers-color-scheme: dark)`),n=t===void 0?void 0:t?`dark`:`light`,[r,i,a]=pe(e);return[!a||n===void 0?void 0:r??n,i,r===void 0]};function pe(e,t){let[n,r]=g(!1),[i,a]=g(),o=m(()=>t?.(),[t]),s=c(()=>{let t=localStorage.getItem(e);a((t===null?null:me(t))??o),r(!0)},[o,e]),l=c(t=>{t.storageArea===localStorage&&t.key===e&&s()},[s,e]);return d(()=>(s(),window.addEventListener(`storage`,l),()=>{window.removeEventListener(`storage`,l)}),[s,l]),[i??o,t=>{if(t===void 0)localStorage.removeItem(e);else{let n=he(t);localStorage.setItem(e,n)}let n=new StorageEvent(`storage`,{bubbles:!0,cancelable:!1,key:e,url:location.href,storageArea:localStorage});dispatchEvent(n)},n]}function me(e){try{return JSON.parse(e)}catch{return e}}function he(e){return typeof e==`string`?e:JSON.stringify(e)}function ge(e){let[t,n]=g();return d(()=>{let t=window.matchMedia(e),r=()=>{n(t.matches)};return t.addEventListener(`change`,r),n(t.matches),()=>{t.removeEventListener(`change`,r)}},[e]),t}function _e({localStorageKey:e=q.localStorageKey,rootAttribute:t=q.rootAttribute}=q){return K(e),K(t),`'use strict';
 (function () {
     var localStorageKey = '${e}'
     var rootAttribute = '${t}'