@fpkit/acss 4.1.0 → 5.0.0

package/libs/index.d.cts

@@ -1,8 +1,8 @@
 export { Button, ButtonProps } from './components/button.cjs';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.cjs';
 import React$1, { ReactNode } from 'react';
-import { I as IconProps } from './icons-952d9bc5.js';
-export { a as Icon, b as IconProps } from './icons-952d9bc5.js';
+import { I as IconProps } from './icons-df8e744f.js';
+export { a as Icon, b as IconProps } from './icons-df8e744f.js';
 export { default as Field, FieldProps } from './components/form/fields.cjs';
 export { default as Input } from './components/form/inputs.cjs';
 import { I as InputProps } from './form.types-d25ebfac.js';

package/libs/index.d.ts

@@ -1,8 +1,8 @@
 export { Button, ButtonProps } from './components/button.js';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
 import React$1, { ReactNode } from 'react';
-import { I as IconProps } from './icons-952d9bc5.js';
-export { a as Icon, b as IconProps } from './icons-952d9bc5.js';
+import { I as IconProps } from './icons-df8e744f.js';
+export { a as Icon, b as IconProps } from './icons-df8e744f.js';
 export { default as Field, FieldProps } from './components/form/fields.js';
 export { default as Input } from './components/form/inputs.js';
 import { I as InputProps } from './form.types-d25ebfac.js';

package/libs/index.js

@@ -26,7 +26,7 @@ import { a } from './chunk-DDSXKOUB.js';
 export { a as UI } from './chunk-DDSXKOUB.js';
 import C, { useCallback, useMemo, useState, useEffect } from 'react';
 
