@aghents/ui 0.1.0

package/brand/aghents-favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Aghents favicon: one hairline, one point. Hexes are @aghents/tokens: surface, hairline, cream, lime. -->
+  <rect x="0.5" y="0.5" width="31" height="31" rx="7" fill="#161C24" stroke="#2B323C"/>
+  <path d="M8 16h16" stroke="#D8D8D8" stroke-width="1"/>
+  <circle cx="16" cy="16" r="2" fill="#D6EA36"/>
+</svg>

package/brand/aghents-mark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <!-- Aghents mark (lit). Hexes are @aghents/tokens: cream, lime. Same geometry as packages/ui/src/brand/Mark.tsx -->
+  <path d="M6 2v20M18 2v20M6 12h12" stroke="#D8D8D8" stroke-width="1.5" fill="none"/>
+  <circle cx="12" cy="12" r="2.25" fill="#D6EA36"/>
+</svg>

package/brand/aghents-wordmark.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 84" width="630" height="84">
+  <!-- Aghents wordmark. Hexes are @aghents/tokens: cream, lime; font is the display token. Same geometry as packages/ui/src/brand/Wordmark.tsx -->
+  <text x="45" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">A</text>
+  <text x="135" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">G</text>
+  <g transform="translate(0 6)" stroke="#D8D8D8" stroke-width="1" vector-effect="non-scaling-stroke" fill="none">
+    <path d="M187 0h22v2.5h-6.5v67h6.5v2.5h-22v-2.5h6.5v-67h-6.5zM241 0h22v2.5h-6.5v67h6.5v2.5h-22v-2.5h6.5v-67h-6.5z"/>
+    <path d="M202.5 34H247.5"/>
+    <circle cx="225" cy="34" r="6" fill="#D6EA36" stroke="none"/>
+  </g>
+  <text x="315" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">E</text>
+  <text x="405" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">N</text>
+  <text x="495" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">T</text>
+  <text x="585" y="78" text-anchor="middle" font-family="Newsreader, Georgia, serif" font-size="100" font-weight="400" fill="#D8D8D8">S</text>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { TextProps, ViewProps } from 'react-native';
+
+type TextVariant = "display-xl" | "display-l" | "display-m" | "body" | "label" | "value";
+declare function Text({ variant, style, ...rest }: TextProps & {
+    variant: TextVariant;
+}): react.JSX.Element;
+
+declare function Button({ kind, disabled, onPress, children, }: {
+    kind: "primary" | "secondary";
+    disabled?: boolean;
+    onPress: () => void;
+    children: string;
+}): react.JSX.Element;
+
+declare function Hairline({ padded, style, ...rest }: ViewProps & {
+    padded?: boolean;
+}): react.JSX.Element;
+
+declare function LedgerRow({ label, value }: {
+    label: string;
+    value: string;
+}): react.JSX.Element;
+
+declare function LitPoint({ lit, label }: {
+    lit: boolean;
+    label: string;
+}): react.JSX.Element;
+
+declare function Mark({ size, lit }: {
+    size?: number;
+    lit?: boolean;
+}): react.JSX.Element;
+
+declare function Wordmark({ height }: {
+    height?: number;
+}): react.JSX.Element;
+
+export { Button, Hairline, LedgerRow, LitPoint, Mark, Text, type TextVariant, Wordmark };

package/dist/index.js

