webadwaita 0.2.0 → 0.2.1

package/README.md

@@ -18,10 +18,6 @@ react-strict-dom is Meta's strict subset of `<html.*>` primitives plus a `css.cr
 | `Card`      | Surface with optional title; `boxed` and `flat` variants. |
 | `HeaderBar` | Top bar with leading / centered title / trailing slots. |
 
-All design tokens live in [`src/tokens.css.ts`](./src/tokens.css.ts) — palette, radius, spacing, typography, motion. The `.css.ts` filename is required: react-strict-dom's Babel preset configures StyleX to treat `.css` as the token-file extension, so any file holding `css.defineConsts` / `css.defineVars` calls must be named `<name>.css.ts`.
-
-[`src/theme.ts`](./src/theme.ts) re-exports the same tokens for runtime use (e.g. computed inline styles in app code).
-
 ## Install
 
 ```sh
@@ -32,37 +28,37 @@ Peer deps: `react ^19`, plus `react-dom` (web) or `react-native >= 0.79` (native
 
 ## Setup
 
-**WebAdwaita ships TypeScript source — not a pre-built bundle.** This is the same pattern Meta's `apps/example-ui` uses, and it's deliberate: the StyleX class names baked into a pre-built bundle would not match the CSS rules extracted by the consumer's PostCSS pipeline. Shipping source lets a single Babel pass at consumer build time produce both the class names *and* the matching CSS.
+WebAdwaita ships precompiled JS plus per-component CSS — no special bundler config required. Install, import, render:
 
-That means your app's bundler must run the `react-strict-dom` Babel preset over `node_modules/webadwaita/src` and your PostCSS config must scan the same files for CSS extraction.
-
-**Vite (web):** see [playground/vite.config.ts](./playground/vite.config.ts) and [playground/postcss.config.cjs](./playground/postcss.config.cjs) for the working setup. The key bits:
+```sh
+npm install webadwaita react-strict-dom
+```
 
-```ts
-// vite.config.ts
-plugins: [
-  react({
-    babel: { configFile: true },
-    include: [/\.[jt]sx?$/, '<...>/node_modules/webadwaita/src/**']
-  }),
-  babel({ filter: /\.[jt]sx?$/ })
-]
+```tsx
+import { Button, Card } from 'webadwaita';
 ```
 
-```js
-// postcss.config.cjs
-'react-strict-dom/postcss-plugin': {
-  include: [
-    'src/**/*.{ts,tsx}',
-    'node_modules/webadwaita/src/**/*.{ts,tsx}'
-  ],
-  babelConfig
-}
+That's it. Each component side-effect-imports its own CSS chunk, so your bundler ships only the styles for the components you actually use (works in Next.js, Vite, CRA, anywhere with a modern bundler honoring `package.json#sideEffects`).
+
+**Native (Expo / Metro):** the package's `react-native` exports condition routes Metro to a precompiled native build that uses RN `StyleSheet` at runtime. No Babel preset to wire up in your app — just `import { Button } from 'webadwaita'`.
+
+### How the build works
+
+The library has a build step (`npm run build`) that produces:
+
+```
+dist/
+  web/<Component>/index.js          ← starts with `import './styles.css'`
+  web/<Component>/styles.css        ← only that component's atomic rules
+  web/_tokens/styles.css            ← shared baseline (loaded once)
+  native/<Component>/index.js       ← RN StyleSheet output, no CSS
+  types/<Component>/index.d.ts
 ```
 
-Then add a `strict.css` file with the directive `@react-strict-dom;` and import it from your app's entry point — PostCSS replaces the directive with the generated CSS.
+Two design-token notes carry over to consumer code:
 
