@flavia-dev/a11y-ui-kit-react 0.1.4 → 0.1.6

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.
Files changed (7) hide show
  1. package/dist/a11y-ui-kit-react.css +1 -1
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +46 -0
  5. package/dist/index.js +171 -104
  6. package/dist/index.js.map +1 -1
  7. package/package.json +100 -100
package/dist/a11y-ui-kit-react.css CHANGED
@@ -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_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}._checkboxWrapper_8c7eh_2{display:flex;flex-direction:column;gap:.25rem}._inputGroup_8c7eh_9{display:flex;align-items:center;gap:.5rem}._checkbox_8c7eh_2{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_8c7eh_2:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}._checkbox_8c7eh_2:checked{background-color:#3b82f6;border-color:#3b82f6}._checkbox_8c7eh_2: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_8c7eh_2:not(:disabled):hover{border-color:#3b82f6}._checkbox_8c7eh_2:disabled{cursor:not-allowed;opacity:.5;background-color:#f3f4f6}._checkbox_8c7eh_2._error_8c7eh_69{border-color:#ef4444;border-width:2.5px}._checkbox_8c7eh_2._small_8c7eh_75{width:1rem;height:1rem}._checkbox_8c7eh_2._small_8c7eh_75:checked:after{left:.25rem;top:.03rem;width:.25rem;height:.5rem;border-width:0 2px 2px 0}._checkbox_8c7eh_2._large_8c7eh_88{width:1.5rem;height:1.5rem}._checkbox_8c7eh_2._large_8c7eh_88:checked:after{left:.4rem;top:.08rem;width:.45rem;height:.85rem;border-width:0 3px 3px 0}._label_8c7eh_102{font-size:1rem;line-height:1.5;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none}._label_8c7eh_102._disabled_8c7eh_110{cursor:not-allowed;opacity:.5}._requiredIndicator_8c7eh_116{color:#ef4444;font-weight:600}._helperText_8c7eh_122{font-size:.875rem;line-height:1.25rem;color:#6b7280;margin-left:1.75rem}._errorText_8c7eh_130{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"),j=require("react"),T="_button_1003x_2",q="_disabled_1003x_26",C="_primary_1003x_33",B="_secondary_1003x_46",w="_danger_1003x_59",D="_small_1003x_73",O="_medium_1003x_78",R="_large_1003x_83",G="_fullWidth_1003x_89",H="_loading_1003x_94",F="_loadingContainer_1003x_98",K="_spinner_1003x_104",S="_spin_1003x_104",E="_srOnly_1003x_121",c={button:T,disabled:q,primary:C,secondary:B,danger:w,small:D,medium:O,large:R,fullWidth:G,loading:H,loadingContainer:F,spinner:K,spin:S,srOnly:E},g=j.forwardRef(({variant:x="primary",size:h="medium",children:t,disabled:r=!1,loading:s=!1,fullWidth:o=!1,className:b,type:d="button",onClick:u,...f},y)=>{const n=r||s,p=l=>{if(n){l.preventDefault();return}u?.(l)},m=l=>{n&&(l.key==="Enter"||l.key===" ")&&l.preventDefault()},_=[c.button,c[x],c[h],s&&c.loading,o&&c.fullWidth,n&&c.disabled,b].filter(Boolean).join(" ");return e.jsxs("button",{ref:y,type:d,className:_,"aria-disabled":n,"aria-busy":s||void 0,onClick:p,onKeyDown:m,...f,children:[s&&e.jsxs("span",{role:"status","aria-live":"polite",className:c.loadingContainer,children:[e.jsx("span",{className:c.spinner,"aria-hidden":"true"}),e.jsx("span",{className:c.srOnly,children:"Loading..."})]}),e.jsx("span",{"aria-hidden":s||void 0,children:t})]})});g.displayName="Button";const L="_inputWrapper_sim0c_2",M="_fullWidth_sim0c_8",P="_label_sim0c_13",z="_required_sim0c_20",A="_requiredIndicator_sim0c_24",J="_input_sim0c_2",Q="_small_sim0c_53",U="_medium_sim0c_58",V="_large_sim0c_63",X="_error_sim0c_69",Y="_disabled_sim0c_78",Z="_helperText_sim0c_91",ee="_errorText_sim0c_92",se="_visuallyHidden_sim0c_107",a={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},N=j.forwardRef(({label:x,type:h="text",size:t="medium",error:r,helperText:s,fullWidth:o=!1,hideLabel:b=!1,required:d=!1,disabled:u=!1,className:f,id:y,...n},p)=>{const m=j.useId(),_=y||m,l=r?`${_}-error`:void 0,v=s?`${_}-helper`:void 0,I=[l,v].filter(Boolean).join(" ")||void 0,k=[a.input,a[t],r&&a.error,u&&a.disabled,o&&a.fullWidth,f].filter(Boolean).join(" "),W=[a.label,b&&a.visuallyHidden,d&&a.required].filter(Boolean).join(" ");return e.jsxs("div",{className:`${a.inputWrapper} ${o?a.fullWidth:""}`,children:[e.jsxs("label",{htmlFor:_,className:W,children:[x,d&&e.jsx("span",{className:a.requiredIndicator,"aria-label":"required",children:" *"})]}),e.jsx("input",{ref:p,id:_,type:h,className:k,required:d,disabled:u,"aria-invalid":r?!0:void 0,"aria-describedby":I,"aria-required":d||void 0,...n}),s&&!r&&e.jsx("span",{id:v,className:a.helperText,children:s}),r&&e.jsx("span",{id:l,className:a.errorText,role:"alert",children:r})]})});N.displayName="Input";const ae="_checkboxWrapper_8c7eh_2",re="_inputGroup_8c7eh_9",ie="_checkbox_8c7eh_2",ne="_error_8c7eh_69",le="_small_8c7eh_75",te="_large_8c7eh_88",oe="_label_8c7eh_102",ce="_disabled_8c7eh_110",de="_requiredIndicator_8c7eh_116",_e="_helperText_8c7eh_122",ue="_errorText_8c7eh_130",i={checkboxWrapper:ae,inputGroup:re,checkbox:ie,error:ne,small:le,large:te,label:oe,disabled:ce,requiredIndicator:de,helperText:_e,errorText:ue},$=j.forwardRef(({label:x,size:h="medium",error:t,helperText:r,disabled:s=!1,required:o=!1,className:b,id:d,...u},f)=>{const y=j.useId(),n=d||y,p=t?`${n}-error`:void 0,m=r?`${n}-helper`:void 0,_=[p,m].filter(Boolean).join(" ")||void 0,l=[i.checkbox,i[h],t&&i.error,s&&i.disabled,b].filter(Boolean).join(" "),v=[i.label,s&&i.disabled,o&&i.required].filter(Boolean).join(" ");return e.jsxs("div",{className:i.checkboxWrapper,children:[e.jsxs("div",{className:i.inputGroup,children:[e.jsx("input",{ref:f,id:n,type:"checkbox",className:l,disabled:s,required:o,"aria-invalid":t?!0:void 0,"aria-describedby":_,"aria-required":o||void 0,...u}),e.jsxs("label",{htmlFor:n,className:v,children:[x,o&&e.jsxs("span",{className:i.requiredIndicator,"aria-label":"required",children:[" ","*"]})]})]}),r&&!t&&e.jsx("span",{id:m,className:i.helperText,children:r}),t&&e.jsx("span",{id:p,className:i.errorText,role:"alert",children:t})]})});$.displayName="Checkbox";exports.Button=g;exports.Checkbox=$;exports.Input=N;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -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\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","import React, { useId } from \"react\";\nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n /**\n * Checkbox label (required for accessibility)\n */\n label: string;\n\n /**\n * Checkbox size\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * Error message (when present, checkbox is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n}\n\n/**\n * Accessible Checkbox component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input type=\"checkbox\"> element for semantic HTML\n * - Proper label association via htmlFor\n * - Space key toggles checked state (native behavior)\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 * <Checkbox label=\"I agree to terms\" required />\n *\n * <Checkbox\n * label=\"Subscribe to newsletter\"\n * checked={isChecked}\n * onChange={(e) => setIsChecked(e.target.checked)}\n * error=\"This field is required\"\n * />\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 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 =\n [errorId, helperTextId].filter(Boolean).join(\" \") || undefined;\n\n const checkboxClasses = [\n styles.checkbox,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const labelClasses = [\n styles.label,\n disabled && styles.disabled,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={styles.checkboxWrapper}>\n <div className={styles.inputGroup}>\n <input\n ref={ref}\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 {...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","checkboxClasses"],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -31,6 +31,52 @@ export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTML
31
31
  fullWidth?: boolean;
32
32
  }
