@kennycorrea/ui 0.1.0

package/README.md

@@ -0,0 +1,153 @@
+# @kennycorrea/ui
+
+Upfront's house component layer: the atoms over Radix Themes, the token bridge, and the accent
+logic. Shared by the dashboard (`upfront-web-app`), the marketing site (`upfront-web-site`) and
+the admin app (`upfront-admin`).
+
+**The product brief, the roadmap and every design document live in the `upfront` repository**,
+not here. This file covers only what is true about this package.
+
+## Why it exists
+
+Two apps said `variant="secondary"` and `text-ink-muted`, and each carried its own copy of what
+those meant. `docs/ecosystem.md` in the product repository called starting a third app the
+trigger, and this is the trigger being pulled.
+
+**The drift, measured rather than assumed.** It was real, and it was concentrated in the
+components rather than the colours:
+
+| | dashboard | site | visible? |
+| --- | --- | --- | --- |
+| `Button` `secondary` | Themes' `soft` | Themes' `surface` | **yes** |
+| `danger` variant | yes | absent | **yes** |
+| sizes | `sm`/`md`/`lg` | raw Themes `1`–`4` | **yes** |
+| `href` prop | absent | yes | **yes** |
+| `--font-sans` | `'Inter', …` | `ui-sans-serif, …` | no — neither app loads Inter |
+| `--color-ink` fallback | `#1d3b31` | `#1a211f` | only if Radix's CSS fails to load |
+| `--color-hairline` fallback | 12% | 10% | same |
+
+The `.radix-themes` blocks — the *live* colour assignments — had been kept in step by hand and
+agreed. It was the `@theme` fallbacks underneath them that had not, which is drift that is real
+and invisible: the least urgent kind and the easiest to leave lying around for years.
+
+So the honest case for this package is the component API, not the palette.
+
+## The Button disagreement, resolved
+
+**`secondary` now means exactly one thing: Themes' `soft`.** The site's bordered, translucent
+look is still available and is called **`outline`**.
+
+Making one of them simply win would have been a decision about the word rather than about the
+need — the site wants the bordered button because it sits over a dark hero, and the dashboard
+wants the tinted one because it sits on a panel. Both needs are real; only the name was
+ambiguous.
+
+The package's `Button` is the superset: `loading`, `fullWidth`, ref forwarding and `danger` from
+the dashboard, `href` from the site. Nothing was dropped.
+
+## Using it
+
+```ts
+import { Button, Card, Select, UiStringsProvider } from '@kennycorrea/ui';
+```
+
+And in the app's own `index.css`:
+
+```css
+@import 'tailwindcss';
+@source '../node_modules/@kennycorrea/ui/dist';
+@import '@kennycorrea/ui/tokens.css';
+```
+
+⚠ **The `@source` line is not optional.** Tailwind does not scan `node_modules`, so without it
+every utility class used *inside* the atoms — `w-full`, `inline-flex` — is missing from the
+generated CSS. The components come out subtly unstyled and nothing appears in the console.
+
+## What is deliberately not here
+
+- **Dictionaries.** Words belong to an app. The two strings the atoms say on their own behalf —
+  a standing spinner's label and an empty select's placeholder — come from `UiStringsProvider`,
+  which each app feeds from its own dictionary. Defaults are English so a host that forgets to
+  wrap gets something legible rather than something wrong.
+- **Auth, stores, API clients.** Same reason, and they were never shared.
+- **`ACCENT_LABELS`.** The accent *list* is structure and lives here; what each one is called is
+  words and does not.
+- **Molecules and organisms.** `FormField`, `ConfirmDialog` and the rest stay in the dashboard
+  until a second app wants one. Moving a component here should be a response to a second
+  consumer, not an anticipation of one.
+
+## Colour scales
+
+Each app imports only the Radix colour scales it uses, in `main.tsx`, and **the import order is
+load-bearing** — scales define `--gray-*` literally and `base.css` remaps it onto the chosen
+`grayColor`, so `base.css` must come last. Adding an accent to `ACCENTS` means adding its scale
+in every app that offers it, or it resolves to nothing.
+
+## Releasing
+
+`npm run build` compiles to `dist/` with type declarations. The version in `package.json` is the
+contract: bump it, and bump the dependency in each consumer.
+
+**`files` in `package.json` is the published surface**: `dist`, `tokens.css` and this README.
+`src` is deliberately not in it — consumers import from `dist`, and shipping the TypeScript
+source as well would let an app import a path that bypasses the build and the types.
+
+`prepublishOnly` runs the build, so `npm publish` cannot ship a stale `dist` — which would
+otherwise publish silently, with a version number that says nothing about it. `dist/` is
+gitignored and present in the tarball, which is the right way round: the build output is not
+worth reviewing in a diff and is worth shipping.
+
+**The scope is `@kennycorrea` on npm.** `upfront` was not available, so the account was converted
+into an organisation. Settling that before the first publish rather than after was worth doing:
+the name is an import line in three apps, so renaming it was free today and would have cost a
+major version and three coordinated bumps after a release.
+
+GitHub Packages was the alternative and would have forced `@kennyrafael/ui`, because it requires
+the scope to match the repository owner. `publishConfig.access: "public"` is set, because a scoped
+package defaults to restricted and restricted needs a paid plan.
+
+### The publish workflow
+
+`.github/workflows/npm-publish.yml`: a `build` job that runs `npm test`, then `publish-npm`
+which needs it.
+
+⚠ **Pushing to `main` does not publish, and is not meant to.** The trigger is
+`release: [created]` — a GitHub *release*, which means a tag and a release object. A commit on
+`main` fires nothing and leaves no run in the Actions tab, which looks identical to a broken
+workflow. `workflow_dispatch` is also enabled, so the first publish and any retry can be run from
+the Actions tab without inventing a version to hang a release off.
+
+Two things that fail at the `npm publish` step rather than earlier, and are worth checking before
+blaming the workflow:
+
+- **The token must be a repository or organisation Actions secret**, not an account-level one.
+  GitHub's account-level secrets are for Codespaces; Actions reads repository, environment and
+  organisation secrets. The step references `secrets.npm_token`, and secret names are
+  case-insensitive, so `NPM_TOKEN` matches.
+- **It must be an npm _Automation_ token** (or a granular token with publish rights). A classic
+  *Publish* token fails with `EOTP` the moment the account or org requires 2FA for publishing,
+  because there is no one there to type a one-time password. That failure reads like a bad
+  credential and is not one.
+
+⚠ **`npm test` has to keep existing.** It is lint plus a typecheck rather than unit tests — there
+are no unit tests here — and it is load-bearing for a reason that has nothing to do with quality:
+without a `test` script the `build` job fails on `Missing script: "test"`, `publish-npm` never
+runs because it needs `build`, and **the release publishes nothing while looking like it worked.**
+That was the state when the workflow was first added.
+
+### Where it is consumed from today
+
+⚠ **The three apps still depend on `file:../ui`**, which works while they sit side by side on one
+disk and does **not** work on Vercel, where each project builds from its own repository.
+
+Once this is published, each consumer's dependency becomes a version instead of a path:
+
+```jsonc
+// web, site and admin package.json
+"@kennycorrea/ui": "^0.1.0"   // instead of "file:../ui"
+```
+
+That is one line in three files and no code change. Note that `file:` installs a **symlink**, so
+local development currently picks up edits to this package immediately; a published version will
+not, and an app wanting to test an unreleased change wants `npm link` or a `file:` override
+rather than a copy.

