webadwaita 0.2.0 → 0.2.2

package/dist/web/_rsd/runtime.js

@@ -0,0 +1,322 @@
+/**
+ * @license react-strict-dom
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import * as stylex from '@stylexjs/stylex';
+var styleq$1 = {};
+Object.defineProperty(styleq$1, "__esModule", {
+  value: true
+});
+var styleq_2 = styleq$1.styleq = void 0;
+var cache = new WeakMap();
+var compiledKey = '$$css';
+function createStyleq(options) {
+  var disableCache;
+  var disableMix;
+  var transform;
+  if (options != null) {
+    disableCache = options.disableCache === true;
+    disableMix = options.disableMix === true;
+    transform = options.transform;
+  }
+  return function styleq() {
+    var definedProperties = [];
+    var className = '';
+    var inlineStyle = null;
+    var debugString = '';
+    var nextCache = disableCache ? null : cache;
+    var styles = new Array(arguments.length);
+    for (var i = 0; i < arguments.length; i++) {
+      styles[i] = arguments[i];
+    }
+    while (styles.length > 0) {
+      var possibleStyle = styles.pop();
+      if (possibleStyle == null || possibleStyle === false) {
+        continue;
+      }
+      if (Array.isArray(possibleStyle)) {
+        for (var _i = 0; _i < possibleStyle.length; _i++) {
+          styles.push(possibleStyle[_i]);
+        }
+        continue;
+      }
+      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+      if (style.$$css != null) {
+        var classNameChunk = '';
+        if (nextCache != null && nextCache.has(style)) {
+          var cacheEntry = nextCache.get(style);
+          if (cacheEntry != null) {
+            classNameChunk = cacheEntry[0];
+            debugString = cacheEntry[2];
+            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+            nextCache = cacheEntry[3];
+          }
+        } else {
+          var definedPropertiesChunk = [];
+          for (var prop in style) {
+            var value = style[prop];
+            if (prop === compiledKey) {
+              var compiledKeyValue = style[prop];
+              if (compiledKeyValue !== true) {
+                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+              }
+              continue;
+            }
+            if (typeof value === 'string' || value === null) {
+              if (!definedProperties.includes(prop)) {
+                definedProperties.push(prop);
+                if (nextCache != null) {
+                  definedPropertiesChunk.push(prop);
+                }
+                if (typeof value === 'string') {
+                  classNameChunk += classNameChunk ? ' ' + value : value;
+                }
+              }
+            } else {
+              console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+            }
+          }
+          if (nextCache != null) {
+            var weakMap = new WeakMap();
+            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);
+            nextCache = weakMap;
+          }
+        }
+        if (classNameChunk) {
+          className = className ? classNameChunk + ' ' + className : classNameChunk;
+        }
+      } else {
+        if (disableMix) {
+          if (inlineStyle == null) {
+            inlineStyle = {};
+          }
+          inlineStyle = Object.assign({}, style, inlineStyle);
+        } else {
+          var subStyle = null;
+          for (var _prop in style) {
+            var _value = style[_prop];
+            if (_value !== undefined) {
+              if (!definedProperties.includes(_prop)) {
+                if (_value != null) {
+                  if (inlineStyle == null) {
+                    inlineStyle = {};
+                  }
+                  if (subStyle == null) {
+                    subStyle = {};
+                  }
+                  subStyle[_prop] = _value;
+                }
+                definedProperties.push(_prop);
+                nextCache = null;
+              }
+            }
+          }
+          if (subStyle != null) {
+            inlineStyle = Object.assign(subStyle, inlineStyle);
+          }
+        }
+      }
+    }
+    var styleProps = [className, inlineStyle, debugString];
+    return styleProps;
+  };
+}
+var styleq = styleq_2 = styleq$1.styleq = createStyleq();
+styleq.factory = createStyleq;
+const optimizedStyleq = styleq_2.factory({
+  disableMix: true
+});
+function merge(...styles) {
+  const [className, style, dataStyleSrc] = optimizedStyleq(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    const chunks = dataStyleSrc.split(';');
+    const pathsMap = {};
+    for (const chunk of chunks) {
+      const trimmed = chunk.trim();
+      const [path, line] = trimmed.split(':');
+      if (line != null) {
+        pathsMap[path] = pathsMap[path] != null ? `${pathsMap[path]},${line}` : line;
+      }
+    }
+    result['data-style-src'] = Object.keys(pathsMap).map(path => `${path}:${pathsMap[path]}`).join('; ');
+  }
+  return result;
+}
+const styles = {
+  block: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  inline: {
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    kybGjl: "x1hl2dhg",
+    k9WMMc: "x16tdsg8",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  inlineblock: {
+    ksu8eU: "x1y0btm7",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    $$css: true
+  },
+  button: {
+    kMzoRj: "xmkeg23",
+    $$css: true
+  },
+  codePre: {
+    kMv6JI: "x1lxnp44",
+    kGuDYH: "xrv4cvt",
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  heading: {
+    kGuDYH: "xngnso2",
+    kD5eJx: "x1vvkbs",
+    $$css: true
+  },
+  hr: {
+    kWkggS: "x42x0ya",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kB7OPa: "x9f619",
+    kZKoxP: "xjm9jq1",
+    $$css: true
+  },
+  img: {
+    kOBAk4: "xuw900x",
+    kZKoxP: "xt7dq6l",
+    ks0D6T: "x193iq5w",
+    $$css: true
+  },
+  input: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    $$css: true
+  },
+  list: {
+    kB88ic: "xe8uvvx",
+    $$css: true
+  },
+  strong: {
+    k63SB2: "x117nqv4",
+    $$css: true
+  },
+  textarea: {
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kHenm0: "x288g5",
+    $$css: true
+  }
+};
+const a = styles.inline;
+const article = styles.block;
+const aside = styles.block;
+const b = styles.inline;
+const bdi = styles.inline;
+const bdo = styles.inline;
+const blockquote = styles.block;
+const br = null;
+const button = [styles.inlineblock, styles.button];
+const code = [styles.inline, styles.codePre];
+const del = null;
+const div = styles.block;
+const em = styles.inline;
+const fieldset = styles.block;
+const footer = styles.block;
+const form = styles.block;
+const heading = [styles.block, styles.heading];
+const header = styles.block;
+const hr = [styles.block, styles.hr];
+const i = styles.inline;
+const img = styles.img;
+const input = [styles.inlineblock, styles.input];
+const ins = null;
+const kbd = null;
+const label = styles.inline;
+const li = styles.block;
+const main = styles.block;
+const mark = styles.inline;
+const nav = styles.block;
+const ol = [styles.list, styles.block];
+const optgroup = null;
+const option = null;
+const p = styles.block;
+const pre = [styles.block, styles.codePre];
+const s = null;
+const section = styles.block;
+const select = styles.inlineblock;
+const span = styles.inline;
+const strong = [styles.inline, styles.strong];
+const sub = styles.inline;
+const sup = styles.inline;
+const textarea = [styles.inlineblock, styles.textarea];
+const u = null;
+const ul = [styles.list, styles.block];
+const defaultStyles = {
+  a: a,
+  article: article,
+  aside: aside,
+  b: b,
+  bdi: bdi,
+  bdo: bdo,
+  blockquote: blockquote,
+  br: br,
+  button: button,
+  code: code,
+  del: del,
+  div: div,
+  em: em,
+  fieldset: fieldset,
+  footer: footer,
+  form: form,
+  h1: heading,
+  h2: heading,
+  h3: heading,
+  h4: heading,
+  h5: heading,
+  h6: heading,
+  header: header,
+  hr: hr,
+  i: i,
+  img: img,
+  input: input,
+  ins: ins,
+  kbd: kbd,
+  label: label,
+  li: li,
+  main: main,
+  mark: mark,
+  nav: nav,
+  ol: ol,
+  optgroup: optgroup,
+  option: option,
+  p: p,
+  pre: pre,
+  s: s,
+  section: section,
+  select: select,
+  span: span,
+  strong: strong,
+  sub: sub,
+  sup: sup,
+  textarea: textarea,
+  u: u,
+  ul: ul
+};
+export { defaultStyles, merge };

package/dist/web/_tokens/styles.css

@@ -0,0 +1,32 @@
+
+@layer priority1, priority2, priority3, priority4;
+@layer priority1{
+.x1ghz6dp{margin:0}
+.x1717udv{padding:0}
+}
+@layer priority2{
+.xng3xce{border-style:none}
+.x1y0btm7{border-style:solid}
+.xc342km{border-width:0}
+.xmkeg23{border-width:1px}
+.xe8uvvx{list-style:none}
+.xysyzu8{overflow:auto}
+.x1hl2dhg{text-decoration:none}
+}
+@layer priority3{
+.xuw900x{aspect-ratio:attr(width)  / attr(height)}
+.x42x0ya{background-color:black}
+.x9f619{box-sizing:border-box}
+.x1lxnp44{font-family:monospace,"monospace"}
+.xngnso2{font-size:1.5rem}
+.xrv4cvt{font-size:1em}
+.x117nqv4{font-weight:bold}
+.x288g5{resize:vertical}
+.x16tdsg8{text-align:inherit}
+.x1vvkbs{word-wrap:break-word}
+}
+@layer priority4{
+.xjm9jq1{height:1px}
+.xt7dq6l{height:auto}
+.x193iq5w{max-width:100%}
+}

package/dist/web/index.js

@@ -0,0 +1,8 @@
+export { Button } from './Button';
+export { Entry } from './Entry';
+export { Switch } from './Switch';
+export { Checkbox } from './Checkbox';
+export { Card } from './Card';
+export { HeaderBar } from './HeaderBar';
+export { Box } from './Box';
+export { theme, palette, radius, spacing, typography, motion } from './theme';

package/dist/web/theme.js

@@ -0,0 +1,16 @@
+/**
+ * Re-export of the design tokens for runtime use by consumer code (e.g. for
+ * computing inline styles, reading the accent color in a custom component).
+ *
+ * The stylex-aware tokens live in `tokens.stylex.ts`. At runtime, defineConsts
+ * returns a plain object with the same keys/values — so we just re-export.
+ */
+export { palette, radius, spacing, typography, motion } from './tokens.css';
+import { palette, radius, spacing, typography, motion } from './tokens.css';
+export const theme = {
+  palette,
+  radius,
+  spacing,
+  typography,
+  motion
+};

