@flavia-dev/a11y-ui-kit-react 0.1.0

package/README.md

@@ -0,0 +1,125 @@
+# accessible-react-components
+
+Production-ready accessible React components following **WCAG 2.1 AA standards**.
+
+[![npm version](https://img.shields.io/npm/v/accessible-react-components.svg)](https://www.npmjs.com/package/accessible-react-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- ✅ **WCAG 2.1 AA compliant** - Fully accessible components
+- ✅ **TypeScript** - Full type safety
+- ✅ **Tree-shakeable** - Import only what you need
+- ✅ **CSS Modules** - Scoped styling
+- ✅ **Framework agnostic** - Works with any React project
+- ✅ **Tested** - Comprehensive test coverage
+
+## Installation
+
+```bash
+npm install accessible-react-components
+```
+
+## Usage
+
+```tsx
+import { Button } from 'accessible-react-components';
+import 'accessible-react-components/styles.css';
+
+function App() {
+  return (
+    <Button 
+      variant="primary" 
+      onClick={() => console.log('Clicked!')}
+    >
+      Click me
+    </Button>
+  );
+}
+```
+
+## Components
+
+### Button
+
+Accessible button component with multiple variants and states.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary' \| 'danger'` | `'primary'` | Button style variant |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `loading` | `boolean` | `false` | Loading state with spinner |
+| `fullWidth` | `boolean` | `false` | Full width button |
+
+#### Examples
+
+```tsx
+// Primary button
+<Button variant="primary">Primary</Button>
+
+// Secondary button
+<Button variant="secondary">Secondary</Button>
+
+// Danger button
+<Button variant="danger">Delete</Button>
+
+// Loading state
+<Button loading>Loading...</Button>
+
+// Disabled state
+<Button disabled>Disabled</Button>
+
+// Different sizes
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+
+// Full width
+<Button fullWidth>Full Width</Button>
+
+// With icon (aria-label required for accessibility)
+<Button aria-label="Close dialog">×</Button>
+```
+
+## Accessibility Features
+
+- ✅ **Keyboard navigation** - Full keyboard support (Enter/Space)
+- ✅ **Focus indicators** - Visible focus states
+- ✅ **Screen reader support** - Proper ARIA attributes
+- ✅ **Semantic HTML** - Native button elements
+- ✅ **Color contrast** - WCAG AA compliant colors
+- ✅ **Touch targets** - Minimum 44x44px target size
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Build library
+npm run build
+
+# Type check
+npm run typecheck
+```
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+
+MIT © Your Name

package/dist/accessible-react-components.css

@@ -0,0 +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}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"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;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Accessible button component following WCAG 2.1 AA standards
+ *
+ * Features:
+ * - Native <button> element for semantic HTML
+ * - Full keyboard support (Tab, Enter, Space)
+ * - Screen reader announcements for loading state
+ * - Visible focus indicator
+ * - Color contrast compliant
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ *
+ * <Button loading disabled>
+ *   Submitting...
+ * </Button>
+ * ```
+ */
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "danger";
+    size?: "small" | "medium" | "large";
+    children: default_2.ReactNode;
+    loading?: boolean;
+    fullWidth?: boolean;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,69 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import v from "react";
+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 = {
+  button: y,
+  primary: f,
+  secondary: g,
+  danger: b,
+  small: h,
+  medium: N,
+  large: C,
+  fullWidth: O,
+  loading: W,
+  loadingContainer: j,
+  spinner: x,
+  spin: B,
+  srOnly: R
+}, w = v.forwardRef(
+  ({
+    variant: o = "primary",
+    size: i = "medium",
+    children: e,
+    disabled: r = !1,
+    loading: s = !1,
+    fullWidth: d = !1,
+    className: l,
+    type: _ = "button",
+    ...c
+  }, m) => {
+    const p = r || s, u = [
+      n.button,
+      n[o],
+      n[i],
+      s && n.loading,
+      d && n.fullWidth,
+      l
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ t(
+      "button",
+      {
+        ref: m,
+        type: _,
+        className: u,
+        disabled: p,
+        "aria-busy": s || void 0,
+        ...c,
+        children: [
+          s && /* @__PURE__ */ t(
+            "span",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: n.loadingContainer,
+              children: [
+                /* @__PURE__ */ a("span", { className: n.spinner, "aria-hidden": "true" }),
+                /* @__PURE__ */ a("span", { className: n.srOnly, children: "Loading..." })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("span", { "aria-hidden": s || void 0, children: e })
+        ]
+      }
+    );
+  }
+);
+w.displayName = "Button";
+export {
+  w as Button
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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;"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@flavia-dev/a11y-ui-kit-react",
+  "version": "0.1.0",
+  "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.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/accessible-react-components.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "components",
+    "ui",
+    "button",
+    "typescript"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/accessible-react-components"
+  },
+  "homepage": "https://github.com/yourusername/accessible-react-components#readme",
+  "bugs": {
+    "url": "https://github.com/yourusername/accessible-react-components/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.0.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/ui": "^4.0.15",
+    "jsdom": "^27.3.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.15"
+  }
+}