package/dist/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+export interface AvatarProps {
+    /** Absent for most providers — the fallback is the normal case, not the error case. */
+    src?: string;
+    name?: string;
+    className?: string;
+}
+export declare function Avatar({ src, name, className }: AvatarProps): import("react").JSX.Element;

package/dist/atoms/Avatar/Avatar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as ThemedAvatar } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+/** Two letters from the name, which is all a small circle has room for. */
+function initialsOf(name) {
+    if (!name)
+        return '?';
+    const words = name.trim().split(/\s+/);
+    const first = words[0]?.[0] ?? '';
+    // First and last, not the first two: "Ana Silva Pereira" is AP to anyone who knows her.
+    const last = words.length > 1 ? (words[words.length - 1]?.[0] ?? '') : '';
+    return (first + last).toUpperCase();
+}
+export function Avatar({ src, name, className }) {
+    return (_jsx(ThemedAvatar, { size: "2", radius: "full", variant: "soft", src: src, 
+        // Rendered until the image has actually decoded, so a slow logo does not flash a
+        // broken-image icon and a URL that 404s degrades to the initials.
+        fallback: initialsOf(name), className: cn(className) }));
+}

package/dist/atoms/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/atoms/Avatar/index.js

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/atoms/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { Badge as ThemedBadge } from '@radix-ui/themes';
+import type { ComponentPropsWithoutRef } from 'react';
+export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+export interface BadgeProps extends Omit<ComponentPropsWithoutRef<typeof ThemedBadge>, 'color' | 'variant'> {
+    variant?: BadgeVariant;
+}
+export declare function Badge({ variant, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/atoms/Badge/Badge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge as ThemedBadge } from '@radix-ui/themes';
+/**
+ * Upfront's five meanings, in Themes' colour vocabulary.
+ *
+ * **`brand` names no colour on purpose.** Themes falls back to whatever accent the theme
+ * carries, so a badge that means "this is ours" follows the business's chosen colour while
+ * the four that mean something specific do not. It said `jade` until accents became
+ * choosable, which left the service badges green on a purple dashboard.
+ *
+ * `success` is jade and stays jade. Green means fine in a way purple does not, and a shop
+ * that liked orange should not end up with an orange "paid".
+ */
+const COLORS = {
+    neutral: 'gray',
+    brand: undefined,
+    success: 'jade',
+    warning: 'amber',
+    danger: 'red',
+};
+export function Badge({ variant = 'neutral', ...props }) {
+    return _jsx(ThemedBadge, { color: COLORS[variant], variant: "soft", radius: "full", ...props });
+}

package/dist/atoms/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/atoms/Badge/index.js

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/atoms/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './Button.types';
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/atoms/Button/Button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ThemedButton } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+/**
+ * Upfront's intents, expressed in Radix Themes' variant-and-colour vocabulary.
+ *
+ * The mapping exists so three apps keep saying `variant="danger"` rather than
+ * `variant="solid" color="red"` at sixty call sites — and so that when the house style changes
+ * its mind about what "secondary" looks like, it changes here and everywhere at once. That
+ * second half is what the dashboard and the site did not have, and why they drifted.
+ */
+const VARIANTS = {
+    primary: { variant: 'solid' },
+    secondary: { variant: 'soft' },
+    outline: { variant: 'surface' },
+    ghost: { variant: 'ghost' },
+    danger: { variant: 'solid', color: 'red' },
+};
+/** Themes sizes are 1–4; ours are the three a form actually needs. */
+const SIZES = { sm: '2', md: '3', lg: '4' };
+export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, asChild = false, href, className, disabled, children, ...props }, ref) {
+    const intent = VARIANTS[variant];
+    // An anchor is `asChild` underneath, so everything below treats the two the same: neither a
+    // link nor a slotted child may be given `loading` or `disabled`, because those are button
+    // attributes and Themes would hand them to whatever element it renders instead.
+    const slotted = asChild || href !== undefined;
+    const themed = (_jsx(ThemedButton, { ref: ref, asChild: slotted, variant: intent.variant, color: intent.color, size: SIZES[size], 
+        // Themes renders its own spinner and keeps the label's width while it spins, so the
+        // button does not jump. It does not disable the button, which is why `disabled` still
+        // accounts for it.
+        loading: slotted ? undefined : loading, disabled: slotted ? undefined : disabled || loading, className: cn(fullWidth && 'w-full', className), ...props, children: href !== undefined ? _jsx("a", { href: href, children: children }) : children }));
+    return themed;
+});