33
33
 
34
+ /**
35
+ * Accessible Checkbox component following WCAG 2.1 AA standards
36
+ *
37
+ * Features:
38
+ * - Native <input type="checkbox"> element for semantic HTML
39
+ * - Proper label association via htmlFor
40
+ * - Space key toggles checked state (native behavior)
41
+ * - Error states with aria-invalid and aria-describedby
42
+ * - Helper text support
43
+ * - Visible focus indicator
44
+ * - Required indicator
45
+ *
46
+ * @example
47
+ * ```tsx
48
+ * <Checkbox label="I agree to terms" required />
49
+ *
50
+ * <Checkbox
51
+ * label="Subscribe to newsletter"
52
+ * checked={isChecked}
53
+ * onChange={(e) => setIsChecked(e.target.checked)}
54
+ * error="This field is required"
55
+ * />
56
+ * ```
57
+ */
58
+ export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
59
+
60
+ export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
61
+ /**
62
+ * Checkbox label (required for accessibility)
63
+ */
64
+ label: string;
65
+ /**
66
+ * Checkbox size
67
+ * @default "medium"
68
+ */
69
+ size?: "small" | "medium" | "large";
70
+ /**
71
+ * Error message (when present, checkbox is marked as invalid)
72
+ */
73
+ error?: string;
74
+ /**
75
+ * Helper text (additional description)
76
+ */
77
+ helperText?: string;
78
+ }
79
+
34
80
  /**
35
81
  * Accessible Input component following WCAG 2.1 AA standards
36
82
  *
package/dist/index.js CHANGED
@@ -1,151 +1,218 @@
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 = {
4
- button: C,
5
- disabled: q,
6
- primary: B,
7
- secondary: T,
1
+ import { jsxs as p, jsx as o } from "react/jsx-runtime";
2
+ import $, { useId as g } from "react";
3
+ const T = "_button_1003x_2", C = "_disabled_1003x_26", q = "_primary_1003x_33", B = "_secondary_1003x_46", j = "_danger_1003x_59", w = "_small_1003x_73", D = "_medium_1003x_78", G = "_large_1003x_83", H = "_fullWidth_1003x_89", O = "_loading_1003x_94", R = "_loadingContainer_1003x_98", F = "_spinner_1003x_104", K = "_spin_1003x_104", E = "_srOnly_1003x_121", c = {
4
+ button: T,
5
+ disabled: C,
6
+ primary: q,
7
+ secondary: B,
8
8
  danger: j,
9
- small: D,
10
- medium: k,
11
- large: w,
9
+ small: w,
10
+ medium: D,
11
+ large: G,
12
12
  fullWidth: H,
13
13
  loading: O,
14
14
  loadingContainer: R,
15
- spinner: K,
16
- spin: E,
17
- srOnly: F
18
- }, L = v.forwardRef(
15
+ spinner: F,
16
+ spin: K,
17
+ srOnly: E
18
+ }, L = $.forwardRef(
19
19
  ({
20
- variant: m = "primary",
21
- size: u = "medium",
22
- children: p,
20
+ variant: b = "primary",
21
+ size: x = "medium",
22
+ children: n,
23
23
  disabled: a = !1,
24
- loading: s = !1,
25
- fullWidth: d = !1,
24
+ loading: e = !1,
25
+ fullWidth: t = !1,
26
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();
27
+ type: d = "button",
28
+ onClick: u,
29
+ ...y
30
+ }, v) => {
31
+ const i = a || e, m = (l) => {
32
+ if (i) {
33
+ l.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,
36
+ u?.(l);
37
+ }, h = (l) => {
38
+ i && (l.key === "Enter" || l.key === " ") && l.preventDefault();
39
+ }, _ = [
40
+ c.button,
41
+ c[b],
42
+ c[x],
43
+ e && c.loading,
44
+ t && c.fullWidth,
45
+ i && c.disabled,
46
46
  f
47
47
  ].filter(Boolean).join(" ");
48
- return /* @__PURE__ */ _(
48
+ return /* @__PURE__ */ p(
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: v,
52
+ type: d,
53
+ className: _,
54
+ "aria-disabled": i,
55
+ "aria-busy": e || void 0,
56
+ onClick: m,
57
+ onKeyDown: h,
58
+ ...y,
59
59
  children: [
60
- s && /* @__PURE__ */ _(
60
+ e && /* @__PURE__ */ p(
61
61
  "span",
62
62
  {
63
63
  role: "status",
64
64
  "aria-live": "polite",
65
- className: n.loadingContainer,
65
+ className: c.loadingContainer,
66
66
  children: [
67
- /* @__PURE__ */ l("span", { className: n.spinner, "aria-hidden": "true" }),
68
- /* @__PURE__ */ l("span", { className: n.srOnly, children: "Loading..." })
67
+ /* @__PURE__ */ o("span", { className: c.spinner, "aria-hidden": "true" }),
68
+ /* @__PURE__ */ o("span", { className: c.srOnly, children: "Loading..." })
69
69
  ]
70
70
  }
71
71
  ),
72
- /* @__PURE__ */ l("span", { "aria-hidden": s || void 0, children: p })
72
+ /* @__PURE__ */ o("span", { "aria-hidden": e || void 0, children: n })
73
73
  ]
74
74
  }
75
75
  );
76
76
  }