@@ -0,0 +1,269 @@
+// src/Text.tsx
+import { colors, fonts } from "@aghents/tokens";
+import { Text as RNText } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var variants = {
+  "display-xl": {
+    fontFamily: fonts.display,
+    fontSize: 56,
+    lineHeight: 59,
+    fontWeight: "300",
+    color: colors.cream
+  },
+  "display-l": {
+    fontFamily: fonts.display,
+    fontSize: 40,
+    lineHeight: 44,
+    fontWeight: "300",
+    color: colors.cream
+  },
+  "display-m": {
+    fontFamily: fonts.display,
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: "400",
+    color: colors.cream
+  },
+  body: {
+    fontFamily: fonts.display,
+    fontSize: 17,
+    lineHeight: 26,
+    fontWeight: "300",
+    color: colors.cream
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 12,
+    lineHeight: 17,
+    letterSpacing: 1.7,
+    textTransform: "uppercase",
+    color: colors.creamDim
+  },
+  value: { fontFamily: fonts.mono, fontSize: 14, lineHeight: 20, color: colors.cream }
+};
+function Text({ variant, style, ...rest }) {
+  return /* @__PURE__ */ jsx(RNText, { ...rest, style: [variants[variant], style] });
+}
+
+// src/Button.tsx
+import { colors as colors2, fonts as fonts2 } from "@aghents/tokens";
+import { Pressable, Text as RNText2 } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Button({
+  kind,
+  disabled = false,
+  onPress,
+  children
+}) {
+  const primary = kind === "primary";
+  return /* @__PURE__ */ jsx2(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      disabled,
+      onPress,
+      style: {
+        paddingVertical: 14,
+        paddingHorizontal: 22,
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: primary ? colors2.cream : colors2.hairline,
+        backgroundColor: primary ? colors2.cream : "transparent",
+        opacity: disabled ? 0.4 : 1
+      },
+      children: /* @__PURE__ */ jsx2(
+        RNText2,
+        {
+          style: {
+            fontFamily: fonts2.mono,
+            fontSize: 12,
+            letterSpacing: 1.7,
+            textTransform: "uppercase",
+            color: primary ? colors2.void : colors2.cream
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/Hairline.tsx
+import { colors as colors3 } from "@aghents/tokens";
+import { View } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Hairline({ padded = true, style, ...rest }) {
+  return /* @__PURE__ */ jsx3(
+    View,
+    {
+      ...rest,
+      style: [
+        { borderWidth: 1, borderColor: colors3.hairline, borderRadius: 2, padding: padded ? 20 : 0 },
+        style
+      ]
+    }
+  );
+}
+
+// src/LedgerRow.tsx
+import { colors as colors4 } from "@aghents/tokens";
+import { View as View2 } from "react-native";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function LedgerRow({ label, value }) {
+  return /* @__PURE__ */ jsxs(
+    View2,
+    {
+      style: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        borderTopWidth: 1,
+        borderTopColor: colors4.hairline,
+        paddingVertical: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx4(Text, { variant: "label", children: label }),
+        /* @__PURE__ */ jsx4(Text, { variant: "value", children: value })
+      ]
+    }
+  );
+}
+
+// src/LitPoint.tsx
+import { colors as colors5, fonts as fonts3 } from "@aghents/tokens";
+import { View as View3 } from "react-native";
+import { Text as RNText3 } from "react-native";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function LitPoint({ lit, label }) {
+  const color = lit ? colors5.cream : colors5.creamDim;
+  return /* @__PURE__ */ jsxs2(View3, { accessibilityLabel: label, style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx5(
+      View3,
+      {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: lit ? colors5.lime : colors5.hairline
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      RNText3,
+      {
+        style: {
+          fontFamily: fonts3.mono,
+          fontSize: 12,
+          letterSpacing: 1.7,
+          textTransform: "uppercase",
+          color
+        },
+        children: label
+      }
+    )
+  ] });
+}
+
+// src/brand/Mark.tsx
+import { colors as colors6 } from "@aghents/tokens";
+import { Platform, View as View4 } from "react-native";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Mark({ size = 24, lit = true }) {
+  const dot = lit ? colors6.lime : colors6.hairline;
+  if (Platform.OS !== "web") {
+    const u = size / 24;
+    const bar = { position: "absolute", backgroundColor: colors6.cream };
+    return /* @__PURE__ */ jsxs3(View4, { accessibilityLabel: "Aghents", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ jsx6(View4, { style: [bar, { left: 5.25 * u, top: 2 * u, width: 1.5 * u, height: 20 * u }] }),
+      /* @__PURE__ */ jsx6(View4, { style: [bar, { left: 17.25 * u, top: 2 * u, width: 1.5 * u, height: 20 * u }] }),
+      /* @__PURE__ */ jsx6(View4, { style: [bar, { left: 6 * u, top: 11.25 * u, width: 12 * u, height: 1.5 * u }] }),
+      /* @__PURE__ */ jsx6(
+        View4,
+        {
+          style: {
+            position: "absolute",
+            left: 9.75 * u,
+            top: 9.75 * u,
+            width: 4.5 * u,
+            height: 4.5 * u,
+            borderRadius: 2.25 * u,
+            backgroundColor: dot
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "Aghents", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M6 2v20M18 2v20M6 12h12", stroke: colors6.cream, strokeWidth: "1.5", fill: "none" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "2.25", fill: dot })
+  ] });
+}
+
+// src/brand/Wordmark.tsx
+import { colors as colors7, fonts as fonts4 } from "@aghents/tokens";
+import { Platform as Platform2 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var F = 100;
+var CAP = 72;
+var ADV = 90;
+var PAD = 6;
+var BASE = PAD + CAP;
+var W = 7 * ADV;
+var H = CAP + 2 * PAD;
+var stem = (cx) => `M${cx - 11} 0h22v2.5h-6.5v${CAP - 5}h6.5v2.5h-22v-2.5h6.5v-${CAP - 5}h-6.5z`;
+function Wordmark({ height = 22 }) {
+  if (Platform2.OS !== "web") return /* @__PURE__ */ jsx7(Text, { variant: "label", children: "AGHENTS" });
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: height * W / H,
+      height,
+      viewBox: `0 0 ${W} ${H}`,
+      role: "img",
+      "aria-label": "Aghents",
+      children: [..."AGHENTS"].map((ch, i) => {
+        const cx = i * ADV + ADV / 2;
+        if (ch === "H") {
+          return /* @__PURE__ */ jsxs4(
+            "g",
+            {
+              transform: `translate(0 ${PAD})`,
+              stroke: colors7.cream,
+              strokeWidth: "1",
+              vectorEffect: "non-scaling-stroke",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ jsx7("path", { d: `${stem(cx - 27)}${stem(cx + 27)}` }),
+                /* @__PURE__ */ jsx7("path", { d: `M${cx - 22.5} 34H${cx + 22.5}` }),
+                /* @__PURE__ */ jsx7("circle", { cx, cy: "34", r: "6", fill: colors7.lime, stroke: "none" })
+              ]
+            },
+            ch
+          );
+        }
+        return /* @__PURE__ */ jsx7(
+          "text",
+          {
+            x: cx,
+            y: BASE,
+            textAnchor: "middle",
+            fontFamily: fonts4.display,
+            fontSize: F,
+            fontWeight: 400,
+            fill: colors7.cream,
+            children: ch
+          },
+          ch
+        );
+      })
+    }
+  );
+}
+export {
+  Button,
+  Hairline,
+  LedgerRow,
+  LitPoint,
+  Mark,
+  Text,
+  Wordmark
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@aghents/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./brand/*.svg": "./brand/*.svg"
+  },
+  "files": [
+    "dist",
+    "brand",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-native": "*",
+    "react-native-web": "^0.19.13"
+  },
+  "dependencies": {
+    "@aghents/tokens": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.0",
+    "jsdom": "^25.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.5",
+    "react-native-web": "^0.19.13",
+    "typescript": "^5.9.3",
+    "vitest": "^2.1.9"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  }
+}