@prongsjs/ui 0.0.0-stage → 0.2.0

package/dist/tooling/theme.js

@@ -0,0 +1,288 @@
+/**
+ * The theme the registry's classes read: colour tokens plus surfaces that layer themselves. `prongs add` writes
+ * `themeCss()` to theme.css; the values are the project's to change, the names are the
+ * contract the registry and `prongs check` rely on.
+ */
+export const THEME_TOKENS = [
+    { name: '--background', light: 'oklch(1 0 0)', dark: 'oklch(0.145 0 0)', description: 'The page. Surface level 0.', utility: 'background' },
+    { name: '--foreground', light: 'oklch(0.145 0 0)', dark: 'oklch(0.985 0 0)', description: 'Main text. Surfaces mix towards it as they rise.', utility: 'foreground' },
+    { name: '--card', light: 'oklch(1 0 0)', dark: 'oklch(0.205 0 0)', description: 'Card background, for components outside Prongs. Prongs looks use surfaces instead.', utility: 'card' },
+    { name: '--card-foreground', light: 'oklch(0.145 0 0)', dark: 'oklch(0.985 0 0)', description: 'Text on `--card`.', utility: 'card-foreground' },
+    { name: '--popover', light: 'oklch(1 0 0)', dark: 'oklch(0.205 0 0)', description: 'Popover background, for components outside Prongs.', utility: 'popover' },
+    { name: '--popover-foreground', light: 'oklch(0.145 0 0)', dark: 'oklch(0.985 0 0)', description: 'Text on `--popover`.', utility: 'popover-foreground' },
+    { name: '--primary', light: 'oklch(0.205 0 0)', dark: 'oklch(0.922 0 0)', description: 'The main action and the accent colour.', utility: 'primary' },
+    { name: '--primary-foreground', light: 'oklch(0.985 0 0)', dark: 'oklch(0.205 0 0)', description: 'Text on `--primary`.', utility: 'primary-foreground' },
+    { name: '--secondary', light: 'oklch(0.97 0 0)', dark: 'oklch(0.269 0 0)', description: 'Quieter filled controls.', utility: 'secondary' },
+    { name: '--secondary-foreground', light: 'oklch(0.205 0 0)', dark: 'oklch(0.985 0 0)', description: 'Text on `--secondary`.', utility: 'secondary-foreground' },
+    { name: '--muted', light: 'oklch(0.97 0 0)', dark: 'oklch(0.269 0 0)', description: 'Tinted backgrounds that do not layer.', utility: 'muted' },
+    { name: '--muted-foreground', light: 'oklch(0.556 0 0)', dark: 'oklch(0.708 0 0)', description: 'Quiet text on the page. On surfaces use `--surface-muted`.', utility: 'muted-foreground' },
+    { name: '--accent', light: 'oklch(0.97 0 0)', dark: 'oklch(0.269 0 0)', description: 'Hover and selection tint.', utility: 'accent' },
+    { name: '--accent-foreground', light: 'oklch(0.205 0 0)', dark: 'oklch(0.985 0 0)', description: 'Text on `--accent`.', utility: 'accent-foreground' },
+    { name: '--destructive', light: 'oklch(0.505 0.213 27.518)', dark: 'oklch(0.808 0.114 19.571)', description: 'Danger: deleting, errors.', utility: 'destructive' },
+    { name: '--destructive-foreground', light: 'oklch(0.985 0 0)', dark: 'oklch(0.145 0 0)', description: 'Text on `--destructive`.', utility: 'destructive-foreground' },
+    { name: '--success', light: 'oklch(0.448 0.119 151.328)', dark: 'oklch(0.792 0.209 151.711)', description: 'Success text.', utility: 'success' },
+    { name: '--warning', light: 'oklch(0.473 0.137 46.201)', dark: 'oklch(0.828 0.189 84.429)', description: 'Warning text.', utility: 'warning' },
+    { name: '--info', light: 'oklch(0.443 0.11 240.79)', dark: 'oklch(0.746 0.16 232.661)', description: 'Neutral notice text.', utility: 'info' },
+    { name: '--border', light: 'oklch(0.922 0 0)', dark: 'oklch(1 0 0 / 10%)', description: 'Hairlines on the page.', utility: 'border' },
+    { name: '--input', light: 'oklch(0.922 0 0)', dark: 'oklch(1 0 0 / 15%)', description: 'Field borders.', utility: 'input' },
+    { name: '--ring', light: 'oklch(0.708 0 0)', dark: 'oklch(0.556 0 0)', description: 'Focus rings.', utility: 'ring' },
+    { name: '--radius', light: '0.5rem', dark: '0.5rem', description: 'Corner radius. `rounded-sm` to `rounded-xl` derive from it; 0.5rem keeps Tailwind\'s own sizes.' },
+];
+export const SURFACE_SETTINGS = {
+    light: { step: 4, overlay: 0, muted: 60, border: 14 },
+    dark: { step: 5, overlay: 2, muted: 60, border: 16 },
+};
+/** Levels a nested surface can reach; deeper nesting stays at the last one. */
+export const SURFACE_DEPTH = 4;
+/** The variables a surface sets for whatever is inside it. */
+export const SURFACE_TOKENS = [
+    { name: '--surface-base', light: '', dark: '', description: 'The background of the surface you are on.', utility: 'surface' },
+    { name: '--surface-hover', light: '', dark: '', description: 'One level up from it: hover fills.', utility: 'surface-hover' },
+    { name: '--surface-active', light: '', dark: '', description: 'Two levels up: pressed and selected fills.', utility: 'surface-active' },
+    { name: '--surface-inset', light: '', dark: '', description: 'A recess cut into it: wells, code, skeletons.', utility: 'surface-inset' },
+    { name: '--surface-fg', light: '', dark: '', description: 'Text on it.', utility: 'surface-fg' },
+    { name: '--surface-muted', light: '', dark: '', description: 'Quiet text on it, kept readable at every level.', utility: 'surface-muted' },
+    { name: '--surface-border', light: '', dark: '', description: 'A hairline that shows on it.', utility: 'surface-border' },
+];
+/** The classes that make an element a surface. */
+export const SURFACE_CLASSES = [
+    { name: 'surface', description: 'A raised surface: one level above the surface it sits in.' },
+    { name: 'surface-inset', description: 'A recess: one level back from the surface it sits in (forward on the page itself).' },
+    { name: 'surface-overlay', description: 'Floats over the page (dialogs, menus): starts its own stack, whatever it is nested in.' },
+    { name: 'surface-page', description: 'An element that sets its own --background or --foreground (a themed section, a preview): starts again at level 0 with its colours. It does not paint itself.' },
+];
+/** Every name `theme.css` declares, so `prongs check` can tell a typo from a token. */
+export const THEME_VARIABLES = [
+    ...THEME_TOKENS.map((t) => t.name),
+    ...SURFACE_TOKENS.map((t) => t.name),
+    '--surface-level',
+    '--surface-step',
+    '--surface-overlay-level',
+    '--surface-muted-mix',
+    '--surface-border-mix',
+    '--surface-inset-level',
+];
+const mix = (level) => `color-mix(in oklch, var(--foreground) calc(var(--surface-step) * (${level})), var(--background))`;
+/** The CSS `prongs add` writes to theme.css. */
+export function themeCss() {
+    const tokens = (mode) => THEME_TOKENS.map((t) => `  ${t.name}: ${t[mode]};`);
+    const settings = (mode) => {
+        const s = SURFACE_SETTINGS[mode];
+        return [
+            `  --surface-step: ${s.step}%;`,
+            `  --surface-overlay-level: ${s.overlay};`,
+            `  --surface-muted-mix: ${s.muted}%;`,
+            `  --surface-border-mix: ${s.border}%;`,
+        ];
+    };
+    const depth = Array.from({ length: SURFACE_DEPTH }, (_, i) => {
+        const selector = Array(i + 1).fill('.surface').join(' ');
+        return `${selector} { --surface-level: ${i + 1}; }`;
+    });
+    // Repeating a class outranks any nesting depth above it, so a page or an overlay restarts
+    // the count wherever it is rendered. Overlays repeat once more, so a dialog opened inside a
+    // themed page still floats.
+    const page = '.surface-page'.repeat(SURFACE_DEPTH + 1);
+    const pageDepth = Array.from({ length: SURFACE_DEPTH }, (_, i) => {
+        const selector = [page, ...Array(i + 1).fill('.surface')].join(' ');
+        return `${selector} { --surface-level: ${i + 1}; }`;
+    });
+    const overlay = '.surface-overlay'.repeat(SURFACE_DEPTH + 2);
+    const overlayDepth = Array.from({ length: SURFACE_DEPTH - 1 }, (_, i) => {
+        const selector = [overlay, ...Array(i + 1).fill('.surface')].join(' ');
+        return `${selector} { --surface-level: calc(var(--surface-overlay-level) + ${i + 1}); }`;
+    });
+    const colors = [...THEME_TOKENS, ...SURFACE_TOKENS]
+        .filter((t) => t.utility)
+        .map((t) => `  --color-${t.utility}: var(${t.name});`);
+    return `/*
+ * Prongs theme. Written by \`prongs add\`.
+ *
+ * The names are the contract: the registry's classes use them, and \`prongs check\` reports
+ * a var() that is not declared anywhere. The values are yours to change, here or in your
+ * own CSS after this import (later rules win).
+ *
+ * Surfaces layer themselves. Give a box the class \`surface\` and it sits one level above
+ * whatever surface it is inside; \`surface-inset\` is a recess, \`surface-overlay\` floats
+ * over the page and starts its own stack. Put \`surface-page\` on an element that sets its own
+ * --background or --foreground (a themed section, a preview): it starts again at level 0. Every level is mixed from --background towards
+ * --foreground, so a theme only sets those two (and --surface-step) to get all of them,
+ * in light and dark. Inside a surface, use the surface colours, not fixed ones:
+ *   bg-surface-hover      hover fill, one level up from wherever it sits
+ *   text-surface-muted    quiet text, readable at every level
+ *   border-surface-border a hairline that shows on this level
+ */
+
+:root {
+  /* Browser-drawn parts (validation bubbles, scrollbars, date pickers) follow the theme too. */
+  color-scheme: light;
+${tokens('light').join('\n')}
+
+${settings('light').join('\n')}
+  --surface-level: 0;
+}
+
+/* Dark follows the system. class="dark" on <html> forces it; class="light" keeps it light. */
+.dark {
+  color-scheme: dark;
+${tokens('dark').join('\n')}
+
+${settings('dark').join('\n')}
+}
+
+/* :where() keeps this as specific as :root, so your own :root values after the import still win. */
+@media (prefers-color-scheme: dark) {
+  :root:where(:not(.light)) {
+    color-scheme: dark;
+${tokens('dark').map((line) => '  ' + line).join('\n')}
+
+${settings('dark').map((line) => '  ' + line).join('\n')}
+  }
+}
+
+/* ── Surfaces ───────────────────────────────────────────────────────────── */
+
+/* Depth: how many surfaces an element sits in. */
+${depth.join('\n')}
+${page} { --surface-level: 0; }
+${pageDepth.join('\n')}
+${overlay} { --surface-level: var(--surface-overlay-level); }
+${overlayDepth.join('\n')}
+.surface-inset { --surface-level: var(--surface-inset-level); }
+
+/* Colours, recomputed wherever the level or the theme changes. */
+:root, .dark, .surface-page, .surface, .surface-overlay, .surface-inset {
+  --surface-base: ${mix('var(--surface-level)')};
+  --surface-hover: ${mix('var(--surface-level) + 1')};
+  --surface-active: ${mix('var(--surface-level) + 2')};
+  --surface-fg: var(--foreground);
+  --surface-muted: color-mix(in oklch, var(--foreground) var(--surface-muted-mix), var(--surface-base));
+  --surface-border: color-mix(in oklch, var(--foreground) var(--surface-border-mix), var(--surface-base));
+}
+
+/* The recess for what is inside: one level back, or forward on the page itself. */
+:root, .dark, .surface-page, .surface, .surface-overlay {
+  --surface-inset-level: max(var(--surface-level) - 1, 1 - var(--surface-level));
+  --surface-inset: ${mix('var(--surface-inset-level)')};
+}
+
+/* In the base layer, so a utility on the same element (hover:bg-surface-hover) still wins. */
+@layer base {
+  .surface, .surface-overlay, .surface-inset {
+    background-color: var(--surface-base);
+    color: var(--surface-fg);
+  }
+}
+
+/* ── Tailwind ───────────────────────────────────────────────────────────── */
+
+@theme inline {
+${colors.join('\n')}
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+`;
+}
+/** Parses `oklch(L C H)` (L as 0–1 or a percentage) or `#rrggbb`. Alpha is not supported. */
+export function parseColor(value) {
+    const v = value.trim();
+    const ok = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*\)$/.exec(v);
+    if (ok)
+        return { l: Number(ok[1]) / (ok[2] ? 100 : 1), c: Number(ok[3]), h: Number(ok[4]) };
+    const hex = /^#([0-9a-f]{6})$/i.exec(v);
+    if (hex) {
+        const n = parseInt(hex[1], 16);
+        return rgbToOklch([(n >> 16) & 255, (n >> 8) & 255, n & 255].map((x) => x / 255));
+    }
+    return undefined;
+}
+const toLinear = (x) => (x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
+function rgbToOklch([r, g, b]) {
+    const [lr, lg, lb] = [r, g, b].map(toLinear);
+    const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+    const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+    const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+    const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const bb = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const c = Math.hypot(a, bb);
+    return { l: L, c: c < 1e-4 ? 0 : c, h: c < 1e-4 ? 0 : ((Math.atan2(bb, a) * 180) / Math.PI + 360) % 360 };
+}
+/** Relative luminance (WCAG), clamped to sRGB. */
+function luminance({ l, c, h }) {
+    const a = c * Math.cos((h * Math.PI) / 180);
+    const b = c * Math.sin((h * Math.PI) / 180);
+    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    const clamp = (x) => Math.min(1, Math.max(0, x));
+    const r = clamp(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_);
+    const g = clamp(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_);
+    const bl = clamp(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+}
+/** color-mix(in oklch, a p, b): `p` is the share of `a`, 0–1. A grey takes the other colour's hue. */
+export function mixOklch(a, b, p) {
+    let ha = a.h;
+    let hb = b.h;
+    if (a.c === 0)
+        ha = hb;
+    if (b.c === 0)
+        hb = ha;
+    let dh = hb - ha;
+    if (dh > 180)
+        dh -= 360;
+    if (dh < -180)
+        dh += 360;
+    return { l: a.l * p + b.l * (1 - p), c: a.c * p + b.c * (1 - p), h: (((hb - dh * p) % 360) + 360) % 360 };
+}
+export function contrast(a, b) {
+    const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}
+/** Every level the CSS can produce for a background and foreground, with its contrasts. */
+export function surfaceLevels(colors, settings) {
+    const bg = parseColor(colors.background);
+    const fg = parseColor(colors.foreground);
+    if (!bg || !fg)
+        throw new Error(`surfaceLevels needs opaque oklch() or #rrggbb colours, got ${colors.background} and ${colors.foreground}`);
+    const at = (level) => mixOklch(fg, bg, Math.min(1, (settings.step * level) / 100));
+    const row = (name, level) => {
+        const base = at(level);
+        return {
+            name,
+            level,
+            background: base,
+            text: contrast(fg, base),
+            muted: contrast(mixOklch(fg, base, settings.muted / 100), base),
+            border: contrast(mixOklch(fg, base, settings.border / 100), base),
+            hover: contrast(at(level + 1), base),
+        };
+    };
+    const page = Array.from({ length: SURFACE_DEPTH + 1 }, (_, i) => row(i === 0 ? 'page' : String(i), i));
+    const overlay = Array.from({ length: SURFACE_DEPTH }, (_, i) => row(i === 0 ? 'overlay' : `overlay ${i}`, settings.overlay + i));
+    return [...page, ...overlay];
+}
+/** `surfaceLevels` for the default theme. */
+export function defaultSurfaceLevels(mode) {
+    const value = (name) => THEME_TOKENS.find((t) => t.name === name)[mode];
+    return surfaceLevels({ background: value('--background'), foreground: value('--foreground') }, SURFACE_SETTINGS[mode]);
+}
+/** Contrast of a default token pair, e.g. `--primary-foreground` on `--primary`. */
+export function tokenContrast(mode, fg, bg) {
+    const value = (name) => parseColor(THEME_TOKENS.find((t) => t.name === name)[mode]);
+    const a = value(fg);
+    const b = value(bg);
+    if (!a || !b)
+        throw new Error(`tokenContrast needs opaque colours: ${fg}, ${bg}`);
+    return contrast(a, b);
+}
+/** Contrast of a default token's text on every level of the default surfaces. */
+export function tokenOnSurfaces(mode, token) {
+    const color = parseColor(THEME_TOKENS.find((t) => t.name === token)[mode]);
+    if (!color)
+        throw new Error(`tokenOnSurfaces needs an opaque colour: ${token}`);
+    return defaultSurfaceLevels(mode).map((level) => contrast(color, level.background));
+}

package/dist/vocabulary.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Two layers. Call sites choose a MEANING intent by what the element does
+ * (`action.delete`); meaning intents refer to LOOK intents (`control.destructive`)
+ * for their styling. Look intents never appear at a call site.
+ */
+export declare const MEANING_DOMAINS: readonly ["heading", "text", "feedback", "action", "nav", "choice", "field", "layout", "media", "dialog", "popover"];
+export declare const LOOK_DOMAINS: readonly ["typography", "tone", "surface", "control", "input", "arrange", "constraint", "frame"];
+export type MeaningDomain = (typeof MEANING_DOMAINS)[number];
+export type LookDomain = (typeof LOOK_DOMAINS)[number];
+/** Which component renders each meaning domain. */
+export declare const COMPONENT_DOMAINS: {
+    readonly Text: readonly ["heading", "text", "feedback"];
+    readonly Action: readonly ["action", "nav", "choice"];
+    readonly Field: readonly ["field"];
+    readonly Layout: readonly ["layout"];
+    readonly Media: readonly ["media"];
+    readonly Dialog: readonly ["dialog"];
+    readonly Popover: readonly ["popover"];
+};
+export type ComponentName = keyof typeof COMPONENT_DOMAINS;
+export declare const COMPONENT_NAMES: ComponentName[];
+/** Elements an intent may choose through `binding.element`, per component. */
+export declare const ALLOWED_ELEMENTS: Record<ComponentName, readonly string[]>;
+/**
+ * Words that describe how something looks or what widget it is, not what it is for.
+ * Meaning intents may not use them: an agent should pick an intent from facts in the
+ * code ("this handler shares the article"), never from a visual judgement ("this should
+ * be a secondary pill"). Look intents (typography.*, control.*, ...) may use any words.
+ */
+export declare const LOOK_WORDS: readonly string[];
+export declare function componentFor(id: string): ComponentName | undefined;
+export declare function isLookDomain(domain: string): domain is LookDomain;

package/dist/vocabulary.js

@@ -0,0 +1,57 @@
+import { domainOf } from '@prongsjs/core';
+/**
+ * Two layers. Call sites choose a MEANING intent by what the element does
+ * (`action.delete`); meaning intents refer to LOOK intents (`control.destructive`)
+ * for their styling. Look intents never appear at a call site.
+ */
+export const MEANING_DOMAINS = ['heading', 'text', 'feedback', 'action', 'nav', 'choice', 'field', 'layout', 'media', 'dialog', 'popover'];
+export const LOOK_DOMAINS = ['typography', 'tone', 'surface', 'control', 'input', 'arrange', 'constraint', 'frame'];
+/** Which component renders each meaning domain. */
+export const COMPONENT_DOMAINS = {
+    Text: ['heading', 'text', 'feedback'],
+    Action: ['action', 'nav', 'choice'],
+    Field: ['field'],
+    Layout: ['layout'],
+    Media: ['media'],
+    Dialog: ['dialog'],
+    Popover: ['popover'],
+};
+export const COMPONENT_NAMES = Object.keys(COMPONENT_DOMAINS);
+/** Elements an intent may choose through `binding.element`, per component. */
+export const ALLOWED_ELEMENTS = {
+    Text: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'label', 'strong', 'em', 'small', 'blockquote', 'code', 'pre', 'summary'],
+    Action: [],
+    Field: ['input', 'textarea', 'select'],
+    Layout: ['div', 'main', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'form', 'fieldset', 'ul', 'ol', 'li', 'hr', 'details', 'table', 'figure'],
+    /** Images by default; an intent can make it a frame that shows another page. */
+    Media: ['iframe'],
+    Dialog: [],
+    Popover: [],
+};
+/**
+ * Words that describe how something looks or what widget it is, not what it is for.
+ * Meaning intents may not use them: an agent should pick an intent from facts in the
+ * code ("this handler shares the article"), never from a visual judgement ("this should
+ * be a secondary pill"). Look intents (typography.*, control.*, ...) may use any words.
+ */
+export const LOOK_WORDS = [
+    // emphasis and hierarchy
+    'primary', 'secondary', 'tertiary', 'ghost', 'outline', 'outlined', 'solid', 'filled', 'subtle', 'muted',
+    'loud', 'quiet', 'bold', 'light', 'dark', 'plain', 'fancy', 'accent', 'highlight', 'emphasis',
+    // size and density
+    'big', 'large', 'medium', 'small', 'tiny', 'mini', 'compact', 'dense', 'prominent', 'wide', 'narrow', 'tall', 'short',
+    // widgets and shapes
+    'hero', 'banner', 'badge', 'chip', 'pill', 'card', 'tile', 'swatch', 'segment', 'segmented', 'tab', 'tabs',
+    'button', 'link', 'icon', 'box', 'bubble', 'container', 'wrapper',
+    // arrangement
+    'centered', 'center', 'left', 'right', 'top', 'bottom', 'row', 'column', 'stack', 'grid', 'flex', 'inline',
+    // colours
+    'red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray', 'grey', 'black', 'white',
+];
+export function componentFor(id) {
+    const domain = domainOf(id);
+    return COMPONENT_NAMES.find((name) => COMPONENT_DOMAINS[name].includes(domain));
+}
+export function isLookDomain(domain) {
+    return LOOK_DOMAINS.includes(domain);
+}

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@prongsjs/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "The Prongs UI profile: intents that resolve to Tailwind classes, elements and ARIA roles, plus the tooling that checks how they are used.",
+  "keywords": [
+    "intents",
+    "design-system",
+    "tailwind",
+    "react",
+    "ai-agents",
+    "accessibility"
+  ],
+  "homepage": "https://github.com/drewpoling2/prongs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/drewpoling2/prongs.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/drewpoling2/prongs/issues"
+  },
+  "author": "Drew Poling",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tooling": {
+      "types": "./dist/tooling/index.d.ts",
+      "import": "./dist/tooling/index.js"
+    },
+    "./spec": {
+      "types": "./dist/tooling/spec.d.ts",
+      "import": "./dist/tooling/spec.js"
+    },
+    "./theme": {
+      "types": "./dist/tooling/theme.d.ts",
+      "import": "./dist/tooling/theme.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@prongsjs/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "tailwind-merge": "^2.5.0 || ^3.0.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tailwind-merge": "^2.6.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}