@walidsj/react-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,17 @@
+MIT License
+
+Copyright (c) 2026 Walid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

package/README.md

@@ -1,3 +1,164 @@
-# Temporary Holding Version
+# @walidsj/react-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A customizable React design system built with Base UI, TypeScript, and
+Tailwind CSS v4.
+
+> Status: early development. Public APIs and visual tokens may change
+> before `1.0.0`.
+
+## Features
+
+-   Typed React components with native prop and ref forwarding.
+-   Base UI primitives for interactive behavior where appropriate.
+-   Custom visual styling with Tailwind CSS v4.
+-   Semantic design tokens with light and dark themes.
+-   Compiled stylesheet distributed with the npm package.
+-   ESM output with TypeScript declarations and tree-shaking support.
+
+## Installation
+
+``` bash
+npm install @walidsj/react-ui
+```
+
+Requires React 19. The package is ESM-only.
+
+## Usage
+
+Import the compiled stylesheet once, then use components from the package
+root:
+
+``` tsx
+import { Button, Input } from "@walidsj/react-ui";
+import "@walidsj/react-ui/style.css";
+
+export function Example() {
+  return (
+    <div style={{ display: "grid", gap: "1rem", maxWidth: "24rem" }}>
+      <Input aria-label="Full name" placeholder="Full name" />
+      <Button variant="primary" size="md">
+        Save changes
+      </Button>
+    </div>
+  );
+}
+```
+
+## Components
+
+### Button
+
+Renders a native `<button>`, defaults to `type="button"`, and forwards
+native button props and refs.
+
+| Prop        | Type                                                       | Default     |
+| ----------- | ---------------------------------------------------------- | ----------- |
+| `variant`   | `primary \| secondary \| outline \| ghost \| danger`       | `primary`   |
+| `size`      | `sm \| md \| lg`                                           | `md`        |
+| `type`      | Native button type                                         | `button`    |
+| `disabled`  | `boolean`                                                  | `false`     |
+| `className` | `string`                                                   | —           |
+
+Icon-only buttons must receive an accessible name from the consumer,
+for example `aria-label`.
+
+### Input
+
+Renders a native `<input>` and forwards native input props and refs.
+
+| Prop        | Type      | Default |
+| ----------- | --------- | ------- |
+| `invalid`   | `boolean` | `false` |
+| `className` | `string`  | —       |
+
+`invalid` sets `aria-invalid="true"` and applies error styling. A
+consumer-provided `aria-invalid` value is preserved when `invalid` is
+not set. Labels, descriptions, and error messages are composed by the
+consumer.
+
+Both components merge `className` with their internal classes. Conflicting
+Tailwind utilities are resolved with `tailwind-merge`.
+
+## Styling
+
+The package ships a precompiled stylesheet at
+`@walidsj/react-ui/style.css`. Consumers do not need Tailwind or a Tailwind
+configuration to compile the library's CSS.
+
+The stylesheet includes only the utilities used by the published
+components and the semantic theme tokens. It intentionally does not
+include Tailwind Preflight, and it does not set the host application's
+global background, text color, or font family.
+
+### Theme tokens
+
+Override these variables on a wrapping element to customize the theme:
+
+| Token                        | Purpose                     |
+| ---------------------------- | --------------------------- |
+| `--ui-background`            | Main component surface      |
+| `--ui-foreground`            | Main text                   |
+| `--ui-primary`               | Primary action surface      |
+| `--ui-primary-foreground`    | Text on primary surface     |
+| `--ui-secondary`             | Secondary surface           |
+| `--ui-secondary-foreground`  | Text on secondary surface   |
+| `--ui-muted`                 | Subtle surface              |
+| `--ui-muted-foreground`      | Secondary text              |
+| `--ui-border`                | Default border              |
+| `--ui-ring`                  | Focus ring                  |
+| `--ui-danger`                | Destructive action surface  |
+| `--ui-danger-foreground`     | Text on destructive surface |
+| `--ui-radius-sm`             | Small radius                |
+| `--ui-radius-md`             | Medium radius               |
+| `--ui-radius-lg`             | Large radius                |
+
+``` css
+.brand-theme {
+    --ui-primary: oklch(0.55 0.18 150);
+    --ui-ring: oklch(0.55 0.18 150);
+    --ui-radius-md: 0.25rem;
+}
+```
+
+### Dark mode
+
+Apply the `dark` class to any ancestor of the components:
+
+``` tsx
+<div className="dark">
+    <Button>Dark theme button</Button>
+</div>
+```
+
+## Development
+
+This repository uses Bun for dependency management and development
+scripts.
+
+``` bash
+bun install
+bun run typecheck
+bun run lint
+bun run test
+bun run build
+npm pack --dry-run
+```
+
+`bun run dev` watches the library build. `bun run test:watch` runs
+Vitest in watch mode.
+
+## Documentation
+
+-   Product requirements: `PRD.md`
+-   Design tokens and component rules: `DESIGN.md`
+-   Architecture: `ARCHITECTURE.md`
+-   Testing: `TESTING.md`
+-   Contributing: `CONTRIBUTING.md`
+-   Release: `RELEASE.md`
+-   Agent instructions: `AGENTS.md`
+-   Security: `SECURITY.md`
+
+## License
+
+MIT. See `LICENSE`.
+# walid-ui

