webadwaita 0.1.0 → 0.2.1

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,112 @@
+# 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. |
+
+## 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 precompiled JS plus per-component CSS — no special bundler config required. Install, import, render:
+
+```sh
+npm install webadwaita react-strict-dom
+```
+
+```tsx
+import { Button, Card } from 'webadwaita';
+```
+
+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
+```
+
+Two design-token notes carry over to consumer code:
+
+- 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
+
+```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
+
+```sh
+# library
+npm install
+npm run build       # produces dist/{web,native,types}
+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/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/dist/native/Button/index.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { palette, radius, spacing, typography, motion } from '../tokens.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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) {
+  const {
+    children,
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    fullWidth = false,
+    onPress,
+    type = 'button'
+  } = props;
+  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',
+    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/dist/native/Card/index.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { palette, radius, spacing, typography } from '../tokens.css';
+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) {
+  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,
+    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/dist/native/Checkbox/index.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { palette, radius, motion, typography, spacing } from '../tokens.css';
+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) {
+  const {
+    checked,
+    disabled = false,
+    onChange,
+    label
+  } = props;
+  const toggle = () => {
+    if (!disabled) onChange?.(!checked);
+  };
+  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 /*#__PURE__*/_jsx(html.button, {
+      type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      disabled: disabled,
+      onClick: toggle,
+      style: [styles.bareButton, disabled && styles.disabled],
+      children: box
+    });
+  }
+  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',
+    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'
+  }
+});

package/dist/native/Entry/index.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { css, html } from 'react-strict-dom';
+import { palette, radius, spacing, typography, motion } from '../tokens.css';
+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) {
+  const {
+    value,
+    defaultValue,
+    placeholder,
+    disabled = false,
+    readOnly = false,
+    invalid = false,
+    type = 'text',
+    onChange,
+    onSubmit
+  } = props;
+  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,
+    color: palette.fg,
+    borderWidth: 0,
+    borderBottomWidth: 2,
+    borderBottomStyle: 'solid',
+    borderBottomColor: {
+      default: 'transparent',
+      ':hover': palette.borderStrong,
+      ':focus': palette.accentBg
+    },
+    borderTopLeftRadius: radius.sm,
+    borderTopRightRadius: radius.sm,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingBlock: spacing.sm,
+    paddingInline: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.bodySize,
+    lineHeight: typography.bodyLineHeight,
+    minHeight: 36,
+    transitionProperty: 'border-color, background-color',
+    transitionDuration: motion.durationFast,
+    transitionTimingFunction: motion.easing
+  },
+  invalid: {
+    borderBottomColor: {
+      default: palette.destructiveBg,
+      ':hover': palette.destructiveBg,
+      ':focus': palette.destructiveBg
+    }
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+});