package/dist/web/tokens.css.js

@@ -0,0 +1,79 @@
+import './_tokens/styles.css';
+import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "./_rsd/runtime.js";
+import { css } from './_rsd/index.js';
+
+/**
+ * Adwaita-inspired design tokens, exposed via `css.defineConsts` so they can
+ * be referenced inside `css.create({...})` calls. StyleX requires shared
+ * values to live in a `.stylex.ts` file and to be defined this way.
+ *
+ * NOTE: defineConsts only accepts string values. Numeric tokens (sizes,
+ * weights, line heights) are encoded as strings — CSS accepts them either
+ * way, and react-strict-dom forwards them through to RN as well.
+ */
+
+export const palette = {
+  accentBg: "#3584e4",
+  accentBgHover: "#4a90e9",
+  accentBgActive: "#1a6bb8",
+  accentFg: "#ffffff",
+  destructiveBg: "#e01b24",
+  destructiveBgHover: "#e8434b",
+  destructiveBgActive: "#b81920",
+  destructiveFg: "#ffffff",
+  successBg: "#26a269",
+  warningBg: "#cd9309",
+  windowBg: "#fafafa",
+  viewBg: "#ffffff",
+  cardBg: "#ffffff",
+  headerbarBg: "#ebebeb",
+  sidebarBg: "#ebebeb",
+  fg: "rgba(0, 0, 0, 0.8)",
+  fgMuted: "rgba(0, 0, 0, 0.55)",
+  fgDisabled: "rgba(0, 0, 0, 0.35)",
+  fgOnAccent: "#ffffff",
+  border: "rgba(0, 0, 0, 0.15)",
+  borderStrong: "rgba(0, 0, 0, 0.25)",
+  shadow: "rgba(0, 0, 0, 0.07)",
+  subtleBg: "rgba(0, 0, 0, 0.07)",
+  subtleBgHover: "rgba(0, 0, 0, 0.12)",
+  subtleBgActive: "rgba(0, 0, 0, 0.18)"
+};
+export const radius = {
+  sm: "6px",
+  md: "9px",
+  lg: "12px",
+  pill: "9999px"
+};
+export const spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  xxl: "32px"
+};
+export const typography = {
+  fontFamily: "\"Adwaita Sans\", \"Cantarell\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif",
+  fontFamilyMono: "\"Adwaita Mono\", \"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, monospace",
+  weightRegular: "400",
+  weightStrong: "600",
+  weightBold: "700",
+  bodySize: "14px",
+  bodyLineHeight: "1.5",
+  captionSize: "12px",
+  captionLineHeight: "1.4",
+  title4Size: "16px",
+  title4LineHeight: "1.3",
+  title3Size: "18px",
+  title3LineHeight: "1.3",
+  title2Size: "22px",
+  title2LineHeight: "1.25",
+  title1Size: "28px",
+  title1LineHeight: "1.2"
+};
+export const motion = {
+  durationFast: "120ms",
+  durationBase: "180ms",
+  easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+};

