@ashwa-io/ui 0.0.2 → 0.0.3

package/dist/components/atomic/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { IconComponent, Tone } from "../../../lib/types.js";
+import React from "react";
+export interface BadgeProps {
+  children: React.ReactNode;
+  tone?: Tone;
+  /** Leading icon, decorative (aria-hidden). */
+  icon?: IconComponent;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atomic/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { Badge as Badge$1 } from "../../ui/badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Badge/Badge.tsx
+const PRIMITIVE_VARIANT = {
+	neutral: "secondary",
+	brand: "secondary",
+	success: "secondary",
+	warning: "secondary",
+	danger: "destructive",
+	info: "secondary"
+};
+const TONE_CLASS = {
+	brand: "bg-brand-tint text-brand-tint-foreground",
+	success: "bg-success/10 text-success dark:bg-success/20",
+	warning: "bg-warning/10 text-warning dark:bg-warning/20",
+	info: "bg-info/10 text-info dark:bg-info/20"
+};
+const Badge = (props) => {
+	const { children, tone = "neutral", icon: Icon, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsxs(Badge$1, {
+		id,
+		"data-testid": testId,
+		variant: PRIMITIVE_VARIANT[tone],
+		className: TONE_CLASS[tone],
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			"data-icon": "inline-start",
+			"aria-hidden": true
+		}), children]
+	});
+};
+export { Badge };

package/dist/components/atomic/Badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps } from "./Badge.js";
+export { Badge, type BadgeProps };