package/dist/atoms/Button/Button.types.d.ts

@@ -0,0 +1,40 @@
+import type { Button as ThemedButton } from '@radix-ui/themes';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * Upfront's button intents.
+ *
+ * **`outline` is new, and it is how the disagreement was resolved.** The dashboard's
+ * `secondary` mapped to Themes' `soft` and the marketing site's mapped to `surface` — the same
+ * word meaning two things in two products, which is what `docs/ecosystem.md` named as the cost
+ * of three repositories with nothing shared. Making one of them win would have been a decision
+ * about the word rather than about the need: the site wants the bordered, translucent button
+ * because it sits over a dark hero, and the dashboard wants the tinted one because it sits on a
+ * panel. So `secondary` means exactly one thing everywhere and the other look has its own name.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Derived from Themes' own props rather than from `ButtonHTMLAttributes`.
+ *
+ * The native attributes carry a legacy `color` — the HTML 4 one — which collides with the
+ * `color` Themes uses for its palette. Starting from the component's own props drops it,
+ * along with the other natives it does not accept.
+ */
+export interface ButtonProps extends Omit<ComponentPropsWithoutRef<typeof ThemedButton>, 'variant' | 'size' | 'color'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Renders a spinner and disables the button. */
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Renders the child element instead of a `button`, e.g. a router `Link`. */
+    asChild?: boolean;
+    /**
+     * Renders an anchor, keeping Radix's focus ring and sizing.
+     *
+     * From the marketing site, where almost every button is a link. It is `asChild` underneath,
+     * so the anchor stays an anchor — middle-click, copy link, the lot — and it is here rather
+     * than left to each app because "a button that is really a link" is a house concern.
+     */
+    href?: string;
+    children?: ReactNode;
+}

