@ashwa-io/ui 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -1,4 +1,37 @@
+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/Checkbox/index.js";
+import { Checkbox, CheckboxProps } from "./components/atomic/Checkbox/Checkbox.js";
+import "./components/atomic/ColorInput/index.js";
+import { ColorInput, ColorInputProps } from "./components/atomic/ColorInput/ColorInput.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/Switch/index.js";
+import { Switch, SwitchProps } from "./components/atomic/Switch/Switch.js";
+import "./components/atomic/Text/index.js";
+import { Text, TextProps, TextSize, TextTone, TextWeight } from "./components/atomic/Text/Text.js";
+import "./components/atomic/TextArea/index.js";
+import { TextArea, TextAreaProps } from "./components/atomic/TextArea/TextArea.js";
+import "./components/atomic/TextInput/index.js";
+import { TextInput, TextInputProps, TextInputType } from "./components/atomic/TextInput/TextInput.js";
+import "./components/atomic/IconButton/index.js";
+import { IconButton, IconButtonProps, IconButtonVariant } from "./components/atomic/IconButton/IconButton.js";
+import "./components/atomic/Select/index.js";
+import { Select, SelectOption, SelectProps } from "./components/atomic/Select/Select.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/FormLayout/index.js";
+import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./components/layout/FormLayout/FormLayout.js";
+import "./components/molecule/FormField/index.js";
+import { FormField, FormFieldControlProps, FormFieldProps } from "./components/molecule/FormField/FormField.js";
+import "./components/layout/Stack/index.js";
+import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
+import { FieldBaseProps, IconComponent, Size, Tone } from "./lib/types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, Divider, type DividerProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };

package/dist/index.js

@@ -1 +1,18 @@
-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 { Checkbox } from "./components/atomic/Checkbox/Checkbox.js";
+import { ColorInput } from "./components/atomic/ColorInput/ColorInput.js";
+import { Divider } from "./components/atomic/Divider/Divider.js";
+import { Heading } from "./components/atomic/Heading/Heading.js";
+import { Switch } from "./components/atomic/Switch/Switch.js";
+import { Text } from "./components/atomic/Text/Text.js";
+import { TextArea } from "./components/atomic/TextArea/TextArea.js";
+import { TextInput } from "./components/atomic/TextInput/TextInput.js";
+import { IconButton } from "./components/atomic/IconButton/IconButton.js";
+import { Select } from "./components/atomic/Select/Select.js";
+import { Skeleton } from "./components/atomic/Skeleton/Skeleton.js";
+import { Spinner } from "./components/atomic/Spinner/Spinner.js";
+import { FormLayout } from "./components/layout/FormLayout/FormLayout.js";
+import { FormField } from "./components/molecule/FormField/FormField.js";
+import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
+export { Badge, Button, Checkbox, ColorInput, Divider, FormField, FormLayout, HStack, Heading, IconButton, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, VStack };

package/dist/lib/types.d.ts

@@ -1,9 +1,24 @@
 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;
   'aria-hidden'?: boolean;
   'data-icon'?: string;
-}>;
+}>;
+/** Label, help and error props every form input shares (rendered by FormField). */
+export interface FieldBaseProps {
+  /** Accessible name; always required, even when hidden. */
+  label: string;
+  /** Hides the label visually; screen readers still announce it. */
+  hideLabel?: boolean;
+  description?: string;
+  /** Message shown under the field; also sets aria-invalid. */
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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);