package/dist/components/button/button.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
+export { Button } from './button';

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export type { InputProps } from './input';
+export { Input } from './input';

package/dist/components/input/input.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface InputProps extends ComponentPropsWithoutRef<"input"> {
+    invalid?: boolean;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { ButtonProps, ButtonSize, ButtonVariant, } from './components/button';
+export { Button } from './components/button';
+export type { InputProps } from './components/input';
+export { Input } from './components/input';

package/dist/index.js

@@ -0,0 +1,44 @@
+import { Button as Button$1 } from "@base-ui/react/button";
+import { forwardRef } from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+// src/lib/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+// src/components/button/button.tsx
+var baseClasses = "inline-flex select-none items-center justify-center whitespace-nowrap rounded-ui-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50";
+var variantClasses = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+	secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70",
+	outline: "border border-border bg-transparent text-foreground hover:bg-muted active:bg-muted/70",
+	ghost: "bg-transparent text-foreground hover:bg-muted active:bg-muted/70",
+	danger: "bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80"
+};
+var sizeClasses = {
+	sm: "h-8 gap-1.5 px-3 text-sm",
+	md: "h-10 gap-2 px-4 text-sm",
+	lg: "h-12 gap-2.5 px-6 text-base"
+};
+var Button = forwardRef(function Button({ className, variant = "primary", size = "md", type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		ref,
+		type,
+		className: cn(baseClasses, variantClasses[variant], sizeClasses[size], className)
+	});
+});
+// src/components/input/input.tsx
+var Input = forwardRef(function Input({ className, invalid = false, "aria-invalid": ariaInvalid, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
+		ref,
+		"aria-invalid": invalid || ariaInvalid,
+		className: cn("flex h-10 w-full rounded-ui-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:ring-danger/30", className)
+	});
+});
+export { Button, Input };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BaseButton","BaseInput"],"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/input/input.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"outline\"\n  | \"ghost\"\n  | \"danger\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst baseClasses =\n  \"inline-flex select-none items-center justify-center whitespace-nowrap rounded-ui-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\";\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80\",\n  secondary:\n    \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70\",\n  outline:\n    \"border border-border bg-transparent text-foreground hover:bg-muted active:bg-muted/70\",\n  ghost: \"bg-transparent text-foreground hover:bg-muted active:bg-muted/70\",\n  danger:\n    \"bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: \"h-8 gap-1.5 px-3 text-sm\",\n  md: \"h-10 gap-2 px-4 text-sm\",\n  lg: \"h-12 gap-2.5 px-6 text-base\",\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { className, variant = \"primary\", size = \"md\", type = \"button\", ...props },\n    ref,\n  ) {\n    return (\n      <BaseButton\n        {...props}\n        ref={ref as Ref<HTMLElement>}\n        type={type}\n        className={cn(\n          baseClasses,\n          variantClasses[variant],\n          sizeClasses[size],\n          className,\n        )}\n      />\n    );\n  },\n);\n","import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface InputProps extends ComponentPropsWithoutRef<\"input\"> {\n  invalid?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, invalid = false, \"aria-invalid\": ariaInvalid, ...props },\n  ref,\n) {\n  return (\n    <BaseInput\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      aria-invalid={invalid || ariaInvalid}\n      className={cn(\n        \"flex h-10 w-full rounded-ui-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:ring-danger/30\",\n        className,\n      )}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAGA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;ACaA,IAAM,cACJ;AAEF,IAAM,iBAAgD;CACpD,SACE;CACF,WACE;CACF,SACE;CACF,OAAO;CACP,QACE;AACJ;AAEA,IAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,SAAS,WACpB,SAAS,OACP,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,OAAO,UAAU,GAAG,SACnE,KACA;CACA,OACE,oBAACA,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,aACA,eAAe,UACf,YAAY,OACZ,SACF;CACD,CAAA;AAEL,CACF;;AClDA,IAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,WAAW,UAAU,OAAO,gBAAgB,aAAa,GAAG,SAC9D,KACA;CACA,OACE,oBAACC,SAAD;EACE,GAAI;EACC;EACL,gBAAc,WAAW;EACzB,WAAW,GACT,+XACA,SACF;CACD,CAAA;AAEL,CAAC"}

