sid-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,55 @@
-# Temporary Holding Version
+# sid-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components, tokens, and theme for Joined products. Apps import this package instead of keeping a local copy of the design system.
+
+## Install
+
+```bash
+bun add sid-ui react react-dom
+```
+
+`react` and `react-dom` must be 19 or newer. The package also installs `@astryxdesign/core`, `@astryxdesign/theme-neutral`, and `@stylexjs/stylex`.
+
+## Use
+
+```tsx
+import { Button } from "sid-ui";
+import { JoinedProvider } from "sid-ui/theme";
+
+import "sid-ui/styles/joined.css";
+```
+
+```tsx
+<JoinedProvider>
+  <Button variant="primary" label="Save" onClick={onSave} />
+</JoinedProvider>
+```
+
+Next.js apps add `sid-ui` to `transpilePackages`, because the package ships TypeScript source.
+
+## Entry points
+
+| Import | Contents |
+| --- | --- |
+| `sid-ui` | Components |
+| `sid-ui/theme` | `JoinedProvider` and the theme object |
+| `sid-ui/styles/joined.css` | Tokens and component styles. Import this once per app. |
+| `sid-ui/places` | Place types and helpers |
+| `sid-ui/geoapify` | Server helper for place search. Pass `process.env.GEOAPIFY_API_KEY`. |
+| `sid-ui/brand-name` | Product name constant, without the component barrel |
+
+## Theme source
+
+Token values are generated from `src/theme/joined.theme.ts`.
+
+```bash
+bun run theme:build
+```
+
+## Publish
+
+From this repo, after `bun pm whoami` shows your registry user:
+
+```bash
+bun publish
+```

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "sid-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "packageManager": "bun@1.4.2",
+  "description": "React components, tokens, and theme used by Joined products.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sid0709/sid-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sid0709/sid-ui/issues"
+  },
+  "homepage": "https://github.com/sid0709/sid-ui#readme",
+  "keywords": ["react", "design-system", "components", "ui"],
+  "sideEffects": ["*.css"],
+  "files": ["src", "!src/**/*.test.ts", "README.md"],
+  "types": "./src/components/index.ts",
+  "main": "./src/components/index.ts",
+  "exports": {
+    ".": "./src/components/index.ts",
+    "./places": "./src/components/places.ts",
+    "./geoapify": "./src/places/geoapify.ts",
+    "./brand-name": "./src/brand/name.ts",
+    "./styles.css": "./src/styles/theme.css",
+    "./styles/astryx.css": "./src/styles/astryx.css",
+    "./styles/components.css": "./src/styles/components.css",
+    "./styles/joined.css": "./src/styles/joined.css",
+    "./styles/theme.css": "./src/styles/theme.css",
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./theme": "./src/theme/index.ts"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --incremental false -p tsconfig.json",
+    "test": "bun test",
+    "theme:build": "astryx theme build src/theme/joined.theme.ts -o src/theme/theme.css",
+    "prepublishOnly": "bun run typecheck && bun test"
+  },
+  "dependencies": {
+    "@astryxdesign/core": "0.6.3",
+    "@astryxdesign/theme-neutral": "0.6.3",
+    "@stylexjs/stylex": "0.19.1"
+  },
+  "devDependencies": {
+    "@astryxdesign/cli": "0.6.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "typescript": "5.9.3"
+  }
+}

package/src/brand/BrandFooter.tsx

