@troychaplin/parlour-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,41 +1,75 @@
-# Parlour
+<p align="center">
+  <img src="./public/graphics/parlour-icon.svg" alt="Parlour logo: two scoops of ice cream melting over a bowl" width="140" />
+</p>
 
-**A palette cleanser for React and WordPress.**
+<h1 align="center">Parlour</h1>
 
-A token-first UI kit for React and WordPress. One set of tokens, every flavour.
+<p align="center">
+  <strong>Scoop. Serve. Repeat.</strong>
+</p>
 
-Formerly Octave Design System.
+<p align="center">
+  A token-first UI kit for React and WordPress.<br />
+  One set of tokens, every flavour.
+</p>
 
-Browse the components and tokens in the [live Storybook](https://troychaplin.github.io/parlour-ui/).
+<p align="center">
+  <a href="https://www.npmjs.com/package/@troychaplin/parlour-ui"><img src="https://img.shields.io/npm/v/@troychaplin/parlour-ui?color=c2185b&label=npm" alt="npm version" /></a>
+  <a href="https://troychaplin.github.io/parlour-ui/"><img src="https://img.shields.io/badge/Storybook-live-8fb56a" alt="Live Storybook" /></a>
+</p>
 
-## Why Parlour
+<p align="center">
+  <a href="https://troychaplin.github.io/parlour-ui/"><strong>Browse the Storybook</strong></a> ·
+  <a href="#get-a-scoop">Get started</a> ·
+  <a href="#serve-it-in-wordpress">WordPress</a> ·
+  <a href="CHANGELOG.mdx">Changelog</a>
+</p>
 
-- **One source of truth, two ecosystems.**
-  [`@troychaplin/component2block`](https://www.npmjs.com/package/@troychaplin/component2block)
-  compiles `c2b.config.json` into CSS custom properties (`--parlour--*`), SCSS
-  variables, base element styles, and a WordPress `theme.json` with matching editor
-  styles. A React app and the WordPress Site Editor render the same design language
-  because they read the same tokens — no parallel stylesheet to keep in sync by hand.
-- **Fluid by default.** All 16 type steps are `clamp()` values that scale with the
-  viewport, and the spacing scale goes fluid from `small` upward. Responsive
-  typography without a stack of breakpoints.
-- **No runtime, no lock-in.** Plain SCSS and CSS custom properties — no Tailwind, no
-  CSS-in-JS, no provider to wrap your tree in. Per-component CSS is exported
-  individually, so a WordPress block can ship only the styles it actually uses.
-- **Accessibility is a build failure.** Every Storybook story runs through
-  [axe](https://github.com/dequelabs/axe-core) at the `error` threshold, on every pull
-  request and on pre-push. A violation blocks the merge — it isn't a warning someone
-  triages later.
-- **Deliberately small.** Budgeted at 25 kB for the JS bundle and 7 kB for the
-  stylesheet, brotli-compressed. `pnpm size` checks both.
+---
 
-> **Status:** Parlour is early-stage and actively being rebuilt. The token pipeline,
-> build, and accessibility tooling are solid; the component catalogue is small and
-> growing. See the [changelog](CHANGELOG.mdx) for what has landed.
+## A palette cleanser for React and WordPress
 
-Built with React 18 & 19, TypeScript 6, Vite 8, Storybook 10, and SCSS.
+You've built the same design twice before. Once in React, once in WordPress, and then spent months keeping two stylesheets from drifting apart.
 
-## Installation
+Parlour ends that. You define your design once, as tokens, and Parlour serves it everywhere: a React component library, a Next.js app, a WordPress block theme, a hybrid theme, and the styles inside your custom blocks. Same colours, same type, same spacing. Not "close enough." The same.
+
+## Scoop. Serve. Repeat.
+
+**Scoop.** Take exactly what you need. Use the whole stylesheet, or scoop out a single component's CSS for a WordPress block that only ships the styles it actually uses.
+
+**Serve.** One token file becomes CSS custom properties, SCSS variables, base element styles, and a WordPress `theme.json`, all generated together. React apps and the WordPress Site Editor read from the same source, so they always match.
+
+**Repeat.** Change a token and every output updates on the next build. No parallel stylesheets, no copy-pasting hex codes, no "why is the button a different blue in WordPress?"
+
+## What's on the menu
+
+**One recipe, two kitchens.** Your design tokens live in a single file, `c2b.config.json`. [`@troychaplin/component2block`](https://www.npmjs.com/package/@troychaplin/component2block) compiles it into everything React and WordPress need, so both ecosystems render the same design language without anyone keeping them in sync by hand.
+
+**Fluid from the first spoonful.** All 16 type steps are `clamp()` values that scale smoothly with the viewport, and the spacing scale goes fluid from `small` upward. Responsive typography without a stack of breakpoints.
+
+**No runtime. No lock-in.** Plain SCSS and CSS custom properties. No Tailwind, no CSS-in-JS, no provider wrapping your whole app. Every component's CSS is published on its own, so you only serve what's on the plate.
+
+**Accessibility isn't a topping, it's the base.** Every Storybook story is tested with [axe](https://github.com/dequelabs/axe-core) at the `error` threshold, on every pull request and before every push. An accessibility violation blocks the merge. It's never a warning someone gets to later.
+
+**A light dessert.** Budgeted at 25 kB for the JavaScript and 7 kB for the stylesheet, brotli-compressed, and checked on every build with `pnpm size`.
+
+**Server Components welcome.** Most components render on the server in the Next.js App Router. Only the few that need React context are client components.
+
+**Fresh ingredients.** Built with React 18 and 19, TypeScript 6, Vite 8, Storybook 10, and SCSS.
+
+> **Fresh out of the churn.** Parlour is early-stage and moving quickly. The token pipeline, build, and accessibility tooling are solid; the component catalogue is small and growing every release. See the [changelog](CHANGELOG.mdx) for what's landed.
+
+## Coming soon to the counter
+
+**Flavours.** Full colour patterns you can switch between, not just light and dark. Pick a flavour and the whole site, in React and WordPress, follows.
+
+**Your own recipe.** Enter your own brand variables and let Parlour generate everything else: tokens, base styles, and WordPress theme files.
+
+**Saved templates.** Keep your recipes and reuse them across projects, from React apps to WordPress themes and beyond.
+
+---
+
+## Get a scoop
 
 ```bash
 npm install @troychaplin/parlour-ui
@@ -43,7 +77,7 @@ npm install @troychaplin/parlour-ui
 
 React and React DOM 18 or 19 are peer dependencies.
 
-### React apps
+### Serve it in React
 
 Import the stylesheet once, where your app starts:
 
@@ -51,7 +85,7 @@ Import the stylesheet once, where your app starts:
 import '@troychaplin/parlour-ui/styles.css';
 ```
 
-Then use the components:
+Then build with the components:
 
 ```tsx
 import { Button, Container, Main } from '@troychaplin/parlour-ui';
@@ -68,16 +102,11 @@ export function Page() {
 }
 ```
 
-`styles.css` has everything: the design tokens, base element styles, layout classes, every
-component's CSS, and the `@font-face` rules for Inter Tight, Source Serif 4 and JetBrains Mono.
-The font files ship with the package, and your bundler picks them up from the stylesheet. The
-components don't import any CSS themselves, so this import is required.
+`styles.css` is the full sundae: design tokens, base element styles, layout classes, every component's CSS, and the `@font-face` rules for Inter Tight, Source Serif 4, and JetBrains Mono. The font files ship with the package and your bundler picks them up automatically. Components don't import their own CSS, so this one import is required.
 
 #### Router links
 
-`Button` with an `href`, and `SiteHeader`, render plain `<a>` links unless you wrap the app in
-`LinkProvider` with your router's link component. That component receives standard anchor props,
-including `href`:
+`Button` with an `href`, and `SiteHeader`, render plain `<a>` links unless you wrap your app in `LinkProvider` with your router's link component. That component receives standard anchor props, including `href`:
 
 ```tsx
 import { LinkProvider } from '@troychaplin/parlour-ui';
@@ -87,15 +116,11 @@ import { LinkProvider } from '@troychaplin/parlour-ui';
 </LinkProvider>;
 ```
 
-Next.js's `Link` takes `href` as it is. React Router's `Link` expects `to`, so pass a wrapper
-instead: `({ href = '', ...props }) => <Link to={href} {...props} />`.
+Next.js's `Link` takes `href` as-is. React Router's `Link` expects `to`, so pass a small wrapper instead: `({ href = '', ...props }) => <Link to={href} {...props} />`.
 
-#### Next.js App Router
+### Serve it in Next.js
 
-Parlour's components work in Server Components. `Button`, `SiteHeader` and `LinkProvider` use
-React context, so they're marked `'use client'` and render as Client Components; every other
-component renders on the server. A Server Component can't pass a function such as Next.js's `Link`
-to a Client Component, so set up `LinkProvider` in a client providers file:
+Parlour works in Server Components. `Button`, `SiteHeader`, and `LinkProvider` use React context, so they're marked `'use client'`; everything else renders on the server. Since a Server Component can't pass a function like Next.js's `Link` to a Client Component, set up `LinkProvider` in a client providers file:
 
 ```tsx
 // app/providers.tsx
@@ -125,49 +150,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-With the Pages Router, import the stylesheet and add `LinkProvider` in `pages/_app.tsx`.
+Using the Pages Router? Import the stylesheet and add `LinkProvider` in `pages/_app.tsx`.
 
-### What the package ships
+### Serve it in WordPress
 
-Every path below starts with `@troychaplin/parlour-ui`.
+`dist/wordpress/` has everything a theme needs:
 
-| Path                                    | Contents                                                                                 |
-| --------------------------------------- | ---------------------------------------------------------------------------------------- |
-| _(package root)_                        | Every React component, as ES modules and CommonJS, with TypeScript types                 |
-| `/styles.css`                           | The full stylesheet: tokens, base styles, layout classes, every component, and the fonts |
-| `/tokens.css`                           | The design tokens as `--parlour--*` custom properties                                    |
-| `/base-styles.css`                      | Element defaults for the body, headings, links and buttons                               |
-| `/layout.css`                           | Layout classes that match WordPress's, such as `is-layout-constrained`                   |
-| `/typography.css`                       | Spacing after headings                                                                   |
-| `/fonts.css`                            | `@font-face` rules for the bundled fonts                                                 |
-| `/tokens`                               | The token names as a JavaScript object, `parlourTokens`                                  |
-| `/<Component>`                          | One component's JavaScript, such as `/Button`                                            |
-| `/<Component>.css`                      | One component's CSS, such as `/Button.css`                                               |
-| `/block-theme.css`, `/hybrid-theme.css` | Stylesheets for WordPress themes                                                         |
-
-The WordPress theme files, `integrate.php` and `theme-parlour.json`, are in `dist/wordpress/`, and
-the font files are in `dist/fonts/`. Copy those by path.
-
-### WordPress themes
-
-`dist/wordpress/` has what a theme needs:
-
-- `theme-parlour.json` — the tokens as `theme.json` presets: the color palette and gradient, 16
-  fluid font sizes, the three font families with their font files, the spacing scale, shadows,
-  and the content and wide widths. It also sets default styles for text, headings, links, buttons
-  and captions.
-- `integrate.php` — loads `theme-parlour.json` as WordPress's default `theme.json` layer, so your
-  theme's own `theme.json` only needs to hold overrides.
-- `block-theme.css` — for block themes: the tokens, the `.sr-only` utility and heading spacing.
-- `hybrid-theme.css` — for hybrid themes with PHP templates: adds Parlour's element defaults,
-  layout classes and global styles.
+- **`theme-parlour.json`** turns the tokens into `theme.json` presets: the colour palette and gradient, 16 fluid font sizes, the three font families with their font files, the spacing scale, shadows, and content and wide widths. It also sets default styles for text, headings, links, buttons, and captions.
+- **`integrate.php`** loads `theme-parlour.json` as WordPress's default `theme.json` layer, so your theme's own `theme.json` only needs to hold overrides.
+- **`block-theme.css`** is for block themes: the tokens, the `.sr-only` utility, and heading spacing.
+- **`hybrid-theme.css`** is for hybrid themes with PHP templates, adding Parlour's element defaults, layout classes, and global styles.
 
 To set up a theme:
 
-1. Copy `integrate.php`, `theme-parlour.json` and the stylesheet you need into one folder in your
-   theme, such as `assets/parlour/`. `integrate.php` looks for `theme-parlour.json` next to itself.
-2. Copy `dist/fonts/` to `assets/fonts/` in your theme, the path `theme-parlour.json` gives for the
-   font files.
+1. Copy `integrate.php`, `theme-parlour.json`, and the stylesheet you need into one folder in your theme, such as `assets/parlour/`. `integrate.php` looks for `theme-parlour.json` next to itself.
+2. Copy `dist/fonts/` to `assets/fonts/` in your theme, which is the path `theme-parlour.json` uses for the font files.
 3. Load everything from `functions.php`:
 
 ```php
@@ -184,18 +181,13 @@ add_action( 'after_setup_theme', function () {
 
 For a hybrid theme, use `hybrid-theme.css` in both places.
 
-Parlour is built locked, so `integrate.php` also stops the theme from changing the layout widths
-and breakpoints, and turns off custom colors, gradients and duotone in the Site Editor.
+Parlour is built locked, so `integrate.php` also stops the theme from changing layout widths and breakpoints, and turns off custom colours, gradients, and duotone in the Site Editor. Your design stays on-brand, no matter who's editing.
 
-### WordPress blocks
+### Serve it in custom blocks
 
-Each component's CSS is also published on its own, so a block can bundle just the styles for the
-markup it renders. Component CSS reads the `--parlour--*` custom properties, so the page needs the
-tokens too: a theme set up as above already loads them, and otherwise the block should bundle
-`tokens.css`.
+Every component's CSS is published on its own, so a block can bundle just the styles for the markup it renders. Component CSS reads the `--parlour--*` custom properties, so the page needs the tokens too: a theme set up as above already loads them; otherwise, bundle `tokens.css` with the block.
 
-With `@wordpress/scripts`, import them at the top of the block's `style.scss`, which loads in the
-editor and on the front end:
+With `@wordpress/scripts`, import them at the top of the block's `style.scss`, which loads in both the editor and on the front end:
 
 ```scss
 // src/my-block/style.scss
@@ -203,36 +195,49 @@ editor and on the front end:
 @import '@troychaplin/parlour-ui/Button.css';
 ```
 
-## Design tokens
+## What comes in the box
 
-Every CSS variable uses the `--parlour--` prefix (double dash).
+Every path below starts with `@troychaplin/parlour-ui`.
+
+| Path                                    | Contents                                                                                 |
+| --------------------------------------- | ---------------------------------------------------------------------------------------- |
+| _(package root)_                        | Every React component, as ES modules and CommonJS, with TypeScript types                 |
+| `/styles.css`                           | The full stylesheet: tokens, base styles, layout classes, every component, and the fonts |
+| `/tokens.css`                           | The design tokens as `--parlour--*` custom properties                                    |
+| `/base-styles.css`                      | Element defaults for the body, headings, links, and buttons                              |
+| `/layout.css`                           | Layout classes that match WordPress's, such as `is-layout-constrained`                   |
+| `/typography.css`                       | Spacing after headings                                                                   |
+| `/fonts.css`                            | `@font-face` rules for the bundled fonts                                                 |
+| `/tokens`                               | The token names as a JavaScript object, `parlourTokens`                                  |
+| `/<Component>`                          | One component's JavaScript, such as `/Button`                                            |
+| `/<Component>.css`                      | One component's CSS, such as `/Button.css`                                               |
+| `/block-theme.css`, `/hybrid-theme.css` | Stylesheets for WordPress themes                                                         |
+
+The WordPress theme files (`integrate.php` and `theme-parlour.json`) are in `dist/wordpress/`, and the font files are in `dist/fonts/`. Copy those by path.
 
-| Category       | What's in it                                                                                                                                                                                          |
-| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Colors**     | `accent-primary` and `accent-secondary`, an 11-step neutral ramp (`neutral-50` → `neutral-950`), semantic states (`info`, `success`, `warning`, `error`), and brand colors for seven social platforms |
-| **Typography** | Three families (Inter Tight, Source Serif 4, JetBrains Mono), 16 fluid size steps, nine weights, three line heights                                                                                   |
-| **Spacing**    | A 12-step scale from `3-x-small` to `5-x-large`, fluid from `small` upward                                                                                                                            |
-| **Effects**    | Five shadow presets (natural, deep, sharp, outlined, crisp), five border radii, and a gradient                                                                                                        |
-| **Layout**     | Content width (768px), wide width (1152px), small (600px), and full-bleed                                                                                                                             |
+## The ingredients
+
+Every CSS variable uses the `--parlour--` prefix (double dash).
 
-Browse them live in Storybook under **Stylebook**.
+| Category       | What's in it                                                                                                                                                                                           |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Colours**    | `accent-primary` and `accent-secondary`, an 11-step neutral ramp (`neutral-50` → `neutral-950`), semantic states (`info`, `success`, `warning`, `error`), and brand colours for seven social platforms |
+| **Typography** | Three families (Inter Tight, Source Serif 4, JetBrains Mono), 16 fluid size steps, nine weights, three line heights                                                                                    |
+| **Spacing**    | A 12-step scale from `3-x-small` to `5-x-large`, fluid from `small` upward                                                                                                                             |
+| **Effects**    | Five shadow presets (natural, deep, sharp, outlined, crisp), five border radii, and a gradient                                                                                                         |
+| **Layout**     | Content width (768px), wide width (1152px), small (600px), and full-bleed                                                                                                                              |
 
-## Accessibility
+Taste them all live in the Storybook under **Stylebook**.
 
-Every Storybook story is tested against axe with `test: 'error'` — stories
-that fail accessibility checks will not pass CI.
+## The menu (documentation)
 
-## Documentation
+The [live Storybook](https://troychaplin.github.io/parlour-ui/) is the full menu. **Getting Started** covers installation and framework setup, **Stylebook** has live token demos, and every component has its own docs page with props, CSS classes, tokens, and accessibility notes.
 
-The [live Storybook](https://troychaplin.github.io/parlour-ui/) is the reference:
-**Getting Started** covers installation and framework integration, **Stylebook** has live token
-demos, and every component ships its own docs page with props, CSS classes, tokens, and
-accessibility notes.
+---
 
-Contributor conventions — how to build a component's TSX, styles, stories and docs — are in
-[`AGENTS.md`](AGENTS.md) and the [`build-component` skill](.claude/skills/build-component/SKILL.md).
+## Behind the counter
 
-## Developing Parlour
+Want to help make Parlour? Contributor conventions (how to build a component's TSX, styles, stories, and docs) are in [`AGENTS.md`](AGENTS.md) and the [`build-component` skill](.claude/skills/build-component/SKILL.md).
 
 ```bash
 # Requires Node 24+ (see .nvmrc)
@@ -250,10 +255,10 @@ pnpm run dev           # Storybook at http://localhost:6006
 
 | Command                      | Description                                                                                         |
 | ---------------------------- | --------------------------------------------------------------------------------------------------- |
-| `pnpm run dev`               | Run `c2b generate` then start Storybook dev server                                                  |
+| `pnpm run dev`               | Run `c2b generate` then start the Storybook dev server                                              |
 | `pnpm run build`             | Library build: ESM and CommonJS bundles, per-component files, types, tokens and the WordPress files |
 | `pnpm run build-storybook`   | Build static Storybook for deployment                                                               |
-| `pnpm run c2b`               | Regenerate tokens, base styles, and WP theme files                                                  |
+| `pnpm run c2b`               | Regenerate tokens, base styles, and WordPress theme files                                           |
 | `pnpm run typecheck`         | TypeScript type checking (no emit)                                                                  |
 | `pnpm run lint`              | ESLint across `src/`                                                                                |
 | `pnpm run lint:fix`          | ESLint with auto-fix                                                                                |
@@ -266,33 +271,18 @@ pnpm run dev           # Storybook at http://localhost:6006
 | `pnpm run size`              | Check the JS bundle and stylesheet against their size budgets                                       |
 | `pnpm run release <version>` | Changelog, version bump, commit and tag on main. Push the tag to publish to npm                     |
 
-### Formatting & code style
-
-Formatting is enforced automatically so contributors don't create diffs based on
-personal editor preferences:
-
-- **EditorConfig** (`.editorconfig`) sets base whitespace rules (4-space indent, LF
-  line endings, trimmed trailing whitespace) recognized by most editors.
-- **Prettier** (`.prettierrc`) formats TS/TSX/SCSS in `src/`, and JSON, Markdown and MDX
-  files when they're committed. `.prettierignore` excludes build output and generated files
-  (`dist/`, `storybook-static/`, `src/styles/c2b/`, etc.).
-- **ESLint** (`eslint.config.mjs`) lints `src/` for code quality (React, hooks,
-  jsx-a11y, Storybook rules), with `eslint-config-prettier` disabling any
-  formatting rules that could conflict with Prettier.
-- **VSCode workspace settings** (`.vscode/settings.json`, committed to the repo)
-  set Prettier as the default formatter with format-on-save and ESLint
-  auto-fix-on-save enabled. `.vscode/extensions.json` recommends the Prettier,
-  ESLint, and EditorConfig extensions so VSCode prompts new contributors to
-  install them.
+### Keeping the kitchen clean
+
+Formatting is enforced automatically, so nobody's diffs are about personal editor preferences:
+
+- **EditorConfig** (`.editorconfig`) sets base whitespace rules: 4-space indent, LF line endings, and trimmed trailing whitespace.
+- **Prettier** (`.prettierrc`) formats TS, TSX, and SCSS in `src/`, plus JSON, Markdown, and MDX files when they're committed. `.prettierignore` excludes build output and generated files (`dist/`, `storybook-static/`, `src/styles/c2b/`, and so on).
+- **ESLint** (`eslint.config.mjs`) lints `src/` for code quality (React, hooks, jsx-a11y, and Storybook rules), with `eslint-config-prettier` turning off any formatting rules that could conflict with Prettier.
+- **VS Code workspace settings** (`.vscode/settings.json`) set Prettier as the default formatter with format-on-save and ESLint auto-fix-on-save. `.vscode/extensions.json` recommends the Prettier, ESLint, and EditorConfig extensions to new contributors.
 - **`.gitattributes`** normalizes line endings to LF across operating systems.
-- **Husky + lint-staged**: on every commit, `.husky/pre-commit` runs
-  `lint-staged` first, which formats and auto-fixes only the files staged in
-  that commit (Prettier for TS/TSX/SCSS/JSON/MD/MDX, ESLint `--fix` for TS/TSX).
-  It then runs the full `pnpm lint` and `pnpm typecheck` as a final check
-  across the whole project. `.husky/pre-push` runs `pnpm test:storybook`.
+- **Husky and lint-staged** run on every commit: `lint-staged` formats and auto-fixes only the staged files, then the full `pnpm lint` and `pnpm typecheck` run as a final check. `.husky/pre-push` runs `pnpm test:storybook`.
 
-Run `pnpm format` to format everything in `src/`, or `pnpm format:check` to verify formatting
-without writing changes.
+Run `pnpm format` to format everything in `src/`, or `pnpm format:check` to check formatting without writing changes.
 
 ### Project structure
 
@@ -304,7 +294,7 @@ src/
     tokens/                    # Runtime token export (parlourTokens)
   docs/                        # Storybook documentation pages
     getting-started/           # Install and framework integration guides
-    stylebook/                 # Live token demos (colors, typography, spacing, effects)
+    stylebook/                 # Live token demos (colours, typography, spacing, effects)
   styles/
     main.scss                  # Consumer-facing stylesheet entry
     base/                      # Hand-authored globals (focus, selection, utilities)
@@ -320,9 +310,15 @@ dist/
   fonts/                       # Font files used by styles.css and theme-parlour.json
 ```
 
-## Links
+---
+
+<p align="center">
+  <a href="https://troychaplin.github.io/parlour-ui/">Storybook</a> ·
+  <a href="https://www.npmjs.com/package/@troychaplin/parlour-ui">npm</a> ·
+  <a href="https://github.com/troychaplin/parlour-ui">Source</a> ·
+  <a href="CHANGELOG.mdx">Changelog</a>
+</p>
 
-- [Storybook](https://troychaplin.github.io/parlour-ui/)
-- [npm](https://www.npmjs.com/package/@troychaplin/parlour-ui)
-- [Source](https://github.com/troychaplin/parlour-ui)
-- [Changelog](CHANGELOG.mdx)
+<p align="center">
+  <strong>Scoop. Serve. Repeat.</strong> 🍨
+</p>

package/dist/_shared/client-Ban3HFV8.mjs

@@ -0,0 +1,174 @@
+"use client";
+import { _ as e, f as t, g as n, h as r, m as i, p as a, v as o } from "./shared-CihwD_kP.mjs";
+import { createContext as s, useContext as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+var d = s((e) => /* @__PURE__ */ l("a", { ...e })), f = () => c(d), p = ({ text: e = "Button", color: t = "medium", rounded: n = "sm", type: r = "button", isSmall: i = !1, isFull: a = !1, isOutline: o = !1, disabled: s = !1, className: c, ...u }) => {
+	let d = f(), p = [
+		"parlour-button",
+		s ? "parlour-button--disabled" : `parlour-button--${t}`,
+		n && `parlour-button--radius-${n}`,
+		o && !s && "parlour-button--outline",
+		i && "parlour-button--small",
+		a && "parlour-button--full",
+		c
+	].filter(Boolean).join(" ");
+	return u.href === void 0 ? /* @__PURE__ */ l("button", {
+		type: r,
+		className: p,
+		disabled: s,
+		...u,
+		children: e
+	}) : /* @__PURE__ */ l(d, {
+		className: p,
+		...u,
+		children: e
+	});
+}, m = ({ component: e, children: t }) => /* @__PURE__ */ l(d.Provider, {
+	value: e,
+	children: t
+}), h = [
+	{
+		href: "/about",
+		label: "About"
+	},
+	{
+		href: "/blog",
+		label: "Blog"
+	},
+	{
+		href: "/resume",
+		label: "Resume"
+	}
+], g = (e, t) => {
+	let n = t ? e.indexOf(t) : -1;
+	return !t || n === -1 ? [e] : [
+		e.slice(0, n),
+		t,
+		e.slice(n + t.length)
+	];
+}, _ = ({ className: e = "", children: t, siteTitle: n = "Parlour", siteTitleAccent: a }) => {
+	let o = ["parlour-site-header", e].filter(Boolean).join(" "), s = f(), [c, d, m] = g(n, a);
+	return /* @__PURE__ */ l("header", {
+		className: o,
+		children: /* @__PURE__ */ u(r, {
+			gap: "normal",
+			maxWidth: "alignwide",
+			justify: "space-between",
+			align: "center",
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "parlour-site-header__branding",
+					children: /* @__PURE__ */ l("p", { children: /* @__PURE__ */ u(s, {
+						href: "/",
+						rel: "home",
+						children: [
+							c,
+							d && /* @__PURE__ */ l("span", {
+								className: "parlour-site-header__title-accent",
+								children: d
+							}),
+							m
+						]
+					}) })
+				}),
+				/* @__PURE__ */ l("nav", {
+					className: "parlour-site-header__nav",
+					"aria-label": "Primary",
+					children: /* @__PURE__ */ l("ul", { children: h.map(({ href: e, label: t }) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(s, {
+						href: e,
+						children: t
+					}) }, e)) })
+				}),
+				/* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(i, { children: /* @__PURE__ */ l(p, {
+					text: "Hire Me",
+					isSmall: !0,
+					isOutline: !0
+				}) }) }),
+				t
+			]
+		})
+	});
+}, v = [
+	"github",
+	"x",
+	"bluesky",
+	"linkedin",
+	"facebook",
+	"instagram",
+	"youtube",
+	"tiktok"
+], y = ({ name: e, nameHref: n, year: r = (/* @__PURE__ */ new Date()).getFullYear(), text: i, className: o, github: s, x: c, bluesky: d, linkedin: p, facebook: m, instagram: h, youtube: g, tiktok: _, ...y }) => {
+	let b = f(), x = ["parlour-site-footer", o].filter(Boolean).join(" "), S = {
+		github: s,
+		x: c,
+		bluesky: d,
+		linkedin: p,
+		facebook: m,
+		instagram: h,
+		youtube: g,
+		tiktok: _
+	}, C = v.filter((e) => S[e]);
+	return /* @__PURE__ */ l("footer", {
+		className: x,
+		...y,
+		children: /* @__PURE__ */ u("div", {
+			className: "parlour-site-footer__inner",
+			children: [
+				/* @__PURE__ */ u("p", {
+					className: "parlour-site-footer__copyright",
+					children: [
+						"© ",
+						r,
+						" ",
+						n ? /* @__PURE__ */ l(b, {
+							href: n,
+							children: e
+						}) : e
+					]
+				}),
+				i && /* @__PURE__ */ l("p", {
+					className: "parlour-site-footer__text",
+					children: i
+				}),
+				C.length > 0 && /* @__PURE__ */ l("ul", {
+					className: "parlour-site-footer__social",
+					children: C.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(b, {
+						className: "parlour-site-footer__social-link",
+						href: S[e],
+						rel: "me",
+						"aria-label": a[e].title,
+						children: /* @__PURE__ */ l(t, { name: e })
+					}) }, e))
+				})
+			]
+		})
+	});
+}, b = ({ children: t, as: r = "div", backgroundColor: i = "light", border: a = !0, borderColor: s = "light", borderRadius: c = "none", paddingInline: u = "x-large", paddingBlock: d = "large", href: p, linkProps: m, className: h, ...g }) => {
+	let _ = r, v = f(), y = [
+		"parlour-card",
+		`parlour-card--bg-${n[i]}`,
+		a && "parlour-card--border",
+		a && `parlour-card--border-${n[s]}`,
+		`parlour-card--radius-${e[c]}`,
+		`parlour-card--padding-inline-${o[u]}`,
+		`parlour-card--padding-block-${o[d]}`,
+		p && "parlour-card--linked",
+		h
+	].filter(Boolean).join(" ");
+	return p ? /* @__PURE__ */ l(_, {
+		className: y,
+		...g,
+		children: /* @__PURE__ */ l(v, {
+			className: "parlour-card__link",
+			href: p,
+			...m,
+			children: t
+		})
+	}) : /* @__PURE__ */ l(_, {
+		className: y,
+		...g,
+		children: t
+	});
+};
+//#endregion
+export { p as a, m as i, y as n, _ as r, b as t };

package/dist/_shared/client-D7AH6qxi.cjs

@@ -0,0 +1 @@
+"use client";const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./shared-HWeZXz9t.cjs");let n=require("react");n=e.t(n,1);let r=require("react/jsx-runtime");var i=(0,n.createContext)(e=>(0,r.jsx)(`a`,{...e})),a=()=>(0,n.useContext)(i),o=({text:e=`Button`,color:t=`medium`,rounded:n=`sm`,type:i=`button`,isSmall:o=!1,isFull:s=!1,isOutline:c=!1,disabled:l=!1,className:u,...d})=>{let f=a(),p=[`parlour-button`,l?`parlour-button--disabled`:`parlour-button--${t}`,n&&`parlour-button--radius-${n}`,c&&!l&&`parlour-button--outline`,o&&`parlour-button--small`,s&&`parlour-button--full`,u].filter(Boolean).join(` `);return d.href===void 0?(0,r.jsx)(`button`,{type:i,className:p,disabled:l,...d,children:e}):(0,r.jsx)(f,{className:p,...d,children:e})},s=({component:e,children:t})=>(0,r.jsx)(i.Provider,{value:e,children:t}),c=[{href:`/about`,label:`About`},{href:`/blog`,label:`Blog`},{href:`/resume`,label:`Resume`}],l=(e,t)=>{let n=t?e.indexOf(t):-1;return!t||n===-1?[e]:[e.slice(0,n),t,e.slice(n+t.length)]},u=({className:e=``,children:n,siteTitle:i=`Parlour`,siteTitleAccent:s})=>{let u=[`parlour-site-header`,e].filter(Boolean).join(` `),d=a(),[f,p,m]=l(i,s);return(0,r.jsx)(`header`,{className:u,children:(0,r.jsxs)(t.h,{gap:`normal`,maxWidth:`alignwide`,justify:`space-between`,align:`center`,children:[(0,r.jsx)(`div`,{className:`parlour-site-header__branding`,children:(0,r.jsx)(`p`,{children:(0,r.jsxs)(d,{href:`/`,rel:`home`,children:[f,p&&(0,r.jsx)(`span`,{className:`parlour-site-header__title-accent`,children:p}),m]})})}),(0,r.jsx)(`nav`,{className:`parlour-site-header__nav`,"aria-label":`Primary`,children:(0,r.jsx)(`ul`,{children:c.map(({href:e,label:t})=>(0,r.jsx)(`li`,{children:(0,r.jsx)(d,{href:e,children:t})},e))})}),(0,r.jsx)(`div`,{children:(0,r.jsx)(t.m,{children:(0,r.jsx)(o,{text:`Hire Me`,isSmall:!0,isOutline:!0})})}),n]})})},d=[`github`,`x`,`bluesky`,`linkedin`,`facebook`,`instagram`,`youtube`,`tiktok`],f=({name:e,nameHref:n,year:i=new Date().getFullYear(),text:o,className:s,github:c,x:l,bluesky:u,linkedin:f,facebook:p,instagram:m,youtube:h,tiktok:g,..._})=>{let v=a(),y=[`parlour-site-footer`,s].filter(Boolean).join(` `),b={github:c,x:l,bluesky:u,linkedin:f,facebook:p,instagram:m,youtube:h,tiktok:g},x=d.filter(e=>b[e]);return(0,r.jsx)(`footer`,{className:y,..._,children:(0,r.jsxs)(`div`,{className:`parlour-site-footer__inner`,children:[(0,r.jsxs)(`p`,{className:`parlour-site-footer__copyright`,children:[`© `,i,` `,n?(0,r.jsx)(v,{href:n,children:e}):e]}),o&&(0,r.jsx)(`p`,{className:`parlour-site-footer__text`,children:o}),x.length>0&&(0,r.jsx)(`ul`,{className:`parlour-site-footer__social`,children:x.map(e=>(0,r.jsx)(`li`,{children:(0,r.jsx)(v,{className:`parlour-site-footer__social-link`,href:b[e],rel:`me`,"aria-label":t.p[e].title,children:(0,r.jsx)(t.f,{name:e})})},e))})]})})},p=({children:e,as:n=`div`,backgroundColor:i=`light`,border:o=!0,borderColor:s=`light`,borderRadius:c=`none`,paddingInline:l=`x-large`,paddingBlock:u=`large`,href:d,linkProps:f,className:p,...m})=>{let h=n,g=a(),_=[`parlour-card`,`parlour-card--bg-${t.g[i]}`,o&&`parlour-card--border`,o&&`parlour-card--border-${t.g[s]}`,`parlour-card--radius-${t._[c]}`,`parlour-card--padding-inline-${t.v[l]}`,`parlour-card--padding-block-${t.v[u]}`,d&&`parlour-card--linked`,p].filter(Boolean).join(` `);return d?(0,r.jsx)(h,{className:_,...m,children:(0,r.jsx)(g,{className:`parlour-card__link`,href:d,...f,children:e})}):(0,r.jsx)(h,{className:_,...m,children:e})};Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});