package/dist/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/style.css

@@ -0,0 +1,457 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+    }
+  }
+}
+
+@layer theme {
+  :root, :host {
+    --spacing: .25rem;
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --font-weight-medium: 500;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
+}
+
+@layer utilities {
+  .flex {
+    display: flex;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+
+  .rounded-ui-md {
+    border-radius: var(--ui-radius-md);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-border {
+    border-color: var(--ui-border);
+  }
+
+  .bg-background {
+    background-color: var(--ui-background);
+  }
+
+  .bg-danger {
+    background-color: var(--ui-danger);
+  }
+
+  .bg-primary {
+    background-color: var(--ui-primary);
+  }
+
+  .bg-secondary {
+    background-color: var(--ui-secondary);
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .text-danger-foreground {
+    color: var(--ui-danger-foreground);
+  }
+
+  .text-foreground {
+    color: var(--ui-foreground);
+  }
+
+  .text-primary-foreground {
+    color: var(--ui-primary-foreground);
+  }
+
+  .text-secondary-foreground {
+    color: var(--ui-secondary-foreground);
+  }
+
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .placeholder\:text-muted-foreground::placeholder {
+    color: var(--ui-muted-foreground);
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-danger\/90:hover {
+      background-color: var(--ui-danger);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-danger\/90:hover {
+        background-color: color-mix(in oklab, var(--ui-danger) 90%, transparent);
+      }
+    }
+
+    .hover\:bg-muted:hover {
+      background-color: var(--ui-muted);
+    }
+
+    .hover\:bg-primary\/90:hover {
+      background-color: var(--ui-primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--ui-primary) 90%, transparent);
+      }
+    }
+
+    .hover\:bg-secondary\/80:hover {
+      background-color: var(--ui-secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
+        background-color: color-mix(in oklab, var(--ui-secondary) 80%, transparent);
+      }
+    }
+  }
+
+  .focus-visible\:border-ring:focus-visible {
+    border-color: var(--ui-ring);
+  }
+
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-ring:focus-visible, .focus-visible\:ring-ring\/30:focus-visible {
+    --tw-ring-color: var(--ui-ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/30:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ui-ring) 30%, transparent);
+    }
+  }
+
+  .focus-visible\:ring-offset-2:focus-visible {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus-visible\:ring-offset-background:focus-visible {
+    --tw-ring-offset-color: var(--ui-background);
+  }
+
+  .active\:bg-danger\/80:active {
+    background-color: var(--ui-danger);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-danger\/80:active {
+      background-color: color-mix(in oklab, var(--ui-danger) 80%, transparent);
+    }
+  }
+
+  .active\:bg-muted\/70:active {
+    background-color: var(--ui-muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-muted\/70:active {
+      background-color: color-mix(in oklab, var(--ui-muted) 70%, transparent);
+    }
+  }
+
+  .active\:bg-primary\/80:active {
+    background-color: var(--ui-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-primary\/80:active {
+      background-color: color-mix(in oklab, var(--ui-primary) 80%, transparent);
+    }
+  }
+
+  .active\:bg-secondary\/70:active {
+    background-color: var(--ui-secondary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .active\:bg-secondary\/70:active {
+      background-color: color-mix(in oklab, var(--ui-secondary) 70%, transparent);
+    }
+  }
+
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
+  .aria-\[invalid\=true\]\:border-danger[aria-invalid="true"] {
+    border-color: var(--ui-danger);
+  }
+
+  .aria-\[invalid\=true\]\:focus-visible\:ring-danger\/30[aria-invalid="true"]:focus-visible {
+    --tw-ring-color: var(--ui-danger);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-\[invalid\=true\]\:focus-visible\:ring-danger\/30[aria-invalid="true"]:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ui-danger) 30%, transparent);
+    }
+  }
+}
+
+:root {
+  --ui-background: oklch(100% 0 0);
+  --ui-foreground: oklch(24% .02 264);
+  --ui-primary: oklch(51% .23 277);
+  --ui-primary-foreground: oklch(99% 0 0);
+  --ui-secondary: oklch(95.5% .012 264);
+  --ui-secondary-foreground: oklch(30% .03 264);
+  --ui-muted: oklch(96% .008 264);
+  --ui-muted-foreground: oklch(50% .02 264);
+  --ui-border: oklch(89% .012 264);
+  --ui-ring: oklch(51% .23 277);
+  --ui-danger: oklch(55% .22 27);
+  --ui-danger-foreground: oklch(99% 0 0);
+  --ui-radius-sm: .375rem;
+  --ui-radius-md: .5rem;
+  --ui-radius-lg: .75rem;
+}
+
+.dark {
+  --ui-background: oklch(18% .02 264);
+  --ui-foreground: oklch(96% .006 264);
+  --ui-primary: oklch(68% .18 277);
+  --ui-primary-foreground: oklch(17% .03 277);
+  --ui-secondary: oklch(27% .02 264);
+  --ui-secondary-foreground: oklch(96% .006 264);
+  --ui-muted: oklch(25% .02 264);
+  --ui-muted-foreground: oklch(72% .02 264);
+  --ui-border: oklch(34% .015 264);
+  --ui-ring: oklch(68% .18 277);
+  --ui-danger: oklch(64% .2 27);
+  --ui-danger-foreground: oklch(17% .03 27);
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,89 @@
 {
   "name": "@walidsj/react-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Accessible React components styled with Tailwind CSS v4 and built on Base UI primitives.",
+  "license": "MIT",
+  "author": "walidsj (https://github.com/walidsj)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/walidsj/walid-ui.git"
+  },
+  "homepage": "https://github.com/walidsj/walid-ui#readme",
+  "bugs": {
+    "url": "https://github.com/walidsj/walid-ui/issues"
+  },
+  "type": "module",
+  "packageManager": "bun@1.4.4",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "tailwindcss",
+    "base-ui",
+    "typescript"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "clean": "rm -rf dist coverage",
+    "prepublishOnly": "bun run clean && bun run lint && bun run typecheck && bun run test && bun run build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.6.3",
+    "@tailwindcss/vite": "4.3.3",
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/node": "24.19.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "jsdom": "30.1.3",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.5",
+    "vite-plugin-dts": "5.1.2",
+    "vitest": "5.0.5"
+  }
+}