@@ -0,0 +1,45 @@
+import { JoinedLogo } from "./JoinedLogo";
+import { JoinedMark } from "./JoinedMark";
+
+const MARK_SIZE = "1rem";
+const WORDMARK_HEIGHT = "0.875rem";
+
+export interface BrandFooterProps {
+  /** Words before the wordmark. */
+  lead?: string;
+  /** Where the wordmark links, e.g. the Joined home page. Plain text when omitted. */
+  href?: string;
+  align?: "center" | "start";
+  className?: string;
+}
+
+/** A quiet sign-off under landing, auth, and error pages: the symbol, a lead, and the wordmark. */
+export function BrandFooter({
+  lead = "Part of",
+  href,
+  align = "center",
+  className,
+}: BrandFooterProps) {
+  const classes = ["os-brand-footer", align === "start" && "os-brand-footer-start", className]
+    .filter(Boolean)
+    .join(" ");
+  const signOff = (
+    <>
+      <JoinedMark variant="blue" size={MARK_SIZE} label="" />
+      <span>{lead}</span>
+      <JoinedLogo height={WORDMARK_HEIGHT} />
+    </>
+  );
+
+  return (
+    <footer className={classes}>
+      {href ? (
+        <a className="os-brand-footer-link" href={href}>
+          {signOff}
+        </a>
+      ) : (
+        <span className="os-brand-footer-link">{signOff}</span>
+      )}
+    </footer>
+  );
+}

package/src/brand/BrandHeading.tsx

@@ -0,0 +1,24 @@
+import { TopNavHeading, type TopNavHeadingProps } from "../components/LayoutPrimitives";
+
+import { JoinedLogo } from "./JoinedLogo";
+import { JoinedMark } from "./JoinedMark";
+import { BRAND_NAME } from "./name";
+
+export interface BrandHeadingProps extends Omit<
+  TopNavHeadingProps,
+  "logo" | "logoLabel" | "heading"
+> {
+  /** A product under the Joined brand (Scoutwell, Joined Admin…). Omit for Joined itself. */
+  product?: string;
+}
+
+/**
+ * The TopNav heading every app uses. Joined itself shows the blue wordmark; a
+ * product shows the Joined app icon beside its own name.
+ */
+export function BrandHeading({ product, ...props }: BrandHeadingProps) {
+  if (!product || product === BRAND_NAME) {
+    return <TopNavHeading {...props} logo={<JoinedLogo />} logoLabel={BRAND_NAME} />;
+  }
+  return <TopNavHeading {...props} logo={<JoinedMark label="" />} heading={product} />;
+}

package/src/brand/BrandLockup.tsx

@@ -0,0 +1,47 @@
+import { JoinedLogo } from "./JoinedLogo";
+import { JoinedMark } from "./JoinedMark";
+import { BRAND_NAME } from "./name";
+
+/** Rendered heights, so the icon and wordmark keep one proportion everywhere. */
+const ICON_SIZE = "3rem";
+const WORDMARK_HEIGHT = "2.5rem";
+const ENDORSEMENT_HEIGHT = "0.875rem";
+
+export interface BrandLockupProps {
+  /** A product under the Joined brand. Omit for Joined itself. */
+  product?: string;
+  /** One line under the logo: what this place is for. */
+  tagline?: string;
+  align?: "center" | "start";
+  className?: string;
+}
+
+/**
+ * The logo block that opens sign-in, sign-up, onboarding, and error pages.
+ * Joined shows its wordmark; a product shows the app icon, its name, and "by Joined".
+ */
+export function BrandLockup({ product, tagline, align = "center", className }: BrandLockupProps) {
+  const classes = ["os-brand-lockup", align === "start" && "os-brand-lockup-start", className]
+    .filter(Boolean)
+    .join(" ");
+  const isProduct = Boolean(product) && product !== BRAND_NAME;
+
+  return (
+    <div className={classes}>
+      {isProduct ? (
+        <>
+          <div className="os-brand-lockup-row">
+            <JoinedMark size={ICON_SIZE} label="" />
+            <p className="os-brand-lockup-product">{product}</p>
+          </div>
+          <span className="os-brand-lockup-endorse">
+            by <JoinedLogo height={ENDORSEMENT_HEIGHT} />
+          </span>
+        </>
+      ) : (
+        <JoinedLogo height={WORDMARK_HEIGHT} />
+      )}
+      {tagline && <p className="os-brand-lockup-tagline">{tagline}</p>}
+    </div>
+  );
+}

package/src/brand/JoinedLogo.tsx