77
77
  );
78
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 = {
79
+ const z = "_inputWrapper_sim0c_2", A = "_fullWidth_sim0c_8", J = "_label_sim0c_13", M = "_required_sim0c_20", P = "_requiredIndicator_sim0c_24", Q = "_input_sim0c_2", S = "_small_sim0c_53", U = "_medium_sim0c_58", V = "_large_sim0c_63", X = "_error_sim0c_69", Y = "_disabled_sim0c_78", Z = "_helperText_sim0c_91", ee = "_errorText_sim0c_92", se = "_visuallyHidden_sim0c_107", s = {
80
80
  inputWrapper: z,
81
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(
82
+ label: J,
83
+ required: M,
84
+ requiredIndicator: P,
85
+ input: Q,
86
+ small: S,
87
+ medium: U,
88
+ large: V,
89
+ error: X,
90
+ disabled: Y,
91
+ helperText: Z,
92
+ errorText: ee,
93
+ visuallyHidden: se
94
+ }, ae = $.forwardRef(
95
95
  ({
96
- label: m,
97
- type: u = "text",
98
- size: p = "medium",
96
+ label: b,
97
+ type: x = "text",
98
+ size: n = "medium",
99
99
  error: a,
100
- helperText: s,
101
- fullWidth: d = !1,
100
+ helperText: e,
101
+ fullWidth: t = !1,
102
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
103
+ required: d = !1,
104
+ disabled: u = !1,
105
+ className: y,
106
+ id: v,
107
+ ...i
108
+ }, m) => {
109
+ const h = g(), _ = v || h, l = a ? `${_}-error` : void 0, N = e ? `${_}-helper` : void 0, I = [l, N].filter(Boolean).join(" ") || void 0, k = [
110
+ s.input,
111
+ s[n],
112
+ a && s.error,
113
+ u && s.disabled,
114
+ t && s.fullWidth,
115
+ y
116
+ ].filter(Boolean).join(" "), W = [
117
+ s.label,
118
+ f && s.visuallyHidden,
119
+ d && s.required
120
120
  ].filter(Boolean).join(" ");
121
- return /* @__PURE__ */ _("div", { className: `${e.inputWrapper} ${d ? e.fullWidth : ""}`, children: [
122
- /* @__PURE__ */ _("label", { htmlFor: o, className: I, children: [
123
- m,
124
- r && /* @__PURE__ */ l("span", { className: e.requiredIndicator, "aria-label": "required", children: " *" })
121
+ return /* @__PURE__ */ p("div", { className: `${s.inputWrapper} ${t ? s.fullWidth : ""}`, children: [
122
+ /* @__PURE__ */ p("label", { htmlFor: _, className: W, children: [
123
+ b,
124
+ d && /* @__PURE__ */ o("span", { className: s.requiredIndicator, "aria-label": "required", children: " *" })
125
125
  ] }),
126
- /* @__PURE__ */ l(
126
+ /* @__PURE__ */ o(
127
127
  "input",
128
128
  {
129
- ref: h,
130
- id: o,
131
- type: u,
132
- className: W,
133
- required: r,
134
- disabled: c,
129
+ ref: m,
130
+ id: _,
131
+ type: x,
132
+ className: k,
133
+ required: d,
134
+ disabled: u,
135
135
  "aria-invalid": a ? !0 : void 0,
136
- "aria-describedby": N,
137
- "aria-required": r || void 0,
138
- ...t
136
+ "aria-describedby": I,
137
+ "aria-required": d || void 0,
138
+ ...i
139
139
  }
140
140
  ),
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 })
141
+ e && !a && /* @__PURE__ */ o("span", { id: N, className: s.helperText, children: e }),
142
+ a && /* @__PURE__ */ o("span", { id: l, className: s.errorText, role: "alert", children: a })
143
+ ] });
144
+ }
145
+ );
146
+ ae.displayName = "Input";
147
+ const re = "_checkboxWrapper_8c7eh_2", ie = "_inputGroup_8c7eh_9", le = "_checkbox_8c7eh_2", ne = "_error_8c7eh_69", oe = "_small_8c7eh_75", te = "_large_8c7eh_88", ce = "_label_8c7eh_102", de = "_disabled_8c7eh_110", _e = "_requiredIndicator_8c7eh_116", pe = "_helperText_8c7eh_122", ue = "_errorText_8c7eh_130", r = {
148
+ checkboxWrapper: re,
149
+ inputGroup: ie,
150
+ checkbox: le,
151
+ error: ne,
152
+ small: oe,
153
+ large: te,
154
+ label: ce,
155
+ disabled: de,
156
+ requiredIndicator: _e,
157
+ helperText: pe,
158
+ errorText: ue
159
+ }, me = $.forwardRef(
160
+ ({
161
+ label: b,
162
+ size: x = "medium",
163
+ error: n,
164
+ helperText: a,
165
+ disabled: e = !1,
166
+ required: t = !1,
167
+ className: f,
168
+ id: d,
169
+ ...u
170
+ }, y) => {
171
+ const v = g(), i = d || v, m = n ? `${i}-error` : void 0, h = a ? `${i}-helper` : void 0, _ = [m, h].filter(Boolean).join(" ") || void 0, l = [
172
+ r.checkbox,
173
+ r[x],
174
+ n && r.error,
175
+ e && r.disabled,
176
+ f
177
+ ].filter(Boolean).join(" "), N = [
178
+ r.label,
179
+ e && r.disabled,
180
+ t && r.required
181
+ ].filter(Boolean).join(" ");
182
+ return /* @__PURE__ */ p("div", { className: r.checkboxWrapper, children: [
183
+ /* @__PURE__ */ p("div", { className: r.inputGroup, children: [
184
+ /* @__PURE__ */ o(
185
+ "input",
186
+ {
187
+ ref: y,
188
+ id: i,
189
+ type: "checkbox",
190
+ className: l,
191
+ disabled: e,
192
+ required: t,
193
+ "aria-invalid": n ? !0 : void 0,
194
+ "aria-describedby": _,
195
+ "aria-required": t || void 0,
196
+ ...u
197
+ }
198
+ ),
199
+ /* @__PURE__ */ p("label", { htmlFor: i, className: N, children: [
200
+ b,
201
+ t && /* @__PURE__ */ p("span", { className: r.requiredIndicator, "aria-label": "required", children: [
202
+ " ",
203
+ "*"
204
+ ] })
205
+ ] })
206
+ ] }),
207
+ a && !n && /* @__PURE__ */ o("span", { id: h, className: r.helperText, children: a }),
208
+ n && /* @__PURE__ */ o("span", { id: m, className: r.errorText, role: "alert", children: n })
143
209
  ] });
144
210
  }
145
211
  );
146
- se.displayName = "Input";
212
+ me.displayName = "Checkbox";
147
213
  export {
148
214
  L as Button,
149
- se as Input
215
+ me as Checkbox,
216
+ ae as Input
150
217
  };
151
218
  //# 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\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","import React, { useId } from \"react\";\nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n /**\n * Checkbox label (required for accessibility)\n */\n label: string;\n\n /**\n * Checkbox size\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * Error message (when present, checkbox is marked as invalid)\n */\n error?: string;\n\n /**\n * Helper text (additional description)\n */\n helperText?: string;\n}\n\n/**\n * Accessible Checkbox component following WCAG 2.1 AA standards\n *\n * Features:\n * - Native <input type=\"checkbox\"> element for semantic HTML\n * - Proper label association via htmlFor\n * - Space key toggles checked state (native behavior)\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 * <Checkbox label=\"I agree to terms\" required />\n *\n * <Checkbox\n * label=\"Subscribe to newsletter\"\n * checked={isChecked}\n * onChange={(e) => setIsChecked(e.target.checked)}\n * error=\"This field is required\"\n * />\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 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 =\n [errorId, helperTextId].filter(Boolean).join(\" \") || undefined;\n\n const checkboxClasses = [\n styles.checkbox,\n styles[size],\n error && styles.error,\n disabled && styles.disabled,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n const labelClasses = [\n styles.label,\n disabled && styles.disabled,\n required && styles.required,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={styles.checkboxWrapper}>\n <div className={styles.inputGroup}>\n <input\n ref={ref}\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 {...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","checkboxClasses"],"mappings":"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"}
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@flavia-dev/a11y-ui-kit-react",
3
- "version": "0.1.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
- "type": "module",
6
- "main": "./dist/index.cjs",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/index.js",
13
- "require": "./dist/index.cjs"
14
- },
15
- "./styles.css": "./dist/a11y-ui-kit-react.css"
16
- },
17
- "files": [
18
- "dist"
19
- ],
20
- "scripts": {
21
- "dev": "vite",
22
- "build": "tsc && vite build",
23
- "test": "vitest run",
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",
29
- "test:coverage": "vitest run --coverage",
30
- "test:ui": "vitest --ui",
31
- "test:visual": "playwright test tests/visual",
32
- "test:visual:update": "playwright test tests/visual --update-snapshots",
33
- "test:visual:ui": "playwright test tests/visual --ui",
34
- "test:visual:button": "playwright test tests/visual/Button.visual.test.ts",
35
- "test:visual:input": "playwright test tests/visual/Input.visual.test.ts",
36
- "test:visual:button:update": "playwright test tests/visual/Button.visual.test.ts --update-snapshots",
37
- "test:visual:input:update": "playwright test tests/visual/Input.visual.test.ts --update-snapshots",
38
- "test:e2e": "playwright test tests/e2e",
39
- "test:e2e:button": "playwright test tests/e2e/Button.e2e.test.ts",
40
- "test:e2e:input": "playwright test tests/e2e/Input.e2e.test.ts",
41
- "test:e2e:ui": "playwright test tests/e2e --ui",
42
- "test:playwright": "playwright test",
43
- "storybook": "storybook dev -p 6006",
44
- "build-storybook": "storybook build",
45
- "typecheck": "tsc --noEmit"
46
- },
47
- "keywords": [
48
- "react",
49
- "accessibility",
50
- "a11y",
51
- "wcag",
52
- "components",
53
- "ui",
54
- "button",
55
- "typescript"
56
- ],
57
- "author": "Your Name <your.email@example.com>",
58
- "license": "MIT",
59
- "repository": {
60
- "type": "git",
61
- "url": "https://github.com/fla88vus/a11y-components"
62
- },
63
- "homepage": "https://github.com/fla88vus/a11y-components#readme",
64
- "bugs": {
65
- "url": "https://github.com/fla88vus/a11y-components/issues"
66
- },
67
- "peerDependencies": {
68
- "react": ">=18.0.0",
69
- "react-dom": ">=18.0.0"
70
- },
71
- "devDependencies": {
72
- "@axe-core/react": "^4.11.0",
73
- "@playwright/test": "^1.57.0",
74
- "@storybook/addon-a11y": "^8.6.14",
75
- "@storybook/addon-essentials": "^8.6.14",
76
- "@storybook/addon-links": "^8.6.14",
77
- "@storybook/react": "^8.6.14",
78
- "@storybook/react-vite": "^8.6.14",
79
- "@testing-library/dom": "^10.4.1",
80
- "@testing-library/jest-dom": "^6.9.1",
81
- "@testing-library/react": "^16.3.1",
82
- "@testing-library/user-event": "^14.6.1",
83
- "@types/jest-axe": "^3.5.9",
84
- "@types/node": "^25.0.2",
85
- "@types/react": "^19.2.7",
86
- "@types/react-dom": "^19.2.3",
87
- "@vitejs/plugin-react": "^5.1.2",
88
- "@vitest/ui": "^4.0.15",
89
- "axe-core": "^4.11.0",
90
- "jest-axe": "^10.0.0",
91
- "jsdom": "^27.3.0",
92
- "react": "^19.2.3",
93
- "react-dom": "^19.2.3",
94
- "storybook": "^8.6.14",
95
- "typescript": "^5.9.3",
96
- "vite": "^7.3.0",
97
- "vite-plugin-dts": "^4.5.4",
98
- "vitest": "^4.0.15"
99
- }
100
- }
1
+ {
2
+ "name": "@flavia-dev/a11y-ui-kit-react",
3
+ "version": "0.1.6",
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
+ "type": "module",
6
+ "main": "./dist/index.cjs",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ },
15
+ "./styles.css": "./dist/a11y-ui-kit-react.css"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "dev": "vite",
22
+ "build": "tsc && vite build",
23
+ "test": "vitest run",
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",
29
+ "test:coverage": "vitest run --coverage",
30
+ "test:ui": "vitest --ui",
31
+ "test:visual": "playwright test tests/visual",
32
+ "test:visual:update": "playwright test tests/visual --update-snapshots",
33
+ "test:visual:ui": "playwright test tests/visual --ui",
34
+ "test:visual:button": "playwright test tests/visual/Button.visual.test.ts",
35
+ "test:visual:input": "playwright test tests/visual/Input.visual.test.ts",
36
+ "test:visual:button:update": "playwright test tests/visual/Button.visual.test.ts --update-snapshots",
37
+ "test:visual:input:update": "playwright test tests/visual/Input.visual.test.ts --update-snapshots",
38
+ "test:e2e": "playwright test tests/e2e",
39
+ "test:e2e:button": "playwright test tests/e2e/Button.e2e.test.ts",
40
+ "test:e2e:input": "playwright test tests/e2e/Input.e2e.test.ts",
41
+ "test:e2e:ui": "playwright test tests/e2e --ui",
42
+ "test:playwright": "playwright test",
43
+ "storybook": "storybook dev -p 6006",
44
+ "build-storybook": "storybook build",
45
+ "typecheck": "tsc --noEmit"
46
+ },
47
+ "keywords": [
48
+ "react",
49
+ "accessibility",
50
+ "a11y",
51
+ "wcag",
52
+ "components",
53
+ "ui",
54
+ "button",
55
+ "typescript"
56
+ ],
57
+ "author": "Your Name <your.email@example.com>",
58
+ "license": "MIT",
59
+ "repository": {
60
+ "type": "git",
61
+ "url": "https://github.com/fla88vus/a11y-components"
62
+ },
63
+ "homepage": "https://github.com/fla88vus/a11y-components#readme",
64
+ "bugs": {
65
+ "url": "https://github.com/fla88vus/a11y-components/issues"
66
+ },
67
+ "peerDependencies": {
68
+ "react": ">=18.0.0",
69
+ "react-dom": ">=18.0.0"
70
+ },
71
+ "devDependencies": {
72
+ "@axe-core/react": "^4.11.0",
73
+ "@playwright/test": "^1.57.0",
74
+ "@storybook/addon-a11y": "^8.6.14",
75
+ "@storybook/addon-essentials": "^8.6.14",
76
+ "@storybook/addon-links": "^8.6.14",
77
+ "@storybook/react": "^8.6.14",
78
+ "@storybook/react-vite": "^8.6.14",
79
+ "@testing-library/dom": "^10.4.1",
80
+ "@testing-library/jest-dom": "^6.9.1",
81
+ "@testing-library/react": "^16.3.1",
82
+ "@testing-library/user-event": "^14.6.1",
83
+ "@types/jest-axe": "^3.5.9",
84
+ "@types/node": "^25.0.2",
85
+ "@types/react": "^19.2.7",
86
+ "@types/react-dom": "^19.2.3",
87
+ "@vitejs/plugin-react": "^5.1.2",
88
+ "@vitest/ui": "^4.0.15",
89
+ "axe-core": "^4.11.0",
90
+ "jest-axe": "^10.0.0",
91
+ "jsdom": "^27.3.0",
92
+ "react": "^19.2.3",
93
+ "react-dom": "^19.2.3",
94
+ "storybook": "^8.6.14",
95
+ "typescript": "^5.9.3",
96
+ "vite": "^7.3.0",
97
+ "vite-plugin-dts": "^4.5.4",
98
+ "vitest": "^4.0.15"
99
+ }
100
+ }