package/dist/components/atomic/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { IconComponent, Size } from "../../../lib/types.js";
+import { ButtonVariant } from "./buttonVariant.js";
 import React from "react";
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
 export interface ButtonProps {
   variant?: ButtonVariant;
   size?: Size;
@@ -19,4 +19,5 @@ export interface ButtonProps {
   'aria-describedby'?: string;
   'data-testid'?: string;
 }
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.FC<ButtonProps>;
+export type { ButtonVariant };

package/dist/components/atomic/Button/Button.js

@@ -1,16 +1,9 @@
 import { Button as Button$1 } from "../../ui/button.js";
 import { cn } from "../../../lib/utils.js";
-import { LoaderCircleIcon } from "lucide-react";
+import { BUTTON_VARIANT } from "./buttonVariant.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { LoaderCircleIcon } from "lucide-react";
 // src/components/atomic/Button/Button.tsx
-const VARIANT = {
-	primary: "default",
-	secondary: "secondary",
-	outline: "outline",
-	ghost: "ghost",
-	destructive: "destructive",
-	link: "link"
-};
 const VARIANT_CLASS = { link: "text-brand-text" };
 const SIZE = {
 	sm: "sm",
@@ -24,7 +17,7 @@ const Button = (props) => {
 		ref,
 		id,
 		type,
-		variant: VARIANT[variant],
+		variant: BUTTON_VARIANT[variant],
 		size: SIZE[size],
 		className: cn(VARIANT_CLASS[variant], fullWidth && "w-full"),
 		disabled: disabled || loading,

package/dist/components/atomic/Button/buttonVariant.d.ts

@@ -0,0 +1,3 @@
+import "../../ui/button.js";
+import "react";
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';

package/dist/components/atomic/Button/buttonVariant.js

@@ -0,0 +1,10 @@
+// src/components/atomic/Button/buttonVariant.ts
+const BUTTON_VARIANT = {
+	primary: "default",
+	secondary: "secondary",
+	outline: "outline",
+	ghost: "ghost",
+	destructive: "destructive",
+	link: "link"
+};
+export { BUTTON_VARIANT };

package/dist/components/atomic/Button/index.d.ts

@@ -1,2 +1,3 @@
-import { Button, ButtonProps, ButtonVariant } from "./Button.js";
+import { ButtonVariant } from "./buttonVariant.js";
+import { Button, ButtonProps } from "./Button.js";
 export { Button, type ButtonProps, type ButtonVariant };

package/dist/components/atomic/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface DividerProps {
+  /** A vertical divider stretches to its flex row's height. */
+  orientation?: 'horizontal' | 'vertical';
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atomic/Divider/Divider.js

@@ -0,0 +1,12 @@
+import { Separator } from "../../ui/separator.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Divider/Divider.tsx
+const Divider = (props) => {
+	const { orientation = "horizontal", id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation,
+		id,
+		"data-testid": testId
+	});
+};
+export { Divider };

package/dist/components/atomic/Divider/index.d.ts

@@ -0,0 +1,2 @@
+import { Divider, DividerProps } from "./Divider.js";
+export { Divider, type DividerProps };

package/dist/components/atomic/Heading/Heading.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+  children: React.ReactNode;
+  /** Renders h1–h6; the visual size follows the level. */
+  level: HeadingLevel;
+  /** One line with an ellipsis; the parent must constrain the width. */
+  truncate?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Heading: React.FC<HeadingProps>;

package/dist/components/atomic/Heading/Heading.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Heading/Heading.tsx
+const ELEMENT = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+};
+const SIZE = {
+	1: "text-2xl tracking-tight",
+	2: "text-xl tracking-tight",
+	3: "text-lg",
+	4: "text-base",
+	5: "text-sm",
+	6: "text-xs"
+};
+const Heading = (props) => {
+	const { children, level, truncate = false, id, "data-testid": testId } = props;
+	const Element = ELEMENT[level];
+	return /* @__PURE__ */ jsx(Element, {
+		id,
+		"data-testid": testId,
+		className: cn("font-heading text-foreground font-semibold", SIZE[level], truncate && "truncate"),
+		children
+	});
+};
+export { Heading };

package/dist/components/atomic/Heading/index.d.ts

@@ -0,0 +1,2 @@
+import { Heading, HeadingLevel, HeadingProps } from "./Heading.js";
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/components/atomic/IconButton/IconButton.d.ts

@@ -0,0 +1,21 @@
+import { ButtonVariant } from "../Button/buttonVariant.js";
+import { IconComponent, Size } from "../../../lib/types.js";
+import React from "react";
+export type IconButtonVariant = Exclude<ButtonVariant, 'link'>;
+export interface IconButtonProps {
+  icon: IconComponent;
+  /** Required: an icon-only button has no other accessible name. */
+  'aria-label': string;
+  variant?: IconButtonVariant;
+  size?: Size;
+  /** Disables the button, sets aria-busy and swaps the icon for a spinner. */
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

package/dist/components/atomic/IconButton/IconButton.js

@@ -0,0 +1,34 @@
+import { BUTTON_VARIANT } from "../Button/buttonVariant.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { LoaderCircleIcon } from "lucide-react";
+// src/components/atomic/IconButton/IconButton.tsx
+const SIZE = {
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+const IconButton = (props) => {
+	const { icon, "aria-label": ariaLabel, variant = "ghost", size = "md", loading = false, disabled = false, type = "button", onClick, ref, id, "aria-describedby": ariaDescribedBy, "data-testid": testId } = props;
+	const Icon = loading ? LoaderCircleIcon : icon;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		id,
+		type,
+		variant: BUTTON_VARIANT[variant],
+		size: SIZE[size],
+		disabled: disabled || loading,
+		focusableWhenDisabled: loading,
+		"aria-busy": loading || void 0,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		"data-testid": testId,
+		onClick,
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: cn(loading && "animate-spin")
+		})
+	});
+};
+export { IconButton };

package/dist/components/atomic/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps, IconButtonVariant } from "./IconButton.js";
+export { IconButton, type IconButtonProps, type IconButtonVariant };

package/dist/components/atomic/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type SkeletonShape = 'text' | 'circle' | 'block';
+export interface SkeletonProps {
+  /** Fills the wrapper's width; the app sizes it with a plain div. */
+  shape?: SkeletonShape;
+  'data-testid'?: string;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/atomic/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+import { Skeleton as Skeleton$1 } from "../../ui/skeleton.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Skeleton/Skeleton.tsx
+const SHAPE = {
+	text: "h-4 w-full",
+	circle: "aspect-square w-full rounded-full",
+	block: "size-full"
+};
+const Skeleton = (props) => {
+	const { shape = "text", "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Skeleton$1, {
+		"aria-hidden": true,
+		"data-testid": testId,
+		className: SHAPE[shape]
+	});
+};
+export { Skeleton };

package/dist/components/atomic/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape } from "./Skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/atomic/Spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { Size } from "../../../lib/types.js";
+import React from "react";
+export interface SpinnerProps {
+  size?: Size;
+  /** Accessible name announced by screen readers. */
+  label?: string;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/atomic/Spinner/Spinner.js

@@ -0,0 +1,18 @@
+import { Spinner as Spinner$1 } from "../../ui/spinner.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Spinner/Spinner.tsx
+const SIZE = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-8"
+};
+const Spinner = (props) => {
+	const { size = "md", label = "Loading", id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Spinner$1, {
+		id,
+		"data-testid": testId,
+		"aria-label": label,
+		className: SIZE[size]
+	});
+};
+export { Spinner };