package/dist/atoms/Button/Button.types.js

@@ -0,0 +1 @@
+export {};

package/dist/atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Button.types';

package/dist/atoms/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Button.types';

package/dist/atoms/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Lifts the card off the ground — for dialogs and anything that floats. */
+    raised?: boolean;
+}
+/**
+ * Radix Themes' Card, with the padding taken off.
+ *
+ * Themes pads its card for you; Upfront's cards are built from a header and a body with a
+ * rule between them, so the padding belongs to those rather than to the card. `p-0` is the
+ * whole of the customisation.
+ */
+export declare function Card({ raised, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/atoms/Card/Card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as ThemedCard } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+/**
+ * Radix Themes' Card, with the padding taken off.
+ *
+ * Themes pads its card for you; Upfront's cards are built from a header and a body with a
+ * rule between them, so the padding belongs to those rather than to the card. `p-0` is the
+ * whole of the customisation.
+ */
+export function Card({ raised = false, className, ...props }) {
+    return (_jsx(ThemedCard, { size: "2", variant: raised ? 'classic' : 'surface', className: cn('p-0', className), ...props }));
+}
+export function CardHeader({ className, ...props }) {
+    return _jsx("div", { className: cn('border-b border-hairline px-5 py-4', className), ...props });
+}
+export function CardTitle({ className, ...props }) {
+    return _jsx("h2", { className: cn('font-medium text-brand-900', className), ...props });
+}
+export function CardBody({ className, ...props }) {
+    return _jsx("div", { className: cn('px-5 py-4', className), ...props });
+}

package/dist/atoms/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/dist/atoms/Card/index.js

@@ -0,0 +1 @@
+export * from './Card';

package/dist/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { Checkbox as ThemedCheckbox } from '@radix-ui/themes';
+import { type ComponentPropsWithoutRef } from 'react';
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof ThemedCheckbox>, 'size'>;
+/**
+ * A checkbox, for a list where several answers are true at once.
+ *
+ * Distinct from `Switch`, which is for a single setting that takes effect immediately. This
+ * is for choosing from a set — which services somebody performs — where nothing happens
+ * until the form is saved.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as ThemedCheckbox } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+/**
+ * A checkbox, for a list where several answers are true at once.
+ *
+ * Distinct from `Switch`, which is for a single setting that takes effect immediately. This
+ * is for choosing from a set — which services somebody performs — where nothing happens
+ * until the form is saved.
+ */
+export const Checkbox = forwardRef(function Checkbox({ className, ...props }, ref) {
+    return _jsx(ThemedCheckbox, { ref: ref, size: "2", className: cn(className), ...props });
+});

package/dist/atoms/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/atoms/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/atoms/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ContextMenuItem {
+    /** Stable across renders; also what `onSelect` is given back. */
+    id: string;
+    label: string;
+    /** Red and separated from the rest, for the one that undoes something. */
+    destructive?: boolean;
+    disabled?: boolean;
+}
+export interface ContextMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    items: ContextMenuItem[];
+    onSelect: (id: string) => void;
+    /** What right-clicking opens the menu on. */
+    children: ReactNode;
+}
+/**
+ * The menu a right-click opens, in the house vocabulary.
+ *
+ * Items are data rather than children, like `Select`'s options, because every caller
+ * builds them from something — a booking's status decides which of them make sense.
+ *
+ * **A shortcut, never the only way.** Right-click is invisible, mouse-only and absent on
+ * touch, so everything here also has a path through the form the block opens on click.
+ *
+ * Anything else it is given lands on the trigger, and so on the element inside it. Radix
+ * triggers compose by cloning their child, so a component in between that keeps its props
+ * to itself breaks the chain silently — the menu simply never opens. That is why the ref
+ * and the rest are passed down, and it is what lets a `Tooltip` wrap this and still reach
+ * the button.
+ */
+export declare const ContextMenu: import("react").ForwardRefExoticComponent<ContextMenuProps & import("react").RefAttributes<HTMLElement>>;