package/package.json

@@ -1,23 +1,31 @@
 {
   "name": "webadwaita",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Cross-platform Adwaita-styled UI components built on react-strict-dom.",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
-    "src",
-    "babel.config.cjs",
+    "dist",
     "README.md",
     "LICENSE"
   ],
-  "main": "./src/index.ts",
+  "main": "./dist/web/index.js",
+  "module": "./dist/web/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./babel-config": "./babel.config.cjs",
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "react-native": "./dist/native/index.js",
+      "default": "./dist/web/index.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
+    "build": "node scripts/build.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepack": "npm run build",
     "storybook:web": "npm --prefix apps/storybook-web run storybook",
     "storybook:native": "npm --prefix apps/storybook-native run start"
   },
@@ -28,12 +36,24 @@
     "react-strict-dom": ">=0.0.50"
   },
   "peerDependenciesMeta": {
-    "react-dom": { "optional": true },
-    "react-native": { "optional": true }
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@stylexjs/babel-plugin": "^0.18.3",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.14",
+    "postcss-react-strict-dom": "^0.0.55",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-strict-dom": "^0.0.55",

package/babel.config.cjs

@@ -1,23 +0,0 @@
-/**
- * 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/src/Box/index.tsx

@@ -1,105 +0,0 @@
-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 }
-});