@flavia-dev/a11y-ui-kit-react 0.1.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- ._button_1003x_2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:600;line-height:1.5;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s ease;text-decoration:none;white-space:nowrap}._button_1003x_2:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}._button_1003x_2[aria-disabled=true],._disabled_1003x_26{cursor:not-allowed;opacity:.6;pointer-events:none}._primary_1003x_33{background-color:#3b82f6;color:#fff}._primary_1003x_33:hover:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#2563eb}._primary_1003x_33:active:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#1d4ed8}._secondary_1003x_46{background-color:#64748b;color:#fff}._secondary_1003x_46:hover:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#475569}._secondary_1003x_46:active:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#334155}._danger_1003x_59{background-color:#ef4444;color:#fff}._danger_1003x_59:hover:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#dc2626}._danger_1003x_59:active:not([aria-disabled=true]):not(._disabled_1003x_26){background-color:#b91c1c}._small_1003x_73{padding:.5rem 1rem;font-size:.875rem}._medium_1003x_78{padding:.625rem 1.25rem;font-size:1rem}._large_1003x_83{padding:.75rem 1.5rem;font-size:1.125rem}._fullWidth_1003x_89{width:100%}._loading_1003x_94{pointer-events:none}._loadingContainer_1003x_98{display:inline-flex;align-items:center;gap:.5rem}._spinner_1003x_104{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:_spin_1003x_104 .75s linear infinite}@keyframes _spin_1003x_104{to{transform:rotate(360deg)}}._srOnly_1003x_121{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._inputWrapper_sim0c_2{display:inline-flex;flex-direction:column;gap:.25rem}._inputWrapper_sim0c_2._fullWidth_sim0c_8{width:100%}._label_sim0c_13{font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}._label_sim0c_13._required_sim0c_20:after{content:""}._requiredIndicator_sim0c_24{color:#dc2626;margin-left:.25rem}._input_sim0c_2{font-family:inherit;font-size:1rem;line-height:1.5;color:#1f2937;background-color:#fff;border:1px solid #6b7280;border-radius:.375rem;transition:all .2s ease;outline:none}._input_sim0c_2:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}._input_sim0c_2:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}._small_sim0c_53{padding:.375rem .75rem;font-size:.875rem}._medium_sim0c_58{padding:.5rem .875rem;font-size:1rem}._large_sim0c_63{padding:.625rem 1rem;font-size:1.125rem}._input_sim0c_2._error_sim0c_69{border-color:#dc2626}._input_sim0c_2._error_sim0c_69:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}._input_sim0c_2._disabled_sim0c_78,._input_sim0c_2:disabled{background-color:#f3f4f6;color:#6b7280;cursor:not-allowed;opacity:.8}._fullWidth_sim0c_8{width:100%}._helperText_sim0c_91,._errorText_sim0c_92{font-size:.875rem;margin-top:.25rem}._helperText_sim0c_91{color:#6b7280}._errorText_sim0c_92{color:#dc2626;font-weight:500}._visuallyHidden_sim0c_107{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
1
+ ._button_f4jhn_2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:600;line-height:1.5;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s ease;text-decoration:none;white-space:nowrap}._button_f4jhn_2:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}._button_f4jhn_2[aria-disabled=true],._disabled_f4jhn_26{cursor:not-allowed;opacity:.6;pointer-events:none}._primary_f4jhn_33{background-color:#3b82f6;color:#fff}._primary_f4jhn_33:hover:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#2563eb}._primary_f4jhn_33:active:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#1d4ed8}._secondary_f4jhn_46{background-color:#64748b;color:#fff}._secondary_f4jhn_46:hover:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#475569}._secondary_f4jhn_46:active:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#334155}._danger_f4jhn_59{background-color:#ef4444;color:#fff}._danger_f4jhn_59:hover:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#dc2626}._danger_f4jhn_59:active:not([aria-disabled=true]):not(._disabled_f4jhn_26){background-color:#b91c1c}._small_f4jhn_73{padding:.5rem 1rem;font-size:.875rem}._medium_f4jhn_78{padding:.625rem 1.25rem;font-size:1rem}._large_f4jhn_83{padding:.75rem 1.5rem;font-size:1.125rem}._fullWidth_f4jhn_89{width:100%}._loading_f4jhn_94{pointer-events:none}._loadingContainer_f4jhn_98{display:inline-flex;align-items:center;gap:.5rem}._spinner_f4jhn_104{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:_spin_f4jhn_104 .75s linear infinite}@keyframes _spin_f4jhn_104{to{transform:rotate(360deg)}}._srOnly_f4jhn_121{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._inputWrapper_kbgao_2{display:inline-flex;flex-direction:column;gap:.25rem}._inputWrapper_kbgao_2._fullWidth_kbgao_8{width:100%}._label_kbgao_13{font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}._label_kbgao_13._required_kbgao_20:after{content:""}._requiredIndicator_kbgao_24{color:#dc2626;margin-left:.25rem}._input_kbgao_2{font-family:inherit;font-size:1rem;line-height:1.5;color:#1f2937;background-color:#fff;border:1px solid #6b7280;border-radius:.375rem;transition:all .2s ease;outline:none}._input_kbgao_2:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}._input_kbgao_2:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}._small_kbgao_53{padding:.375rem .75rem;font-size:.875rem}._medium_kbgao_58{padding:.5rem .875rem;font-size:1rem}._large_kbgao_63{padding:.625rem 1rem;font-size:1.125rem}._input_kbgao_2._error_kbgao_69{border-color:#dc2626}._input_kbgao_2._error_kbgao_69:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}._input_kbgao_2._disabled_kbgao_78,._input_kbgao_2:disabled{background-color:#f3f4f6;color:#6b7280;cursor:not-allowed;opacity:.8}._fullWidth_kbgao_8{width:100%}._helperText_kbgao_91,._errorText_kbgao_92{font-size:.875rem;margin-top:.25rem}._helperText_kbgao_91{color:#6b7280}._errorText_kbgao_92{color:#dc2626;font-weight:500}._visuallyHidden_kbgao_107{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._checkboxWrapper_lv2u7_1{display:flex;flex-direction:column;gap:.25rem}._inputGroup_lv2u7_7{display:flex;align-items:center;gap:.5rem}._checkbox_lv2u7_1{appearance:none;-webkit-appearance:none;margin:0;width:1.25rem;height:1.25rem;flex-shrink:0;border:2px solid #6b7280;border-radius:.25rem;background-color:#fff;cursor:pointer;transition:all .2s ease-in-out;position:relative}._checkbox_lv2u7_1:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}._checkbox_lv2u7_1:checked{background-color:#3b82f6;border-color:#3b82f6}._checkbox_lv2u7_1:checked:after{content:"";position:absolute;left:.3rem;top:.05rem;width:.35rem;height:.7rem;border:solid #ffffff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}._checkbox_lv2u7_1._indeterminate_lv2u7_49{background-color:#3b82f6;border-color:#3b82f6}._checkbox_lv2u7_1._indeterminate_lv2u7_49:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.65rem;height:.15rem;background-color:#fff;border-radius:1px}._checkbox_lv2u7_1:not(:disabled):hover{border-color:#3b82f6}._checkbox_lv2u7_1:disabled{cursor:not-allowed;opacity:.5;background-color:#f3f4f6}._checkbox_lv2u7_1._error_lv2u7_76{border-color:#ef4444;border-width:2.5px}._checkbox_lv2u7_1._small_lv2u7_81{width:1rem;height:1rem}._checkbox_lv2u7_1._small_lv2u7_81:checked:after{left:.25rem;top:.03rem;width:.25rem;height:.5rem;border-width:0 2px 2px 0}._checkbox_lv2u7_1._large_lv2u7_94{width:1.5rem;height:1.5rem}._checkbox_lv2u7_1._large_lv2u7_94:checked:after{left:.4rem;top:.08rem;width:.45rem;height:.85rem;border-width:0 3px 3px 0}._checkbox_lv2u7_1._small_lv2u7_81._indeterminate_lv2u7_49:after{width:.5rem;height:.125rem}._checkbox_lv2u7_1._large_lv2u7_94._indeterminate_lv2u7_49:after{width:.8rem;height:.175rem}._label_lv2u7_117{font-size:1rem;line-height:1.5;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none}._label_lv2u7_117._disabled_lv2u7_125{cursor:not-allowed;opacity:.5}._requiredIndicator_lv2u7_130{color:#ef4444;font-weight:600}._helperText_lv2u7_135{font-size:.875rem;line-height:1.25rem;color:#6b7280;margin-left:1.75rem}._errorText_lv2u7_142{font-size:.875rem;line-height:1.25rem;color:#dc2626;margin-left:1.75rem;font-weight:500}
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),h=require("react"),$="_button_1003x_2",q="_disabled_1003x_26",B="_primary_1003x_33",C="_secondary_1003x_46",T="_danger_1003x_59",D="_small_1003x_73",O="_medium_1003x_78",k="_large_1003x_83",w="_fullWidth_1003x_89",H="_loading_1003x_94",R="_loadingContainer_1003x_98",K="_spinner_1003x_104",S="_spin_1003x_104",E="_srOnly_1003x_121",a={button:$,disabled:q,primary:B,secondary:C,danger:T,small:D,medium:O,large:k,fullWidth:w,loading:H,loadingContainer:R,spinner:K,spin:S,srOnly:E},j=h.forwardRef(({variant:_="primary",size:u="medium",children:m,disabled:l=!1,loading:n=!1,fullWidth:d=!1,className:p,type:r="button",onClick:c,...x},b)=>{const t=l||n,f=i=>{if(t){i.preventDefault();return}c?.(i)},y=i=>{t&&(i.key==="Enter"||i.key===" ")&&i.preventDefault()},o=[a.button,a[_],a[u],n&&a.loading,d&&a.fullWidth,t&&a.disabled,p].filter(Boolean).join(" ");return s.jsxs("button",{ref:b,type:r,className:o,"aria-disabled":t,"aria-busy":n||void 0,onClick:f,onKeyDown:y,...x,children:[n&&s.jsxs("span",{role:"status","aria-live":"polite",className:a.loadingContainer,children:[s.jsx("span",{className:a.spinner,"aria-hidden":"true"}),s.jsx("span",{className:a.srOnly,children:"Loading..."})]}),s.jsx("span",{"aria-hidden":n||void 0,children:m})]})});j.displayName="Button";const F="_inputWrapper_sim0c_2",L="_fullWidth_sim0c_8",M="_label_sim0c_13",P="_required_sim0c_20",z="_requiredIndicator_sim0c_24",A="_input_sim0c_2",G="_small_sim0c_53",J="_medium_sim0c_58",Q="_large_sim0c_63",U="_error_sim0c_69",V="_disabled_sim0c_78",X="_helperText_sim0c_91",Y="_errorText_sim0c_92",Z="_visuallyHidden_sim0c_107",e={inputWrapper:F,fullWidth:L,label:M,required:P,requiredIndicator:z,input:A,small:G,medium:J,large:Q,error:U,disabled:V,helperText:X,errorText:Y,visuallyHidden:Z},v=h.forwardRef(({label:_,type:u="text",size:m="medium",error:l,helperText:n,fullWidth:d=!1,hideLabel:p=!1,required:r=!1,disabled:c=!1,className:x,id:b,...t},f)=>{const y=h.useId(),o=b||y,i=l?`${o}-error`:void 0,g=n?`${o}-helper`:void 0,N=[i,g].filter(Boolean).join(" ")||void 0,W=[e.input,e[m],l&&e.error,c&&e.disabled,d&&e.fullWidth,x].filter(Boolean).join(" "),I=[e.label,p&&e.visuallyHidden,r&&e.required].filter(Boolean).join(" ");return s.jsxs("div",{className:`${e.inputWrapper} ${d?e.fullWidth:""}`,children:[s.jsxs("label",{htmlFor:o,className:I,children:[_,r&&s.jsx("span",{className:e.requiredIndicator,"aria-label":"required",children:" *"})]}),s.jsx("input",{ref:f,id:o,type:u,className:W,required:r,disabled:c,"aria-invalid":l?!0:void 0,"aria-describedby":N,"aria-required":r||void 0,...t}),n&&!l&&s.jsx("span",{id:g,className:e.helperText,children:n}),l&&s.jsx("span",{id:i,className:e.errorText,role:"alert",children:l})]})});v.displayName="Input";exports.Button=j;exports.Input=v;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),T="_button_f4jhn_2",q="_disabled_f4jhn_26",C="_primary_f4jhn_33",B="_secondary_f4jhn_46",R="_danger_f4jhn_59",w="_small_f4jhn_73",D="_medium_f4jhn_78",O="_large_f4jhn_83",G="_fullWidth_f4jhn_89",H="_loading_f4jhn_94",E="_loadingContainer_f4jhn_98",F="_spinner_f4jhn_104",K="_spin_f4jhn_104",S="_srOnly_f4jhn_121",d={button:T,disabled:q,primary:C,secondary:B,danger:R,small:w,medium:D,large:O,fullWidth:G,loading:H,loadingContainer:E,spinner:F,spin:K,srOnly:S},$=b.forwardRef(({variant:m="primary",size:f="medium",children:o,disabled:l=!1,loading:s=!1,fullWidth:t=!1,className:c,type:_="button",onClick:h,...x},j)=>{const u=l||s,p=r=>{if(u){r.preventDefault();return}h?.(r)},g=r=>{u&&(r.key==="Enter"||r.key===" ")&&r.preventDefault()},i=[d.button,d[m],d[f],s&&d.loading,t&&d.fullWidth,u&&d.disabled,c].filter(Boolean).join(" ");return e.jsxs("button",{ref:j,type:_,className:i,"aria-disabled":u,"aria-busy":s||void 0,onClick:p,onKeyDown:g,...x,children:[s&&e.jsxs("span",{role:"status","aria-live":"polite",className:d.loadingContainer,children:[e.jsx("span",{className:d.spinner,"aria-hidden":"true"}),e.jsx("span",{className:d.srOnly,children:"Loading..."})]}),e.jsx("span",{"aria-hidden":s||void 0,children:o})]})});$.displayName="Button";const L="_inputWrapper_kbgao_2",M="_fullWidth_kbgao_8",P="_label_kbgao_13",z="_required_kbgao_20",A="_requiredIndicator_kbgao_24",J="_input_kbgao_2",Q="_small_kbgao_53",U="_medium_kbgao_58",V="_large_kbgao_63",X="_error_kbgao_69",Y="_disabled_kbgao_78",Z="_helperText_kbgao_91",ee="_errorText_kbgao_92",se="_visuallyHidden_kbgao_107",n={inputWrapper:L,fullWidth:M,label:P,required:z,requiredIndicator:A,input:J,small:Q,medium:U,large:V,error:X,disabled:Y,helperText:Z,errorText:ee,visuallyHidden:se},I=b.forwardRef(({label:m,type:f="text",size:o="medium",error:l,helperText:s,fullWidth:t=!1,hideLabel:c=!1,required:_=!1,disabled:h=!1,className:x,id:j,...u},p)=>{const g=b.useId(),i=j||g,r=l?`${i}-error`:void 0,v=s?`${i}-helper`:void 0,k=[r,v].filter(Boolean).join(" ")||void 0,y=[n.input,n[o],l&&n.error,h&&n.disabled,t&&n.fullWidth,x].filter(Boolean).join(" "),N=[n.label,c&&n.visuallyHidden,_&&n.required].filter(Boolean).join(" ");return e.jsxs("div",{className:`${n.inputWrapper} ${t?n.fullWidth:""}`,children:[e.jsxs("label",{htmlFor:i,className:N,children:[m,_&&e.jsxs("span",{className:n.requiredIndicator,"aria-label":"required",children:[" ","*"]})]}),e.jsx("input",{ref:p,id:i,type:f,className:y,required:_,disabled:h,"aria-invalid":l?!0:void 0,"aria-describedby":k,"aria-required":_||void 0,...u}),s&&!l&&e.jsx("span",{id:v,className:n.helperText,children:s}),l&&e.jsx("span",{id:r,className:n.errorText,role:"alert",children:l})]})});I.displayName="Input";const ne="_checkboxWrapper_lv2u7_1",ae="_inputGroup_lv2u7_7",le="_checkbox_lv2u7_1",re="_indeterminate_lv2u7_49",ie="_error_lv2u7_76",oe="_small_lv2u7_81",te="_large_lv2u7_94",de="_label_lv2u7_117",ce="_disabled_lv2u7_125",_e="_requiredIndicator_lv2u7_130",ue="_helperText_lv2u7_135",pe="_errorText_lv2u7_142",a={checkboxWrapper:ne,inputGroup:ae,checkbox:le,indeterminate:re,error:ie,small:oe,large:te,label:de,disabled:ce,requiredIndicator:_e,helperText:ue,errorText:pe},W=b.forwardRef(({label:m,size:f="medium",error:o,helperText:l,disabled:s=!1,required:t=!1,indeterminate:c=!1,className:_,id:h,...x},j)=>{const u=b.useRef(null),p=j||u,g=b.useId(),i=h||g,r=o?`${i}-error`:void 0,v=l?`${i}-helper`:void 0,k=[r,v].filter(Boolean).join(" ")||void 0;b.useEffect(()=>{p.current&&(p.current.indeterminate=c)},[c,p]);const y=[a.checkbox,a[f],o&&a.error,s&&a.disabled,c&&a.indeterminate,_].filter(Boolean).join(" "),N=[a.label,s&&a.disabled,t&&a.required].filter(Boolean).join(" ");return e.jsxs("div",{className:a.checkboxWrapper,children:[e.jsxs("div",{className:a.inputGroup,children:[e.jsx("input",{ref:p,id:i,type:"checkbox",className:y,disabled:s,required:t,"aria-invalid":o?!0:void 0,"aria-describedby":k,"aria-required":t||void 0,"aria-checked":c?"mixed":void 0,...x}),e.jsxs("label",{htmlFor:i,className:N,children:[m,t&&e.jsxs("span",{className:a.requiredIndicator,"aria-label":"required",children:[" ","*"]})]})]}),l&&!o&&e.jsx("span",{id:v,className:a.helperText,children:l}),o&&e.jsx("span",{id:r,className:a.errorText,role:"alert",children:o})]})});W.displayName="Checkbox";exports.Button=$;exports.Checkbox=W;exports.Input=I;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/atoms/Button/Button.tsx","../src/atoms/Input/Input.tsx"],"sourcesContent":["// src/atoms/Button/Button.tsx\nimport React from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: \"primary\" | \"secondary\" | \"danger\";\n size?: \"small\" | \"medium\" | \"large\";\n children: React.ReactNode;\n loading?: boolean;\n fullWidth?: boolean;\n}\n\n/**\n * Accessible button component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <button> element for semantic HTML\n * - Full keyboard support (Tab, Enter, Space)\n * - Screen reader announcements for loading state\n * - Visible focus indicator\n * - Color contrast compliant\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" onClick={handleClick}>\n * Click me\n * </Button>\n *\n * <Button loading disabled>\n * Submitting...\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = \"primary\",\n size = \"medium\",\n children,\n disabled = false,\n loading = false,\n fullWidth = false,\n className,\n type = \"button\",\n onClick,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n // Handle click with disabled check (prevents action but keeps focusable)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n\n // Handle keyboard events to prevent action when disabled\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n }\n };\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n isDisabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n aria-disabled={isDisabled}\n aria-busy={loading || undefined}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <span\n role=\"status\"\n aria-live=\"polite\"\n className={styles.loadingContainer}\n >\n <span className={styles.spinner} aria-hidden=\"true\" />\n <span className={styles.srOnly}>Loading...</span>\n </span>\n )}\n <span aria-hidden={loading || undefined}>{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = \"Button\";\n","import React, { useId } from \"react\";\nimport styles from \"./Input.module.css\";\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n /**\n * Input label (required for accessibility)\n */\n label: string;\n\n /**\n * Input type\n * @default \"text\"\n */\n type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\";\n\n /**\n * Input size\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * Error message (when present, input is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n\n /**\n * Full width input\n * @default false\n */\n fullWidth?: boolean;\n\n /**\n * Hide label visually but keep it for screen readers\n * @default false\n */\n hideLabel?: boolean;\n}\n\n/**\n * Accessible Input component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input> element for semantic HTML\n * - Proper label association via htmlFor\n * - Error states with aria-invalid and aria-describedby\n * - Helper text support\n * - Visible focus indicator\n * - Required indicator\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * type=\"email\"\n * required\n * error=\"Invalid email address\"\n * helperText=\"We'll never share your email\"\n * />\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n type = \"text\",\n size = \"medium\",\n error,\n helperText,\n fullWidth = false,\n hideLabel = false,\n required = false,\n disabled = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n // Generate unique IDs for accessibility\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n // Build aria-describedby\n const describedBy = [errorId, helperTextId].filter(Boolean).join(\" \") || undefined;\n\n const inputClasses = [\n styles.input,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const labelClasses = [\n styles.label,\n hideLabel && styles.visuallyHidden,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={`${styles.inputWrapper} ${fullWidth ? styles.fullWidth : \"\"}`}>\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && <span className={styles.requiredIndicator} aria-label=\"required\"> *</span>}\n </label>\n\n <input\n ref={ref}\n id={id}\n type={type}\n className={inputClasses}\n required={required}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n {...props}\n />\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx","Input","label","error","helperText","hideLabel","required","providedId","generatedId","useId","id","errorId","helperTextId","describedBy","inputClasses","labelClasses"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/atoms/Button/Button.tsx","../src/atoms/Input/Input.tsx","../src/atoms/Checkbox/Checkbox.tsx"],"sourcesContent":["// src/atoms/Button/Button.tsx\nimport React from 'react';\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'danger';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n loading?: boolean;\n fullWidth?: boolean;\n}\n\n/**\n * Accessible button component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <button> element for semantic HTML\n * - Full keyboard support (Tab, Enter, Space)\n * - Screen reader announcements for loading state\n * - Visible focus indicator\n * - Color contrast compliant\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" onClick={handleClick}>\n * Click me\n * </Button>\n *\n * <Button loading disabled>\n * Submitting...\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'medium',\n children,\n disabled = false,\n loading = false,\n fullWidth = false,\n className,\n type = 'button',\n onClick,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n // Handle click with disabled check (prevents action but keeps focusable)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n\n // Handle keyboard events to prevent action when disabled\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n }\n };\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n isDisabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n aria-disabled={isDisabled}\n aria-busy={loading || undefined}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <span role=\"status\" aria-live=\"polite\" className={styles.loadingContainer}>\n <span className={styles.spinner} aria-hidden=\"true\" />\n <span className={styles.srOnly}>Loading...</span>\n </span>\n )}\n <span aria-hidden={loading || undefined}>{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","import React, { useId } from 'react';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * Input label (required for accessibility)\n */\n label: string;\n\n /**\n * Input type\n * @default \"text\"\n */\n type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';\n\n /**\n * Input size\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Error message (when present, input is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n\n /**\n * Full width input\n * @default false\n */\n fullWidth?: boolean;\n\n /**\n * Hide label visually but keep it for screen readers\n * @default false\n */\n hideLabel?: boolean;\n}\n\n/**\n * Accessible Input component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input> element for semantic HTML\n * - Proper label association via htmlFor\n * - Error states with aria-invalid and aria-describedby\n * - Helper text support\n * - Visible focus indicator\n * - Required indicator\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * type=\"email\"\n * required\n * error=\"Invalid email address\"\n * helperText=\"We'll never share your email\"\n * />\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n type = 'text',\n size = 'medium',\n error,\n helperText,\n fullWidth = false,\n hideLabel = false,\n required = false,\n disabled = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n // Generate unique IDs for accessibility\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n // Build aria-describedby\n const describedBy = [errorId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n const inputClasses = [\n styles.input,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const labelClasses = [\n styles.label,\n hideLabel && styles.visuallyHidden,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={`${styles.inputWrapper} ${fullWidth ? styles.fullWidth : ''}`}>\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && (\n <span className={styles.requiredIndicator} aria-label=\"required\">\n {' '}\n *\n </span>\n )}\n </label>\n\n <input\n ref={ref}\n id={id}\n type={type}\n className={inputClasses}\n required={required}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n {...props}\n />\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n","import React, { useId, useEffect, useRef } from 'react';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type'\n> {\n label: string;\n size?: 'small' | 'medium' | 'large';\n error?: string;\n helperText?: string;\n indeterminate?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n label,\n size = 'medium',\n error,\n helperText,\n disabled = false,\n required = false,\n indeterminate = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const checkboxRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const describedBy = [errorId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, checkboxRef]);\n\n const checkboxClasses = [\n styles.checkbox,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n indeterminate && styles.indeterminate,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const labelClasses = [styles.label, disabled && styles.disabled, required && styles.required]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={styles.checkboxWrapper}>\n <div className={styles.inputGroup}>\n <input\n ref={checkboxRef}\n id={id}\n type=\"checkbox\"\n className={checkboxClasses}\n disabled={disabled}\n required={required}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n aria-checked={indeterminate ? 'mixed' : undefined}\n {...props}\n />\n\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && (\n <span className={styles.requiredIndicator} aria-label=\"required\">\n {' '}\n *\n </span>\n )}\n </label>\n </div>\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx","Input","label","error","helperText","hideLabel","required","providedId","generatedId","useId","id","errorId","helperTextId","describedBy","inputClasses","labelClasses","Checkbox","indeterminate","internalRef","useRef","checkboxRef","useEffect","checkboxClasses"],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -24,13 +24,23 @@ import { default as default_2 } from 'react';
24
24
  export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
