webadwaita 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WebAdwaita contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# WebAdwaita
+
+Cross-platform React component library inspired by GNOME's [libadwaita](https://gnome.pages.gitlab.gnome.org/libadwaita/), built on [react-strict-dom](https://github.com/facebook/react-strict-dom). One TypeScript codebase renders on **web**, **iOS**, and **Android**.
+
+## Why react-strict-dom?
+
+react-strict-dom is Meta's strict subset of `<html.*>` primitives plus a `css.create` API that compiles to **StyleX on web** and **React Native styles on native**. WebAdwaita uses it so every component is platform-neutral by default — no `.web.tsx` / `.native.tsx` forks needed.
+
+## Components
+
+| Component | Purpose |
+| --- | --- |
+| `Box`       | Flex layout primitive (direction / gap / padding / align / justify). |
+| `Button`    | Variants: `default`, `suggested`, `destructive`, `flat`, `pill`. Sizes: `sm` / `md` / `lg`. |
+| `Entry`     | Text input with focus underline (Adwaita `AdwEntry`). |
+| `Switch`    | Pill-shaped toggle with sliding thumb. |
+| `Checkbox`  | Square checkbox with optional label. |
+| `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
+npm install webadwaita react-strict-dom
+```
+
+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.
+
+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:
+
+```ts
+// vite.config.ts
+plugins: [
+  react({
+    babel: { configFile: true },
+    include: [/\.[jt]sx?$/, '<...>/node_modules/webadwaita/src/**']
+  }),
+  babel({ filter: /\.[jt]sx?$/ })
+]
+```
+
+```js
+// postcss.config.cjs
+'react-strict-dom/postcss-plugin': {
+  include: [
+    'src/**/*.{ts,tsx}',
+    'node_modules/webadwaita/src/**/*.{ts,tsx}'
+  ],
+  babelConfig
+}
+```
+
+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.
+
+**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).
+
+## Use
+
+```tsx
+import { Box, Button, Card, Entry, Switch } from 'webadwaita';
+
+export function Settings() {
+  const [name, setName] = useState('');
+  const [enabled, setEnabled] = useState(true);
+
+  return (
+    <Card title="Profile">
+      <Box gap="md">
+        <Entry placeholder="Your name" value={name} onChange={setName} />
+        <Box direction="row" align="center" gap="sm">
+          <Switch checked={enabled} onChange={setEnabled} />
+          <span>Enabled</span>
+        </Box>
+        <Button variant="suggested">Save</Button>
+      </Box>
+    </Card>
+  );
+}
+```
+
+## 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 typecheck
+
+# web Storybook (Vite-powered)
+npm --prefix apps/storybook-web install
+npm run storybook:web                # opens http://localhost:6006
+
+# native Storybook (Expo + @storybook/react-native v8, on-device UI)
+npm --prefix apps/storybook-native install
+npm run storybook:native             # then press i / a / w in the Expo CLI
+```
+
+The native app embeds the Storybook UI directly — open the Expo Go app on a phone (or a simulator) and pick a component from the on-device sidebar. After adding/removing `.stories.tsx` files, regenerate the registry:
+
+```sh
+npm --prefix apps/storybook-native run storybook-generate
+```
+
+## License
+
+MIT — see [LICENSE](./LICENSE). Inspired by `react-strict-dom`'s `apps/example-ui/` and the libadwaita design system.

package/babel.config.cjs

@@ -0,0 +1,23 @@
+/**
+ * Shared babel config used by Vite (web library build) and consumers
+ * who want to bundle WebAdwaita source through the react-strict-dom
+ * preset (e.g. Metro / Vite / Next.js postcss pipelines).
+ */
+const dev = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  parserOpts: {
+    plugins: ['typescript', 'jsx']
+  },
+  presets: [
+    [
+      'react-strict-dom/babel-preset',
+      {
+        debug: dev,
+        dev,
+        rootDir: process.cwd(),
+        platform: process.env.WEBADWAITA_PLATFORM || 'web'
+      }
+    ]
+  ]
+};

package/package.json

@@ -1,43 +1,45 @@
 {
   "name": "webadwaita",
-  "version": "0.1.0",
-  "sideEffects": ["**/*.css"],
+  "version": "0.2.0",
+  "description": "Cross-platform Adwaita-styled UI components built on react-strict-dom.",
   "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "babel.config.cjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./src/index.ts",
   "exports": {
-    "./button": {
-      "types": "./dist/button.d.ts",
-      "import": "./dist/button.mjs",
-      "require": "./dist/button.js"
-    },
-    "./styles": {
-      "import": "./dist/styles.mjs",
-      "require": "./dist/styles.js"
-    },
-    "./styles.css": "./dist/styles.css"
+    ".": "./src/index.ts",
+    "./babel-config": "./babel.config.cjs",
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo node_modules dist"
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "storybook:web": "npm --prefix apps/storybook-web run storybook",
+    "storybook:native": "npm --prefix apps/storybook-native run start"
   },
-  "devDependencies": {
-    "@repo/eslint-config": "*",
-    "@repo/typescript-config": "*",
-    "@storybook/react": "^8.2.6",
-    "@tailwindcss/postcss": "^4.2.2",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
-    "eslint": "^8.57.0",
-    "tsup": "^8.0.2",
-    "typescript": "5.5.4"
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": ">=0.79.0",
+    "react-strict-dom": ">=0.0.50"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": { "optional": true },
+    "react-native": { "optional": true }
   },
-  "dependencies": {
-    "react": "^18.2.0",
-    "tailwindcss": "^4.2.2"
+  "devDependencies": {
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-strict-dom": "^0.0.55",
+    "typescript": "~5.9.3"
   },
-  "files": ["dist"],
-  "publishConfig": {
-    "access": "public"
+  "engines": {
+    "node": ">=20.11.0"
   }
 }

package/src/Box/index.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { spacing } from '../tokens.css';
+
+type SpacingKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type Direction = 'row' | 'column';
+type Align = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+type Justify =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+
+export type BoxProps = {
+  children?: React.ReactNode;
+  direction?: Direction;
+  gap?: SpacingKey;
+  padding?: SpacingKey;
+  align?: Align;
+  justify?: Justify;
+  grow?: boolean;
+  wrap?: boolean;
+  style?: any;
+};
+
+/**
+ * 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: BoxProps) {
+  const {
+    children,
+    direction = 'column',
+    gap,
+    padding,
+    align,
+    justify,
+    grow,
+    wrap,
+    style
+  } = props;
+
+  return (
+    <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}
+    </html.div>
+  );
+}
+
+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

@@ -0,0 +1,153 @@
+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';
+};
+
+/**
+ * Adwaita-style button. Variants follow libadwaita conventions:
+ *  - default:    flat-ish neutral surface
+ *  - suggested:  blue accent (primary)
+ *  - destructive: red, for irreversible actions
+ *  - flat:       no background, only on hover
+ *  - pill:       fully rounded (Adwaita "circular" buttons)
+ */
+export function Button(props: ButtonProps) {
+  const {
+    children,
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    fullWidth = false,
+    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>
+  );
+}
+
+const styles = css.create({
+  base: {
+    display: 'flex',
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    borderWidth: 0,
+    cursor: 'pointer',
+    transitionProperty: 'background-color, box-shadow, color',
+    transitionDuration: motion.durationFast,
+    transitionTimingFunction: motion.easing,
+    userSelect: 'none'
+  },
+  label: {
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.weightStrong,
+    textAlign: 'center'
+  },
+  fullWidth: { alignSelf: 'stretch' },
+  disabled: { opacity: 0.5, cursor: 'not-allowed' }
+});
+
+const sizeStyles = css.create({
+  sm: {
+    paddingInline: spacing.md,
+    borderRadius: radius.sm,
+    height: 28
+  },
+  md: {
+    paddingInline: spacing.lg,
+    borderRadius: radius.md,
+    height: 36
+  },
+  lg: {
+    paddingInline: spacing.xl,
+    borderRadius: radius.md,
+    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 }
+});
+
+const variantStyles = css.create({
+  default: {
+    backgroundColor: {
+      default: palette.subtleBg,
+      ':hover': palette.subtleBgHover,
+      ':active': palette.subtleBgActive
+    },
+    color: palette.fg
+  },
+  suggested: {
+    backgroundColor: {
+      default: palette.accentBg,
+      ':hover': palette.accentBgHover,
+      ':active': palette.accentBgActive
+    },
+    color: palette.accentFg
+  },
+  destructive: {
+    backgroundColor: {
+      default: palette.destructiveBg,
+      ':hover': palette.destructiveBgHover,
+      ':active': palette.destructiveBgActive
+    },
+    color: palette.destructiveFg
+  },
+  flat: {
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': palette.subtleBg,
+      ':active': palette.subtleBgHover
+    },
+    color: palette.fg
+  },
+  pill: {
+    backgroundColor: {
+      default: palette.subtleBg,
+      ':hover': palette.subtleBgHover,
+      ':active': palette.subtleBgActive
+    },
+    color: palette.fg,
+    borderRadius: radius.pill,
+    paddingInline: spacing.xl
+  }
+});

package/src/Card/index.tsx

@@ -0,0 +1,67 @@
+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;
+};
+
+/**
+ * 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>
+  );
+}
+
+const styles = css.create({
+  card: {
+    backgroundColor: palette.cardBg,
+    borderRadius: radius.lg,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  boxed: {
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: palette.border
+  },
+  flat: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: palette.border
+  },
+  header: {
+    paddingBlock: spacing.md,
+    paddingInline: spacing.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: palette.border
+  },
+  titleText: {
+    margin: 0,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.title4Size,
+    lineHeight: typography.title4LineHeight,
+    fontWeight: typography.weightBold,
+    color: palette.fg
+  },
+  body: { padding: spacing.lg }
+});

package/src/Checkbox/index.tsx

@@ -0,0 +1,119 @@
+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;
+};
+
+/**
+ * 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;
+
+  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>
+  );
+
+  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 (
+    <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>
+  );
+}
+
+const SIZE = 18;
+
+const styles = css.create({
+  bareButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    padding: 0,
+    cursor: 'pointer'
+  },
+  row: {
+    display: 'flex',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    padding: 0,
+    cursor: 'pointer'
+  },
+  box: {
+    display: 'flex',
+    width: SIZE,
+    height: SIZE,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: motion.durationFast,
+    transitionTimingFunction: motion.easing
+  },
+  boxOff: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: palette.borderStrong,
+      ':hover': palette.fg
+    }
+  },
+  boxOn: {
+    backgroundColor: {
+      default: palette.accentBg,
+      ':hover': palette.accentBgHover
+    },
+    borderWidth: 0
+  },
+  check: {
+    color: palette.accentFg,
+    fontSize: 14,
+    lineHeight: 1,
+    fontWeight: 700
+  },
+  label: {
+    color: palette.fg,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.bodySize,
+    lineHeight: typography.bodyLineHeight
+  },
+  disabled: { opacity: 0.5, cursor: 'not-allowed' }
+});