package/dist/components/atomic/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps } from "./Spinner.js";
+export { Spinner, type SpinnerProps };

package/dist/components/atomic/Text/Text.d.ts

@@ -0,0 +1,20 @@
+import { Tone } from "../../../lib/types.js";
+import React from "react";
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+export type TextTone = Tone | 'muted';
+export type TextWeight = 'normal' | 'medium' | 'semibold';
+export interface TextProps {
+  children: React.ReactNode;
+  as?: 'p' | 'span' | 'div';
+  /** Leave unset to inherit the parent's size (the page default is md). */
+  size?: TextSize;
+  /** Leave unset to inherit the parent's colour. */
+  tone?: TextTone;
+  /** Leave unset to inherit the parent's weight. */
+  weight?: TextWeight;
+  /** One line with an ellipsis; the parent must constrain the width. */
+  truncate?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Text: React.FC<TextProps>;

package/dist/components/atomic/Text/Text.js

@@ -0,0 +1,33 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Text/Text.tsx
+const SIZE = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg"
+};
+const TONE = {
+	neutral: "text-foreground",
+	muted: "text-muted-foreground",
+	brand: "text-brand-text",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-destructive",
+	info: "text-info"
+};
+const WEIGHT = {
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold"
+};
+const Text = (props) => {
+	const { children, as: Element = "p", size, tone, weight, truncate = false, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		id,
+		"data-testid": testId,
+		className: cn(size && SIZE[size], tone && TONE[tone], weight && WEIGHT[weight], truncate && "block truncate"),
+		children
+	});
+};
+export { Text };

package/dist/components/atomic/Text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text, TextProps, TextSize, TextTone, TextWeight } from "./Text.js";
+export { Text, type TextProps, type TextSize, type TextTone, type TextWeight };

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between';
+export interface StackProps {
+  children: React.ReactNode;
+  direction?: 'row' | 'column';
+  /** Tailwind spacing step (1 = 4px). */
+  gap?: StackGap;
+  /** Cross axis. */
+  align?: StackAlign;
+  /** Main axis. */
+  justify?: StackJustify;
+  wrap?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export type HStackProps = Omit<StackProps, 'direction'>;
+export type VStackProps = Omit<StackProps, 'direction'>;
+export declare const Stack: React.FC<StackProps>;
+export declare const HStack: React.FC<HStackProps>;
+export declare const VStack: React.FC<VStackProps>;

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,62 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/Stack/Stack.tsx
+const GAP = {
+	0: "gap-0",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4",
+	5: "gap-5",
+	6: "gap-6",
+	8: "gap-8"
+};
+const ALIGN = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+};
+const JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+const Stack = (props) => {
+	const { children, direction = "column", gap = 0, align, justify, wrap = false, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		"data-testid": testId,
+		className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP[gap], align && ALIGN[align], justify && JUSTIFY[justify], wrap && "flex-wrap"),
+		children
+	});
+};
+const HStack = (props) => {
+	const { children, gap, align, justify, wrap, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "row",
+		gap,
+		align,
+		justify,
+		wrap,
+		id,
+		"data-testid": testId,
+		children
+	});
+};
+const VStack = (props) => {
+	const { children, gap, align, justify, wrap, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		gap,
+		align,
+		justify,
+		wrap,
+		id,
+		"data-testid": testId,
+		children
+	});
+};
+export { HStack, Stack, VStack };

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1,2 @@
+import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./Stack.js";
+export { HStack, type HStackProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, VStack, type VStackProps };

package/dist/components/ui/badge.js

@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+// src/components/ui/badge.tsx
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const Badge = ({ className, variant = "default", render, ...props }) => useRender({
+	defaultTagName: "span",
+	props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
+	render,
+	state: {
+		slot: "badge",
+		variant
+	}
+});
+export { Badge, badgeVariants };

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

@@ -0,0 +1,2 @@
+import "class-variance-authority";
+import "@base-ui/react/button";

package/dist/components/ui/button.js

