webadwaita 0.2.0 → 0.2.1

package/dist/web/Switch/styles.css

@@ -0,0 +1,134 @@
+
+@layer priority1, priority2, priority3, priority4;
+@layer priority1{
+.x1rfi6cy{padding:12px}
+.xwmi1nh{padding:16px}
+.x14yi81o{padding:24px}
+.x1ck75x5{padding:32px}
+.xudt4gt{padding:4px}
+.x12ldruc{padding:8px}
+}
+@layer priority2{
+.x1bbxysd{border-color:rgba(0, 0, 0, 0.15)}
+.x16xecvt{border-color:rgba(0, 0, 0, 0.25)}
+.x1ctf4ec{border-radius:11px}
+.x3wdnbj{border-radius:12px}
+.xixl9f9{border-radius:14px}
+.xdwrzdg{border-radius:6px}
+.x4gkjtx{border-radius:9999px}
+.xdamf1x{border-radius:9px}
+.x19u8g8r{gap:12px}
+.x1od9ebw{gap:16px}
+.xc9i02s{gap:24px}
+.xy744dg{gap:32px}
+.x1cuygh6{gap:4px}
+.x15hg9oy{gap:8px}
+.xb3r6kr{overflow:hidden}
+.x83n5x6{padding-block:12px}
+.x5f28bg{padding-block:8px}
+.x1of5wme{padding-inline:12px}
+.x1w4cf6q{padding-inline:16px}
+.xoawizh{padding-inline:24px}
+.x1pe04oy:hover{border-color:rgba(0, 0, 0, 0.8)}
+}
+@layer priority3{
+.x1pha0wt{align-items:baseline}
+.x6s0dn4{align-items:center}
+.xuk3077{align-items:flex-end}
+.x1cy8zhl{align-items:flex-start}
+.x1qjc9v5{align-items:stretch}
+.xqcrz7y{align-self:flex-start}
+.xkh2ocl{align-self:stretch}
+.xhw1y8f{background-color:#3584e4}
+.x1jedtje{background-color:#e01b24}
+.xdwvxq8{background-color:#ebebeb}
+.x2pwvcl{background-color:#ffffff}
+.x1c5tqo3{background-color:#ffffff}
+.x1wvpxmy{background-color:rgba(0, 0, 0, 0.07)}
+.xjbqb8w{background-color:transparent}
+.x6zc1lr{background-color:rgba(0, 0, 0, 0.12)}
+.xbo08cl{box-shadow:0 1px 2px rgba(0,0,0,.25)}
+.x11j0q79{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
+.xgtzv0a{color:#ffffff}
+.xk7gp71{color:#ffffff}
+.xlw9qwm{color:rgba(0, 0, 0, 0.55)}
+.x117bw84{color:rgba(0, 0, 0, 0.8)}
+.x1h6gzvc{cursor:not-allowed}
+.x1ypdohk{cursor:pointer}
+.x78zum5{display:flex}
+.x1r8uery{flex-basis:0}
+.xdt5ytf{flex-direction:column}
+.x1q0g3np{flex-direction:row}
+.x1iyjqo2{flex-grow:1}
+.x1a02dak{flex-wrap:wrap}
+.x164ifzn{font-family:"Adwaita Sans", "Cantarell", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}
+.x13gn23q{font-size:12px}
+.xqwltnl{font-size:14px}
+.xif65rj{font-size:14px}
+.x1lbyq2x{font-size:16px}
+.xaajq3h{font-weight:600}
+.xq8utqp{font-weight:700}
+.x1xlr1w8{font-weight:700}
+.xl56j7k{justify-content:center}
+.x13a6bvl{justify-content:flex-end}
+.x1nhvcw1{justify-content:flex-start}
+.x1l1ennw{justify-content:space-around}
+.x1qughib{justify-content:space-between}
+.xaw8158{justify-content:space-evenly}
+.x11807lh{line-height:1.3}
+.x1aebrpu{line-height:1.4}
+.x7zvn91{line-height:1.5}
+.xo5v014{line-height:1}
+.xbyyjgo{opacity:.5}
+.x10l6tqk{position:absolute}
+.x1n2onr6{position:relative}
+.x2b8uid{text-align:center}
+.xcj3dzi{transition-duration:120ms}
+.x176dcb3{transition-duration:180ms}
+.xts7igz{transition-property:background-color,border-color}
+.x1koyr57{transition-property:background-color,box-shadow,color}
+.x15406qy{transition-property:background-color}
+.xq90yva{transition-property:border-color,background-color}
+.x1ebn093{transition-property:left,transform}
+.xfrgxy7{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
+.x87ps6o{user-select:none}
+.x12s1yt6:hover{background-color:#4a90e9}
+.xusvk13:hover{background-color:#e8434b}
+.x1b2b8i4:hover{background-color:rgba(0, 0, 0, 0.07)}
+.xvuosku:hover{background-color:rgba(0, 0, 0, 0.12)}
+.xnh8i4f:hover{background-color:rgba(0, 0, 0, 0.18)}
+.xc7rq14:active{background-color:#1a6bb8}
+.x1x0tut:active{background-color:#b81920}
+.x1krbwd3:active{background-color:rgba(0, 0, 0, 0.12)}
+.xtkh9g1:active{background-color:rgba(0, 0, 0, 0.18)}
+}
+@layer priority4{
+.x16l2oou{border-bottom-color:#e01b24}
+.x14ro01c{border-bottom-color:rgba(0, 0, 0, 0.15)}
+.x16stqrj{border-bottom-color:transparent}
+.xfrllxf{border-bottom-left-radius:0}
+.xjppbhk{border-bottom-right-radius:0}
+.x1q0q8m5{border-bottom-style:solid}
+.xso031l{border-bottom-width:1px}
+.xlxy82{border-bottom-width:2px}
+.x2donmn{border-top-left-radius:6px}
+.xngj8x4{border-top-right-radius:6px}
+.xmix8c7{height:18px}
+.x17rw0jw{height:22px}
+.x1fgtraw{height:28px}
+.xc9qbxq{height:36px}
+.xn3w4p2{height:44px}
+.x161fk8o{left:23px}
+.x4mh905{left:3px}
+.xu0aao5{min-height:36px}
+.x3sc9yq{min-height:46px}
+.xeuugli{min-width:0}
+.xxk6nc9{top:3px}
+.x1xp8n7a{width:18px}
+.x17z2i9w{width:22px}
+.x1useyqa{width:48px}
+.x129yw6v:hover{border-bottom-color:#e01b24}
+.x19pfmzq:hover{border-bottom-color:rgba(0, 0, 0, 0.25)}
+.xj3zwls:focus{border-bottom-color:#3584e4}
+.x1xmy3i3:focus{border-bottom-color:#e01b24}
+}

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 "react-strict-dom/runtime";
+import { css } from 'react-strict-dom';
+
+/**
+ * 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.1",
   "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,23 @@
     "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",
     "@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 }
-});