@baton8/general-components 1.2.0-alpha.8 → 2.0.0

package/dist/components/atoms/badge/badge.d.ts

@@ -21,7 +21,7 @@ export declare const Badge: import("react").ForwardRefExoticComponent<import("..
      * 見た目のバリアント。
      * @defaultValue `"solid"`
      */
-    variant?: "outline" | "solid" | "light" | undefined;
+    variant?: "solid" | "light" | "outline" | undefined;
     /**
      * サイズ。
      * @defaultValue `"medium"`

package/dist/components/atoms/checkbox/checkbox.d.ts

@@ -53,4 +53,12 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<import(
     onBlur?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
     /** */
     className?: string | undefined;
+    /**
+     * 内部の `<input>` 要素のクラス名。
+     */
+    inputClassName?: string | undefined;
+    /**
+     * 内部の `<input>` 要素の ID。
+     */
+    inputId?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/controlContainer/controlContainer.d.ts

@@ -49,8 +49,14 @@ export declare const ControlContainer: import("react").ForwardRefExoticComponent
     id?: string | undefined;
     style?: import("react").CSSProperties | undefined;
 } & {
+    /**
+     * `<label>` 要素で描画するかどうか。
+     * これを `true` にすることで、内部に置くラベルを含んだ全体をクリックしたときに、コントロールをトリガーできるようになります。
+     * @defaultValue `true`
+     */
+    isLabel?: boolean | undefined;
     /** */
     children: ReactNode;
     /** */
     className?: string | undefined;
-} & import("react").RefAttributes<HTMLLabelElement>>;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/atoms/input/input.d.ts