package/dist/atoms/ContextMenu/ContextMenu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextMenu as ThemedContextMenu } from '@radix-ui/themes';
+import { Fragment, forwardRef } from 'react';
+/**
+ * The menu a right-click opens, in the house vocabulary.
+ *
+ * Items are data rather than children, like `Select`'s options, because every caller
+ * builds them from something — a booking's status decides which of them make sense.
+ *
+ * **A shortcut, never the only way.** Right-click is invisible, mouse-only and absent on
+ * touch, so everything here also has a path through the form the block opens on click.
+ *
+ * Anything else it is given lands on the trigger, and so on the element inside it. Radix
+ * triggers compose by cloning their child, so a component in between that keeps its props
+ * to itself breaks the chain silently — the menu simply never opens. That is why the ref
+ * and the rest are passed down, and it is what lets a `Tooltip` wrap this and still reach
+ * the button.
+ */
+export const ContextMenu = forwardRef(function ContextMenu({ items, onSelect, children, ...rest }, ref) {
+    return (_jsxs(ThemedContextMenu.Root, { children: [_jsx(ThemedContextMenu.Trigger, { ref: ref, ...rest, children: children }), _jsx(ThemedContextMenu.Content, { size: "1", children: items.map((item, index) => (_jsxs(Fragment, { children: [item.destructive && index > 0 && !items[index - 1].destructive ? (_jsx(ThemedContextMenu.Separator, {})) : null, _jsx(ThemedContextMenu.Item, { color: item.destructive ? 'red' : undefined, disabled: item.disabled, 
+                            // `onSelect` rather than `onClick`: Radix closes the menu and restores focus
+                            // around it, which a bare click handler skips.
+                            onSelect: () => onSelect(item.id), children: item.label })] }, item.id))) })] }));
+});

package/dist/atoms/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './ContextMenu';

package/dist/atoms/ContextMenu/index.js

@@ -0,0 +1 @@
+export * from './ContextMenu';

package/dist/atoms/Dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    children: ReactNode;
+    /** Action row pinned to the bottom of the panel. */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * Themes' dialog, laid out the way Upfront's are: a titled header, a body, and a rule above
+ * the actions.
+ *
+ * The padding is taken off the content so those three bands can own it — Themes pads the
+ * whole panel, which would put the rules inside the padding rather than across it.
+ */
+export declare function Dialog({ open, onOpenChange, title, description, children, footer, className, }: DialogProps): import("react").JSX.Element;

