@tx-angular-design-system/ui-kit 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# @tx-angular-design-system/ui-kit
+
+An Angular 22 component library styled entirely through Tailwind CSS v4 design
+tokens, built on `@angular/aria` and `@angular/cdk`. No Angular Material.
+
+## Install
+
+```bash
+npm install @tx-angular-design-system/ui-kit
+ng add @tx-angular-design-system/ui-kit
+```
+
+`ng add` installs Tailwind v4 and the CDK/Aria peers, writes a PostCSS config,
+wires the theme into your global stylesheet and links the fonts. It is
+idempotent and will not clobber an existing Tailwind setup.
+
+Your global stylesheet ends up with:
+
+```css
+@import 'tailwindcss';
+@import '@angular/cdk/overlay-prebuilt.css';
+@import '@tx-angular-design-system/ui-kit/styles/ui-kit.css';
+@source '../node_modules/@tx-angular-design-system/ui-kit';
+```
+
+> **If components render unstyled, check the `@source` line first.** Tailwind
+> skips `node_modules` during content detection, so without it none of the kit's
+> utility classes are generated from its compiled templates.
+
+## Use
+
+```ts
+import { TxButtonComponent, TxButtonConfig } from '@tx-angular-design-system/ui-kit';
+
+@Component({
+  imports: [TxButtonComponent],
+  template: `<tx-button [config]="save" (clicked)="onSave()" />`,
+})
+export class MyComponent {
+  save: TxButtonConfig = { label: 'Save', variant: 'primary', icon: 'check' };
+
+  onSave() {
+    // Config is a signal input — replace the object, never mutate it.
+    this.save = { ...this.save, loading: true };
+  }
+}
+```
+
+Every component takes its simple property configuration through one
+strongly-typed `Tx<Name>Config` object. Data (options, columns, tree nodes) comes
+through its own input, and structural customisation is content projection or a
+`TemplateRef` — never a field on the config.
+
+## Theme
+
+Override any token at a narrower scope, after the kit's import:
+
+```css
+:root {
+  --color-tx-brand-500: #1f6fd0;
+  --color-tx-brand-700: #17529b;
+}
+```
+
+Every semantic role is a `var()` reference into the numbered palette, so this
+re-colours every component that uses `--color-tx-primary` with no code change.
+`success`, `danger`, `warning` and `info` are independent families and do not
+follow `brand`.
+
+## Components
+
+Button · input · textarea · checkbox · radio group · switch · select ·
+multiselect · dropdown tree · chips input · datepicker · table · tree · reorder
+list · dialog · toaster · spinner · tooltip · alert · skeleton · header ·
+sidebar · tabs · accordion · card · badge · breadcrumb · divider · empty state ·
+pagination · icon registry · form field.
+
+See the workspace README for the full architecture notes.