@@ -1,7 +1,7 @@
-import { Button } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
 import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
 // src/components/ui/button.tsx
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {

package/dist/components/ui/separator.js

@@ -0,0 +1,13 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+// src/components/ui/separator.tsx
+const Separator$1 = ({ className, orientation = "horizontal", ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className),
+		...props
+	});
+};
+export { Separator$1 as Separator };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,11 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+// src/components/ui/skeleton.tsx
+const Skeleton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-muted animate-pulse rounded-md", className),
+		...props
+	});
+};
+export { Skeleton };

package/dist/components/ui/spinner.js

@@ -0,0 +1,14 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+// src/components/ui/spinner.tsx
+const Spinner = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+};
+export { Spinner };

package/dist/index.d.ts

@@ -1,4 +1,21 @@
+import "./components/atomic/Badge/index.js";
+import { Badge, BadgeProps } from "./components/atomic/Badge/Badge.js";
 import "./components/atomic/Button/index.js";
-import { Button, ButtonProps, ButtonVariant } from "./components/atomic/Button/Button.js";
-import { IconComponent, Size } from "./lib/types.js";
-export { Button, type ButtonProps, type ButtonVariant, type IconComponent, type Size };
+import { ButtonVariant } from "./components/atomic/Button/buttonVariant.js";
+import { Button, ButtonProps } from "./components/atomic/Button/Button.js";
+import "./components/atomic/Divider/index.js";
+import { Divider, DividerProps } from "./components/atomic/Divider/Divider.js";
+import "./components/atomic/Heading/index.js";
+import { Heading, HeadingLevel, HeadingProps } from "./components/atomic/Heading/Heading.js";
+import "./components/atomic/Text/index.js";
+import { Text, TextProps, TextSize, TextTone, TextWeight } from "./components/atomic/Text/Text.js";
+import "./components/atomic/IconButton/index.js";
+import { IconButton, IconButtonProps, IconButtonVariant } from "./components/atomic/IconButton/IconButton.js";
+import "./components/atomic/Skeleton/index.js";
+import { Skeleton, SkeletonProps, SkeletonShape } from "./components/atomic/Skeleton/Skeleton.js";
+import "./components/atomic/Spinner/index.js";
+import { Spinner, SpinnerProps } from "./components/atomic/Spinner/Spinner.js";
+import "./components/layout/Stack/index.js";
+import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
+import { IconComponent, Size, Tone } from "./lib/types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Divider, type DividerProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Text, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };

package/dist/index.js

@@ -1 +1,10 @@
-export { Button } from "./components/atomic/Button/Button.js";
+import { Badge } from "./components/atomic/Badge/Badge.js";
+import { Button } from "./components/atomic/Button/Button.js";
+import { Divider } from "./components/atomic/Divider/Divider.js";
+import { Heading } from "./components/atomic/Heading/Heading.js";
+import { Text } from "./components/atomic/Text/Text.js";
+import { IconButton } from "./components/atomic/IconButton/IconButton.js";
+import { Skeleton } from "./components/atomic/Skeleton/Skeleton.js";
+import { Spinner } from "./components/atomic/Spinner/Spinner.js";
+import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
+export { Badge, Button, Divider, HStack, Heading, IconButton, Skeleton, Spinner, Stack, Text, VStack };

package/dist/lib/types.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 /** Shared size scale for every public component. */
 export type Size = 'sm' | 'md' | 'lg';
+export type Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
 /** An icon component (lucide-react, svgr): the design system controls its size and colour. */
 export type IconComponent = React.ComponentType<{
   className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
   "license": "MIT",
   "type": "module",

package/src/styles/index.css

@@ -29,6 +29,9 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -85,6 +88,11 @@
   /* Tailwind red-700, darker than base-nova's red-600: destructive text on its 10% tint
      (Button destructive) must reach WCAG AA 4.5:1; red-600 only reached 4:1. */
   --destructive: oklch(0.505 0.213 27.518);
+  /* Status text colours (Tailwind green-800, amber-800, blue-700): readable as text and on their
+     10% tints (Badge). Fixed, never per org. */
+  --success: oklch(0.448 0.119 151.328);
+  --warning: oklch(0.473 0.137 46.201);
+  --info: oklch(0.488 0.243 264.376);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: var(--brand);
@@ -125,6 +133,9 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.792 0.209 151.711);
+  --warning: oklch(0.828 0.189 84.429);
+  --info: oklch(0.707 0.165 254.624);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --chart-2: oklch(0.556 0 0);