@@ -0,0 +1,67 @@
+import { WORDMARK } from "./geometry";
+import { BRAND_NAME } from "./name";
+import {
+  BrandGradient,
+  labelProps,
+  useGradientId,
+  solidFill,
+  type BrandRamp,
+  type BrandSolid,
+} from "./paint";
+
+import type { CSSProperties } from "react";
+
+/**
+ * The color treatments shipped in Joined-Logo/1-Brand-Logo, plus `blue`: the
+ * blue gradient that brightens in dark mode. Blue is the everyday brand color.
+ */
+export type JoinedLogoVariant =
+  "blue" | "blue-gradient" | "meta-blue" | "original" | "black" | "white";
+
+export interface JoinedLogoProps {
+  /** `blue` everywhere by default; `white` on accent or photo surfaces; `original` for marketing moments. */
+  variant?: JoinedLogoVariant;
+  /** Rendered height; width follows the artwork's aspect ratio. */
+  height?: CSSProperties["height"];
+  /** Accessible name. Pass `""` when visible text already names the brand. */
+  label?: string;
+  className?: string;
+}
+
+const RAMPS: Partial<Record<JoinedLogoVariant, BrandRamp>> = {
+  blue: "adaptive",
+  original: "original",
+  "blue-gradient": "blue",
+};
+
+/** Horizontal, left to right across the wordmark — as in the master files. */
+const VECTOR = { x1: 0, y1: 114.347, x2: 854.843, y2: 114.347 };
+
+/** The "Joined" wordmark. */
+export function JoinedLogo({
+  variant = "blue",
+  height = "1.5rem",
+  label = BRAND_NAME,
+  className,
+}: JoinedLogoProps) {
+  const id = useGradientId();
+  const ramp = RAMPS[variant];
+  return (
+    <svg
+      viewBox={`0 0 ${WORDMARK.width} ${WORDMARK.height}`}
+      className={className ? `os-brand ${className}` : "os-brand"}
+      style={{ height }}
+      {...labelProps(label)}
+    >
+      <path
+        d={WORDMARK.d}
+        style={ramp ? { fill: `url(#${id})` } : solidFill(variant as BrandSolid)}
+      />
+      {ramp && (
+        <defs>
+          <BrandGradient id={id} ramp={ramp} vector={VECTOR} />
+        </defs>
+      )}
+    </svg>
+  );
+}

package/src/brand/JoinedMark.tsx

@@ -0,0 +1,76 @@
+import { APP_TILE, SYMBOL } from "./geometry";
+import { BRAND_NAME } from "./name";
+import { BrandGradient, labelProps, solidFill, useGradientId, type BrandSolid } from "./paint";
+
+import type { CSSProperties } from "react";
+
+/**
+ * The treatments shipped in Joined-Logo/3-App-Icon-D-Link, plus `blue`: the bare
+ * symbol in the blue gradient that brightens in dark mode.
+ */
+export type JoinedMarkVariant = "app" | "blue" | "gradient" | "meta-blue" | "white";
+
+export interface JoinedMarkProps {
+  /** `app` is the rounded app tile; the others are the bare symbol. */
+  variant?: JoinedMarkVariant;
+  /** Rendered height; width follows the artwork's aspect ratio. */
+  size?: CSSProperties["height"];
+  /** Accessible name. Pass `""` when visible text already names the brand. */
+  label?: string;
+  className?: string;
+}
+
+/** Diagonal, top-left to bottom-right — as in the master files. */
+const TILE_VECTOR = { x1: 35.1464, y1: 35.1464, x2: 204.854, y2: 204.854 };
+const SYMBOL_VECTOR = { x1: 21.7909, y1: 15.3125, x2: 91.3536, y2: 114.306 };
+
+/** The linked-rings symbol: the Joined app icon, or the bare mark for tight spaces. */
+export function JoinedMark({
+  variant = "app",
+  size = "1.5rem",
+  label = BRAND_NAME,
+  className,
+}: JoinedMarkProps) {
+  const id = useGradientId();
+  const svgProps = {
+    className: className ? `os-brand ${className}` : "os-brand",
+    style: { height: size },
+    ...labelProps(label),
+  };
+
+  if (variant === "app") {
+    return (
+      <svg viewBox={`0 0 ${APP_TILE.size} ${APP_TILE.size}`} {...svgProps}>
+        <rect
+          width={APP_TILE.size}
+          height={APP_TILE.size}
+          rx={APP_TILE.radius}
+          style={{ fill: `url(#${id})` }}
+        />
+        <path
+          transform={`translate(${APP_TILE.symbolX} ${APP_TILE.symbolY})`}
+          d={SYMBOL.d}
+          style={solidFill("white")}
+        />
+        <defs>
+          <BrandGradient id={id} ramp="blue" vector={TILE_VECTOR} />
+        </defs>
+      </svg>
+    );
+  }
+
+  const ramp = variant === "blue" ? "adaptive" : variant === "gradient" ? "blue" : undefined;
+  return (
+    <svg viewBox={`0 0 ${SYMBOL.width} ${SYMBOL.height}`} {...svgProps}>
+      <path
+        d={SYMBOL.d}
+        style={ramp ? { fill: `url(#${id})` } : solidFill(variant as BrandSolid)}
+      />
+      {ramp && (
+        <defs>
+          <BrandGradient id={id} ramp={ramp} vector={SYMBOL_VECTOR} />
+        </defs>
+      )}
+    </svg>
+  );
+}

