@walidsj/react-ui 0.0.0-stage → 0.1.1

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,14 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef } from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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,106 @@
+import { Button as Button$1 } from "@base-ui/react/button";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+// node_modules/class-variance-authority/dist/index.mjs
+/**
+* Copyright 2022 Joe Bell. All rights reserved.
+*
+* This file is licensed to you under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with the
+* License. You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations under
+* the License.
+*/ var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var cx = clsx;
+var cva = (base, config) => (props) => {
+	var _config_compoundVariants;
+	if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+	const { variants, defaultVariants } = config;
+	const getVariantClassNames = Object.keys(variants).map((variant) => {
+		const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+		const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+		if (variantProp === null) return null;
+		const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+		return variants[variant][variantKey];
+	});
+	const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+		let [key, value] = param;
+		if (value === void 0) return acc;
+		acc[key] = value;
+		return acc;
+	}, {});
+	return cx(base, getVariantClassNames, config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+		let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+		return Object.entries(compoundVariantOptions).every((param) => {
+			let [key, value] = param;
+			return Array.isArray(value) ? value.includes({
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key]) : {
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key] === value;
+		}) ? [
+			...acc,
+			cvClass,
+			cvClassName
+		] : acc;
+	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+// src/lib/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+// src/components/button/button.tsx
+var buttonVariants = cva("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", {
+	variants: {
+		variant: {
+			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"
+		},
+		size: {
+			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"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+var Button = forwardRef(function Button({ className, variant = "primary", size = "md", type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		ref,
+		type,
+		className: cn(buttonVariants({
+			variant,
+			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":["../node_modules/class-variance-authority/dist/index.mjs","../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/input/input.tsx"],"sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */ import { clsx } from \"clsx\";\nconst falsyToString = (value)=>typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\nexport const cx = clsx;\nexport const cva = (base, config)=>(props)=>{\n        var _config_compoundVariants;\n        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n        const { variants, defaultVariants } = config;\n        const getVariantClassNames = Object.keys(variants).map((variant)=>{\n            const variantProp = props === null || props === void 0 ? void 0 : props[variant];\n            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];\n            if (variantProp === null) return null;\n            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);\n            return variants[variant][variantKey];\n        });\n        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{\n            let [key, value] = param;\n            if (value === undefined) {\n                return acc;\n            }\n            acc[key] = value;\n            return acc;\n        }, {});\n        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{\n            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;\n            return Object.entries(compoundVariantOptions).every((param)=>{\n                let [key, value] = param;\n                return Array.isArray(value) ? value.includes({\n                    ...defaultVariants,\n                    ...propsWithoutUndefined\n                }[key]) : ({\n                    ...defaultVariants,\n                    ...propsWithoutUndefined\n                })[key] === value;\n            }) ? [\n                ...acc,\n                cvClass,\n                cvClassName\n            ] : acc;\n        }, []);\n        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n    };\n\n","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 { cva, type VariantProps } from \"class-variance-authority\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst buttonVariants = cva(\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  {\n    variants: {\n      variant: {\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:\n          \"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      size: {\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    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport type ButtonVariant = NonNullable<\n  VariantProps<typeof buttonVariants>[\"variant\"]\n>;\nexport type ButtonSize = NonNullable<\n  VariantProps<typeof buttonVariants>[\"size\"]\n>;\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\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(buttonVariants({ variant, size }), className)}\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"],"ignoreList":[0],"mappings":";;;;;;;;;;;;;;;;;;;;;GAeA,IAAM,iBAAiB,UAAQ,OAAO,UAAU,YAAY,GAAG,UAAU,UAAU,IAAI,MAAM;AAC7F,IAAa,KAAK;AAClB,IAAa,OAAO,MAAM,YAAU,UAAQ;CACpC,IAAI;CACJ,KAAK,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,aAAa,MAAM,OAAO,GAAG,MAAM,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,OAAO,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,SAAS;CACvN,MAAM,EAAE,UAAU,oBAAoB;CACtC,MAAM,uBAAuB,OAAO,KAAK,QAAQ,CAAC,CAAC,KAAK,YAAU;EAC9D,MAAM,cAAc,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM;EACxE,MAAM,qBAAqB,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB;EAC7G,IAAI,gBAAgB,MAAM,OAAO;EACjC,MAAM,aAAa,cAAc,WAAW,KAAK,cAAc,kBAAkB;EACjF,OAAO,SAAS,QAAQ,CAAC;CAC7B,CAAC;CACD,MAAM,wBAAwB,SAAS,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,KAAK,UAAQ;EAC9E,IAAI,CAAC,KAAK,SAAS;EACnB,IAAI,UAAU,KAAA,GACV,OAAO;EAEX,IAAI,OAAO;EACX,OAAO;CACX,GAAG,CAAC,CAAC;CAkBL,OAAO,GAAG,MAAM,sBAjBqB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,KAAK,2BAA2B,OAAO,sBAAsB,QAAQ,6BAA6B,KAAK,IAAI,KAAK,IAAI,yBAAyB,QAAQ,KAAK,UAAQ;EAC/O,IAAI,EAAE,OAAO,SAAS,WAAW,aAAa,GAAG,2BAA2B;EAC5E,OAAO,OAAO,QAAQ,sBAAsB,CAAC,CAAC,OAAO,UAAQ;GACzD,IAAI,CAAC,KAAK,SAAS;GACnB,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS;IACzC,GAAG;IACH,GAAG;GACP,EAAE,IAAI,IAAK;IACP,GAAG;IACH,GAAG;GACP,EAAG,SAAS;EAChB,CAAC,IAAI;GACD,GAAG;GACH;GACA;EACJ,IAAI;CACR,GAAG,CAAC,CAAC,GAC+D,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,OAAO,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,SAAS;AAChM;;ACnDJ,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;ACAA,IAAM,iBAAiB,IACrB,iSACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,QACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAcA,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,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;CAC3D,CAAA;AAEL,CACF;;ACpDA,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,90 @@
 {
   "name": "@walidsj/react-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "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",
+    "class-variance-authority": "^0.7.1",
+    "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"
+  }
+}