25
25
 
26
26
  export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
27
- variant?: "primary" | "secondary" | "danger";
28
- size?: "small" | "medium" | "large";
27
+ variant?: 'primary' | 'secondary' | 'danger';
28
+ size?: 'small' | 'medium' | 'large';
29
29
  children: default_2.ReactNode;
30
30
  loading?: boolean;
31
31
  fullWidth?: boolean;
32
32
  }
33
33
 
34
+ export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
35
+
36
+ export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
37
+ label: string;
38
+ size?: 'small' | 'medium' | 'large';
39
+ error?: string;
40
+ helperText?: string;
41
+ indeterminate?: boolean;
42
+ }
43
+
34
44
  /**
35
45
  * Accessible Input component following WCAG 2.1 AA standards
36
46
  *
@@ -55,7 +65,7 @@ export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTML
55
65
  */
56
66
  export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
57
67
 
58
- export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "size"> {
68
+ export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
59
69
  /**
60
70
  * Input label (required for accessibility)
61
71
  */
@@ -64,12 +74,12 @@ export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<H
64
74
  * Input type
65
75
  * @default "text"
66
76
  */
67
- type?: "text" | "email" | "password" | "tel" | "url" | "search" | "number";
77
+ type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
68
78
  /**
69
79
  * Input size
70
80
  * @default "medium"
71
81
  */
72
- size?: "small" | "medium" | "large";
82
+ size?: 'small' | 'medium' | 'large';
73
83
  /**
74
84
  * Error message (when present, input is marked as invalid)
75
85
  */
package/dist/index.js CHANGED
@@ -1,151 +1,217 @@
1
- import { jsxs as _, jsx as l } from "react/jsx-runtime";
2
- import v, { useId as $ } from "react";
3
- const C = "_button_1003x_2", q = "_disabled_1003x_26", B = "_primary_1003x_33", T = "_secondary_1003x_46", j = "_danger_1003x_59", D = "_small_1003x_73", k = "_medium_1003x_78", w = "_large_1003x_83", H = "_fullWidth_1003x_89", O = "_loading_1003x_94", R = "_loadingContainer_1003x_98", K = "_spinner_1003x_104", E = "_spin_1003x_104", F = "_srOnly_1003x_121", n = {
1
+ import { jsxs as d, jsx as c } from "react/jsx-runtime";
2
+ import $, { useId as I, useRef as W, useEffect as T } from "react";
3
+ const C = "_button_f4jhn_2", q = "_disabled_f4jhn_26", B = "_primary_f4jhn_33", R = "_secondary_f4jhn_46", w = "_danger_f4jhn_59", D = "_small_f4jhn_73", G = "_medium_f4jhn_78", H = "_large_f4jhn_83", O = "_fullWidth_f4jhn_89", E = "_loading_f4jhn_94", F = "_loadingContainer_f4jhn_98", K = "_spinner_f4jhn_104", L = "_spin_f4jhn_104", z = "_srOnly_f4jhn_121", t = {
4
4
  button: C,
5
5
  disabled: q,
6
6
  primary: B,
7
- secondary: T,
8
- danger: j,
7
+ secondary: R,
8
+ danger: w,
9
9
  small: D,
10
- medium: k,
11
- large: w,
12
- fullWidth: H,
13
- loading: O,
14
- loadingContainer: R,
10
+ medium: G,
11
+ large: H,
12
+ fullWidth: O,
13
+ loading: E,
14
+ loadingContainer: F,
15
15
  spinner: K,
16
- spin: E,
17
- srOnly: F
18
- }, L = v.forwardRef(
16
+ spin: L,
17
+ srOnly: z
18
+ }, A = $.forwardRef(
19
19
  ({
20
20
  variant: m = "primary",
21
- size: u = "medium",
22
- children: p,
23
- disabled: a = !1,
24
- loading: s = !1,
25
- fullWidth: d = !1,
26
- className: f,
27
- type: r = "button",
28
- onClick: c,
29
- ...b
30
- }, y) => {
31
- const t = a || s, h = (i) => {
32
- if (t) {
33
- i.preventDefault();
21
+ size: f = "medium",
22
+ children: o,
23
+ disabled: l = !1,
24
+ loading: e = !1,
25
+ fullWidth: i = !1,
26
+ className: _,
27
+ type: u = "button",
28
+ onClick: h,
29
+ ...v
30
+ }, g) => {
31
+ const p = l || e, b = (r) => {
32
+ if (p) {
33
+ r.preventDefault();
34
34
  return;
35
35
  }
36
- c?.(i);
37
- }, x = (i) => {
38
- t && (i.key === "Enter" || i.key === " ") && i.preventDefault();
39
- }, o = [
40
- n.button,
41
- n[m],
42
- n[u],
43
- s && n.loading,
44
- d && n.fullWidth,
45
- t && n.disabled,
46
- f
36
+ h?.(r);
37
+ }, k = (r) => {
38
+ p && (r.key === "Enter" || r.key === " ") && r.preventDefault();
39
+ }, s = [
40
+ t.button,
41
+ t[m],
42
+ t[f],
43
+ e && t.loading,
44
+ i && t.fullWidth,
45
+ p && t.disabled,
46
+ _
47
47
  ].filter(Boolean).join(" ");
48
- return /* @__PURE__ */ _(
48
+ return /* @__PURE__ */ d(
49
49
  "button",
50
50
  {
51
- ref: y,
52
- type: r,
53
- className: o,
54
- "aria-disabled": t,
55
- "aria-busy": s || void 0,
56
- onClick: h,
57
- onKeyDown: x,
58
- ...b,
51
+ ref: g,
52
+ type: u,
53
+ className: s,
54
+ "aria-disabled": p,
55
+ "aria-busy": e || void 0,
56
+ onClick: b,
57
+ onKeyDown: k,
58
+ ...v,
59
59
  children: [
60
- s && /* @__PURE__ */ _(
61
- "span",
62
- {
63
- role: "status",
64
- "aria-live": "polite",
65
- className: n.loadingContainer,
66
- children: [
67
- /* @__PURE__ */ l("span", { className: n.spinner, "aria-hidden": "true" }),
68
- /* @__PURE__ */ l("span", { className: n.srOnly, children: "Loading..." })
69
- ]
70
- }
71
- ),
72
- /* @__PURE__ */ l("span", { "aria-hidden": s || void 0, children: p })
60
+ e && /* @__PURE__ */ d("span", { role: "status", "aria-live": "polite", className: t.loadingContainer, children: [
61
+ /* @__PURE__ */ c("span", { className: t.spinner, "aria-hidden": "true" }),
62
+ /* @__PURE__ */ c("span", { className: t.srOnly, children: "Loading..." })
63
+ ] }),
64
+ /* @__PURE__ */ c("span", { "aria-hidden": e || void 0, children: o })
73
65
  ]
74
66
  }
75
67
  );
76
68
  }
77
69
  );
78
- L.displayName = "Button";
79
- const z = "_inputWrapper_sim0c_2", A = "_fullWidth_sim0c_8", G = "_label_sim0c_13", J = "_required_sim0c_20", M = "_requiredIndicator_sim0c_24", P = "_input_sim0c_2", Q = "_small_sim0c_53", S = "_medium_sim0c_58", U = "_large_sim0c_63", V = "_error_sim0c_69", X = "_disabled_sim0c_78", Y = "_helperText_sim0c_91", Z = "_errorText_sim0c_92", ee = "_visuallyHidden_sim0c_107", e = {
80
- inputWrapper: z,
81
- fullWidth: A,
82
- label: G,
83
- required: J,
84
- requiredIndicator: M,
85
- input: P,
86
- small: Q,
87
- medium: S,
88
- large: U,
89
- error: V,
90
- disabled: X,
91
- helperText: Y,
92
- errorText: Z,
93
- visuallyHidden: ee
94
- }, se = v.forwardRef(
70
+ A.displayName = "Button";
71
+ const J = "_inputWrapper_kbgao_2", M = "_fullWidth_kbgao_8", P = "_label_kbgao_13", Q = "_required_kbgao_20", S = "_requiredIndicator_kbgao_24", U = "_input_kbgao_2", V = "_small_kbgao_53", X = "_medium_kbgao_58", Y = "_large_kbgao_63", Z = "_error_kbgao_69", ee = "_disabled_kbgao_78", ae = "_helperText_kbgao_91", ne = "_errorText_kbgao_92", le = "_visuallyHidden_kbgao_107", a = {
72
+ inputWrapper: J,
73
+ fullWidth: M,
74
+ label: P,
75
+ required: Q,
76
+ requiredIndicator: S,
77
+ input: U,
78
+ small: V,
79
+ medium: X,
80
+ large: Y,
81
+ error: Z,
82
+ disabled: ee,
83
+ helperText: ae,
84
+ errorText: ne,
85
+ visuallyHidden: le
86
+ }, re = $.forwardRef(
95
87
  ({
96
88
  label: m,
97
- type: u = "text",
98
- size: p = "medium",
99
- error: a,
100
- helperText: s,
101
- fullWidth: d = !1,
102
- hideLabel: f = !1,
103
- required: r = !1,
104
- disabled: c = !1,
105
- className: b,
106
- id: y,
107
- ...t
108
- }, h) => {
109
- const x = $(), o = y || x, i = a ? `${o}-error` : void 0, g = s ? `${o}-helper` : void 0, N = [i, g].filter(Boolean).join(" ") || void 0, W = [
110
- e.input,
111
- e[p],
112
- a && e.error,
113
- c && e.disabled,
114
- d && e.fullWidth,
115
- b
116
- ].filter(Boolean).join(" "), I = [
117
- e.label,
118
- f && e.visuallyHidden,
119
- r && e.required
89
+ type: f = "text",
90
+ size: o = "medium",
91
+ error: l,
92
+ helperText: e,
93
+ fullWidth: i = !1,
94
+ hideLabel: _ = !1,
95
+ required: u = !1,
96
+ disabled: h = !1,
97
+ className: v,
98
+ id: g,
99
+ ...p
100
+ }, b) => {
101
+ const k = I(), s = g || k, r = l ? `${s}-error` : void 0, x = e ? `${s}-helper` : void 0, y = [r, x].filter(Boolean).join(" ") || void 0, j = [
102
+ a.input,
103
+ a[o],
104
+ l && a.error,
105
+ h && a.disabled,
106
+ i && a.fullWidth,
107
+ v
108
+ ].filter(Boolean).join(" "), N = [
109
+ a.label,
110
+ _ && a.visuallyHidden,
111
+ u && a.required
120
112
  ].filter(Boolean).join(" ");
121
- return /* @__PURE__ */ _("div", { className: `${e.inputWrapper} ${d ? e.fullWidth : ""}`, children: [
122
- /* @__PURE__ */ _("label", { htmlFor: o, className: I, children: [
113
+ return /* @__PURE__ */ d("div", { className: `${a.inputWrapper} ${i ? a.fullWidth : ""}`, children: [
114
+ /* @__PURE__ */ d("label", { htmlFor: s, className: N, children: [
123
115
  m,
124
- r && /* @__PURE__ */ l("span", { className: e.requiredIndicator, "aria-label": "required", children: " *" })
116
+ u && /* @__PURE__ */ d("span", { className: a.requiredIndicator, "aria-label": "required", children: [
117
+ " ",
118
+ "*"
119
+ ] })
125
120
  ] }),
126
- /* @__PURE__ */ l(
121
+ /* @__PURE__ */ c(
127
122
  "input",
128
123
  {
129
- ref: h,
130
- id: o,
131
- type: u,
132
- className: W,
133
- required: r,
134
- disabled: c,
135
- "aria-invalid": a ? !0 : void 0,
136
- "aria-describedby": N,
137
- "aria-required": r || void 0,
138
- ...t
124
+ ref: b,
125
+ id: s,
126
+ type: f,
127
+ className: j,
128
+ required: u,
129
+ disabled: h,
130
+ "aria-invalid": l ? !0 : void 0,
131
+ "aria-describedby": y,
132
+ "aria-required": u || void 0,
133
+ ...p
139
134
  }
140
135
  ),
141
- s && !a && /* @__PURE__ */ l("span", { id: g, className: e.helperText, children: s }),
142
- a && /* @__PURE__ */ l("span", { id: i, className: e.errorText, role: "alert", children: a })
136
+ e && !l && /* @__PURE__ */ c("span", { id: x, className: a.helperText, children: e }),
137
+ l && /* @__PURE__ */ c("span", { id: r, className: a.errorText, role: "alert", children: l })
143
138
  ] });
144
139
  }
145
140
  );
146
- se.displayName = "Input";
141
+ re.displayName = "Input";
142
+ const se = "_checkboxWrapper_lv2u7_1", oe = "_inputGroup_lv2u7_7", ie = "_checkbox_lv2u7_1", te = "_indeterminate_lv2u7_49", de = "_error_lv2u7_76", ce = "_small_lv2u7_81", _e = "_large_lv2u7_94", ue = "_label_lv2u7_117", pe = "_disabled_lv2u7_125", be = "_requiredIndicator_lv2u7_130", he = "_helperText_lv2u7_135", me = "_errorText_lv2u7_142", n = {
143
+ checkboxWrapper: se,
144
+ inputGroup: oe,
145
+ checkbox: ie,
146
+ indeterminate: te,
147
+ error: de,
148
+ small: ce,
149
+ large: _e,
150
+ label: ue,
151
+ disabled: pe,
152
+ requiredIndicator: be,
153
+ helperText: he,
154
+ errorText: me
155
+ }, fe = $.forwardRef(
156
+ ({
157
+ label: m,
158
+ size: f = "medium",
159
+ error: o,
160
+ helperText: l,
161
+ disabled: e = !1,
162
+ required: i = !1,
163
+ indeterminate: _ = !1,
164
+ className: u,
165
+ id: h,
166
+ ...v
167
+ }, g) => {
168
+ const p = W(null), b = g || p, k = I(), s = h || k, r = o ? `${s}-error` : void 0, x = l ? `${s}-helper` : void 0, y = [r, x].filter(Boolean).join(" ") || void 0;
169
+ T(() => {
170
+ b.current && (b.current.indeterminate = _);
171
+ }, [_, b]);
172
+ const j = [
173
+ n.checkbox,
174
+ n[f],
175
+ o && n.error,
176
+ e && n.disabled,
177
+ _ && n.indeterminate,
178
+ u
179
+ ].filter(Boolean).join(" "), N = [n.label, e && n.disabled, i && n.required].filter(Boolean).join(" ");
180
+ return /* @__PURE__ */ d("div", { className: n.checkboxWrapper, children: [
181
+ /* @__PURE__ */ d("div", { className: n.inputGroup, children: [
182
+ /* @__PURE__ */ c(
183
+ "input",
184
+ {
185
+ ref: b,
186
+ id: s,
187
+ type: "checkbox",
188
+ className: j,
189
+ disabled: e,
190
+ required: i,
191
+ "aria-invalid": o ? !0 : void 0,
192
+ "aria-describedby": y,
193
+ "aria-required": i || void 0,
194
+ "aria-checked": _ ? "mixed" : void 0,
195
+ ...v
196
+ }
197
+ ),
198
+ /* @__PURE__ */ d("label", { htmlFor: s, className: N, children: [
199
+ m,
200
+ i && /* @__PURE__ */ d("span", { className: n.requiredIndicator, "aria-label": "required", children: [
201
+ " ",
202
+ "*"
203
+ ] })
204
+ ] })
205
+ ] }),
206
+ l && !o && /* @__PURE__ */ c("span", { id: x, className: n.helperText, children: l }),
207
+ o && /* @__PURE__ */ c("span", { id: r, className: n.errorText, role: "alert", children: o })
208
+ ] });
209
+ }
210
+ );
211
+ fe.displayName = "Checkbox";
147
212
  export {
148
- L as Button,
149
- se as Input
213
+ A as Button,
214
+ fe as Checkbox,
215
+ re as Input
150
216
  };
151
217
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/atoms/Button/Button.tsx","../src/atoms/Input/Input.tsx"],"sourcesContent":["// src/atoms/Button/Button.tsx\nimport React from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: \"primary\" | \"secondary\" | \"danger\";\n size?: \"small\" | \"medium\" | \"large\";\n children: React.ReactNode;\n loading?: boolean;\n fullWidth?: boolean;\n}\n\n/**\n * Accessible button component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <button> element for semantic HTML\n * - Full keyboard support (Tab, Enter, Space)\n * - Screen reader announcements for loading state\n * - Visible focus indicator\n * - Color contrast compliant\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" onClick={handleClick}>\n * Click me\n * </Button>\n *\n * <Button loading disabled>\n * Submitting...\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = \"primary\",\n size = \"medium\",\n children,\n disabled = false,\n loading = false,\n fullWidth = false,\n className,\n type = \"button\",\n onClick,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n // Handle click with disabled check (prevents action but keeps focusable)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n\n // Handle keyboard events to prevent action when disabled\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n }\n };\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n isDisabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n aria-disabled={isDisabled}\n aria-busy={loading || undefined}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <span\n role=\"status\"\n aria-live=\"polite\"\n className={styles.loadingContainer}\n >\n <span className={styles.spinner} aria-hidden=\"true\" />\n <span className={styles.srOnly}>Loading...</span>\n </span>\n )}\n <span aria-hidden={loading || undefined}>{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = \"Button\";\n","import React, { useId } from \"react\";\nimport styles from \"./Input.module.css\";\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n /**\n * Input label (required for accessibility)\n */\n label: string;\n\n /**\n * Input type\n * @default \"text\"\n */\n type?: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\";\n\n /**\n * Input size\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * Error message (when present, input is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n\n /**\n * Full width input\n * @default false\n */\n fullWidth?: boolean;\n\n /**\n * Hide label visually but keep it for screen readers\n * @default false\n */\n hideLabel?: boolean;\n}\n\n/**\n * Accessible Input component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input> element for semantic HTML\n * - Proper label association via htmlFor\n * - Error states with aria-invalid and aria-describedby\n * - Helper text support\n * - Visible focus indicator\n * - Required indicator\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * type=\"email\"\n * required\n * error=\"Invalid email address\"\n * helperText=\"We'll never share your email\"\n * />\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n type = \"text\",\n size = \"medium\",\n error,\n helperText,\n fullWidth = false,\n hideLabel = false,\n required = false,\n disabled = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n // Generate unique IDs for accessibility\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n // Build aria-describedby\n const describedBy = [errorId, helperTextId].filter(Boolean).join(\" \") || undefined;\n\n const inputClasses = [\n styles.input,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const labelClasses = [\n styles.label,\n hideLabel && styles.visuallyHidden,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={`${styles.inputWrapper} ${fullWidth ? styles.fullWidth : \"\"}`}>\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && <span className={styles.requiredIndicator} aria-label=\"required\"> *</span>}\n </label>\n\n <input\n ref={ref}\n id={id}\n type={type}\n className={inputClasses}\n required={required}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n {...props}\n />\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx","Input","label","error","helperText","hideLabel","required","providedId","generatedId","useId","id","errorId","helperTextId","describedBy","inputClasses","labelClasses"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/atoms/Button/Button.tsx","../src/atoms/Input/Input.tsx","../src/atoms/Checkbox/Checkbox.tsx"],"sourcesContent":["// src/atoms/Button/Button.tsx\nimport React from 'react';\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'danger';\n size?: 'small' | 'medium' | 'large';\n children: React.ReactNode;\n loading?: boolean;\n fullWidth?: boolean;\n}\n\n/**\n * Accessible button component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <button> element for semantic HTML\n * - Full keyboard support (Tab, Enter, Space)\n * - Screen reader announcements for loading state\n * - Visible focus indicator\n * - Color contrast compliant\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" onClick={handleClick}>\n * Click me\n * </Button>\n *\n * <Button loading disabled>\n * Submitting...\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n variant = 'primary',\n size = 'medium',\n children,\n disabled = false,\n loading = false,\n fullWidth = false,\n className,\n type = 'button',\n onClick,\n ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n // Handle click with disabled check (prevents action but keeps focusable)\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n\n // Handle keyboard events to prevent action when disabled\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n }\n };\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n isDisabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n aria-disabled={isDisabled}\n aria-busy={loading || undefined}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n {...props}\n >\n {loading && (\n <span role=\"status\" aria-live=\"polite\" className={styles.loadingContainer}>\n <span className={styles.spinner} aria-hidden=\"true\" />\n <span className={styles.srOnly}>Loading...</span>\n </span>\n )}\n <span aria-hidden={loading || undefined}>{children}</span>\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n","import React, { useId } from 'react';\nimport styles from './Input.module.css';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * Input label (required for accessibility)\n */\n label: string;\n\n /**\n * Input type\n * @default \"text\"\n */\n type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';\n\n /**\n * Input size\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Error message (when present, input is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n\n /**\n * Full width input\n * @default false\n */\n fullWidth?: boolean;\n\n /**\n * Hide label visually but keep it for screen readers\n * @default false\n */\n hideLabel?: boolean;\n}\n\n/**\n * Accessible Input component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input> element for semantic HTML\n * - Proper label association via htmlFor\n * - Error states with aria-invalid and aria-describedby\n * - Helper text support\n * - Visible focus indicator\n * - Required indicator\n *\n * @example\n * ```tsx\n * <Input\n * label=\"Email\"\n * type=\"email\"\n * required\n * error=\"Invalid email address\"\n * helperText=\"We'll never share your email\"\n * />\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n label,\n type = 'text',\n size = 'medium',\n error,\n helperText,\n fullWidth = false,\n hideLabel = false,\n required = false,\n disabled = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n // Generate unique IDs for accessibility\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n // Build aria-describedby\n const describedBy = [errorId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n const inputClasses = [\n styles.input,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const labelClasses = [\n styles.label,\n hideLabel && styles.visuallyHidden,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={`${styles.inputWrapper} ${fullWidth ? styles.fullWidth : ''}`}>\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && (\n <span className={styles.requiredIndicator} aria-label=\"required\">\n {' '}\n *\n </span>\n )}\n </label>\n\n <input\n ref={ref}\n id={id}\n type={type}\n className={inputClasses}\n required={required}\n disabled={disabled}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n {...props}\n />\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n","import React, { useId, useEffect, useRef } from 'react';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'type'\n> {\n label: string;\n size?: 'small' | 'medium' | 'large';\n error?: string;\n helperText?: string;\n indeterminate?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n label,\n size = 'medium',\n error,\n helperText,\n disabled = false,\n required = false,\n indeterminate = false,\n className,\n id: providedId,\n ...props\n },\n ref\n ) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const checkboxRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n const generatedId = useId();\n const id = providedId || generatedId;\n const errorId = error ? `${id}-error` : undefined;\n const helperTextId = helperText ? `${id}-helper` : undefined;\n\n const describedBy = [errorId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, checkboxRef]);\n\n const checkboxClasses = [\n styles.checkbox,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n indeterminate && styles.indeterminate,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const labelClasses = [styles.label, disabled && styles.disabled, required && styles.required]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={styles.checkboxWrapper}>\n <div className={styles.inputGroup}>\n <input\n ref={checkboxRef}\n id={id}\n type=\"checkbox\"\n className={checkboxClasses}\n disabled={disabled}\n required={required}\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n aria-required={required || undefined}\n aria-checked={indeterminate ? 'mixed' : undefined}\n {...props}\n />\n\n <label htmlFor={id} className={labelClasses}>\n {label}\n {required && (\n <span className={styles.requiredIndicator} aria-label=\"required\">\n {' '}\n *\n </span>\n )}\n </label>\n </div>\n\n {helperText && !error && (\n <span id={helperTextId} className={styles.helperText}>\n {helperText}\n </span>\n )}\n\n {error && (\n <span id={errorId} className={styles.errorText} role=\"alert\">\n {error}\n </span>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx","Input","label","error","helperText","hideLabel","required","providedId","generatedId","useId","id","errorId","helperTextId","describedBy","inputClasses","labelClasses","Checkbox","indeterminate","internalRef","useRef","checkboxRef","useEffect","checkboxClasses"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flavia-dev/a11y-ui-kit-react",
3
- "version": "0.1.5",
3
+ "version": "0.2.0",
4
4
  "description": "Enterprise-grade accessible React components library following WCAG 2.1 AA/AAA standards. Production-ready, type-safe, and fully customizable UI components with built-in accessibility.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -22,10 +22,9 @@
22
22
  "build": "tsc && vite build",
23
23
  "test": "vitest run",
24
24
  "test:watch": "vitest",
25
- "test:unit": "vitest run --reporter=verbose \"src/atoms/**/*.utils.test.ts\"",
26
- "test:component": "vitest run --reporter=verbose --run src/atoms/Input/Input.test.tsx src/atoms/Button/Button.test.tsx",
27
- "test:a11y": "vitest run --reporter=verbose --run src/atoms/Input/Input.a11y.test.tsx src/atoms/Button/Button.a11y.test.tsx",
28
- "test:contrast": "vitest run --reporter=verbose --run src/test/color-contrast.test.ts",
25
+ "test:unit": "vitest run --reporter=verbose src --exclude=\"src/**/*.a11y.test.tsx\"",
26
+ "test:a11y": "vitest run --reporter=verbose src/atoms/Button/Button.a11y.test.tsx src/atoms/Input/Input.a11y.test.tsx src/atoms/Checkbox/Checkbox.a11y.test.tsx src/atoms/Radio/Radio.a11y.test.tsx src/atoms/Icon/Icon.a11y.test.tsx",
27
+ "test:e2e": "playwright test tests/e2e",
29
28
  "test:coverage": "vitest run --coverage",
30
29
  "test:ui": "vitest --ui",
31
30
  "test:visual": "playwright test tests/visual",
@@ -35,14 +34,22 @@
35
34
  "test:visual:input": "playwright test tests/visual/Input.visual.test.ts",
36
35
  "test:visual:button:update": "playwright test tests/visual/Button.visual.test.ts --update-snapshots",
37
36
  "test:visual:input:update": "playwright test tests/visual/Input.visual.test.ts --update-snapshots",
38
- "test:e2e": "playwright test tests/e2e",
39
37
  "test:e2e:button": "playwright test tests/e2e/Button.e2e.test.ts",
40
38
  "test:e2e:input": "playwright test tests/e2e/Input.e2e.test.ts",
39
+ "test:e2e:radio": "playwright test tests/e2e/Radio.e2e.test.ts",
40
+ "test:e2e:checkbox": "playwright test tests/e2e/Checkbox.e2e.test.ts",
41
+ "test:e2e:icon": "playwright test tests/e2e/Icon.e2e.test.ts",
41
42
  "test:e2e:ui": "playwright test tests/e2e --ui",
42
43
  "test:playwright": "playwright test",
43
44
  "storybook": "storybook dev -p 6006",
44
45
  "build-storybook": "storybook build",
45
- "typecheck": "tsc --noEmit"
46
+ "typecheck": "tsc --noEmit",
47
+ "lint": "eslint src --ext .ts,.tsx",
48
+ "lint:fix": "eslint src --ext .ts,.tsx --fix",
49
+ "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
50
+ "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
51
+ "prepublishOnly": "npm run typecheck && npm run build",
52
+ "prepare": "husky"
46
53
  },
47
54
  "keywords": [
48
55
  "react",
@@ -54,7 +61,7 @@
54
61
  "button",
55
62
  "typescript"
56
63
  ],
57
- "author": "Your Name <your.email@example.com>",
64
+ "author": "Flavia",
58
65
  "license": "MIT",
59
66
  "repository": {
60
67
  "type": "git",
@@ -70,6 +77,8 @@
70
77
  },
71
78
  "devDependencies": {
72
79
  "@axe-core/react": "^4.11.0",
80
+ "@eslint/eslintrc": "^3.3.3",
81
+ "@eslint/js": "^9.39.2",
73
82
  "@playwright/test": "^1.57.0",
74
83
  "@storybook/addon-a11y": "^8.6.14",
75
84
  "@storybook/addon-essentials": "^8.6.14",
@@ -84,17 +93,41 @@
84
93
  "@types/node": "^25.0.2",
85
94
  "@types/react": "^19.2.7",
86
95
  "@types/react-dom": "^19.2.3",
96
+ "@typescript-eslint/eslint-plugin": "^8.53.1",
97
+ "@typescript-eslint/parser": "^8.53.1",
87
98
  "@vitejs/plugin-react": "^5.1.2",
88
99
  "@vitest/ui": "^4.0.15",
89
100
  "axe-core": "^4.11.0",
101
+ "eslint": "^9.39.2",
102
+ "eslint-config-prettier": "^10.1.8",
103
+ "eslint-plugin-jsx-a11y": "^6.10.2",
104
+ "eslint-plugin-react": "^7.37.5",
105
+ "eslint-plugin-react-hooks": "^7.0.1",
106
+ "eslint-plugin-react-refresh": "^0.4.26",
107
+ "husky": "^9.1.7",
90
108
  "jest-axe": "^10.0.0",
91
109
  "jsdom": "^27.3.0",
110
+ "lint-staged": "^16.2.7",
111
+ "prettier": "^3.8.0",
92
112
  "react": "^19.2.3",
93
113
  "react-dom": "^19.2.3",
94
114
  "storybook": "^8.6.14",
95
115
  "typescript": "^5.9.3",
116
+ "typescript-eslint": "^8.53.1",
96
117
  "vite": "^7.3.0",
97
118
  "vite-plugin-dts": "^4.5.4",
98
119
  "vitest": "^4.0.15"
120
+ },
121
+ "lint-staged": {
122
+ "src/**/*.{ts,tsx}": [
123
+ "prettier --write",
124
+ "eslint --fix"
125
+ ],
126
+ "src/**/*.css": [
127
+ "prettier --write"
128
+ ]
129
+ },
130
+ "dependencies": {
131
+ "lucide-react": "^0.562.0"
99
132
  }
100
133
  }