-**Expo / Metro (native):** Metro picks up the source automatically. Add the `react-strict-dom/babel-preset` to your `babel.config.js` exactly like the [react-strict-dom expo-app example](https://github.com/facebook/react-strict-dom/blob/main/apps/expo-app/babel.config.js).
+- Tokens still live in [`src/tokens.css.ts`](./src/tokens.css.ts). The `.css.ts` filename is required: react-strict-dom's StyleX config treats `.css` as the token-file extension, so any file calling `css.defineConsts` / `css.defineVars` must follow that convention.
+- [`src/theme.ts`](./src/theme.ts) re-exports the same tokens for runtime use.
 
 ## Use
 
@@ -90,13 +86,10 @@ export function Settings() {
 
 ## Develop
 
-There is no library build step — consumers transform the TypeScript source directly. `npm run typecheck` is the only "build-like" command for the lib itself.
-
-Two demo apps live under `apps/`:
-
 ```sh
 # library
 npm install
+npm run build       # produces dist/{web,native,types}
 npm run typecheck
 
 # web Storybook (Vite-powered)

package/dist/native/Box/index.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { spacing } from '../tokens.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Layout primitive — a flex container, the building block for everything else.
+ * Adwaita-inspired apps lean heavily on simple horizontal/vertical stacks.
+ */
+export function Box(props) {
+  const {
+    children,
+    direction = 'column',
+    gap,
+    padding,
+    align,
+    justify,
+    grow,
+    wrap,
+    style
+  } = props;
+  return /*#__PURE__*/_jsx(html.div, {
+    style: [styles.base, direction === 'row' ? styles.row : styles.column, wrap && styles.wrap, grow && styles.grow, align != null && alignStyles[align], justify != null && justifyStyles[justify], gap != null && gapStyles[gap], padding != null && paddingStyles[padding], style],
+    children: children
+  });
+}
+const styles = css.create({
+  base: {
+    display: 'flex',
+    minWidth: 0
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  },
+  wrap: {
+    flexWrap: 'wrap'
+  },
+  grow: {
+    flexGrow: 1
+  }
+});
+const alignStyles = css.create({
+  'flex-start': {
+    alignItems: 'flex-start'
+  },
+  center: {
+    alignItems: 'center'
+  },
+  'flex-end': {
+    alignItems: 'flex-end'
+  },
+  stretch: {
+    alignItems: 'stretch'
+  },
+  baseline: {
+    alignItems: 'baseline'
+  }
+});
+const justifyStyles = css.create({
+  'flex-start': {
+    justifyContent: 'flex-start'
+  },
+  center: {
+    justifyContent: 'center'
+  },
+  'flex-end': {
+    justifyContent: 'flex-end'
+  },
+  'space-between': {
+    justifyContent: 'space-between'
+  },
+  'space-around': {
+    justifyContent: 'space-around'
+  },
+  'space-evenly': {
+    justifyContent: 'space-evenly'
+  }
+});
+const gapStyles = css.create({
+  xs: {
+    gap: spacing.xs
+  },
+  sm: {
+    gap: spacing.sm
+  },
+  md: {
+    gap: spacing.md
+  },
+  lg: {
+    gap: spacing.lg
+  },
+  xl: {
+    gap: spacing.xl
+  },
+  xxl: {
+    gap: spacing.xxl
+  }
+});
+const paddingStyles = css.create({
+  xs: {
+    padding: spacing.xs
+  },
+  sm: {
+    padding: spacing.sm
+  },
+  md: {
+    padding: spacing.md
+  },
+  lg: {
+    padding: spacing.lg
+  },
+  xl: {
+    padding: spacing.xl
+  },
+  xxl: {
+    padding: spacing.xxl
+  }
+});

package/{src/Button/index.tsx → dist/native/Button/index.js}

@@ -1,26 +1,7 @@
 import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 import { palette, radius, spacing, typography, motion } from '../tokens.css';
-
-export type ButtonVariant =
-  | 'default'
-  | 'suggested'
-  | 'destructive'
-  | 'flat'
-  | 'pill';
-
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-export type ButtonProps = {
-  children?: React.ReactNode;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  fullWidth?: boolean;
-  onPress?: () => void;
-  type?: 'button' | 'submit';
-};
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Adwaita-style button. Variants follow libadwaita conventions:
  *  - default:    flat-ish neutral surface
@@ -29,7 +10,7 @@ export type ButtonProps = {
  *  - flat:       no background, only on hover
  *  - pill:       fully rounded (Adwaita "circular" buttons)
  */
-export function Button(props: ButtonProps) {
+export function Button(props) {
   const {
     children,
     variant = 'default',
@@ -39,27 +20,17 @@ export function Button(props: ButtonProps) {
     onPress,
     type = 'button'
   } = props;
-
-  return (
-    <html.button
-      type={type}
-      disabled={disabled}
-      onClick={onPress}
-      style={[
-        styles.base,
-        sizeStyles[size],
-        variantStyles[variant],
-        fullWidth && styles.fullWidth,
-        disabled && styles.disabled
-      ]}
-    >
-      <html.span style={[styles.label, labelSizeStyles[size]]}>
-        {children}
-      </html.span>
-    </html.button>
-  );
+  return /*#__PURE__*/_jsx(html.button, {
+    type: type,
+    disabled: disabled,
+    onClick: onPress,
+    style: [styles.base, sizeStyles[size], variantStyles[variant], fullWidth && styles.fullWidth, disabled && styles.disabled],
+    children: /*#__PURE__*/_jsx(html.span, {
+      style: [styles.label, labelSizeStyles[size]],
+      children: children
+    })
+  });
 }
-
 const styles = css.create({
   base: {
     display: 'flex',
@@ -79,10 +50,14 @@ const styles = css.create({
     fontWeight: typography.weightStrong,
     textAlign: 'center'
   },
-  fullWidth: { alignSelf: 'stretch' },
-  disabled: { opacity: 0.5, cursor: 'not-allowed' }
+  fullWidth: {
+    alignSelf: 'stretch'
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
 });
-
 const sizeStyles = css.create({
   sm: {
     paddingInline: spacing.md,
@@ -100,13 +75,20 @@ const sizeStyles = css.create({
     height: 44
   }
 });
-
 const labelSizeStyles = css.create({
-  sm: { fontSize: typography.captionSize, lineHeight: typography.captionLineHeight },
-  md: { fontSize: typography.bodySize, lineHeight: typography.bodyLineHeight },
-  lg: { fontSize: typography.title4Size, lineHeight: typography.title4LineHeight }
+  sm: {
+    fontSize: typography.captionSize,
+    lineHeight: typography.captionLineHeight
+  },
+  md: {
+    fontSize: typography.bodySize,
+    lineHeight: typography.bodyLineHeight
+  },
+  lg: {
+    fontSize: typography.title4Size,
+    lineHeight: typography.title4LineHeight
+  }
 });
-
 const variantStyles = css.create({
   default: {
     backgroundColor: {
@@ -150,4 +132,4 @@ const variantStyles = css.create({
     borderRadius: radius.pill,
     paddingInline: spacing.xl
   }
-});
+});

package/{src/Card/index.tsx → dist/native/Card/index.js}

@@ -1,34 +1,32 @@
 import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 import { palette, radius, spacing, typography } from '../tokens.css';
-
-export type CardProps = {
-  children?: React.ReactNode;
-  title?: React.ReactNode;
-  /** "boxed" matches AdwBoxedList — solid surface w/ visible border. */
-  variant?: 'boxed' | 'flat';
-  padding?: boolean;
-};
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Adwaita-style card surface. Default has a soft shadow + rounded corners;
  * "flat" drops the shadow for use inside other surfaces.
  */
-export function Card(props: CardProps) {
-  const { children, title, variant = 'boxed', padding = true } = props;
-
-  return (
-    <html.div style={[styles.card, variant === 'boxed' ? styles.boxed : styles.flat]}>
-      {title != null && (
-        <html.div style={styles.header}>
-          <html.h3 style={styles.titleText}>{title}</html.h3>
-        </html.div>
-      )}
-      <html.div style={padding ? styles.body : null}>{children}</html.div>
-    </html.div>
-  );
+export function Card(props) {
+  const {
+    children,
+    title,
+    variant = 'boxed',
+    padding = true
+  } = props;
+  return /*#__PURE__*/_jsxs(html.div, {
+    style: [styles.card, variant === 'boxed' ? styles.boxed : styles.flat],
+    children: [title != null && /*#__PURE__*/_jsx(html.div, {
+      style: styles.header,
+      children: /*#__PURE__*/_jsx(html.h3, {
+        style: styles.titleText,
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(html.div, {
+      style: padding ? styles.body : null,
+      children: children
+    })]
+  });
 }
-
 const styles = css.create({
   card: {
     backgroundColor: palette.cardBg,
@@ -63,5 +61,7 @@ const styles = css.create({
     fontWeight: typography.weightBold,
     color: palette.fg
   },
-  body: { padding: spacing.lg }
-});
+  body: {
+    padding: spacing.lg
+  }
+});

package/{src/Checkbox/index.tsx → dist/native/Checkbox/index.js}

@@ -1,63 +1,53 @@
 import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 import { palette, radius, motion, typography, spacing } from '../tokens.css';
-
-export type CheckboxProps = {
-  checked: boolean;
-  disabled?: boolean;
-  onChange?: (checked: boolean) => void;
-  label?: React.ReactNode;
-};
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Adwaita-style checkbox. Solid blue square with a unicode check when on,
  * subtle outlined square when off.
  */
-export function Checkbox(props: CheckboxProps) {
-  const { checked, disabled = false, onChange, label } = props;
-
+export function Checkbox(props) {
+  const {
+    checked,
+    disabled = false,
+    onChange,
+    label
+  } = props;
   const toggle = () => {
     if (!disabled) onChange?.(!checked);
   };
-
-  const box = (
-    <html.span style={[styles.box, checked ? styles.boxOn : styles.boxOff]}>
-      {checked && <html.span style={styles.check}>{'✓'}</html.span>}
-    </html.span>
-  );
-
+  const box = /*#__PURE__*/_jsx(html.span, {
+    style: [styles.box, checked ? styles.boxOn : styles.boxOff],
+    children: checked && /*#__PURE__*/_jsx(html.span, {
+      style: styles.check,
+      children: '✓'
+    })
+  });
   if (label == null) {
-    return (
-      <html.button
-        type="button"
-        role="checkbox"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={toggle}
-        style={[styles.bareButton, disabled && styles.disabled]}
-      >
-        {box}
-      </html.button>
-    );
+    return /*#__PURE__*/_jsx(html.button, {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      disabled: disabled,
+      onClick: toggle,
+      style: [styles.bareButton, disabled && styles.disabled],
+      children: box
+    });
   }
-
-  return (
-    <html.button
-      type="button"
-      role="checkbox"
-      aria-checked={checked}
-      disabled={disabled}
-      onClick={toggle}
-      style={[styles.row, disabled && styles.disabled]}
-    >
-      {box}
-      <html.span style={styles.label}>{label}</html.span>
-    </html.button>
-  );
+  return /*#__PURE__*/_jsxs(html.button, {
+    type: "button",
+    role: "checkbox",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: toggle,
+    style: [styles.row, disabled && styles.disabled],
+    children: [box, /*#__PURE__*/_jsx(html.span, {
+      style: styles.label,
+      children: label
+    })]
+  });
 }
-
 const SIZE = 18;
-
 const styles = css.create({
   bareButton: {
     backgroundColor: 'transparent',
@@ -115,5 +105,8 @@ const styles = css.create({
     fontSize: typography.bodySize,
     lineHeight: typography.bodyLineHeight
   },
-  disabled: { opacity: 0.5, cursor: 'not-allowed' }
-});
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+});

package/{src/Entry/index.tsx → dist/native/Entry/index.js}

@@ -1,24 +1,12 @@
 import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 import { palette, radius, spacing, typography, motion } from '../tokens.css';
-
-export type EntryProps = {
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  invalid?: boolean;
-  type?: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' | 'number';
-  onChange?: (value: string) => void;
-  onSubmit?: (value: string) => void;
-};
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Adwaita-style text entry. Underline focus indicator + subtle filled surface,
  * like libadwaita's `AdwEntry`.
  */
-export function Entry(props: EntryProps) {
+export function Entry(props) {
   const {
     value,
     defaultValue,
@@ -30,33 +18,24 @@ export function Entry(props: EntryProps) {
     onChange,
     onSubmit
   } = props;
-
-  const latestValueRef = React.useRef<string>(value ?? defaultValue ?? '');
-
-  return (
-    <html.input
-      type={type}
-      value={value}
-      defaultValue={defaultValue}
-      placeholder={placeholder}
-      disabled={disabled}
-      readOnly={readOnly}
-      onChange={(e: { target: { value: string } }) => {
-        latestValueRef.current = e.target.value;
-        onChange?.(e.target.value);
-      }}
-      onKeyDown={(e: { key: string }) => {
-        if (e.key === 'Enter') onSubmit?.(latestValueRef.current);
-      }}
-      style={[
-        styles.input,
-        invalid && styles.invalid,
-        disabled && styles.disabled
-      ]}
-    />
-  );
+  const latestValueRef = React.useRef(value ?? defaultValue ?? '');
+  return /*#__PURE__*/_jsx(html.input, {
+    type: type,
+    value: value,
+    defaultValue: defaultValue,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    onChange: e => {
+      latestValueRef.current = e.target.value;
+      onChange?.(e.target.value);
+    },
+    onKeyDown: e => {
+      if (e.key === 'Enter') onSubmit?.(latestValueRef.current);
+    },
+    style: [styles.input, invalid && styles.invalid, disabled && styles.disabled]
+  });
 }
-
 const styles = css.create({
   input: {
     backgroundColor: palette.subtleBg,
@@ -90,5 +69,8 @@ const styles = css.create({
       ':focus': palette.destructiveBg
     }
   },
-  disabled: { opacity: 0.5, cursor: 'not-allowed' }
-});
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+});

package/{src/HeaderBar/index.tsx → dist/native/HeaderBar/index.js}

@@ -1,40 +1,39 @@
 import * as React from 'react';
 import { css, html } from 'react-strict-dom';
 import { palette, spacing, typography } from '../tokens.css';
-
-export type HeaderBarProps = {
-  title?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  /** Buttons / actions to place at the start (left) of the bar. */
-  start?: React.ReactNode;
-  /** Buttons / actions to place at the end (right) of the bar. */
-  end?: React.ReactNode;
-};
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Top-level header bar matching libadwaita's AdwHeaderBar — a thin titled
  * strip that sits at the top of a window. Centered title with optional
  * leading/trailing slots.
  */
-export function HeaderBar(props: HeaderBarProps) {
-  const { title, subtitle, start, end } = props;
-
-  return (
-    <html.header style={styles.bar}>
-      <html.div style={styles.side}>{start}</html.div>
-      <html.div style={styles.titleBlock}>
-        {title != null && (
-          <html.span style={styles.title}>{title}</html.span>
-        )}
-        {subtitle != null && (
-          <html.span style={styles.subtitle}>{subtitle}</html.span>
-        )}
-      </html.div>
-      <html.div style={[styles.side, styles.sideEnd]}>{end}</html.div>
-    </html.header>
-  );
+export function HeaderBar(props) {
+  const {
+    title,
+    subtitle,
+    start,
+    end
+  } = props;
+  return /*#__PURE__*/_jsxs(html.header, {
+    style: styles.bar,
+    children: [/*#__PURE__*/_jsx(html.div, {
+      style: styles.side,
+      children: start
+    }), /*#__PURE__*/_jsxs(html.div, {
+      style: styles.titleBlock,
+      children: [title != null && /*#__PURE__*/_jsx(html.span, {
+        style: styles.title,
+        children: title
+      }), subtitle != null && /*#__PURE__*/_jsx(html.span, {
+        style: styles.subtitle,
+        children: subtitle
+      })]
+    }), /*#__PURE__*/_jsx(html.div, {
+      style: [styles.side, styles.sideEnd],
+      children: end
+    })]
+  });
 }
-
 const styles = css.create({
   bar: {
     display: 'flex',
@@ -57,7 +56,9 @@ const styles = css.create({
     flexBasis: 0,
     flexGrow: 1
   },
-  sideEnd: { justifyContent: 'flex-end' },
+  sideEnd: {
+    justifyContent: 'flex-end'
+  },
   titleBlock: {
     display: 'flex',
     flexDirection: 'column',
@@ -75,4 +76,4 @@ const styles = css.create({
     fontSize: typography.captionSize,
     color: palette.fgMuted
   }
-});
+});