-var _e={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},O=({severity:e})=>{let t=_e[e];return t?C.createElement("span",{className:"sr-only"},t):null};var qe=(e,t)=>({info:C.createElement(b$1.InfoSolid,{...t}),success:C.createElement(b$1.SuccessSolid,{...t}),warning:C.createElement(b$1.WarnSolid,{...t}),error:C.createElement(b$1.AlertSolid,{...t}),default:C.createElement(b$1.AlertSquareSolid,{...t})})[e],_=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=qe(e,t);return C.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var q=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return C.createElement(a,{as:o,className:"alert-title"},e)};var W=({children:e,contentType:t})=>t==="node"?C.createElement(C.Fragment,null,e):C.createElement(a,{as:"p"},e);var K=({actions:e})=>e?C.createElement(a,{as:"div",className:"alert-actions"},e):null;var oe=C.memo(({onDismiss:e,iconSize:t=16})=>C.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},C.createElement(b$1,null,C.createElement(b$1.Close,{size:t})))),se=oe;oe.displayName="DismissButton";var Ke={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},R=C.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:i,onInteractionEnd:a$1,autoFocus:l,title:c,titleLevel:y,children:u,contentType:f,actions:S,hideIcon:g,iconProps:v,...m},x)=>C.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Ke[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:i,onMouseLeave:a$1,onFocus:i,onBlur:a$1,...m},C.createElement(O,{severity:e}),C.createElement(_,{severity:e,iconProps:v,hideIcon:g}),C.createElement(a,{as:"div",className:"alert-message"},C.createElement(q,{title:c,titleLevel:y}),C.createElement(W,{contentType:f},u),C.createElement(K,{actions:S})),s&&C.createElement(se,{onDismiss:r})));R.displayName="AlertView";var Xe=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:i,alertRef:a})=>{let[l,c]=C.useState(e),[y,u]=C.useState(e),[f,S]=C.useState(!1),g=C.useCallback(()=>{c(!1),setTimeout(()=>{u(!1),t?.();},300);},[t]);C.useEffect(()=>{e?(u(!0),c(!0)):c(!1);},[e]),C.useEffect(()=>{if(!s||!l||f)return;let x=setTimeout(()=>{g();},s);return ()=>clearTimeout(x)},[s,l,f,g]),C.useEffect(()=>{if(!o||!l)return;let x=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,l,g]),C.useEffect(()=>{i&&l&&a.current&&a.current.focus();},[i,l,a]);let v=C.useCallback(()=>{r&&s&&S(!0);},[r,s]),m=C.useCallback(()=>{r&&s&&S(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:v,handleInteractionEnd:m}},re=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:i,iconSize:a,iconProps:l,hideIcon:c,autoHideDuration:y,pauseOnHover:u=!0,titleLevel:f=3,actions:S,autoFocus:g=!1,variant:v="outlined",contentType:m="text",...x})=>{let h=C.useRef(null),{isVisible:p,shouldRender:d,handleDismiss:k,handleInteractionStart:I,handleInteractionEnd:U}=Xe({open:e,onDismiss:i,dismissible:r,autoHideDuration:y,pauseOnHover:u,autoFocus:g,alertRef:h});if(!d)return null;let A={size:a||16,...l};return C.createElement(R,{ref:h,severity:t,variant:v,isVisible:p,dismissible:r,onDismiss:k,onInteractionStart:I,onInteractionEnd:U,autoFocus:g,title:s,titleLevel:f,contentType:m,actions:S,hideIcon:c,iconProps:A,...x},o)};re.displayName="Alert";var ne=C.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:i,classes:a,inputClasses:l,styles:c,name:y,disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onBlur:m,onFocus:x,autoFocus:h,...p},d)=>{let k=C.useCallback(ke=>{i?.(ke.target.checked);},[i]),I=o!==void 0,U=I?{checked:o}:{},A=!I&&s!==void 0?{defaultChecked:s}:{},j=C.useRef(I);return C.useEffect(()=>{process.env.NODE_ENV==="development"&&(j.current!==I&&console.warn(`Checkbox with id="${e}" is changing from ${j.current?"controlled":"uncontrolled"} to ${I?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),j.current=I);},[I,e]),C.createElement("div",{className:a,style:c},C.createElement(a$1,{ref:d,type:"checkbox",id:e,name:y,value:r,...U,...A,classes:l||"checkbox-input",disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onChange:k,onBlur:m,onFocus:x,autoFocus:h,...p}),C.createElement("label",{htmlFor:e,className:"checkbox-label"},t,f&&C.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});ne.displayName="Checkbox";var ie=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:i="lazy",placeholder:a$1,fetchpriority:l="low",decoding:c="auto",srcSet:y,sizes:u,onError:f,onLoad:S,...g})=>{let v=useMemo(()=>{let p=typeof o=="number"?o:480,d=typeof s=="number"?s:Math.round(p*.75),k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${p} ${d}">
+var _e={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},O=({severity:e})=>{let t=_e[e];return t?C.createElement("span",{className:"sr-only"},t):null};var qe=(e,t)=>({info:C.createElement(b$1.InfoSolid,{...t}),success:C.createElement(b$1.SuccessSolid,{...t}),warning:C.createElement(b$1.WarnSolid,{...t}),error:C.createElement(b$1.AlertSolid,{...t}),default:C.createElement(b$1.AlertSquareSolid,{...t})})[e],_=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=qe(e,t);return C.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var q=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return C.createElement(a,{as:o,className:"alert-title"},e)};var W=({children:e,contentType:t})=>t==="node"?C.createElement(C.Fragment,null,e):C.createElement(a,{as:"p"},e);var K=({actions:e})=>e?C.createElement(a,{as:"div",className:"alert-actions"},e):null;var oe=C.memo(({onDismiss:e,iconSize:t=16})=>C.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},C.createElement(b$1,null,C.createElement(b$1.Close,{size:t})))),se=oe;oe.displayName="DismissButton";var Ke={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},R=C.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:i,onInteractionEnd:a$1,autoFocus:l,title:c,titleLevel:y,children:u,contentType:f,actions:S,hideIcon:g,iconProps:v,...m},x)=>C.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Ke[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:i,onMouseLeave:a$1,onFocus:i,onBlur:a$1,...m},C.createElement(O,{severity:e}),C.createElement(_,{severity:e,iconProps:v,hideIcon:g}),C.createElement(a,{as:"div",classes:"alert-message"},C.createElement(q,{title:c,titleLevel:y}),C.createElement(W,{contentType:f},u),C.createElement(K,{actions:S})),s&&C.createElement(se,{onDismiss:r})));R.displayName="AlertView";var Xe=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:i,alertRef:a})=>{let[l,c]=C.useState(e),[y,u]=C.useState(e),[f,S]=C.useState(!1),g=C.useCallback(()=>{c(!1),setTimeout(()=>{u(!1),t?.();},300);},[t]);C.useEffect(()=>{e?(u(!0),c(!0)):c(!1);},[e]),C.useEffect(()=>{if(!s||!l||f)return;let x=setTimeout(()=>{g();},s);return ()=>clearTimeout(x)},[s,l,f,g]),C.useEffect(()=>{if(!o||!l)return;let x=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,l,g]),C.useEffect(()=>{i&&l&&a.current&&a.current.focus();},[i,l,a]);let v=C.useCallback(()=>{r&&s&&S(!0);},[r,s]),m=C.useCallback(()=>{r&&s&&S(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:v,handleInteractionEnd:m}},re=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:i,iconSize:a,iconProps:l,hideIcon:c,autoHideDuration:y,pauseOnHover:u=!0,titleLevel:f=3,actions:S,autoFocus:g=!1,variant:v="outlined",contentType:m="text",...x})=>{let h=C.useRef(null),{isVisible:p,shouldRender:d,handleDismiss:k,handleInteractionStart:I,handleInteractionEnd:U}=Xe({open:e,onDismiss:i,dismissible:r,autoHideDuration:y,pauseOnHover:u,autoFocus:g,alertRef:h});if(!d)return null;let A={size:a||16,...l};return C.createElement(R,{ref:h,severity:t,variant:v,isVisible:p,dismissible:r,onDismiss:k,onInteractionStart:I,onInteractionEnd:U,autoFocus:g,title:s,titleLevel:f,contentType:m,actions:S,hideIcon:c,iconProps:A,...x},o)};re.displayName="Alert";var ne=C.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:i,classes:a,inputClasses:l,styles:c,name:y,disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onBlur:m,onFocus:x,autoFocus:h,...p},d)=>{let k=C.useCallback(ke=>{i?.(ke.target.checked);},[i]),I=o!==void 0,U=I?{checked:o}:{},A=!I&&s!==void 0?{defaultChecked:s}:{},j=C.useRef(I);return C.useEffect(()=>{process.env.NODE_ENV==="development"&&(j.current!==I&&console.warn(`Checkbox with id="${e}" is changing from ${j.current?"controlled":"uncontrolled"} to ${I?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),j.current=I);},[I,e]),C.createElement("div",{className:a,style:c},C.createElement(a$1,{ref:d,type:"checkbox",id:e,name:y,value:r,...U,...A,classes:l||"checkbox-input",disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onChange:k,onBlur:m,onFocus:x,autoFocus:h,...p}),C.createElement("label",{htmlFor:e,className:"checkbox-label"},t,f&&C.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});ne.displayName="Checkbox";var ie=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:i="lazy",placeholder:a$1,fetchpriority:l="low",decoding:c="auto",srcSet:y,sizes:u,onError:f,onLoad:S,...g})=>{let v=useMemo(()=>{let p=typeof o=="number"?o:480,d=typeof s=="number"?s:Math.round(p*.75),k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${p} ${d}">
       <defs>
         <linearGradient id="grad-${p}-${d}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />