alouette 19.0.0-beta.3 → 19.0.0-beta.5

package/README.md

@@ -3,7 +3,7 @@
 </h1>
 
 <p align="center">
-  A modern, customizable design system built on top of Tamagui with configurable defaults
+  A modern, customizable design system built on top of NativeWind v5 with configurable defaults
 </p>
 
 <p align="center">
@@ -13,78 +13,196 @@
   <a href="https://npmjs.org/package/alouette"><img src="https://img.shields.io/npm/types/alouette.svg?style=flat-square" alt="types"></a>
 </p>
 
+Alouette provides a comprehensive set of universal components that render on both
+web and React Native, styled entirely through Tailwind `className` via
+[NativeWind v5](https://www.nativewind.dev/). Themes, accents, and design tokens
+ship as CSS custom properties that cascade through the tree, so components stay
+declarative and consistent across platforms.
+
 ## 🚀 Getting Started
 
 ### Prerequisites
 
-- Node.js >= 20.9.0 (includes Corepack for package management)
+- Node.js >= 22.18.0 (includes Corepack for package management)
+- A React Native / Expo app using Metro, or a web app using NativeWind v5
 
 ### Installation
 
-1. Enable Corepack (if not already enabled):
-
 ```bash
-corepack enable
+npm install alouette
+# or with yarn
+yarn add alouette
 ```
 
-2. Install the package:
+`alouette-icons` is installed automatically as a dependency.
+
+Install the peer dependencies if your app does not already provide them:
 
 ```bash
-npm install alouette
-# or with yarn
-yarn add alouette
+npm install nativewind@5.0.0-preview.4 tailwindcss@^4 \
+  react-native-reanimated react-native-svg
 ```
 
-Note: `alouette-icons` is automatically included as a dependency.
+`expo-web-browser`, `react-dom`, and `react-native-reanimated` are optional peers
+— add them only if your target needs them (`react-dom` for web, `react-native-reanimated`
+for native animations, `expo-web-browser` for `ExternalLink`).
 
 ### Configuration
 
-Create or update your `tamagui.config.ts`:
+Alouette relies on NativeWind v5's Metro + PostCSS pipeline. NativeWind discovers
+themes and utilities from the imported `global.css` and scans your sources via
+`@source` directives — there is no JS config to maintain.
+
+1. **Metro** — wrap your config with the Alouette helper:
+
+```js
+// metro.config.cjs
+const { withAlouetteConfig } = require("alouette/metro");
+const { getDefaultConfig } = require("expo/metro-config.js");
+
+module.exports = withAlouetteConfig(getDefaultConfig(__dirname));
+```
+
+2. **CSS entry** — create a `global.css` that re-exports Alouette's tokens and
+   points `@source` at the directories NativeWind should scan for class names:
+
+```css
+/* global.css */
+@import "alouette/global.css";
+
+@source './src'; /* your own className / tv() literals */
+@source '../node_modules/alouette/src'; /* alouette's source — required */
+```
+
+Tailwind only emits classes it finds while scanning `@source` paths, so both
+your app's source **and** alouette's source must be covered or the matching
+utilities are silently purged. In a monorepo where alouette is hoisted to the
+repo root `node_modules`, adjust the depth (e.g.
+`@source '../../../node_modules/alouette/src'`); a path that resolves to nothing
+fails silently with no error.
+
+Import it once at your app's entry point:
 
 ```ts
-import {
-  createAlouetteTamagui,
-  defaultColorScales,
-  createAlouetteTokens,
-  createAlouetteThemes,
-} from "alouette/createAlouetteTamagui";
+import "./global.css";
+```
+
+3. **PostCSS** — NativeWind compiles Tailwind through PostCSS on both web and
+   native. `@tailwindcss/postcss` ships as a dependency of `alouette`, so you
+   only add the config file (use `.mjs` so it loads as ESM regardless of your
+   package's `"type"`):
+
+```js
+// postcss.config.mjs
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
+4. **Babel** — use the Expo preset and the Reanimated/worklets plugin:
+
+```js
+// babel.config.js
+export default function (api) {
+  api.cache(true);
+  return {
+    presets: [["babel-preset-expo", { reanimated: false }]],
+    plugins: ["react-native-worklets/plugin"],
+  };
+}
+```
+
+5. **Provider** — wrap your app in `AlouetteProvider`. It applies the OS
+   light/dark scheme as the root theme so base tokens resolve app-wide:
+
+```tsx
+import { AlouetteProvider } from "alouette";
+
+export function App() {
+  return <AlouetteProvider>{/* your app */}</AlouetteProvider>;
+}
+```
 
-const tokens = createAlouetteTokens(defaultColorScales);
-const config = createAlouetteTamagui(tokens, createAlouetteThemes(tokens));
+6. **Fonts** — Alouette's typography uses Sora (body/heading) and Chivo Mono
+   (mono). On native, load the weight-specific font files (the standalone
+   `font-weight` utility has no effect because each weight is a distinct file):
 
-export default config;
+```tsx
+import {
+  Sora_400Regular as SoraRegular,
+  Sora_700Bold as SoraBold,
+  Sora_800ExtraBold as SoraExtraBold,
+  useFonts,
+} from "@expo-google-fonts/sora";
+import {
+  ChivoMono_400Regular as ChivoMonoRegular,
+  ChivoMono_700Bold as ChivoMonoBold,
+  ChivoMono_800ExtraBold as ChivoMonoExtraBold,
+} from "@expo-google-fonts/chivo-mono";
+
+const [fontsLoaded] = useFonts({
+  SoraRegular,
+  SoraBold,
+  SoraExtraBold,
+  ChivoMonoRegular,
+  ChivoMonoBold,
+  ChivoMonoExtraBold,
+});
 ```
 
 ## 🎨 Core Features
 
 ### Components
 
-Alouette provides a comprehensive set of components following the atomic design pattern:
+Alouette ships a universal component set styled through `className`:
 
-#### Actions
+- **Actions** — `Button`, `ExternalLinkButton`, `InternalLinkButton`, `IconButton`
+- **Containers** — `Box`, `InteractiveBox`, `SafeAreaBox`, `Surface`, `ScopedTheme`, `AccentScope`, `PresenceOne`, `PresenceList`
+- **Inputs** — `InputText`, `TextArea`, `Switch`
+- **Feedback** — `Message`, `InfoMessage`, `ConfirmationMessage`, `WarningMessage`
+- **Data** — `PressableBox`, `PressableListItem`
+- **Layout** — `GradientBackground`, `GradientScrollView`
+- **Primitives** — `View`, `Text`, `Paragraph`, `Icon`, `ScrollView`, `Stack`, `HStack`, `VStack`, `Separator`
+- **Responsive** — `SwitchBreakpointsUsingDisplayNone`, `SwitchBreakpointsUsingNull`, `useCurrentBreakpointName`
 
-- `Button`: brand interaction component with multiple variants
-- `IconButton`: Circular button optimized for icon display
+For detailed examples and API documentation, visit our [Storybook](https://www.chromatic.com/library?appId=679f9e8df3edc5f07975b64a).
 
-#### Containers
+### Text styling
 
-- `Box`: Basic layout container with theme support
-- `PressableBox`: Interactive container with press states
+`<Text>` has no variant props — style it entirely via `className`. Family and
+weight are combined into a single utility (`font-body`, `font-body-bold`,
+`font-heading-extrabold`, `font-mono`, …); size uses standard Tailwind
+`text-*`; color uses tokens like `text-sharp`, `text-muted`, `text-accent`.
 
-#### Forms
+```tsx
+import { Text } from "alouette";
 
-- `InputText`: Text input with theming and state management
+<Text className="text-base">Body</Text>;
+<Text className="font-heading-extrabold text-4xl">Title</Text>;
+<Text className="font-mono text-xs text-muted">Code</Text>;
+```
 
-#### Layout
+### Theming and accents
 
-- `Separator`: Visual divider with customizable orientation
-- `List`: Structured data display components
+Themes are sets of CSS variables (`light`, `dark`, `light_brand`, `dark_info`, …)
+applied by `ScopedTheme`. Child components use **base tokens** (`bg-surface`,
+`text-accent`, `border-muted`, …) and inherit the correct values from the nearest
+theme scope. Components that introduce an accent wrap their children in
+`AccentScope`:
 
-For detailed examples and API documentation, visit our [Storybook](https://www.chromatic.com/library?appId=679f9e8df3edc5f07975b64a).
+```tsx
+import { AccentScope, Surface } from "alouette";
+
+<AccentScope accent="info">
+  <Surface>{/* children use base tokens */}</Surface>
+</AccentScope>;
+```
 
 ### Icons
 
-Icons are provided through the integrated `alouette-icons` package:
+Icons come from the integrated `alouette-icons` package:
 
 ```tsx
 import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeftRegularIcon";
@@ -94,24 +212,6 @@ function MyComponent() {
 }
 ```
 
-## 🏗️ Architecture
-
-### Core Principles
-
-1. **Universal Design**: Components work seamlessly across web and native platforms
-2. **Performance First**: Optimized bundle size and runtime performance through Tamagui
-3. **Accessibility**: WCAG 2.1 compliant components with proper ARIA attributes
-4. **Customization**: Flexible theming system with sensible defaults
-5. **Type Safety**: Built with TypeScript for enhanced developer experience
-
-### Technical Architecture
-
-- **Component Structure**: Atomic design pattern with atoms, molecules, and organisms
-- **Styling System**: Tamagui's compile-time styling with runtime fallbacks
-- **Theme System**: Token-based design system with support for light/dark modes
-- **Responsive Design**: Mobile-first approach with flexible breakpoint system
-- **Icon System**: Based on Phosphor Icons with optimized bundle size
-
 ## 🎯 Examples
 
 ### Basic Button
@@ -122,7 +222,7 @@ import { Button } from "alouette";
 function MyComponent() {
   return (
     <Button
-      theme="brand"
+      accent="brand"
       text="Click me"
       onPress={() => console.log("Clicked!")}
     />
@@ -138,14 +238,31 @@ import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons/ArrowLeftReg
 
 function MyComponent() {
   return (
-    <Button theme="brand" icon={<ArrowLeftRegularIcon />} text="Go Back" />
+    <Button accent="brand" icon={<ArrowLeftRegularIcon />} text="Go Back" />
   );
 }
 ```
 
-## 📚 Documentation
+## 🤖 Using an AI agent?
+
+Alouette ships [skills](https://www.npmjs.com/package/@tanstack/intent) that teach
+AI coding agents how to use the design system correctly:
 
-For more examples and detailed documentation:
+```bash
+npx @tanstack/intent@latest install
+```
+
+## 🏗️ Architecture
+
+- **Universal Design** — components render across web and native from one API
+- **NativeWind v5 styling** — Tailwind `className`; animations are CSS
+  `@keyframes` + `--animate-*` tokens, run on native via Reanimated
+- **Token-based theming** — CSS custom properties cascade through `ScopedTheme`;
+  light/dark + accent scopes
+- **Accessibility** — proper ARIA / accessibility attributes
+- **Type Safety** — built with TypeScript
+
+## 📚 Documentation
 
 - [Component Documentation](https://www.chromatic.com/library?appId=679f9e8df3edc5f07975b64a)
 - [GitHub Repository](https://github.com/christophehurpeau/alouette)

package/dist/definitions/index.d.ts

@@ -14,6 +14,10 @@ export type { TextProps, ParagraphProps } from "./ui/primitives/Text";
 export { Text, Paragraph } from "./ui/primitives/Text";
 export type { ScrollViewProps } from "./ui/primitives/ScrollView";
 export { ScrollView } from "./ui/primitives/ScrollView";
+export type { FlatListProps } from "./ui/primitives/FlatList";
+export { FlatList } from "./ui/primitives/FlatList";
+export type { SectionListProps } from "./ui/primitives/SectionList";
+export { SectionList } from "./ui/primitives/SectionList";
 export type { HStackProps, VStackProps, StackProps } from "./ui/stacks/stacks";
 export { Stack, HStack, VStack } from "./ui/stacks/stacks";
 export type { SeparatorProps } from "./ui/stacks/Separator";

package/dist/definitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/definitions/ui/primitives/FlatList.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+import { type FlatListProps as RNFlatListProps } from "react-native";
+export type FlatListProps<ItemT> = RNFlatListProps<ItemT>;
+export declare const FlatList: <ItemT>(props: FlatListProps<ItemT>) => ReactNode;
+//# sourceMappingURL=FlatList.d.ts.map

package/dist/definitions/ui/primitives/FlatList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/ui/primitives/FlatList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,aAAa,IAAI,eAAe,EACtC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI,eAAe,CAAC,KAAK,CAAC,CAAC;AAE1D,eAAO,MAAM,QAAQ,EAIf,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC"}

package/dist/definitions/ui/primitives/FlatList.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from "@storybook/react-vite";
+import type { ReactNode } from "react";
+declare const _default: {
+    title: string;
+    component: <ItemT>(props: import("./FlatList").FlatListProps<ItemT>) => ReactNode;
+    parameters: {
+        componentSubtitle: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const PreviewStory: StoryObj;
+export declare const VariantsStory: StoryObj;
+//# sourceMappingURL=FlatList.stories.d.ts.map

package/dist/definitions/ui/primitives/FlatList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatList.stories.d.ts","sourceRoot":"","sources":["../../../../src/ui/primitives/FlatList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;;;;;;;;;;;;;AAOvC,wBAwBkC;AA6DlC,eAAO,MAAM,YAAY,EAAE,QAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAa3B,CAAC"}

package/dist/definitions/ui/primitives/SectionList.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { type SectionListProps as RNSectionListProps } from "react-native";
+type DefaultSectionT = Record<string, unknown>;
+export type SectionListProps<ItemT, SectionT = DefaultSectionT> = RNSectionListProps<ItemT, SectionT>;
+export declare const SectionList: <ItemT, SectionT = DefaultSectionT>(props: SectionListProps<ItemT, SectionT>) => ReactNode;
+export {};
+//# sourceMappingURL=SectionList.d.ts.map

package/dist/definitions/ui/primitives/SectionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionList.d.ts","sourceRoot":"","sources":["../../../../src/ui/primitives/SectionList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,gBAAgB,IAAI,kBAAkB,EAC5C,MAAM,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,gBAAgB,CAC1B,KAAK,EACL,QAAQ,GAAG,eAAe,IACxB,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAExC,eAAO,MAAM,WAAW,EAGlB,CAAC,KAAK,EAAE,QAAQ,GAAG,eAAe,EACtC,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,KACrC,SAAS,CAAC"}

package/dist/definitions/ui/primitives/SectionList.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from "@storybook/react-vite";
+import type { ReactNode } from "react";
+declare const _default: {
+    title: string;
+    component: <ItemT, SectionT = {
+        [x: string]: unknown;
+    }>(props: import("./SectionList").SectionListProps<ItemT, SectionT>) => ReactNode;
+    parameters: {
+        componentSubtitle: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const PreviewStory: StoryObj;
+export declare const VariantsStory: StoryObj;
+//# sourceMappingURL=SectionList.stories.d.ts.map

package/dist/definitions/ui/primitives/SectionList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionList.stories.d.ts","sourceRoot":"","sources":["../../../../src/ui/primitives/SectionList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;AAOvC,wBAyBqC;AA8DrC,eAAO,MAAM,YAAY,EAAE,QAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAkB3B,CAAC"}

package/dist/index-browser.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { VariableContextProvider } from 'nativewind';
+import { VariableContextProvider, styled as styled$1 } from 'nativewind';
 import { createContext, useContext, forwardRef, Fragment, Children, cloneElement, useRef, useState, useEffect, isValidElement, useCallback } from 'react';
-import { useColorScheme, View as View$1, Text as Text$1, ScrollView as ScrollView$1, Pressable, Platform, TextInput, useWindowDimensions } from 'react-native-web';
+import { useColorScheme, View as View$1, Text as Text$1, ScrollView as ScrollView$1, FlatList as FlatList$1, SectionList as SectionList$1, Pressable, Platform, TextInput, useWindowDimensions } from 'react-native-web';
 import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
 import { CheckRegularIcon } from 'alouette-icons/phosphor-icons/CheckRegularIcon';
@@ -687,6 +687,17 @@ const ScrollView = forwardRef(
   }
 );
 
+const FlatList = styled$1(FlatList$1, {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+  columnWrapperClassName: "columnWrapperStyle"
+});
+
+const SectionList = styled$1(SectionList$1, {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle"
+});
+
 const Stack = forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1933,5 +1944,5 @@ function ExternalLink({
   );
 }
 
-export { AccentScope, AlouetteDecorator, AlouetteProvider, Box, BreakpointNameEnum, Breakpoints, Button, ConfirmationMessage, ExternalLink, ExternalLinkButton, GradientBackground, GradientScrollView, HStack, Icon, IconButton, InfoMessage, InputText, InteractiveBox, InternalLinkButton, Message, Paragraph, PresenceList, PresenceOne, PressableBox, PressableListItem, SafeAreaBox, SafeAreaProvider, ScopedTheme, ScrollView, Separator, Stack, Story, StoryContainer, StoryDecorator, StoryGrid, StoryTitle, Surface, Switch, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, Text, TextArea, VStack, View, WarningMessage, animationDurationsMs, styled, themeVariables, useCurrentBreakpointName, useCurrentBreakpointNameFiltered, useCurrentMode, useCurrentTheme, useSafeAreaInsets, useThemeToken };
+export { AccentScope, AlouetteDecorator, AlouetteProvider, Box, BreakpointNameEnum, Breakpoints, Button, ConfirmationMessage, ExternalLink, ExternalLinkButton, FlatList, GradientBackground, GradientScrollView, HStack, Icon, IconButton, InfoMessage, InputText, InteractiveBox, InternalLinkButton, Message, Paragraph, PresenceList, PresenceOne, PressableBox, PressableListItem, SafeAreaBox, SafeAreaProvider, ScopedTheme, ScrollView, SectionList, Separator, Stack, Story, StoryContainer, StoryDecorator, StoryGrid, StoryTitle, Surface, Switch, SwitchBreakpointsUsingDisplayNone, SwitchBreakpointsUsingNull, Text, TextArea, VStack, View, WarningMessage, animationDurationsMs, styled, themeVariables, useCurrentBreakpointName, useCurrentBreakpointNameFiltered, useCurrentMode, useCurrentTheme, useSafeAreaInsets, useThemeToken };
 //# sourceMappingURL=index-browser.es.js.map