package/src/brand/geometry.ts

@@ -0,0 +1,26 @@
+/**
+ * Joined logo geometry, copied from the masters in `Joined-Logo/`.
+ * Re-copy the `d` attributes if the artwork changes.
+ */
+
+/** The "Joined" wordmark (1-Brand-Logo). */
+export const WORDMARK = {
+  width: 856,
+  height: 230,
+  d: "M162.229 145.057C162.229 164.72 155.301 183.755 142.662 198.817C130.023 213.88 112.481 224.008 93.1162 227.423C73.7518 230.837 53.8032 227.32 36.7744 217.488C19.7457 207.657 6.72518 192.139 0 173.662L39.2969 159.359C42.6595 168.598 49.1693 176.357 57.6836 181.272C66.198 186.188 76.1723 187.946 85.8545 186.239C95.5367 184.532 104.308 179.469 110.628 171.938C116.948 164.406 120.411 154.888 120.411 145.057V49.6592H98.1953V10.4541H162.229V145.057ZM452.996 78.4092C462.864 78.4092 472.635 80.3527 481.752 84.1289C490.869 87.9052 499.152 93.4404 506.13 100.418C513.107 107.396 518.643 115.679 522.419 124.796C526.195 133.912 528.139 143.683 528.139 153.551V228.693H486.32V153.551C486.32 149.175 485.458 144.842 483.783 140.799C482.109 136.756 479.654 133.082 476.56 129.987C473.465 126.893 469.792 124.438 465.749 122.764C461.706 121.089 457.372 120.228 452.996 120.228C416.841 120.228 394.769 140.737 366.326 168.511C339.23 194.97 305.761 228.693 250.439 228.693L249.468 228.688C208.416 228.167 175.298 194.726 175.298 153.551C175.298 112.051 208.94 78.4092 250.439 78.4092C290.676 78.4092 323.524 110.034 325.487 149.783C329.273 146.218 333.13 142.477 337.109 138.592C364.206 112.133 397.674 78.4093 452.996 78.4092ZM419.673 228.693H377.854V170.062C392.964 155.465 405.739 144.104 419.673 137.141V228.693ZM611.434 78.5703C627.66 77.5068 643.793 81.7351 657.411 90.6211C668.816 98.0632 677.941 108.436 683.873 120.587L683.89 120.584C688.757 130.537 691.491 141.725 691.491 153.551C691.491 153.601 691.49 153.652 691.49 153.702L591.039 175.228C593.637 178.26 596.775 180.821 600.32 182.767C606.643 186.235 613.92 187.559 621.059 186.54C628.197 185.521 634.813 182.213 639.912 177.114L669.482 206.685C657.984 218.183 643.066 225.64 626.969 227.938C610.871 230.237 594.462 227.251 580.206 219.43C565.95 211.608 554.615 199.374 547.904 184.562C541.193 169.751 539.468 153.162 542.987 137.287C546.507 121.412 555.081 107.107 567.423 96.5195C579.764 85.9321 595.208 79.6339 611.434 78.5703ZM854.843 228.693H813.024V220.918C802.982 225.895 791.669 228.693 779.701 228.693C738.201 228.693 704.559 195.051 704.559 153.551C704.559 112.051 738.201 78.4092 779.701 78.4092C791.668 78.4092 802.982 81.2067 813.024 86.1836V18.2959L854.843 0V228.693ZM250.439 120.228C232.035 120.228 217.115 135.147 217.115 153.551C217.115 171.955 232.035 186.875 250.439 186.875C268.844 186.875 283.764 171.955 283.764 153.551C283.763 135.147 268.844 120.228 250.439 120.228ZM779.701 120.228C761.297 120.228 746.377 135.147 746.377 153.551C746.377 171.955 761.297 186.875 779.701 186.875C798.105 186.875 813.024 171.955 813.024 153.551C813.024 135.147 798.105 120.228 779.701 120.228ZM634.559 125.643C628.519 121.702 621.365 119.827 614.169 120.299C606.973 120.77 600.125 123.564 594.651 128.259C590.401 131.905 587.158 136.545 585.19 141.733L639.927 130.004C638.302 128.377 636.506 126.913 634.559 125.643ZM390.923 84.3574C374.691 92.741 361.015 103.643 349.104 114.474V78.4092H390.923V84.3574ZM370.014 5.88086C384.087 5.88105 395.496 17.2897 395.496 31.3633C395.496 45.437 384.087 56.8465 370.014 56.8467C355.94 56.8467 344.53 45.4371 344.53 31.3633C344.53 17.2896 355.94 5.88086 370.014 5.88086Z",
+} as const;
+
+/** The linked-rings symbol (3-App-Icon-D-Link). */
+export const SYMBOL = {
+  width: 149,
+  height: 105,
+  d: "M52.2812 0C81.1552 9.07116e-05 104.562 23.4073 104.562 52.2812C104.562 59.6659 103.03 66.6922 100.268 73.0615C99.0509 73.2795 97.798 73.3945 96.5186 73.3945C88.3006 73.3944 81.1799 68.6989 77.6914 61.8447C78.8115 58.87 79.4267 55.6477 79.4268 52.2812C79.4268 37.289 67.2735 25.1349 52.2812 25.1348C37.289 25.1348 25.1348 37.289 25.1348 52.2812C25.1348 64.4893 33.1942 74.8144 44.2822 78.2285C49.3121 88.335 57.1887 96.775 66.8623 102.5C62.2341 103.841 57.3419 104.562 52.2812 104.562C23.4073 104.562 9.07233e-05 81.1552 0 52.2812C0 23.4072 23.4072 0 52.2812 0ZM96.5195 0C125.393 0.000329859 148.801 23.4074 148.801 52.2812C148.801 81.155 125.393 104.562 96.5195 104.562C67.6455 104.562 44.2384 81.1552 44.2383 52.2812C44.2383 44.8961 45.7699 37.8687 48.5322 31.499C49.7488 31.281 51.002 31.168 52.2812 31.168C60.4986 31.1681 67.6196 35.8625 71.1084 42.7158C69.988 45.6909 69.373 48.9143 69.373 52.2812C69.3731 67.2735 81.5273 79.4268 96.5195 79.4268C111.511 79.4264 123.665 67.2733 123.665 52.2812C123.665 40.0733 115.606 29.7473 104.519 26.333C99.4887 16.2267 91.612 7.78552 81.9385 2.06055C86.5664 0.719272 91.4592 0 96.5195 0Z",
+} as const;
+
+/** The app tile: a rounded square with the symbol centered on it. */
+export const APP_TILE = {
+  size: 240,
+  radius: 55.2,
+  symbolX: 45.6,
+  symbolY: 67.7188,
+} as const;

