@atlure/ui 0.2.0

package/README.md

@@ -0,0 +1,117 @@
+# @atlure/ui
+
+React Native components for `atlure-paw`, styled with NativeWind against `@atlure/tokens`.
+
+## This package ships TypeScript source, not compiled output
+
+`exports` points straight at `./src/index.ts` and `files` includes `src`. That is deliberate and it is
+the one thing not to "fix".
+
+NativeWind's `className` is a **Babel-time JSX transform** (`jsxImportSource: "nativewind"`). If this
+package were precompiled — by `react-native-builder-bob`, `tsup` or plain `tsc` — the JSX would be
+frozen against `react/jsx-runtime`, `className` would become a prop nobody reads, and every component
+would render unstyled with no error to explain why. The consuming app's Babel pipeline has to see the
+original JSX.
+
+## Consumer setup
+
+Two steps, both required.
+
+**1. Add this package's source to your Tailwind `content` array.** Classes live in files inside
+`node_modules`, so Tailwind will not find them otherwise and every utility used only by this package
+will be missing from the compiled output:
+
+```js
+module.exports = {
+  presets: [require("nativewind/preset"), require("@atlure/tailwind-preset")],
+  content: ["./app/**/*.{ts,tsx}", "./node_modules/@atlure/ui/src/**/*.{ts,tsx}"],
+};
+```
+
+The NativeWind preset must come first.
+
+**2. Let Metro transpile this package.** Because it ships source, `node_modules/@atlure/ui` must not
+be excluded from the Babel transform. In a default Expo project it already is not.
+
+## Usage
+
+```tsx
+import { Avatar, Button, Card, CardContent, Text } from "@atlure/ui";
+
+export function SitterCard({ sitter, onOpen, openLabel }) {
+  return (
+    <Card onPress={onOpen} accessibilityLabel={openLabel}>
+      <CardContent className="flex-row items-center gap-md">
+        <Avatar name={sitter.displayName} uri={sitter.avatarUrl} />
+        <Text variant="title">{sitter.displayName}</Text>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+Components: `Text`, `Button`, `Card` (`CardHeader`, `CardContent`, `CardFooter`), `Input`, `Label`,
+`Badge`, `Avatar`, `Separator`, `Skeleton`, `Switch`, `Checkbox`.
+
+Every user-facing string is a prop. This package contains no display copy, so i18n stays in the app.
+
+## Variant recipes are shared, render layers are not
+
+The `cva` recipes live in `src/variants/` as standalone files with no React Native imports, and are
+also exported from `@atlure/ui/variants`:
+
+```ts
+import { buttonVariants, buttonLabelVariants } from "@atlure/ui/variants";
+```
+
+`@atlure/ui-web` imports the same recipes and applies them to DOM elements, so a variant's spacing and
+colour are defined once for both platforms and only the rendering differs. Consequently the class
+strings are restricted to the **React Native-safe Tailwind subset**:
+
+| Not allowed | Use instead |
+|---|---|
+| `space-x-*`, `space-y-*` | `gap-*` |
+| `divide-*` | an explicit `Separator` |
+| `grid`, `grid-cols-*` | `flex-row` / `flex-col` |
+| descendant or sibling selectors | a class on the child |
+| implicit row direction | `flex-row`, always — React Native defaults to column |
+
+Values come from the token scales (`h-control-md`, `text-base`, `bg-primary`, `border-border/20`).
+There is no raw hex anywhere in this package; to change a colour, edit `packages/tokens/src/tokens.ts`.
+
+## The barrel is generated
+
+`src/index.ts` is emitted by `scripts/generate-barrel.mjs` from a directory walk of `src`, and is
+committed. Run `pnpm build` after adding a component — hand-editing it is pointless, since the next
+build overwrites it, and CI's `git diff --exit-code` fails if it is stale.
+
+This exists because a hand-maintained barrel is a guaranteed merge conflict whenever two branches add
+a component. Modules under a `hooks/` directory and any `utils.ts` are treated as internal and left
+out of the public surface.
+
+## Accessibility
+
+Every interactive component sets `accessibilityRole`, `accessibilityLabel` and `accessibilityState`,
+**and** the matching `aria-*` alias. Both are needed: `react-native-web`, which Expo uses for the web
+build, ignores `accessibilityState` in favour of `aria-*`, so state such as "checked" would silently
+never be announced there.
+
+Touch targets are guaranteed to reach 44px via `hitSlop`, computed from the `controlHeight` token
+rather than hard-coded — `touchTargetHitSlop` pads a 36px or 40px control out to the minimum without
+changing how it looks.
+
+## Tests
+
+`pnpm test` runs Vitest with React Testing Library. `react-native` is aliased to `react-native-web`
+so components render into jsdom and can be queried by role and accessible name.
+
+`@atlure/tokens` is resolved to `../tokens/src` for typechecking and testing, via `paths` in
+`tsconfig.json` and an alias in `vitest.config.ts`. Published consumers still get `dist` through that
+package's `exports`; resolving to source here means this package's checks do not depend on tokens having
+been built first, and can never read a stale `dist`.
+
+What that proves: press handling, disabled and loading behaviour, controlled toggle state, change
+propagation, accessible roles and names, and the barrel generator's output.
+
+What it does **not** prove: that NativeWind resolves any of these class strings. That requires a device
+or simulator — a green test run here says nothing about styling.

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@atlure/ui",
+  "version": "0.2.0",
+  "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
+  "license": "MIT",
+  "author": "David Moreira",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/simpxlify/atlure-ui.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./variants": {
+      "types": "./src/variants/index.ts",
+      "default": "./src/variants/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "2.6.0",
+    "@atlure/tokens": "0.2.0"
+  },
+  "peerDependencies": {
+    "nativewind": "^4.2.6",
+    "react": ">=18.3.0",
+    "react-native": ">=0.81.0",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-safe-area-context": ">=4.10.0",
+    "tailwindcss": "^3.4.19"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.1.8",
+    "jsdom": "26.1.0",
+    "nativewind": "4.2.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-web": "0.21.1",
+    "tailwindcss": "3.4.19",
+    "typescript": "5.9.3",
+    "vitest": "3.2.4"
+  },
+  "scripts": {
+    "generate:barrel": "node scripts/generate-barrel.mjs",
+    "build": "pnpm run generate:barrel",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,43 @@
+import { Image, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  avatarFallbackVariants,
+  avatarVariants,
+  type AvatarVariantProps,
+} from "../../variants/avatar-variants";
+import { Text } from "../text/text";
+import { toInitials } from "./utils";
+
+export interface AvatarProps extends ViewProps {
+  name: string;
+  uri?: string | null;
+  size?: NonNullable<AvatarVariantProps["size"]>;
+  hasRing?: boolean;
+}
+
+export function Avatar({
+  name,
+  uri = null,
+  size = "md",
+  hasRing = false,
+  className,
+  ...viewProps
+}: AvatarProps) {
+  const initials = toInitials(name);
+
+  return (
+    <View
+      accessibilityRole="image"
+      accessibilityLabel={name}
+      className={cn(avatarVariants({ size, hasRing }), className)}
+      {...viewProps}
+    >
+      {uri ? (
+        <Image source={{ uri }} accessibilityLabel={name} className="h-full w-full" />
+      ) : (
+        <Text className={avatarFallbackVariants({ size })}>{initials}</Text>
+      )}
+    </View>
+  );
+}

package/src/components/avatar/utils.ts

@@ -0,0 +1,12 @@
+const MAX_INITIALS = 2;
+
+export function toInitials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .filter((namePart) => namePart.length > 0)
+    .slice(0, MAX_INITIALS)
+    .map((namePart) => namePart[0] ?? "")
+    .join("")
+    .toUpperCase();
+}

package/src/components/badge/badge.tsx

@@ -0,0 +1,31 @@
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  badgeLabelVariants,
+  badgeVariants,
+  type BadgeVariantProps,
+} from "../../variants/badge-variants";
+import { Text } from "../text/text";
+
+export interface BadgeProps extends ViewProps {
+  label: string;
+  variant?: NonNullable<BadgeVariantProps["variant"]>;
+  size?: NonNullable<BadgeVariantProps["size"]>;
+  labelClassName?: string;
+}
+
+export function Badge({
+  label,
+  variant = "primary",
+  size = "sm",
+  className,
+  labelClassName,
+  ...viewProps
+}: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant, size }), className)} {...viewProps}>
+      <Text className={cn(badgeLabelVariants({ variant, size }), labelClassName)}>{label}</Text>
+    </View>
+  );
+}

package/src/components/button/button.tsx

@@ -0,0 +1,47 @@
+import { ActivityIndicator, Pressable } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { buttonLabelVariants, buttonVariants } from "../../variants/button-variants";
+import { Text } from "../text/text";
+import type { ButtonProps } from "./types";
+
+export function Button({
+  label,
+  variant = "primary",
+  size = "md",
+  isFullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  leadingIcon,
+  trailingIcon,
+  accessibilityLabel,
+  className,
+  labelClassName,
+  ...pressableProps
+}: ButtonProps) {
+  const isPressBlocked = isDisabled || isLoading;
+  const hasAdornment = Boolean(leadingIcon ?? trailingIcon) || isLoading;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: isPressBlocked, busy: isLoading }}
+      aria-disabled={isPressBlocked}
+      aria-busy={isLoading}
+      disabled={isPressBlocked}
+      hitSlop={touchTargetHitSlop(size)}
+      className={cn(
+        buttonVariants({ variant, size, isFullWidth, isDisabled: isPressBlocked }),
+        hasAdornment && "gap-sm",
+        className,
+      )}
+      {...pressableProps}
+    >
+      {isLoading ? <ActivityIndicator size="small" /> : leadingIcon}
+      <Text className={cn(buttonLabelVariants({ variant, size }), labelClassName)}>{label}</Text>
+      {!isLoading && trailingIcon}
+    </Pressable>
+  );
+}

package/src/components/button/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { PressableProps } from "react-native";
+
+import type { ControlSize } from "../../lib/touch-target";
+import type { ButtonVariantProps } from "../../variants/button-variants";
+
+export type ButtonSize = Extract<ControlSize, "sm" | "md" | "lg">;
+
+export interface ButtonProps
+  extends Omit<PressableProps, "children" | "disabled" | "accessibilityState"> {
+  label: string;
+  variant?: NonNullable<ButtonVariantProps["variant"]>;
+  size?: ButtonSize;
+  isFullWidth?: boolean;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+}

package/src/components/card/card-section.tsx

@@ -0,0 +1,20 @@
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { cardSectionVariants } from "../../variants/card-variants";
+
+export interface CardSectionProps extends ViewProps {}
+
+export function CardHeader({ className, ...viewProps }: CardSectionProps) {
+  return <View className={cn(cardSectionVariants({ section: "header" }), className)} {...viewProps} />;
+}
+
+export function CardContent({ className, ...viewProps }: CardSectionProps) {
+  return (
+    <View className={cn(cardSectionVariants({ section: "content" }), className)} {...viewProps} />
+  );
+}
+
+export function CardFooter({ className, ...viewProps }: CardSectionProps) {
+  return <View className={cn(cardSectionVariants({ section: "footer" }), className)} {...viewProps} />;
+}

package/src/components/card/card.tsx

@@ -0,0 +1,45 @@
+import { Pressable, View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { cardVariants, type CardVariantProps } from "../../variants/card-variants";
+
+export interface CardProps extends ViewProps, Pick<CardVariantProps, "variant"> {
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  isDisabled?: boolean;
+}
+
+export function Card({
+  variant,
+  onPress,
+  accessibilityLabel,
+  isDisabled = false,
+  className,
+  children,
+  ...viewProps
+}: CardProps) {
+  const cardClassName = cn(cardVariants({ variant, isPressable: Boolean(onPress) }), className);
+
+  if (!onPress) {
+    return (
+      <View className={cardClassName} {...viewProps}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: isDisabled }}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      onPress={onPress}
+      className={cardClassName}
+      {...viewProps}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,50 @@
+import { Pressable, type PressableProps, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import {
+  checkboxBoxVariants,
+  checkboxIndicatorVariants,
+  checkboxRowVariants,
+} from "../../variants/checkbox-variants";
+import { Label } from "../label/label";
+
+export interface CheckboxProps
+  extends Omit<PressableProps, "children" | "disabled" | "onPress" | "accessibilityState"> {
+  isChecked: boolean;
+  onValueChange: (isChecked: boolean) => void;
+  label?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+export function Checkbox({
+  isChecked,
+  onValueChange,
+  label,
+  isDisabled = false,
+  isInvalid = false,
+  accessibilityLabel,
+  className,
+  ...pressableProps
+}: CheckboxProps) {
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      aria-checked={isChecked}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      hitSlop={touchTargetHitSlop("md")}
+      onPress={() => onValueChange(!isChecked)}
+      className={cn(checkboxRowVariants({ isDisabled }), className)}
+      {...pressableProps}
+    >
+      <View className={checkboxBoxVariants({ isChecked, isInvalid })}>
+        <View className={checkboxIndicatorVariants({ isChecked })} />
+      </View>
+      {label ? <Label isDisabled={isDisabled} isInvalid={isInvalid}>{label}</Label> : null}
+    </Pressable>
+  );
+}

package/src/components/input/input.tsx

@@ -0,0 +1,34 @@
+import { TextInput, type TextInputProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { inputVariants, type InputVariantProps } from "../../variants/input-variants";
+
+export interface InputProps extends Omit<TextInputProps, "editable" | "multiline"> {
+  size?: NonNullable<InputVariantProps["size"]>;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isMultiline?: boolean;
+}
+
+export function Input({
+  size = "md",
+  isDisabled = false,
+  isInvalid = false,
+  isMultiline = false,
+  className,
+  ...textInputProps
+}: InputProps) {
+  return (
+    <TextInput
+      accessibilityState={{ disabled: isDisabled }}
+      aria-disabled={isDisabled}
+      aria-invalid={isInvalid}
+      editable={!isDisabled}
+      multiline={isMultiline}
+      hitSlop={touchTargetHitSlop(size)}
+      className={cn(inputVariants({ size, isInvalid, isDisabled, isMultiline }), className)}
+      {...textInputProps}
+    />
+  );
+}

package/src/components/label/label.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../lib/cn";
+import { labelVariants } from "../../variants/label-variants";
+import { Text, type TextProps } from "../text/text";
+
+export interface LabelProps extends Omit<TextProps, "variant" | "tone"> {
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+export function Label({
+  isDisabled = false,
+  isInvalid = false,
+  className,
+  ...textProps
+}: LabelProps) {
+  return (
+    <Text
+      accessibilityRole="text"
+      className={cn(labelVariants({ isDisabled, isInvalid }), className)}
+      {...textProps}
+    />
+  );
+}

package/src/components/separator/separator.tsx

@@ -0,0 +1,26 @@
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { separatorVariants, type SeparatorVariantProps } from "../../variants/separator-variants";
+
+export interface SeparatorProps extends Omit<ViewProps, "children"> {
+  orientation?: NonNullable<SeparatorVariantProps["orientation"]>;
+  spacing?: NonNullable<SeparatorVariantProps["spacing"]>;
+}
+
+export function Separator({
+  orientation = "horizontal",
+  spacing = "none",
+  className,
+  ...viewProps
+}: SeparatorProps) {
+  return (
+    <View
+      accessibilityRole="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className={cn(separatorVariants({ orientation, spacing }), className)}
+      {...viewProps}
+    />
+  );
+}

package/src/components/skeleton/hooks/use-pulse-opacity.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+
+const PULSE_DURATION_MS = 900;
+const MIN_OPACITY = 0.4;
+const MAX_OPACITY = 1;
+
+export function usePulseOpacity(isEnabled: boolean): Animated.Value {
+  const opacity = useRef(new Animated.Value(MAX_OPACITY)).current;
+
+  useEffect(() => {
+    if (!isEnabled) {
+      opacity.setValue(MAX_OPACITY);
+      return;
+    }
+
+    const pulse = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: MIN_OPACITY,
+          duration: PULSE_DURATION_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: MAX_OPACITY,
+          duration: PULSE_DURATION_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    pulse.start();
+
+    return () => pulse.stop();
+  }, [isEnabled, opacity]);
+
+  return opacity;
+}

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,34 @@
+import { Animated, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { skeletonVariants, type SkeletonVariantProps } from "../../variants/skeleton-variants";
+import { usePulseOpacity } from "./hooks/use-pulse-opacity";
+
+export interface SkeletonProps extends Omit<ViewProps, "children"> {
+  shape?: NonNullable<SkeletonVariantProps["shape"]>;
+  accessibilityLabel: string;
+  isAnimated?: boolean;
+}
+
+export function Skeleton({
+  shape = "line",
+  accessibilityLabel,
+  isAnimated = true,
+  className,
+  style,
+  ...viewProps
+}: SkeletonProps) {
+  const opacity = usePulseOpacity(isAnimated);
+
+  return (
+    <Animated.View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ busy: true }}
+      aria-busy
+      className={cn(skeletonVariants({ shape }), className)}
+      style={[{ opacity }, style]}
+      {...viewProps}
+    />
+  );
+}

package/src/components/switch/switch.tsx

@@ -0,0 +1,44 @@
+import { Pressable, type PressableProps, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { switchThumbVariants, switchTrackVariants } from "../../variants/switch-variants";
+import { Label } from "../label/label";
+
+export interface SwitchProps
+  extends Omit<PressableProps, "children" | "disabled" | "onPress" | "accessibilityState"> {
+  isChecked: boolean;
+  onValueChange: (isChecked: boolean) => void;
+  label?: string;
+  isDisabled?: boolean;
+}
+
+export function Switch({
+  isChecked,
+  onValueChange,
+  label,
+  isDisabled = false,
+  accessibilityLabel,
+  className,
+  ...pressableProps
+}: SwitchProps) {
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      aria-checked={isChecked}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      hitSlop={touchTargetHitSlop("md")}
+      onPress={() => onValueChange(!isChecked)}
+      className={cn("flex-row items-center gap-sm", className)}
+      {...pressableProps}
+    >
+      <View className={switchTrackVariants({ isChecked, isDisabled })}>
+        <View className={switchThumbVariants({ isChecked })} />
+      </View>
+      {label ? <Label isDisabled={isDisabled}>{label}</Label> : null}
+    </Pressable>
+  );
+}

package/src/components/text/text.tsx

@@ -0,0 +1,12 @@
+import { Text as ReactNativeText, type TextProps as ReactNativeTextProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { textVariants, type TextVariantProps } from "../../variants/text-variants";
+
+export interface TextProps extends ReactNativeTextProps, TextVariantProps {}
+
+export function Text({ variant, tone, className, ...textProps }: TextProps) {
+  return (
+    <ReactNativeText className={cn(textVariants({ variant, tone }), className)} {...textProps} />
+  );
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+/* atlure-generated-barrel-do-not-edit */
+
+export * from "./components/avatar/avatar";
+export * from "./components/badge/badge";
+export * from "./components/button/button";
+export * from "./components/button/types";
+export * from "./components/card/card";
+export * from "./components/card/card-section";
+export * from "./components/checkbox/checkbox";
+export * from "./components/input/input";
+export * from "./components/label/label";
+export * from "./components/separator/separator";
+export * from "./components/skeleton/skeleton";
+export * from "./components/switch/switch";
+export * from "./components/text/text";
+export * from "./lib/cn";
+export * from "./lib/touch-target";
+export * from "./variants/avatar-variants";
+export * from "./variants/badge-variants";
+export * from "./variants/button-variants";
+export * from "./variants/card-variants";
+export * from "./variants/checkbox-variants";
+export * from "./variants/input-variants";
+export * from "./variants/label-variants";
+export * from "./variants/separator-variants";
+export * from "./variants/skeleton-variants";
+export * from "./variants/switch-variants";
+export * from "./variants/text-variants";

package/src/lib/cn.ts

@@ -0,0 +1,18 @@
+import { controlHeight } from "@atlure/tokens";
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const controlHeightClassValues = Object.keys(controlHeight).map((scaleKey) => `control-${scaleKey}`);
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      h: [{ h: controlHeightClassValues }],
+      "min-h": [{ "min-h": controlHeightClassValues }],
+    },
+  },
+});
+
+export function cn(...classValues: ClassValue[]): string {
+  return twMerge(clsx(classValues));
+}

package/src/lib/touch-target.ts

@@ -0,0 +1,9 @@
+import { controlHeight } from "@atlure/tokens";
+
+export const MIN_TOUCH_TARGET_SIZE = 44;
+
+export type ControlSize = keyof typeof controlHeight;
+
+export function touchTargetHitSlop(size: ControlSize): number {
+  return Math.max(0, Math.ceil((MIN_TOUCH_TARGET_SIZE - controlHeight[size]) / 2));
+}

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/variants/avatar-variants.ts

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const avatarVariants = cva(
+  "items-center justify-center overflow-hidden rounded-full bg-muted",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16",
+      },
+      hasRing: {
+        true: "border-2 border-primary",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      hasRing: false,
+    },
+  },
+);
+
+export const avatarFallbackVariants = cva("font-semibold uppercase text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-xl",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
+export type AvatarFallbackVariantProps = VariantProps<typeof avatarFallbackVariants>;

package/src/variants/badge-variants.ts

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const badgeVariants = cva("flex-row items-center justify-center self-start rounded-full", {
+  variants: {
+    variant: {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      outline: "border border-border/20 bg-transparent",
+      destructive: "bg-destructive",
+      muted: "bg-muted",
+    },
+    size: {
+      sm: "px-sm py-xs",
+      md: "px-md py-xs",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "sm",
+  },
+});
+
+export const badgeLabelVariants = cva("font-medium", {
+  variants: {
+    variant: {
+      primary: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      outline: "text-foreground",
+      destructive: "text-destructive-foreground",
+      muted: "text-muted-foreground",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "sm",
+  },
+});
+
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+export type BadgeLabelVariantProps = VariantProps<typeof badgeLabelVariants>;

package/src/variants/button-variants.ts

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "flex-row items-center justify-center rounded-md border border-transparent",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        outline: "border-border/20 bg-transparent",
+        ghost: "bg-transparent",
+        destructive: "bg-destructive",
+      },
+      size: {
+        sm: "h-control-sm px-sm",
+        md: "h-control-md px-md",
+        lg: "h-control-lg px-lg",
+      },
+      isFullWidth: {
+        true: "w-full",
+        false: "self-start",
+      },
+      isDisabled: {
+        true: "opacity-50",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      isFullWidth: false,
+      isDisabled: false,
+    },
+  },
+);
+
+export const buttonLabelVariants = cva("text-center font-medium", {
+  variants: {
+    variant: {
+      primary: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      outline: "text-foreground",
+      ghost: "text-foreground",
+      destructive: "text-destructive-foreground",
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+export type ButtonLabelVariantProps = VariantProps<typeof buttonLabelVariants>;

package/src/variants/card-variants.ts

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const cardVariants = cva("overflow-hidden rounded-lg bg-card", {
+  variants: {
+    variant: {
+      outlined: "border border-border/20",
+      elevated: "border border-border/10 shadow-md",
+      flat: "border border-transparent",
+    },
+    isPressable: {
+      true: "min-h-control-lg",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "outlined",
+    isPressable: false,
+  },
+});
+
+export const cardSectionVariants = cva("", {
+  variants: {
+    section: {
+      header: "gap-xs px-md pb-sm pt-md",
+      content: "gap-sm px-md py-sm",
+      footer: "flex-row items-center justify-between px-md pb-md pt-sm",
+    },
+  },
+  defaultVariants: {
+    section: "content",
+  },
+});
+
+export type CardVariantProps = VariantProps<typeof cardVariants>;
+export type CardSectionVariantProps = VariantProps<typeof cardSectionVariants>;

package/src/variants/checkbox-variants.ts

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const checkboxRowVariants = cva("flex-row items-center gap-sm", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+  },
+});
+
+export const checkboxBoxVariants = cva("h-6 w-6 items-center justify-center rounded-sm border-2", {
+  variants: {
+    isChecked: {
+      true: "border-primary bg-primary",
+      false: "border-border/20 bg-input-background",
+    },
+    isInvalid: {
+      true: "border-destructive",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false,
+  },
+});
+
+export const checkboxIndicatorVariants = cva("h-3 w-3 rounded-sm", {
+  variants: {
+    isChecked: {
+      true: "bg-primary-foreground",
+      false: "bg-transparent",
+    },
+  },
+  defaultVariants: {
+    isChecked: false,
+  },
+});
+
+export type CheckboxRowVariantProps = VariantProps<typeof checkboxRowVariants>;
+export type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;
+export type CheckboxIndicatorVariantProps = VariantProps<typeof checkboxIndicatorVariants>;

package/src/variants/index.ts

@@ -0,0 +1,11 @@
+export * from "./avatar-variants";
+export * from "./badge-variants";
+export * from "./button-variants";
+export * from "./card-variants";
+export * from "./checkbox-variants";
+export * from "./input-variants";
+export * from "./label-variants";
+export * from "./separator-variants";
+export * from "./skeleton-variants";
+export * from "./switch-variants";
+export * from "./text-variants";

package/src/variants/input-variants.ts

@@ -0,0 +1,34 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const inputVariants = cva(
+  "w-full rounded-md border bg-input-background px-md text-base text-foreground",
+  {
+    variants: {
+      size: {
+        sm: "h-control-sm",
+        md: "h-control-md",
+        lg: "h-control-lg",
+      },
+      isInvalid: {
+        true: "border-destructive",
+        false: "border-border/20",
+      },
+      isDisabled: {
+        true: "opacity-50",
+        false: "",
+      },
+      isMultiline: {
+        true: "h-auto min-h-control-lg py-sm",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      isInvalid: false,
+      isDisabled: false,
+      isMultiline: false,
+    },
+  },
+);
+
+export type InputVariantProps = VariantProps<typeof inputVariants>;

package/src/variants/label-variants.ts

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const labelVariants = cva("text-sm font-medium text-foreground", {
+  variants: {
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+    isInvalid: {
+      true: "text-destructive",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isDisabled: false,
+    isInvalid: false,
+  },
+});
+
+export type LabelVariantProps = VariantProps<typeof labelVariants>;

package/src/variants/separator-variants.ts

@@ -0,0 +1,21 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const separatorVariants = cva("bg-border/20", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "w-px self-stretch",
+    },
+    spacing: {
+      none: "",
+      sm: "my-sm",
+      md: "my-md",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    spacing: "none",
+  },
+});
+
+export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;

package/src/variants/skeleton-variants.ts

@@ -0,0 +1,17 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const skeletonVariants = cva("bg-muted", {
+  variants: {
+    shape: {
+      line: "h-4 w-full rounded-sm",
+      title: "h-6 w-2/3 rounded-sm",
+      block: "h-24 w-full rounded-lg",
+      circle: "h-10 w-10 rounded-full",
+    },
+  },
+  defaultVariants: {
+    shape: "line",
+  },
+});
+
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;

package/src/variants/switch-variants.ts

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const switchTrackVariants = cva("h-7 w-12 flex-row items-center rounded-full p-xs", {
+  variants: {
+    isChecked: {
+      true: "justify-end bg-primary",
+      false: "justify-start bg-muted",
+    },
+    isDisabled: {
+      true: "opacity-50",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    isChecked: false,
+    isDisabled: false,
+  },
+});
+
+export const switchThumbVariants = cva("h-5 w-5 rounded-full", {
+  variants: {
+    isChecked: {
+      true: "bg-primary-foreground",
+      false: "bg-background",
+    },
+  },
+  defaultVariants: {
+    isChecked: false,
+  },
+});
+
+export type SwitchTrackVariantProps = VariantProps<typeof switchTrackVariants>;
+export type SwitchThumbVariantProps = VariantProps<typeof switchThumbVariants>;

package/src/variants/text-variants.ts

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const textVariants = cva("text-foreground", {
+  variants: {
+    variant: {
+      display: "text-3xl font-bold",
+      heading: "text-2xl font-bold",
+      title: "text-xl font-semibold",
+      subtitle: "text-lg font-medium",
+      body: "text-base font-normal",
+      caption: "text-sm font-normal",
+      overline: "text-xs font-medium uppercase",
+    },
+    tone: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      primary: "text-primary",
+      destructive: "text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+    tone: "default",
+  },
+});
+
+export type TextVariantProps = VariantProps<typeof textVariants>;