@flavia-dev/a11y-ui-kit-react 0.1.1 → 0.1.3

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_13vd9_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_13vd9_2:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}._button_13vd9_2:disabled{cursor:not-allowed;opacity:.6}._primary_13vd9_30{background-color:#3b82f6;color:#fff}._primary_13vd9_30:hover:not(:disabled){background-color:#2563eb}._primary_13vd9_30:active:not(:disabled){background-color:#1d4ed8}._secondary_13vd9_43{background-color:#64748b;color:#fff}._secondary_13vd9_43:hover:not(:disabled){background-color:#475569}._secondary_13vd9_43:active:not(:disabled){background-color:#334155}._danger_13vd9_56{background-color:#ef4444;color:#fff}._danger_13vd9_56:hover:not(:disabled){background-color:#dc2626}._danger_13vd9_56:active:not(:disabled){background-color:#b91c1c}._small_13vd9_70{padding:.5rem 1rem;font-size:.875rem}._medium_13vd9_75{padding:.625rem 1.25rem;font-size:1rem}._large_13vd9_80{padding:.75rem 1.5rem;font-size:1.125rem}._fullWidth_13vd9_86{width:100%}._loading_13vd9_91{pointer-events:none}._loadingContainer_13vd9_95{display:inline-flex;align-items:center;gap:.5rem}._spinner_13vd9_101{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:_spin_13vd9_101 .75s linear infinite}@keyframes _spin_13vd9_101{to{transform:rotate(360deg)}}._srOnly_13vd9_118{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}
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("react"),y="_button_13vd9_2",g="_primary_13vd9_30",b="_secondary_13vd9_43",f="_danger_13vd9_56",h="_small_13vd9_70",j="_medium_13vd9_75",x="_large_13vd9_80",N="_fullWidth_13vd9_86",O="_loading_13vd9_91",B="_loadingContainer_13vd9_95",C="_spinner_13vd9_101",W="_spin_13vd9_101",R="_srOnly_13vd9_118",n={button:y,primary:g,secondary:b,danger:f,small:h,medium:j,large:x,fullWidth:N,loading:O,loadingContainer:B,spinner:C,spin:W,srOnly:R},t=v.forwardRef(({variant:e="primary",size:i="medium",children:o,disabled:r=!1,loading:s=!1,fullWidth:d=!1,className:l,type:_="button",...c},u)=>{const m=r||s,p=[n.button,n[e],n[i],s&&n.loading,d&&n.fullWidth,l].filter(Boolean).join(" ");return a.jsxs("button",{ref:u,type:_,className:p,disabled:m,"aria-busy":s||void 0,...c,children:[s&&a.jsxs("span",{role:"status","aria-live":"polite",className:n.loadingContainer,children:[a.jsx("span",{className:n.spinner,"aria-hidden":"true"}),a.jsx("span",{className:n.srOnly,children:"Loading..."})]}),a.jsx("span",{"aria-hidden":s||void 0,children:o})]})});t.displayName="Button";exports.Button=t;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),g=require("react"),h="_button_1003x_2",j="_disabled_1003x_26",C="_primary_1003x_33",N="_secondary_1003x_46",D="_danger_1003x_59",O="_small_1003x_73",k="_medium_1003x_78",B="_large_1003x_83",W="_fullWidth_1003x_89",v="_loading_1003x_94",w="_loadingContainer_1003x_98",R="_spinner_1003x_104",q="_spin_1003x_104",K="_srOnly_1003x_121",n={button:h,disabled:j,primary:C,secondary:N,danger:D,small:O,medium:k,large:B,fullWidth:W,loading:v,loadingContainer:w,spinner:R,spin:q,srOnly:K},i=g.forwardRef(({variant:o="primary",size:l="medium",children:r,disabled:d=!1,loading:e=!1,fullWidth:_=!1,className:c,type:u="button",onClick:m,...p},x)=>{const t=d||e,y=s=>{if(t){s.preventDefault();return}m?.(s)},b=s=>{t&&(s.key==="Enter"||s.key===" ")&&s.preventDefault()},f=[n.button,n[o],n[l],e&&n.loading,_&&n.fullWidth,t&&n.disabled,c].filter(Boolean).join(" ");return a.jsxs("button",{ref:x,type:u,className:f,"aria-disabled":t,"aria-busy":e||void 0,onClick:y,onKeyDown:b,...p,children:[e&&a.jsxs("span",{role:"status","aria-live":"polite",className:n.loadingContainer,children:[a.jsx("span",{className:n.spinner,"aria-hidden":"true"}),a.jsx("span",{className:n.srOnly,children:"Loading..."})]}),a.jsx("span",{"aria-hidden":e||void 0,children:r})]})});i.displayName="Button";exports.Button=i;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/Button/Button.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 ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n disabled={isDisabled}\n aria-busy={loading || undefined}\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"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","props","ref","isDisabled","classNames","styles","jsxs","jsx"],"mappings":"kjBAkCaA,EAASC,EAAM,WAC1B,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,UAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAaP,GAAYC,EAEzBO,EAAa,CACjBC,EAAO,OACPA,EAAOZ,CAAO,EACdY,EAAOX,CAAI,EACXG,GAAWQ,EAAO,QAClBP,GAAaO,EAAO,UACpBN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,KAAC,SAAA,CACC,IAAAJ,EACA,KAAAF,EACA,UAAWI,EACX,SAAUD,EACV,YAAWN,GAAW,OACrB,GAAGI,EAEH,SAAA,CAAAJ,GACCS,EAAAA,KAAC,OAAA,CACC,KAAK,SACL,YAAU,SACV,UAAWD,EAAO,iBAElB,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAO,QAAS,cAAY,OAAO,EACpDE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAO,OAAQ,SAAA,YAAA,CAAU,CAAA,CAAA,CAAA,EAG9CE,EAAAA,IAAC,OAAA,CAAK,cAAaV,GAAW,OAAY,SAAAF,CAAA,CAAS,CAAA,CAAA,CAAA,CAGzD,CACF,EAEAJ,EAAO,YAAc"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/Button/Button.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"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx"],"mappings":"olBAkCaA,EAASC,EAAM,WAC1B,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,SACP,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,UAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAaR,GAAYC,EAGzBQ,EAAeC,GAA+C,CAClE,GAAIF,EAAY,CACdE,EAAM,eAAA,EACN,MACF,CACAL,IAAUK,CAAK,CACjB,EAGMC,EAAiBD,GAAkD,CACnEF,IAAeE,EAAM,MAAQ,SAAWA,EAAM,MAAQ,MACxDA,EAAM,eAAA,CAEV,EAEME,EAAa,CACjBC,EAAO,OACPA,EAAOhB,CAAO,EACdgB,EAAOf,CAAI,EACXG,GAAWY,EAAO,QAClBX,GAAaW,EAAO,UACpBL,GAAcK,EAAO,SACrBV,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEW,EAAAA,KAAC,SAAA,CACC,IAAAP,EACA,KAAAH,EACA,UAAWQ,EACX,gBAAeJ,EACf,YAAWP,GAAW,OACtB,QAASQ,EACT,UAAWE,EACV,GAAGL,EAEH,SAAA,CAAAL,GACCa,EAAAA,KAAC,OAAA,CACC,KAAK,SACL,YAAU,SACV,UAAWD,EAAO,iBAElB,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAO,QAAS,cAAY,OAAO,EACpDE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAO,OAAQ,SAAA,YAAA,CAAU,CAAA,CAAA,CAAA,EAG9CE,EAAAA,IAAC,OAAA,CAAK,cAAad,GAAW,OAAY,SAAAF,CAAA,CAAS,CAAA,CAAA,CAAA,CAGzD,CACF,EAEAJ,EAAO,YAAc"}
package/dist/index.js CHANGED
@@ -1,69 +1,82 @@
1
- import { jsxs as t, jsx as a } from "react/jsx-runtime";
2
- import v from "react";
3
- const y = "_button_13vd9_2", f = "_primary_13vd9_30", g = "_secondary_13vd9_43", b = "_danger_13vd9_56", h = "_small_13vd9_70", N = "_medium_13vd9_75", C = "_large_13vd9_80", O = "_fullWidth_13vd9_86", W = "_loading_13vd9_91", j = "_loadingContainer_13vd9_95", x = "_spinner_13vd9_101", B = "_spin_13vd9_101", R = "_srOnly_13vd9_118", n = {
4
- button: y,
5
- primary: f,
6
- secondary: g,
7
- danger: b,
8
- small: h,
9
- medium: N,
10
- large: C,
11
- fullWidth: O,
12
- loading: W,
13
- loadingContainer: j,
14
- spinner: x,
15
- spin: B,
16
- srOnly: R
17
- }, w = v.forwardRef(
1
+ import { jsxs as t, jsx as i } from "react/jsx-runtime";
2
+ import g from "react";
3
+ const h = "_button_1003x_2", C = "_disabled_1003x_26", N = "_primary_1003x_33", D = "_secondary_1003x_46", k = "_danger_1003x_59", O = "_small_1003x_73", W = "_medium_1003x_78", j = "_large_1003x_83", w = "_fullWidth_1003x_89", B = "_loading_1003x_94", v = "_loadingContainer_1003x_98", K = "_spinner_1003x_104", R = "_spin_1003x_104", E = "_srOnly_1003x_121", n = {
4
+ button: h,
5
+ disabled: C,
6
+ primary: N,
7
+ secondary: D,
8
+ danger: k,
9
+ small: O,
10
+ medium: W,
11
+ large: j,
12
+ fullWidth: w,
13
+ loading: B,
14
+ loadingContainer: v,
15
+ spinner: K,
16
+ spin: R,
17
+ srOnly: E
18
+ }, L = g.forwardRef(
18
19
  ({
19
20
  variant: o = "primary",
20
- size: i = "medium",
21
- children: e,
22
- disabled: r = !1,
23
- loading: s = !1,
24
- fullWidth: d = !1,
25
- className: l,
26
- type: _ = "button",
27
- ...c
28
- }, m) => {
29
- const p = r || s, u = [
21
+ size: l = "medium",
22
+ children: r,
23
+ disabled: d = !1,
24
+ loading: a = !1,
25
+ fullWidth: _ = !1,
26
+ className: c,
27
+ type: m = "button",
28
+ onClick: u,
29
+ ...p
30
+ }, y) => {
31
+ const e = d || a, x = (s) => {
32
+ if (e) {
33
+ s.preventDefault();
34
+ return;
35
+ }
36
+ u?.(s);
37
+ }, f = (s) => {
38
+ e && (s.key === "Enter" || s.key === " ") && s.preventDefault();
39
+ }, b = [
30
40
  n.button,
31
41
  n[o],
32
- n[i],
33
- s && n.loading,
34
- d && n.fullWidth,
35
- l
42
+ n[l],
43
+ a && n.loading,
44
+ _ && n.fullWidth,
45
+ e && n.disabled,
46
+ c
36
47
  ].filter(Boolean).join(" ");
37
48
  return /* @__PURE__ */ t(
38
49
  "button",
39
50
  {
40
- ref: m,
41
- type: _,
42
- className: u,
43
- disabled: p,
44
- "aria-busy": s || void 0,
45
- ...c,
51
+ ref: y,
52
+ type: m,
53
+ className: b,
54
+ "aria-disabled": e,
55
+ "aria-busy": a || void 0,
56
+ onClick: x,
57
+ onKeyDown: f,
58
+ ...p,
46
59
  children: [
47
- s && /* @__PURE__ */ t(
60
+ a && /* @__PURE__ */ t(
48
61
  "span",
49
62
  {
50
63
  role: "status",
51
64
  "aria-live": "polite",
52
65
  className: n.loadingContainer,
53
66
  children: [
54
- /* @__PURE__ */ a("span", { className: n.spinner, "aria-hidden": "true" }),
55
- /* @__PURE__ */ a("span", { className: n.srOnly, children: "Loading..." })
67
+ /* @__PURE__ */ i("span", { className: n.spinner, "aria-hidden": "true" }),
68
+ /* @__PURE__ */ i("span", { className: n.srOnly, children: "Loading..." })
56
69
  ]
57
70
  }
58
71
  ),
59
- /* @__PURE__ */ a("span", { "aria-hidden": s || void 0, children: e })
72
+ /* @__PURE__ */ i("span", { "aria-hidden": a || void 0, children: r })
60
73
  ]
61
74
  }
62
75
  );
63
76
  }
64
77
  );
65
- w.displayName = "Button";
78
+ L.displayName = "Button";
66
79
  export {
67
- w as Button
80
+ L as Button
68
81
  };
69
82
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/Button/Button.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 ...props\n },\n ref\n ) => {\n const isDisabled = disabled || loading;\n\n const classNames = [\n styles.button,\n styles[variant],\n styles[size],\n loading && styles.loading,\n fullWidth && styles.fullWidth,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <button\n ref={ref}\n type={type}\n className={classNames}\n disabled={isDisabled}\n aria-busy={loading || undefined}\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"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","props","ref","isDisabled","classNames","styles","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;GAkCaA,IAASC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaP,KAAYC,GAEzBO,IAAa;AAAA,MACjBC,EAAO;AAAA,MACPA,EAAOZ,CAAO;AAAA,MACdY,EAAOX,CAAI;AAAA,MACXG,KAAWQ,EAAO;AAAA,MAClBP,KAAaO,EAAO;AAAA,MACpBN;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,MAAAF;AAAA,QACA,WAAWI;AAAA,QACX,UAAUD;AAAA,QACV,aAAWN,KAAW;AAAA,QACrB,GAAGI;AAAA,QAEH,UAAA;AAAA,UAAAJ,KACC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,WAAWD,EAAO;AAAA,cAElB,UAAA;AAAA,gBAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,SAAS,eAAY,QAAO;AAAA,gBACpD,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,QAAQ,UAAA,aAAA,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAG9C,gBAAAE,EAAC,QAAA,EAAK,eAAaV,KAAW,QAAY,UAAAF,EAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AAEAJ,EAAO,cAAc;"}
1
+ {"version":3,"file":"index.js","sources":["../src/Button/Button.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"],"names":["Button","React","variant","size","children","disabled","loading","fullWidth","className","type","onClick","props","ref","isDisabled","handleClick","event","handleKeyDown","classNames","styles","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;GAkCaA,IAASC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaR,KAAYC,GAGzBQ,IAAc,CAACC,MAA+C;AAClE,UAAIF,GAAY;AACd,QAAAE,EAAM,eAAA;AACN;AAAA,MACF;AACA,MAAAL,IAAUK,CAAK;AAAA,IACjB,GAGMC,IAAgB,CAACD,MAAkD;AACvE,MAAIF,MAAeE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACxDA,EAAM,eAAA;AAAA,IAEV,GAEME,IAAa;AAAA,MACjBC,EAAO;AAAA,MACPA,EAAOhB,CAAO;AAAA,MACdgB,EAAOf,CAAI;AAAA,MACXG,KAAWY,EAAO;AAAA,MAClBX,KAAaW,EAAO;AAAA,MACpBL,KAAcK,EAAO;AAAA,MACrBV;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAP;AAAA,QACA,MAAAH;AAAA,QACA,WAAWQ;AAAA,QACX,iBAAeJ;AAAA,QACf,aAAWP,KAAW;AAAA,QACtB,SAASQ;AAAA,QACT,WAAWE;AAAA,QACV,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAL,KACC,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,WAAWD,EAAO;AAAA,cAElB,UAAA;AAAA,gBAAA,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,SAAS,eAAY,QAAO;AAAA,gBACpD,gBAAAE,EAAC,QAAA,EAAK,WAAWF,EAAO,QAAQ,UAAA,aAAA,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAG9C,gBAAAE,EAAC,QAAA,EAAK,eAAad,KAAW,QAAY,UAAAF,EAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AACF;AAEAJ,EAAO,cAAc;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flavia-dev/a11y-ui-kit-react",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
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",
@@ -12,7 +12,7 @@
12
12
  "require": "./dist/index.cjs",
13
13
  "types": "./dist/index.d.ts"
14
14
  },
15
- "./styles.css": "./dist/accessible-react-components.css"
15
+ "./styles.css": "./dist/a11y-ui-kit-react.css"
16
16
  },
17
17
  "files": [
18
18
  "dist"