package/src/brand/index.ts

@@ -0,0 +1,11 @@
+export { BRAND_NAME } from "./name";
+export { JoinedLogo } from "./JoinedLogo";
+export type { JoinedLogoProps, JoinedLogoVariant } from "./JoinedLogo";
+export { JoinedMark } from "./JoinedMark";
+export type { JoinedMarkProps, JoinedMarkVariant } from "./JoinedMark";
+export { BrandHeading } from "./BrandHeading";
+export type { BrandHeadingProps } from "./BrandHeading";
+export { BrandLockup } from "./BrandLockup";
+export type { BrandLockupProps } from "./BrandLockup";
+export { BrandFooter } from "./BrandFooter";
+export type { BrandFooterProps } from "./BrandFooter";

package/src/brand/name.ts

@@ -0,0 +1,5 @@
+/**
+ * The product name, for titles, alt text, and copy shared across apps. Also exported
+ * alone as `sid-ui/brand-name`, so config modules skip the component barrel.
+ */
+export const BRAND_NAME = "Joined";

package/src/brand/paint.tsx

@@ -0,0 +1,56 @@
+import { useId, type CSSProperties } from "react";
+
+/**
+ * A gradient palette from brand.css: five stops at 0, 25, 50, 75, 100%.
+ * `adaptive` is the blue ramp, brightened in dark mode.
+ */
+export type BrandRamp = "adaptive" | "blue" | "original";
+
+/** A solid fill from brand.css. */
+export type BrandSolid = "meta-blue" | "black" | "white";
+
+/** Start and end of a linear gradient, in the artwork's own coordinates. */
+export interface GradientVector {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+const STOPS = [1, 2, 3, 4, 5] as const;
+
+/** A per-instance gradient id that is safe inside `url(#…)` (React ids may hold `:` or `«»`). */
+export const useGradientId = () => `os-brand-${useId().replace(/[^\w-]/g, "")}`;
+
+export const solidFill = (solid: BrandSolid): CSSProperties => ({
+  fill: `var(--os-brand-${solid})`,
+});
+
+/** A userSpaceOnUse gradient whose stops read the brand ramp from brand.css. */
+export function BrandGradient({
+  id,
+  ramp,
+  vector,
+}: {
+  id: string;
+  ramp: BrandRamp;
+  vector: GradientVector;
+}) {
+  return (
+    <linearGradient id={id} gradientUnits="userSpaceOnUse" {...vector}>
+      {STOPS.map((stop, index) => (
+        <stop
+          key={stop}
+          offset={index / (STOPS.length - 1)}
+          style={{ stopColor: `var(--os-brand-${ramp}-${stop})` }}
+        />
+      ))}
+    </linearGradient>
+  );
+}
+
+/** Accessible name for the artwork, or hidden when it sits beside visible text. */
+export const labelProps = (label: string | undefined) =>
+  label
+    ? ({ role: "img", "aria-label": label } as const)
+    : ({ "aria-hidden": true, focusable: false } as const);

package/src/components/Action.tsx

@@ -0,0 +1,44 @@
+/**
+ * Action components are original Astryx — Joined only themes them.
+ * Import them from here so apps depend on sid-ui alone.
+ */
+export { Button } from "@astryxdesign/core/Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "@astryxdesign/core/Button";
+
+export { IconButton } from "@astryxdesign/core/IconButton";
+export type { IconButtonProps } from "@astryxdesign/core/IconButton";
+
+export { ButtonGroup } from "@astryxdesign/core/ButtonGroup";
+export type { ButtonGroupProps, ButtonGroupOrientation } from "@astryxdesign/core/ButtonGroup";
+
+export { Link, LinkProvider } from "@astryxdesign/core/Link";
+export type { LinkProps, LinkComponentType } from "@astryxdesign/core/Link";
+
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSubMenu,
+} from "@astryxdesign/core/DropdownMenu";
+export type {
+  DropdownMenuProps,
+  DropdownMenuItemData,
+  DropdownMenuDividerData,
+  DropdownMenuSection,
+  DropdownMenuOption,
+} from "@astryxdesign/core/DropdownMenu";
+
+export { MoreMenu } from "@astryxdesign/core/MoreMenu";
+export type { MoreMenuProps } from "@astryxdesign/core/MoreMenu";
+
+export { SegmentedControl, SegmentedControlItem } from "@astryxdesign/core/SegmentedControl";
+export type {
+  SegmentedControlProps,
+  SegmentedControlItemProps,
+  SegmentedControlSize,
+} from "@astryxdesign/core/SegmentedControl";
+
+export { ToggleButton, ToggleButtonGroup } from "@astryxdesign/core/ToggleButton";
+export type { ToggleButtonProps, ToggleButtonGroupProps } from "@astryxdesign/core/ToggleButton";
+
+export { Toolbar } from "@astryxdesign/core/Toolbar";
+export type { ToolbarProps, ToolbarSize } from "@astryxdesign/core/Toolbar";

