@apcrda/ui 0.3.0

package/dist/utils.js

@@ -0,0 +1,3 @@
+import { n as e, t } from "./utils-BIF7GImV.js";
+import { n, r, t as i } from "./helpers-CgZQleCk.js";
+export { e as cn, i as createDataState, n as getThemeAttribute, r as isThemeName, t as mergeClasses };

package/docs/Architecture.md

@@ -0,0 +1,57 @@
+# Architecture
+
+APCRDA UI is a single Vite Library Mode project. It is not a monorepo and does not use workspaces. The package is published as `@apcrda/ui`.
+
+## Folder Structure
+
+```text
+src/
+  components/
+  hooks/
+  styles/
+  themes/
+  tokens/
+  utils/
+  index.ts
+.storybook/
+docs/
+```
+
+## Component Anatomy
+
+Each component lives in its own folder:
+
+```text
+Button/
+  Button.tsx
+  Button.types.ts
+  Button.test.tsx
+  Button.stories.tsx
+  index.ts
+```
+
+Components use `forwardRef`, explicit prop types, CVA variants, Tailwind classes, CSS variables, and accessibility semantics. Radix UI is used where behavior and ARIA patterns are non-trivial.
+
+## Public API
+
+The package root exports components, prop types, hooks, themes, tokens, and utilities through `src/index.ts`.
+
+```tsx
+import { Button, Input, Card, ThemeProvider } from '@apcrda/ui'
+```
+
+The stylesheet is exported as:
+
+```tsx
+import '@apcrda/ui/styles.css'
+```
+
+## Build Strategy
+
+Vite emits ESM modules with preserved module boundaries for tree shaking. TypeScript declarations are generated with `vite-plugin-dts`.
+
+React and React DOM are peer dependencies. APCRDA UI runtime dependencies such as Radix UI, CVA, Tailwind Merge, Lucide React, React Hook Form, and Zod are packaged as normal npm dependencies.
+
+## Storybook
+
+Storybook is the primary development environment. It is used for component development, documentation, accessibility review, theme switching, and visual review.

package/docs/Contributing.md

@@ -0,0 +1,58 @@
+# Contributing
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+Storybook is the default development surface.
+
+## Component Checklist
+
+Every new component should include:
+
+- `Component.tsx`
+- `Component.types.ts`
+- `Component.test.tsx`
+- `Component.stories.tsx`
+- `index.ts`
+
+Use `forwardRef`, strict prop types, CVA variants where variants exist, Tailwind classes, CSS variables, and accessible semantics.
+
+## Testing
+
+Run:
+
+```bash
+npm run test -- --run
+npm run typecheck
+npm run build
+```
+
+Tests should cover rendering, disabled states, loading states, keyboard or pointer interaction where relevant, and ARIA behavior.
+
+## Naming
+
+- Components use PascalCase.
+- Props use clear domain-neutral names.
+- Tokens use lowercase semantic names.
+- CSS variables use the `--apcrda-*` prefix.
+
+## Publishing
+
+Use Changesets for versioning:
+
+```bash
+npm run changeset
+npm run version-packages
+npm run build
+npm publish
+```
+
+For GitLab Package Registry, configure `.npmrc` with the APCRDA scope and run:
+
+```bash
+npm run publish:gitlab
+```

package/docs/Design-Principles.md

@@ -0,0 +1,37 @@
+# Design Principles
+
+APCRDA UI follows Material Design 3 principles adapted for enterprise government software.
+
+## Accessibility
+
+- Target WCAG 2.1 AA.
+- Preserve visible focus states.
+- Support keyboard navigation.
+- Use semantic HTML and Radix primitives for complex controls.
+- Keep disabled and loading states programmatically discoverable through native attributes or ARIA.
+
+## Visual System
+
+- Use calm, high-contrast surfaces suitable for long-form administrative work.
+- Prefer clear labels, consistent spacing, and predictable controls.
+- Use restrained elevation for hierarchy.
+- Avoid decorative styling that reduces legibility or scanability.
+
+## Tokens
+
+Tokens define color, typography, spacing, radius, shadows, and motion. They are available as TypeScript objects and CSS variables.
+
+## Themes
+
+Themes are applied through:
+
+```html
+data-theme="light"
+data-theme="dark"
+```
+
+Components must use theme variables instead of hard-coded theme colors wherever possible.
+
+## Mobile First
+
+Components should be usable on small screens first, with touch-friendly hit areas and layouts that wrap without clipping.

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@apcrda/ui",
+  "version": "0.3.0",
+  "description": "APCRDA UI is a production-ready React design system for APCRDA applications.",
+  "type": "module",
+  "license": "MIT",
+  "author": "APCRDA",
+  "homepage": "https://gitlab.com/apcrda/apcrda-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/apcrda/apcrda-ui.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/apcrda/apcrda-ui/-/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "docs/Architecture.md",
+    "docs/Design-Principles.md",
+    "docs/Contributing.md"
+  ],
+  "sideEffects": [
+    "dist/styles.css",
+    "src/styles/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "import": "./dist/themes.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build": "tsc -p tsconfig.json --pretty && vite build && tsc -p tsconfig.build.json --pretty",
+    "build:storybook": "storybook build",
+    "typecheck": "tsc -p tsconfig.json --pretty",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "lint": "eslint .",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "publish:npm": "npm publish",
+    "publish:gitlab": "npm publish --registry ${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/npm/"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-alert-dialog": "^1.1.17",
+    "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-context-menu": "^2.3.1",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-label": "^2.1.10",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-radio-group": "^1.4.1",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-switch": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/react-toast": "^1.2.17",
+    "@radix-ui/react-tooltip": "^1.2.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.21.0",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.80.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.6.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "storybook": "^10.4.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12",
+    "vitest": "^4.0.16"
+  }
+}