@@ -83,4 +83,12 @@ export declare const Input: import("react").ForwardRefExoticComponent<import("..
     children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | [ReactElement<any, string | import("react").JSXElementConstructor<any>>] | [ReactElement<any, string | import("react").JSXElementConstructor<any>>, ReactElement<any, string | import("react").JSXElementConstructor<any>>] | undefined;
     /** */
     className?: string | undefined;
+    /**
+     * 内部の `<input>` 要素のクラス名。
+     */
+    inputClassName?: string | undefined;
+    /**
+     * 内部の `<input>` 要素の ID。
+     */
+    inputId?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/radio/radio.d.ts

@@ -50,4 +50,12 @@ export declare const Radio: import("react").ForwardRefExoticComponent<import("..
     onBlur?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
     /** */
     className?: string | undefined;
+    /**
+     * 内部の `<input>` 要素のクラス名。
+     */
+    inputClassName?: string | undefined;
+    /**
+     * 内部の `<input>` 要素の ID。
+     */
+    inputId?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/textarea/textarea.d.ts

@@ -61,4 +61,12 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<import(
     onBlur?: ((event: ChangeEvent<HTMLTextAreaElement>) => unknown) | undefined;
     /** */
     className?: string | undefined;
+    /**
+     * 内部の `<textarea>` 要素のクラス名。
+     */
+    textareaClassName?: string | undefined;
+    /**
+     * 内部の `<textarea>` 要素の ID。
+     */
+    textareaId?: string | undefined;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/index.js

@@ -579,11 +579,11 @@
     input:indeterminate +* >& {
       color: var(--qlib-checked-background-color);
     }
-  `},Je=(0,r.forwardRef)(((o,t)=>{var{isChecked:n,name:a,value:i,isError:s=!1,isRequired:c,isDisabled:d=!1,onSet:b,onChange:p,onBlur:u,className:f}=o,m=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["isChecked","name","value","isError","isRequired","isDisabled","onSet","onChange","onBlur","className"]);const y=(0,Qe.useId)(),g=(0,r.useRef)(null),h=(0,Qe.useMergeRefs)([t,g]),O=(0,r.useCallback)((e=>{const r=e.target.checked;null==b||b(r),null==p||p(e)}),[b,p]);return(0,r.useEffect)((()=>{null!=g.current&&(g.current.indeterminate="indeterminate"===n)}),[n]),(0,e.jsxs)("div",Object.assign({css:We.root,className:f,"data-qlib-error":s},m,{children:[(0,e.jsx)("input",{type:"checkbox",css:We.original,ref:h,id:y,checked:null!=n?!0===n:void 0,name:a,value:i,required:c,disabled:d,onChange:null!=b||null!=p?O:void 0,onBlur:u,"aria-invalid":s}),(0,e.jsx)("label",{css:We.input,htmlFor:y,"aria-hidden":"true",children:(0,e.jsx)(l.FontAwesomeIcon,{css:We.icon,icon:"indeterminate"===n?me.faMinus:me.faCheck})})]}))}));Je.displayName="Checkbox";const Ze={root:i.css`
+  `},Je=(0,r.forwardRef)(((o,t)=>{var{isChecked:n,name:a,value:i,isError:s=!1,isRequired:c,isDisabled:d=!1,onSet:b,onChange:p,onBlur:u,className:f,inputClassName:m,inputId:y}=o,g=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["isChecked","name","value","isError","isRequired","isDisabled","onSet","onChange","onBlur","className","inputClassName","inputId"]);const h=(0,Qe.useId)(),O=(0,r.useRef)(null),v=(0,Qe.useMergeRefs)([t,O]),x=(0,r.useCallback)((e=>{const r=e.target.checked;null==b||b(r),null==p||p(e)}),[b,p]);return(0,r.useEffect)((()=>{null!=O.current&&(O.current.indeterminate="indeterminate"===n)}),[n]),(0,e.jsxs)("div",Object.assign({css:We.root,className:f,"data-qlib-error":s},g,{children:[(0,e.jsx)("input",{type:"checkbox",css:We.original,ref:v,className:m,id:y||h,checked:null!=n?!0===n:void 0,name:a,value:i,required:c,disabled:d,onChange:null!=b||null!=p?x:void 0,onBlur:u,"aria-invalid":s}),(0,e.jsx)("label",{css:We.input,htmlFor:y||h,"aria-hidden":"true",children:(0,e.jsx)(l.FontAwesomeIcon,{css:We.icon,icon:"indeterminate"===n?me.faMinus:me.faCheck})})]}))}));Je.displayName="Checkbox";const Ze={root:i.css`
     row-gap: ${$(2)};
     display: flex;
     flex-direction: column;
-  `},Xe=(0,r.forwardRef)(((r,o)=>{var{children:t,className:n}=r,a=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(r,["children","className"]);return(0,e.jsx)("label",Object.assign({className:n,css:Ze.root,ref:o},a,{children:t}))}));Xe.displayName="ControlContainer";const er=e=>i.css`
+  `},Xe=(0,r.forwardRef)(((r,o)=>{var{isLabel:t=!0,children:n,className:a}=r,i=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(r,["isLabel","children","className"]);const l=t?"label":"div";return(0,e.jsx)(l,Object.assign({className:a,css:Ze.root,ref:o},i,{children:n}))}));Xe.displayName="ControlContainer";const er=e=>i.css`
     &[data-qlib-max-line="true"] {
       --qlib-additional-margin: 1em;
     }
@@ -882,7 +882,7 @@
     color: ${x("gray",5)};
     flex-grow: 0;
     flex-shrink: 0;
-  `},qr=(0,r.forwardRef)(((o,t)=>{var{value:n,name:a,size:i="medium",isCompact:l=!1,type:c="text",autoComplete:d="off",autoFocus:b,isError:p=!1,isRequired:u,isDisabled:f,onSet:m,onChange:y,onBlur:g,children:h,className:O}=o,v=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["value","name","size","isCompact","type","autoComplete","autoFocus","isError","isRequired","isDisabled","onSet","onChange","onBlur","children","className"]);const x=(0,r.useCallback)((e=>{const r=e.target.value;null==m||m(r),null==y||y(e)}),[m,y]),j=Ne(h),w=j.find((e=>e.type===xr)),$=j.find((e=>e.type===wr));return(0,e.jsx)("label",{className:O,css:$r.root,"data-qlib-size":i,"data-qlib-compact":l,"data-qlib-disabled":f,"data-qlib-error":p,children:(0,e.jsxs)("div",{css:$r.inputContainer,children:[w,(0,e.jsx)("input",Object.assign({css:$r.input,ref:t,value:n,name:a,type:c,autoComplete:d,autoFocus:b,required:u,disabled:f,onChange:null!=m||null!=y?x:void 0,onBlur:g,"aria-invalid":p},v)),kr(c)&&(0,e.jsx)("div",{css:$r.builtinAddon,children:(0,e.jsx)(dr,{icon:"time"===c?s.faClock:s.faCalendar})}),$]})})}));qr.displayName="Input";const kr=e=>"date"===e||"time"===e||"datetime-local"===e||"month"===e||"week"===e;const Nr=e=>i.css`
+  `},qr=(0,r.forwardRef)(((o,t)=>{var{value:n,name:a,size:i="medium",isCompact:l=!1,type:c="text",autoComplete:d="off",autoFocus:b,isError:p=!1,isRequired:u,isDisabled:f,onSet:m,onChange:y,onBlur:g,children:h,className:O,inputClassName:v,inputId:x}=o,j=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["value","name","size","isCompact","type","autoComplete","autoFocus","isError","isRequired","isDisabled","onSet","onChange","onBlur","children","className","inputClassName","inputId"]);const w=(0,r.useCallback)((e=>{const r=e.target.value;null==m||m(r),null==y||y(e)}),[m,y]),$=Ne(h),q=$.find((e=>e.type===xr)),k=$.find((e=>e.type===wr));return(0,e.jsx)("label",{className:O,css:$r.root,"data-qlib-size":i,"data-qlib-compact":l,"data-qlib-disabled":f,"data-qlib-error":p,children:(0,e.jsxs)("div",{css:$r.inputContainer,children:[q,(0,e.jsx)("input",Object.assign({css:$r.input,className:v,id:x,ref:t,value:n,name:a,type:c,autoComplete:d,autoFocus:b,required:u,disabled:f,onChange:null!=m||null!=y?w:void 0,onBlur:g,"aria-invalid":p},j)),kr(c)&&(0,e.jsx)("div",{css:$r.builtinAddon,children:(0,e.jsx)(dr,{icon:"time"===c?s.faClock:s.faCalendar})}),k]})})}));qr.displayName="Input";const kr=e=>"date"===e||"time"===e||"datetime-local"===e||"month"===e||"week"===e;const Nr=e=>i.css`
     // 文字サイズ
     &[data-qlib-size="small"] {
       --qlib-font-size: ${$(3)};
@@ -1326,7 +1326,7 @@
     input:checked +* >& {
       opacity: 1;
     }
-  `},Xr=(0,r.forwardRef)(((o,t)=>{var n,{isChecked:a,name:i,value:l,isError:s=!1,isRequired:c,isDisabled:d=!1,onSet:b,onChange:p,onBlur:u,className:f}=o,m=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["isChecked","name","value","isError","isRequired","isDisabled","onSet","onChange","onBlur","className"]);const y=(0,r.useContext)(Wr),g=(0,Qe.useId)(),h=(0,r.useCallback)((e=>{if(null!=(null==y?void 0:y.onSet)&&null!=l)y.onSet(l);else{const r=e.target.checked;null==b||b(r)}null==p||p(e)}),[l,y,b,p]);return(0,e.jsxs)("div",Object.assign({css:Zr.root,className:f,"data-qlib-error":s},m,{children:[(0,e.jsx)("input",{type:"radio",css:Zr.original,ref:t,id:g,value:l,name:null!==(n=null==y?void 0:y.name)&&void 0!==n?n:i,checked:null!=(null==y?void 0:y.value)?y.value===l:null!=a?!0===a:void 0,required:c,disabled:d,onChange:null!=(null==y?void 0:y.onSet)||null!=b||null!=p?h:void 0,onBlur:u,"aria-invalid":s}),(0,e.jsx)("label",{css:Zr.input,htmlFor:g,"aria-hidden":"true",children:(0,e.jsx)("div",{css:Zr.icon})})]}))}));Xr.displayName="Radio";const eo=({value:o,onSet:t,children:n})=>{const a=(0,Qe.useId)(),i=(0,r.useMemo)((()=>({name:a,value:o,onSet:t})),[a,o,t]);return(0,e.jsx)(Jr,{value:i,children:n})};eo.displayName="RadioGroup";const ro={root:i.css`
+  `},Xr=(0,r.forwardRef)(((o,t)=>{var n,{isChecked:a,name:i,value:l,isError:s=!1,isRequired:c,isDisabled:d=!1,onSet:b,onChange:p,onBlur:u,className:f,inputClassName:m,inputId:y}=o,g=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["isChecked","name","value","isError","isRequired","isDisabled","onSet","onChange","onBlur","className","inputClassName","inputId"]);const h=(0,r.useContext)(Wr),O=(0,Qe.useId)(),v=(0,r.useCallback)((e=>{if(null!=(null==h?void 0:h.onSet)&&null!=l)h.onSet(l);else{const r=e.target.checked;null==b||b(r)}null==p||p(e)}),[l,h,b,p]);return(0,e.jsxs)("div",Object.assign({css:Zr.root,className:f,"data-qlib-error":s},g,{children:[(0,e.jsx)("input",{type:"radio",css:Zr.original,ref:t,className:m,id:y||O,value:l,name:null!==(n=null==h?void 0:h.name)&&void 0!==n?n:i,checked:null!=(null==h?void 0:h.value)?h.value===l:null!=a?!0===a:void 0,required:c,disabled:d,onChange:null!=(null==h?void 0:h.onSet)||null!=b||null!=p?v:void 0,onBlur:u,"aria-invalid":s}),(0,e.jsx)("label",{css:Zr.input,htmlFor:y||O,"aria-hidden":"true",children:(0,e.jsx)("div",{css:Zr.icon})})]}))}));Xr.displayName="Radio";const eo=({value:o,onSet:t,children:n})=>{const a=(0,Qe.useId)(),i=(0,r.useMemo)((()=>({name:a,value:o,onSet:t})),[a,o,t]);return(0,e.jsx)(Jr,{value:i,children:n})};eo.displayName="RadioGroup";const ro={root:i.css`
     &[data-qlib-orientation="horizontal"] {
       --qlib-flex-direction: row;
     }
@@ -1548,7 +1548,7 @@
     &:disabled {
       cursor: inherit;
     }
-  `},lt=(0,r.forwardRef)(((o,t)=>{var{value:n,name:a,rowCount:i=4,resize:l="vertical",autoComplete:s="off",autoFocus:c,isWrapped:d=!0,isError:b=!1,isRequired:p,isDisabled:u,onSet:f,onChange:m,onBlur:y,className:g}=o,h=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["value","name","rowCount","resize","autoComplete","autoFocus","isWrapped","isError","isRequired","isDisabled","onSet","onChange","onBlur","className"]);const O=(0,r.useCallback)((e=>{const r=e.target.value;null==f||f(r),null==m||m(e)}),[f,m]);return(0,e.jsx)("label",{className:g,css:it.root,"data-qlib-size":$,"data-qlib-disabled":u,"data-qlib-error":b,children:(0,e.jsx)("div",{css:it.inputContainer,children:(0,e.jsx)("textarea",Object.assign({css:it.input,ref:t,value:n,name:a,rows:i,autoComplete:s,autoFocus:c,required:p,disabled:u,onChange:null!=f||null!=m?O:void 0,onBlur:y,"aria-invalid":b,"data-qlib-wrapped":d,"data-qlib-resize":l},h))})})}));lt.displayName="Textarea";const st={root:i.css`
+  `},lt=(0,r.forwardRef)(((o,t)=>{var{value:n,name:a,rowCount:i=4,resize:l="vertical",autoComplete:s="off",autoFocus:c,isWrapped:d=!0,isError:b=!1,isRequired:p,isDisabled:u,onSet:f,onChange:m,onBlur:y,className:g,textareaClassName:h,textareaId:O}=o,v=function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o}(o,["value","name","rowCount","resize","autoComplete","autoFocus","isWrapped","isError","isRequired","isDisabled","onSet","onChange","onBlur","className","textareaClassName","textareaId"]);const x=(0,r.useCallback)((e=>{const r=e.target.value;null==f||f(r),null==m||m(e)}),[f,m]);return(0,e.jsx)("label",{className:g,css:it.root,"data-qlib-size":$,"data-qlib-disabled":u,"data-qlib-error":b,children:(0,e.jsx)("div",{css:it.inputContainer,children:(0,e.jsx)("textarea",Object.assign({css:it.input,className:h,id:O,ref:t,value:n,name:a,rows:i,autoComplete:s,autoFocus:c,required:p,disabled:u,onChange:null!=f||null!=m?x:void 0,onBlur:y,"aria-invalid":b,"data-qlib-wrapped":d,"data-qlib-resize":l},v))})})}));lt.displayName="Textarea";const st={root:i.css`
     width: 1px;
     height: 1px;
     position: absolute;