package/src/components/AddressSelector.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { CitySelector } from "./CitySelector";
+import { TextInput, Typeahead } from "./DataInput";
+import { emptyAddress, formatAddress, type Address } from "./places";
+import {
+  PLACES_DEBOUNCE_MS,
+  PLACES_MIN_QUERY,
+  PlacesCredit,
+  placeItem,
+  placeSearch,
+} from "./places-search";
+import { Stack } from "./Primitives";
+import { StateSelector } from "./StateSelector";
+
+/** Suggest real addresses as someone types, then keep street, city, state, and ZIP. */
+export function AddressSelector({
+  label,
+  value,
+  onChange,
+  isDisabled,
+}: {
+  label: string;
+  value: Address;
+  onChange: (address: Address) => void;
+  isDisabled?: boolean;
+}) {
+  const source = useMemo(() => placeSearch("address"), []);
+  const countries = useMemo(() => placeSearch("country"), []);
+  const formatted = formatAddress(value);
+  const set =
+    <K extends keyof Address>(key: K) =>
+    (next: Address[K]) => {
+      onChange({ ...value, [key]: next });
+    };
+
+  return (
+    <Stack gap={3}>
+      <Typeahead
+        label={label}
+        searchSource={source}
+        value={placeItem(formatted, value)}
+        onChange={(hit) => onChange(hit?.auxiliaryData ?? emptyAddress())}
+        placeholder="Start typing an address"
+        minQueryLength={PLACES_MIN_QUERY}
+        debounceMs={PLACES_DEBOUNCE_MS}
+        emptySearchResultsText="No addresses match."
+        isDisabled={isDisabled}
+        description="Pick a suggestion to fill the street, city, state, and ZIP."
+      />
+      <PlacesCredit />
+      <TextInput
+        label={`${label} street`}
+        value={value.line1}
+        onChange={set("line1")}
+        placeholder="Street address"
+        isDisabled={isDisabled}
+      />
+      <CitySelector
+        label={`${label} city`}
+        value={value.city}
+        onChange={set("city")}
+        placeholder="City"
+        isDisabled={isDisabled}
+      />
+      <StateSelector
+        label={`${label} state`}
+        value={value.state}
+        onChange={set("state")}
+        isDisabled={isDisabled}
+      />
+      <TextInput
+        label={`${label} postal code`}
+        value={value.postalCode}
+        onChange={set("postalCode")}
+        placeholder="ZIP code"
+        isDisabled={isDisabled}
+      />
+      <Typeahead
+        label={`${label} country`}
+        searchSource={countries}
+        value={placeItem(value.country)}
+        onChange={(hit) =>
+          onChange({
+            ...value,
+            country: hit?.auxiliaryData?.country || hit?.label || "",
+          })
+        }
+        placeholder="Search countries"
+        minQueryLength={PLACES_MIN_QUERY}
+        debounceMs={PLACES_DEBOUNCE_MS}
+        emptySearchResultsText="No countries match."
+        isDisabled={isDisabled}
+      />
+    </Stack>
+  );
+}