package/dist/atoms/Dialog/Dialog.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as ThemedDialog } from '@radix-ui/themes';
+import { cn } from '../../utils/cn';
+/**
+ * Themes' dialog, laid out the way Upfront's are: a titled header, a body, and a rule above
+ * the actions.
+ *
+ * The padding is taken off the content so those three bands can own it — Themes pads the
+ * whole panel, which would put the rules inside the padding rather than across it.
+ */
+export function Dialog({ open, onOpenChange, title, description, children, footer, className, }) {
+    return (_jsx(ThemedDialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(ThemedDialog.Content, { className: cn('max-w-lg p-0', className), children: [_jsxs("div", { className: "border-b border-hairline px-6 py-4", children: [_jsx(ThemedDialog.Title, { className: "mb-0 font-medium text-brand-900", children: title }), description ? (_jsx(ThemedDialog.Description, { className: "mb-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), _jsx("div", { className: "max-h-[calc(100dvh-16rem)] overflow-y-auto px-6 py-5", children: children }), footer ? (_jsx("div", { className: "flex justify-end gap-2 border-t border-hairline px-6 py-4", children: footer })) : null] }) }));
+}

package/dist/atoms/Dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/dist/atoms/Dialog/index.js

@@ -0,0 +1 @@
+export * from './Dialog';

package/dist/atoms/Icon/Icon.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The handful of icons this app actually uses, drawn inline.
+ *
+ * No icon library: a dependency for twelve glyphs costs more in bundle and upgrade surface
+ * than it saves, and these are all one or two paths. They inherit `currentColor` and size
+ * with the text around them, which is what makes them work in a collapsed sidebar and a
+ * button alike.
+ */
+declare const PATHS: {
+    readonly overview: "M3 12l9-8 9 8M5 10v10h5v-6h4v6h5V10";
+    readonly services: "M4 7h16M4 12h16M4 17h10";
+    readonly bookings: "M7 3v3M17 3v3M4 8h16M5 6h14a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1z";
+    readonly clients: "M16 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2M9.5 9.5a3 3 0 100-6 3 3 0 000 6zM21 20v-2a4 4 0 00-3-3.87";
+    readonly payments: "M3 7h18v12H3zM3 11h18M7 15h3";
+    readonly compliance: "M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V7zM14 3v4h4M9 13h6M9 17h4";
+    readonly settings: "M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9c.14.35.4.65.73.85";
+    readonly collapse: "M15 6l-6 6 6 6";
+    readonly expand: "M9 6l6 6-6 6";
+    readonly logout: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9";
+    readonly upload: "M12 16V4M7 9l5-5 5 5M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2";
+    readonly trash: "M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3";
+    readonly menu: "M4 6h16M4 12h16M4 18h16";
+    readonly bell: "M18 8a6 6 0 10-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10.3 21a2 2 0 003.4 0";
+    readonly profile: "M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1";
+    readonly download: "M12 4v12M7 11l5 5 5-5M4 19v1a1 1 0 001 1h14a1 1 0 001-1v-1";
+    readonly check: "M4 12.5l5 5L20 6.5";
+    readonly sun: "M12 4V2M12 22v-2M4 12H2M22 12h-2M5.6 5.6L4.2 4.2M19.8 19.8l-1.4-1.4M18.4 5.6l1.4-1.4M4.2 19.8l1.4-1.4M12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9z";
+    readonly moon: "M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z";
+    readonly display: "M4 5h16a1 1 0 011 1v9a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zM9 20h6M12 16v4";
+    readonly close: "M6 6l12 12M18 6L6 18";
+    readonly 'close-circle': "M12 21a9 9 0 100-18 9 9 0 000 18zM9.5 9.5l5 5M14.5 9.5l-5 5";
+    readonly 'chevron-up': "M6 15l6-6 6 6";
+    readonly 'chevron-down': "M6 9l6 6 6-6";
+};
+export type IconName = keyof typeof PATHS;
+export interface IconProps {
+    name: IconName;
+    className?: string;
+    /**
+     * A label makes it an image with a name; leaving it out makes it decoration.
+     *
+     * Decoration is the right answer whenever adjacent text already says the same thing —
+     * a screen reader announcing "Bookings, Bookings" is worse than saying it once.
+     */
+    label?: string;
+}
+export declare function Icon({ name, className, label }: IconProps): import("react").JSX.Element;
+export {};

package/dist/atoms/Icon/Icon.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+/**
+ * The handful of icons this app actually uses, drawn inline.
+ *
+ * No icon library: a dependency for twelve glyphs costs more in bundle and upgrade surface
+ * than it saves, and these are all one or two paths. They inherit `currentColor` and size
+ * with the text around them, which is what makes them work in a collapsed sidebar and a
+ * button alike.
+ */
+const PATHS = {
+    overview: 'M3 12l9-8 9 8M5 10v10h5v-6h4v6h5V10',
+    services: 'M4 7h16M4 12h16M4 17h10',
+    bookings: 'M7 3v3M17 3v3M4 8h16M5 6h14a1 1 0 011 1v12a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1z',
+    clients: 'M16 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2M9.5 9.5a3 3 0 100-6 3 3 0 000 6zM21 20v-2a4 4 0 00-3-3.87',
+    payments: 'M3 7h18v12H3zM3 11h18M7 15h3',
+    compliance: 'M14 3H7a1 1 0 00-1 1v16a1 1 0 001 1h10a1 1 0 001-1V7zM14 3v4h4M9 13h6M9 17h4',
+    settings: 'M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 008 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9c.14.35.4.65.73.85',
+    collapse: 'M15 6l-6 6 6 6',
+    expand: 'M9 6l6 6-6 6',
+    logout: 'M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9',
+    upload: 'M12 16V4M7 9l5-5 5 5M4 17v2a1 1 0 001 1h14a1 1 0 001-1v-2',
+    trash: 'M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3',
+    menu: 'M4 6h16M4 12h16M4 18h16',
+    bell: 'M18 8a6 6 0 10-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10.3 21a2 2 0 003.4 0',
+    profile: 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1',
+    download: 'M12 4v12M7 11l5 5 5-5M4 19v1a1 1 0 001 1h14a1 1 0 001-1v-1',
+    check: 'M4 12.5l5 5L20 6.5',
+    sun: 'M12 4V2M12 22v-2M4 12H2M22 12h-2M5.6 5.6L4.2 4.2M19.8 19.8l-1.4-1.4M18.4 5.6l1.4-1.4M4.2 19.8l1.4-1.4M12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9z',
+    moon: 'M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z',
+    display: 'M4 5h16a1 1 0 011 1v9a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zM9 20h6M12 16v4',
+    close: 'M6 6l12 12M18 6L6 18',
+    // The circle is what makes it read as a control rather than as decoration, which matters
+    // where it is the only thing in its column and has no label beside it.
+    'close-circle': 'M12 21a9 9 0 100-18 9 9 0 000 18zM9.5 9.5l5 5M14.5 9.5l-5 5',
+    // Up and down as well as left and right: reordering a list and opening an accordion
+    // section both point along the axis the content moves in.
+    'chevron-up': 'M6 15l6-6 6 6',
+    'chevron-down': 'M6 9l6 6 6-6',
+};
+export function Icon({ name, className, label }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: cn('size-5 shrink-0', className), "aria-hidden": label ? undefined : true, role: label ? 'img' : undefined, "aria-label": label, children: _jsx("path", { d: PATHS[name] }) }));
+}

package/dist/atoms/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/atoms/Icon/index.js

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/atoms/Input/Input.d.ts

@@ -0,0 +1,15 @@
+import { TextField } from '@radix-ui/themes';
+import { type ComponentPropsWithoutRef } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * Built on Themes' own prop type rather than on `InputHTMLAttributes`.
+ *
+ * Themes narrows a few of the native props — `size` and `color` mean its own scales — so
+ * deriving from it is what keeps a caller from passing something the component will not
+ * accept and only finding out at runtime.
+ */
+export interface InputProps extends Omit<ComponentPropsWithoutRef<typeof TextField.Root>, 'size' | 'color'> {
+    size?: InputSize;
+    invalid?: boolean;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;