@ps1ui/core 0.0.1 → 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+<h1 align="center">
+@ps1ui/core
+</h1>
+
+<p align="center">
+<i>For engineers who think in monospace.</i>
+</p>
+
+<p align="center">
+<a href="https://koki-develop.github.io/ps1ui/">Documentation</a> | <a href="https://koki-develop.github.io/ps1ui/getting-started/">Getting Started</a> | <a href="https://koki-develop.github.io/ps1ui/components/">Components</a> | <a href="https://koki-develop.github.io/ps1ui/storybook/">Storybook</a>
+</p>
+
+## Install
+
+React 19 is a peer dependency — install it alongside the package.
+
+```bash
+pnpm add @ps1ui/core react react-dom
+```
+
+## Getting Started
+
+Import the stylesheet once at your app's entry point. The JS entry ships no styles — the CSS brings the design tokens, the dark canvas, and every component's styles.
+
+```tsx
+import "@ps1ui/core/styles.css";
+```
+
+Wrap your tree in `PS1Root`. It establishes the container-query context that responsive props resolve against — without it, responsive props silently fall back to their `base` values.
+
+```tsx
+import "@ps1ui/core/styles.css";
+import { PS1Root, Button, Heading } from "@ps1ui/core";
+
+export function App() {
+  return (
+    <PS1Root>
+      <Heading level={1}>Hello, PS1 UI</Heading>
+      <Button variant="primary">Click me</Button>
+    </PS1Root>
+  );
+}
+```
+
+Browse the full component catalog at [koki-develop.github.io/ps1ui/components](https://koki-develop.github.io/ps1ui/components/).
+
+## License
+
+[MIT](./LICENSE)

package/dist/components/Anchor/Anchor.d.mts

@@ -2,7 +2,9 @@ import { ComponentPropsWithoutRef, ElementType } from "react";
 //#region src/components/Anchor/Anchor.d.ts
 type AnchorVariant = "primary" | "subtle";
 type AnchorOwnProps<E extends ElementType> = {
+  /** Element or component to render instead of the native <a> — e.g. a router Link. */
   as?: E;
+  /** Visual style: "primary" for standalone links, "subtle" for links inside running text. */
   variant?: AnchorVariant;
 };
 type AnchorProps<E extends ElementType = "a"> = AnchorOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof AnchorOwnProps<E>>;

package/dist/components/Anchor/Anchor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.mjs","names":[],"sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type AnchorVariant = \"primary\" | \"subtle\";\n\ntype AnchorOwnProps<E extends ElementType> = {\n  as?: E;\n  variant?: AnchorVariant;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Text: with a polymorphic `as` prop TypeScript cannot correctly narrow the\n// `ref` prop's type. Anchor accepts both string tags and React component types (`as={NextLink}`),\n// so a loose ref type would silently accept mismatched refs; dropping ref from the prop type is\n// safer than a misleading loose type.\nexport type AnchorProps<E extends ElementType = \"a\"> = AnchorOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof AnchorOwnProps<E>>;\n\nexport function Anchor<E extends ElementType = \"a\">({\n  as,\n  variant = \"primary\",\n  className,\n  ...rest\n}: AnchorProps<E>) {\n  const tag = as ?? \"a\";\n  const classes = cx(\"ps1ui-anchor\", `ps1ui-anchor--${variant}`, className);\n  return createElement(tag, { ...rest, className: classes });\n}\n"],"mappings":";;;AAmBA,SAAgB,OAAoC,EAClD,IACA,UAAU,WACV,WACA,GAAG,QACc;CACjB,MAAM,MAAM,MAAM;CAClB,MAAM,UAAU,GAAG,gBAAgB,iBAAiB,WAAW,SAAS;CACxE,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;CAAQ,CAAC;AAC3D"}
+{"version":3,"file":"Anchor.mjs","names":[],"sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type AnchorVariant = \"primary\" | \"subtle\";\n\ntype AnchorOwnProps<E extends ElementType> = {\n  /** Element or component to render instead of the native <a> — e.g. a router Link. */\n  as?: E;\n  /** Visual style: \"primary\" for standalone links, \"subtle\" for links inside running text. */\n  variant?: AnchorVariant;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Text: with a polymorphic `as` prop TypeScript cannot correctly narrow the\n// `ref` prop's type. Anchor accepts both string tags and React component types (`as={NextLink}`),\n// so a loose ref type would silently accept mismatched refs; dropping ref from the prop type is\n// safer than a misleading loose type.\nexport type AnchorProps<E extends ElementType = \"a\"> = AnchorOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof AnchorOwnProps<E>>;\n\nexport function Anchor<E extends ElementType = \"a\">({\n  as,\n  variant = \"primary\",\n  className,\n  ...rest\n}: AnchorProps<E>) {\n  const tag = as ?? \"a\";\n  const classes = cx(\"ps1ui-anchor\", `ps1ui-anchor--${variant}`, className);\n  return createElement(tag, { ...rest, className: classes });\n}\n"],"mappings":";;;AAqBA,SAAgB,OAAoC,EAClD,IACA,UAAU,WACV,WACA,GAAG,QACc;CACjB,MAAM,MAAM,MAAM;CAClB,MAAM,UAAU,GAAG,gBAAgB,iBAAiB,WAAW,SAAS;CACxE,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;CAAQ,CAAC;AAC3D"}

package/dist/components/Button/Button.d.mts

@@ -2,7 +2,9 @@ import { ComponentPropsWithoutRef, ElementType } from "react";
 //#region src/components/Button/Button.d.ts
 type ButtonVariant = "primary" | "secondary";
 type ButtonOwnProps<E extends ElementType> = {
+  /** Element or component to render instead of the native <button> — e.g. "a" or a router Link. */
   as?: E;
+  /** Visual style: "primary" for the main action, "secondary" for supporting actions. */
   variant?: ButtonVariant;
 };
 /**
@@ -16,6 +18,10 @@ type ButtonOwnProps<E extends ElementType> = {
  * unavailable, render a native `<Button disabled>` (or no link at all) instead of a
  * link. Untyped JS callers and `as={Component}` escapes that pass `disabled` anyway
  * get a leaked no-op attribute — no visual or behavioral disabling happens.
+ *
+ * `type` on the native tag: when rendering a native <button>, `type` defaults to
+ * "button" (not the browser's implicit "submit"), so a Button inside a <form>
+ * never submits implicitly — pass type="submit" explicitly to submit.
  */
 type ButtonProps<E extends ElementType = "button"> = ButtonOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps<E>>;
 declare function Button<E extends ElementType = "button">({ as, variant, className, ...rest }: ButtonProps<E>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\";\n\ntype ButtonOwnProps<E extends ElementType> = {\n  as?: E;\n  variant?: ButtonVariant;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Anchor / Text: with a polymorphic `as` prop TypeScript cannot correctly\n// narrow the `ref` prop's type against the resolved element E. Button accepts both string tags\n// (`as=\"a\"`) and React component types (`as={NextLink}`) so consumers can render a link that\n// looks like a button; a loose ref type would silently accept mismatched refs, so dropping ref\n// from the prop type is safer than a misleading loose type.\n/**\n * Props for {@link Button}. Derived from the props of the rendered element `E`,\n * so what's accepted follows the `as` target.\n *\n * `disabled` and polymorphism: `disabled` only exists on form elements, so\n * `<Button as=\"a\" href=\"…\" disabled>` is a type error (`ComponentPropsWithoutRef<\"a\">`\n * has no `disabled` — locked in by `Button.test-d.tsx`). This is intentional and\n * matches the ARIA Authoring Practices: links are not disabled. When the action is\n * unavailable, render a native `<Button disabled>` (or no link at all) instead of a\n * link. Untyped JS callers and `as={Component}` escapes that pass `disabled` anyway\n * get a leaked no-op attribute — no visual or behavioral disabling happens.\n */\nexport type ButtonProps<E extends ElementType = \"button\"> = ButtonOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps<E>>;\n\nexport function Button<E extends ElementType = \"button\">({\n  as,\n  variant = \"primary\",\n  className,\n  ...rest\n}: ButtonProps<E>) {\n  const tag: ElementType = as ?? \"button\";\n  const classes = cx(\"ps1ui-button\", `ps1ui-button--${variant}`, className);\n  const props: Record<string, unknown> = { ...rest, className: classes };\n  // `type=\"button\"` is a defensive default so a native <button> inside a <form> never\n  // submits implicitly. It only makes sense on the native tag — <a>, <NextLink>, and\n  // other host/component targets have no such attribute, and stamping one on them\n  // would leak an invalid attribute through to the DOM. Explicit callers still win.\n  if (tag === \"button\" && props.type === undefined) {\n    props.type = \"button\";\n  }\n  return createElement(tag, props);\n}\n"],"mappings":";;;AAgCA,SAAgB,OAAyC,EACvD,IACA,UAAU,WACV,WACA,GAAG,QACc;CACjB,MAAM,MAAmB,MAAM;CAC/B,MAAM,UAAU,GAAG,gBAAgB,iBAAiB,WAAW,SAAS;CACxE,MAAM,QAAiC;EAAE,GAAG;EAAM,WAAW;CAAQ;CAKrE,IAAI,QAAQ,YAAY,MAAM,SAAS,KAAA,GACrC,MAAM,OAAO;CAEf,OAAO,cAAc,KAAK,KAAK;AACjC"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\";\n\ntype ButtonOwnProps<E extends ElementType> = {\n  /** Element or component to render instead of the native <button> — e.g. \"a\" or a router Link. */\n  as?: E;\n  /** Visual style: \"primary\" for the main action, \"secondary\" for supporting actions. */\n  variant?: ButtonVariant;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Anchor / Text: with a polymorphic `as` prop TypeScript cannot correctly\n// narrow the `ref` prop's type against the resolved element E. Button accepts both string tags\n// (`as=\"a\"`) and React component types (`as={NextLink}`) so consumers can render a link that\n// looks like a button; a loose ref type would silently accept mismatched refs, so dropping ref\n// from the prop type is safer than a misleading loose type.\n/**\n * Props for {@link Button}. Derived from the props of the rendered element `E`,\n * so what's accepted follows the `as` target.\n *\n * `disabled` and polymorphism: `disabled` only exists on form elements, so\n * `<Button as=\"a\" href=\"…\" disabled>` is a type error (`ComponentPropsWithoutRef<\"a\">`\n * has no `disabled` — locked in by `Button.test-d.tsx`). This is intentional and\n * matches the ARIA Authoring Practices: links are not disabled. When the action is\n * unavailable, render a native `<Button disabled>` (or no link at all) instead of a\n * link. Untyped JS callers and `as={Component}` escapes that pass `disabled` anyway\n * get a leaked no-op attribute — no visual or behavioral disabling happens.\n *\n * `type` on the native tag: when rendering a native <button>, `type` defaults to\n * \"button\" (not the browser's implicit \"submit\"), so a Button inside a <form>\n * never submits implicitly — pass type=\"submit\" explicitly to submit.\n */\nexport type ButtonProps<E extends ElementType = \"button\"> = ButtonOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps<E>>;\n\nexport function Button<E extends ElementType = \"button\">({\n  as,\n  variant = \"primary\",\n  className,\n  ...rest\n}: ButtonProps<E>) {\n  const tag: ElementType = as ?? \"button\";\n  const classes = cx(\"ps1ui-button\", `ps1ui-button--${variant}`, className);\n  const props: Record<string, unknown> = { ...rest, className: classes };\n  // `type=\"button\"` is a defensive default so a native <button> inside a <form> never\n  // submits implicitly. It only makes sense on the native tag — <a>, <NextLink>, and\n  // other host/component targets have no such attribute, and stamping one on them\n  // would leak an invalid attribute through to the DOM. Explicit callers still win.\n  if (tag === \"button\" && props.type === undefined) {\n    props.type = \"button\";\n  }\n  return createElement(tag, props);\n}\n"],"mappings":";;;AAsCA,SAAgB,OAAyC,EACvD,IACA,UAAU,WACV,WACA,GAAG,QACc;CACjB,MAAM,MAAmB,MAAM;CAC/B,MAAM,UAAU,GAAG,gBAAgB,iBAAiB,WAAW,SAAS;CACxE,MAAM,QAAiC;EAAE,GAAG;EAAM,WAAW;CAAQ;CAKrE,IAAI,QAAQ,YAAY,MAAM,SAAS,KAAA,GACrC,MAAM,OAAO;CAEf,OAAO,cAAc,KAAK,KAAK;AACjC"}

package/dist/components/Checkbox/Checkbox.d.mts

@@ -1,6 +1,7 @@
 import { ComponentProps } from "react";
 //#region src/components/Checkbox/Checkbox.d.ts
 type CheckboxProps = Omit<ComponentProps<"input">, "type"> & {
+  /** Render the indeterminate ("mixed") visual state. Purely visual — checked is unaffected. */
   indeterminate?: boolean;
 };
 declare function Checkbox({ className, indeterminate, ref: forwardedRef, ...rest }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLayoutEffect, useRef, type ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { useMergedRef } from \"../../utils/useMergedRef\";\n\nexport type CheckboxProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  indeterminate?: boolean;\n};\n\nexport function Checkbox({\n  className,\n  indeterminate = false,\n  ref: forwardedRef,\n  ...rest\n}: CheckboxProps) {\n  const localRef = useRef<HTMLInputElement>(null);\n\n  // useLayoutEffect syncs .indeterminate before paint, avoiding a ✓-glyph flash on mount.\n  useLayoutEffect(() => {\n    localRef.current!.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  // Both the indeterminate sync above and the caller get the <input> node.\n  const mergedRef = useMergedRef(localRef, forwardedRef);\n\n  return (\n    <input {...rest} ref={mergedRef} type=\"checkbox\" className={cx(\"ps1ui-checkbox\", className)} />\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,SAAS,EACvB,WACA,gBAAgB,OAChB,KAAK,cACL,GAAG,QACa;CAChB,MAAM,WAAW,OAAyB,IAAI;CAG9C,sBAAsB;EACpB,SAAS,QAAS,gBAAgB;CACpC,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,YAAY,aAAa,UAAU,YAAY;CAErD,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,KAAK;EAAW,MAAK;EAAW,WAAW,GAAG,kBAAkB,SAAS;CAAI,CAAA;AAElG"}
+{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLayoutEffect, useRef, type ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { useMergedRef } from \"../../utils/useMergedRef\";\n\nexport type CheckboxProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  /** Render the indeterminate (\"mixed\") visual state. Purely visual — checked is unaffected. */\n  indeterminate?: boolean;\n};\n\nexport function Checkbox({\n  className,\n  indeterminate = false,\n  ref: forwardedRef,\n  ...rest\n}: CheckboxProps) {\n  const localRef = useRef<HTMLInputElement>(null);\n\n  // useLayoutEffect syncs .indeterminate before paint, avoiding a ✓-glyph flash on mount.\n  useLayoutEffect(() => {\n    localRef.current!.indeterminate = indeterminate;\n  }, [indeterminate]);\n\n  // Both the indeterminate sync above and the caller get the <input> node.\n  const mergedRef = useMergedRef(localRef, forwardedRef);\n\n  return (\n    <input {...rest} ref={mergedRef} type=\"checkbox\" className={cx(\"ps1ui-checkbox\", className)} />\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,SAAS,EACvB,WACA,gBAAgB,OAChB,KAAK,cACL,GAAG,QACa;CAChB,MAAM,WAAW,OAAyB,IAAI;CAG9C,sBAAsB;EACpB,SAAS,QAAS,gBAAgB;CACpC,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,YAAY,aAAa,UAAU,YAAY;CAErD,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,KAAK;EAAW,MAAK;EAAW,WAAW,GAAG,kBAAkB,SAAS;CAAI,CAAA;AAElG"}

package/dist/components/CodeBlock/CodeBlock.d.mts

@@ -2,8 +2,11 @@ import { CodeBlockLanguage } from "./refractor.mjs";
 import { ComponentProps } from "react";
 //#region src/components/CodeBlock/CodeBlock.d.ts
 type CodeBlockProps = Omit<ComponentProps<"pre">, "children"> & {
+  /** Code to render. Takes precedence over children; use it where JSX children get rewrapped (e.g. Astro islands). */
   code?: string;
+  /** Code to render, as the element's only child. */
   children?: string;
+  /** Prism language name or alias. Unknown or omitted values render as plain text. */
   language?: CodeBlockLanguage | (string & {});
 };
 declare function CodeBlock({ code, children, language, className, onBlur, ref: forwardedRef, ...rest }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/CodeBlock/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, useLayoutEffect, useMemo, type ComponentProps } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nimport { toJsxRuntime } from \"hast-util-to-jsx-runtime\";\nimport { cx } from \"../../utils/cx\";\nimport { useMergedRef } from \"../../utils/useMergedRef\";\nimport { useScrollableFocus } from \"../../utils/useScrollableFocus\";\nimport { refractor, type CodeBlockLanguage } from \"./refractor\";\n\nexport type { CodeBlockLanguage };\n\n// `language` is a new prop (not the native HTML `lang` attribute). HTML `lang`\n// is a BCP47 natural-language tag (\"en\", \"ja\") — a different concept that\n// remains part of the base <pre> attrs and passes through untouched. See\n// CodeBlock.test.tsx for the passthrough assertion.\n//\n// `code` is an alternative to `children` for environments that wrap JSX\n// children on the way to a React tree — e.g. Astro's `.astro` → React island\n// boundary rewraps `children` as an AstroComponentInstance, breaking the\n// `children: string` contract. Named props are passed through as-is, so\n// `<CodeBlock code={snippet}>` survives that boundary. `code` wins when both\n// are supplied; the same string appears in the rendered DOM either way.\nexport type CodeBlockProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n  code?: string;\n  children?: string;\n  // `CodeBlockLanguage | (string & {})` is TypeScript's \"loose union\" pattern:\n  // canonical language names surface in autocomplete, but aliases (`ts`, `html`, ...)\n  // and dynamically-sourced strings (e.g. from a markdown fenced-code parser) still\n  // pass through the type and are resolved at runtime via refractor's alias table.\n  language?: CodeBlockLanguage | (string & {});\n};\n\nexport function CodeBlock({\n  code,\n  children,\n  language,\n  className,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: CodeBlockProps) {\n  // `code` takes precedence — see the type doc for the Astro/RSC-wrapped-children\n  // rationale. Empty string is the \"neither provided\" fallback so the component\n  // renders a valid empty <pre> instead of throwing on `.highlight(undefined)`.\n  const source = code ?? children ?? \"\";\n  // `registered` captures both \"language was provided\" and \"refractor knows it\" —\n  // used for the highlight path, the language-<x> class, and to keep the class\n  // off unhighlighted blocks (so downstream tools and consumer Prism themes\n  // don't mistake a raw-text fallback for a highlighted block).\n  //\n  // useMemo keyed on (children, language) collapses repeated tokenization when a\n  // frequently-re-rendering parent forces this component to re-render with the\n  // same code — Prism tokenization of a multi-KB snippet + hast → JSX rebuild\n  // is not cheap.\n  const { highlighted, registered } = useMemo(() => {\n    const isRegistered = !!language && refractor.registered(language);\n    return {\n      registered: isRegistered,\n      highlighted: isRegistered\n        ? toJsxRuntime(refractor.highlight(source, language), { Fragment, jsx, jsxs })\n        : source,\n    };\n  }, [source, language]);\n\n  // Keyboard reachability of the <pre> (its own scroll container) — tabIndex\n  // only while the code actually overflows, kept while focused, safe-side\n  // under static SSR — is the shared useScrollableFocus contract (see the\n  // hook's header for the full account). The overflowing content is the\n  // inline <code>, whose box a ResizeObserver can't watch, so content-driven\n  // re-measures are keyed on the source string instead.\n  const { scrollerRef, tabIndex, measure } = useScrollableFocus<HTMLPreElement>();\n  useLayoutEffect(() => measure(), [measure, source]);\n\n  // Merge the caller's ref with the hook's so both get the <pre> node.\n  const mergedRef = useMergedRef(scrollerRef, forwardedRef);\n\n  return (\n    <pre\n      // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- axe scrollable-region-focusable requires the <pre> be keyboard-reachable when its content overflows; useScrollableFocus gates this on measured overflow so short snippets stay out of the tab order.\n      tabIndex={tabIndex}\n      {...rest}\n      ref={mergedRef}\n      className={cx(\"ps1ui-codeblock\", className)}\n      // Chained (not spread) so the caller's handler still runs: the\n      // re-measure drops the kept-while-focused tab stop once focus leaves —\n      // see useScrollableFocus.\n      onBlur={(event) => {\n        onBlur?.(event);\n        measure();\n      }}\n    >\n      <code className={registered ? `language-${language}` : undefined}>{highlighted}</code>\n    </pre>\n  );\n}\n"],"mappings":";;;;;;;;;AAiCA,SAAgB,UAAU,EACxB,MACA,UACA,UACA,WACA,QACA,KAAK,cACL,GAAG,QACc;CAIjB,MAAM,SAAS,QAAQ,YAAY;CAUnC,MAAM,EAAE,aAAa,eAAe,cAAc;EAChD,MAAM,eAAe,CAAC,CAAC,YAAY,UAAU,WAAW,QAAQ;EAChE,OAAO;GACL,YAAY;GACZ,aAAa,eACT,aAAa,UAAU,UAAU,QAAQ,QAAQ,GAAG;IAAE;IAAU;IAAK;GAAK,CAAC,IAC3E;EACN;CACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAQrB,MAAM,EAAE,aAAa,UAAU,YAAY,mBAAmC;CAC9E,sBAAsB,QAAQ,GAAG,CAAC,SAAS,MAAM,CAAC;CAGlD,MAAM,YAAY,aAAa,aAAa,YAAY;CAExD,OACE,oBAAC,OAAD;EAEY;EACV,GAAI;EACJ,KAAK;EACL,WAAW,GAAG,mBAAmB,SAAS;EAI1C,SAAS,UAAU;GACjB,SAAS,KAAK;GACd,QAAQ;EACV;YAEA,oBAAC,QAAD;GAAM,WAAW,aAAa,YAAY,aAAa,KAAA;aAAY;EAAkB,CAAA;CAClF,CAAA;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, useLayoutEffect, useMemo, type ComponentProps } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nimport { toJsxRuntime } from \"hast-util-to-jsx-runtime\";\nimport { cx } from \"../../utils/cx\";\nimport { useMergedRef } from \"../../utils/useMergedRef\";\nimport { useScrollableFocus } from \"../../utils/useScrollableFocus\";\nimport { refractor, type CodeBlockLanguage } from \"./refractor\";\n\nexport type { CodeBlockLanguage };\n\n// `language` is a new prop (not the native HTML `lang` attribute). HTML `lang`\n// is a BCP47 natural-language tag (\"en\", \"ja\") — a different concept that\n// remains part of the base <pre> attrs and passes through untouched. See\n// CodeBlock.test.tsx for the passthrough assertion.\n//\n// `code` is an alternative to `children` for environments that wrap JSX\n// children on the way to a React tree — e.g. Astro's `.astro` → React island\n// boundary rewraps `children` as an AstroComponentInstance, breaking the\n// `children: string` contract. Named props are passed through as-is, so\n// `<CodeBlock code={snippet}>` survives that boundary. `code` wins when both\n// are supplied; the same string appears in the rendered DOM either way.\nexport type CodeBlockProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n  /** Code to render. Takes precedence over children; use it where JSX children get rewrapped (e.g. Astro islands). */\n  code?: string;\n  /** Code to render, as the element's only child. */\n  children?: string;\n  // `CodeBlockLanguage | (string & {})` is TypeScript's \"loose union\" pattern:\n  // canonical language names surface in autocomplete, but aliases (`ts`, `html`, ...)\n  // and dynamically-sourced strings (e.g. from a markdown fenced-code parser) still\n  // pass through the type and are resolved at runtime via refractor's alias table.\n  /** Prism language name or alias. Unknown or omitted values render as plain text. */\n  language?: CodeBlockLanguage | (string & {});\n};\n\nexport function CodeBlock({\n  code,\n  children,\n  language,\n  className,\n  onBlur,\n  ref: forwardedRef,\n  ...rest\n}: CodeBlockProps) {\n  // `code` takes precedence — see the type doc for the Astro/RSC-wrapped-children\n  // rationale. Empty string is the \"neither provided\" fallback so the component\n  // renders a valid empty <pre> instead of throwing on `.highlight(undefined)`.\n  const source = code ?? children ?? \"\";\n  // `registered` captures both \"language was provided\" and \"refractor knows it\" —\n  // used for the highlight path, the language-<x> class, and to keep the class\n  // off unhighlighted blocks (so downstream tools and consumer Prism themes\n  // don't mistake a raw-text fallback for a highlighted block).\n  //\n  // useMemo keyed on (children, language) collapses repeated tokenization when a\n  // frequently-re-rendering parent forces this component to re-render with the\n  // same code — Prism tokenization of a multi-KB snippet + hast → JSX rebuild\n  // is not cheap.\n  const { highlighted, registered } = useMemo(() => {\n    const isRegistered = !!language && refractor.registered(language);\n    return {\n      registered: isRegistered,\n      highlighted: isRegistered\n        ? toJsxRuntime(refractor.highlight(source, language), { Fragment, jsx, jsxs })\n        : source,\n    };\n  }, [source, language]);\n\n  // Keyboard reachability of the <pre> (its own scroll container) — tabIndex\n  // only while the code actually overflows, kept while focused, safe-side\n  // under static SSR — is the shared useScrollableFocus contract (see the\n  // hook's header for the full account). The overflowing content is the\n  // inline <code>, whose box a ResizeObserver can't watch, so content-driven\n  // re-measures are keyed on the source string instead.\n  const { scrollerRef, tabIndex, measure } = useScrollableFocus<HTMLPreElement>();\n  useLayoutEffect(() => measure(), [measure, source]);\n\n  // Merge the caller's ref with the hook's so both get the <pre> node.\n  const mergedRef = useMergedRef(scrollerRef, forwardedRef);\n\n  return (\n    <pre\n      // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- axe scrollable-region-focusable requires the <pre> be keyboard-reachable when its content overflows; useScrollableFocus gates this on measured overflow so short snippets stay out of the tab order.\n      tabIndex={tabIndex}\n      {...rest}\n      ref={mergedRef}\n      className={cx(\"ps1ui-codeblock\", className)}\n      // Chained (not spread) so the caller's handler still runs: the\n      // re-measure drops the kept-while-focused tab stop once focus leaves —\n      // see useScrollableFocus.\n      onBlur={(event) => {\n        onBlur?.(event);\n        measure();\n      }}\n    >\n      <code className={registered ? `language-${language}` : undefined}>{highlighted}</code>\n    </pre>\n  );\n}\n"],"mappings":";;;;;;;;;AAoCA,SAAgB,UAAU,EACxB,MACA,UACA,UACA,WACA,QACA,KAAK,cACL,GAAG,QACc;CAIjB,MAAM,SAAS,QAAQ,YAAY;CAUnC,MAAM,EAAE,aAAa,eAAe,cAAc;EAChD,MAAM,eAAe,CAAC,CAAC,YAAY,UAAU,WAAW,QAAQ;EAChE,OAAO;GACL,YAAY;GACZ,aAAa,eACT,aAAa,UAAU,UAAU,QAAQ,QAAQ,GAAG;IAAE;IAAU;IAAK;GAAK,CAAC,IAC3E;EACN;CACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAQrB,MAAM,EAAE,aAAa,UAAU,YAAY,mBAAmC;CAC9E,sBAAsB,QAAQ,GAAG,CAAC,SAAS,MAAM,CAAC;CAGlD,MAAM,YAAY,aAAa,aAAa,YAAY;CAExD,OACE,oBAAC,OAAD;EAEY;EACV,GAAI;EACJ,KAAK;EACL,WAAW,GAAG,mBAAmB,SAAS;EAI1C,SAAS,UAAU;GACjB,SAAS,KAAK;GACd,QAAQ;EACV;YAEA,oBAAC,QAAD;GAAM,WAAW,aAAa,YAAY,aAAa,KAAA;aAAY;EAAkB,CAAA;CAClF,CAAA;AAET"}

package/dist/components/Container/Container.d.mts

@@ -4,7 +4,15 @@ import { ComponentProps } from "react";
 //#region src/components/Container/Container.d.ts
 type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
 type ContainerProps = ComponentProps<"div"> & {
+  /**
+   * Max-width preset; "full" removes the cap.
+   * @default "lg"
+   */
   size?: Responsive<ContainerSize>;
+  /**
+   * Horizontal padding on the space scale.
+   * @default "lg"
+   */
   px?: Responsive<SpaceScale>;
 };
 declare function Container({ size, px, className, style, ...rest }: ContainerProps): import("react").JSX.Element;

package/dist/components/Container/Container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.mjs","names":[],"sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type ContainerSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type ContainerProps = ComponentProps<\"div\"> & {\n  size?: Responsive<ContainerSize>;\n  px?: Responsive<SpaceScale>;\n};\n\n// size → max-width. `full` maps to `none` (unbounded), the rest reference\n// the --ps1ui-container-* max-width tokens in tokens.css.\nconst sizeToVar = (v: ContainerSize): string =>\n  v === \"full\" ? \"none\" : `var(--ps1ui-container-${v})`;\n\nexport function Container({ size, px, className, style, ...rest }: ContainerProps) {\n  const sizeVars = resolveResponsive(size, \"--_container-size\", sizeToVar);\n  const pxVars = resolveResponsive(px, \"--_container-px\", spaceToVar);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...pxVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-container\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAcA,MAAM,aAAa,MACjB,MAAM,SAAS,SAAS,yBAAyB,EAAE;AAErD,SAAgB,UAAU,EAAE,MAAM,IAAI,WAAW,OAAO,GAAG,QAAwB;CACjF,MAAM,WAAW,kBAAkB,MAAM,qBAAqB,SAAS;CACvE,MAAM,SAAS,kBAAkB,IAAI,mBAAmB,UAAU;CAGlE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,OAAO;CAAc,CAAA;AAC1F"}
+{"version":3,"file":"Container.mjs","names":[],"sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type ContainerSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type ContainerProps = ComponentProps<\"div\"> & {\n  /**\n   * Max-width preset; \"full\" removes the cap.\n   * @default \"lg\"\n   */\n  size?: Responsive<ContainerSize>;\n  /**\n   * Horizontal padding on the space scale.\n   * @default \"lg\"\n   */\n  px?: Responsive<SpaceScale>;\n};\n\n// size → max-width. `full` maps to `none` (unbounded), the rest reference\n// the --ps1ui-container-* max-width tokens in tokens.css.\nconst sizeToVar = (v: ContainerSize): string =>\n  v === \"full\" ? \"none\" : `var(--ps1ui-container-${v})`;\n\nexport function Container({ size, px, className, style, ...rest }: ContainerProps) {\n  const sizeVars = resolveResponsive(size, \"--_container-size\", sizeToVar);\n  const pxVars = resolveResponsive(px, \"--_container-px\", spaceToVar);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...pxVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-container\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAsBA,MAAM,aAAa,MACjB,MAAM,SAAS,SAAS,yBAAyB,EAAE;AAErD,SAAgB,UAAU,EAAE,MAAM,IAAI,WAAW,OAAO,GAAG,QAAwB;CACjF,MAAM,WAAW,kBAAkB,MAAM,qBAAqB,SAAS;CACvE,MAAM,SAAS,kBAAkB,IAAI,mBAAmB,UAAU;CAGlE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,OAAO;CAAc,CAAA;AAC1F"}

package/dist/components/Details/Details.d.mts

@@ -1,6 +1,7 @@
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/Details/Details.d.ts
 type DetailsProps = ComponentProps<"details"> & {
+  /** Content of the always-visible summary row. */
   summary: ReactNode;
 };
 declare function Details({ summary, children, className, ...rest }: DetailsProps): import("react").JSX.Element;

package/dist/components/Details/Details.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Details.mjs","names":[],"sources":["../../../src/components/Details/Details.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type DetailsProps = ComponentProps<\"details\"> & {\n  summary: ReactNode;\n};\n\nexport function Details({ summary, children, className, ...rest }: DetailsProps) {\n  return (\n    <details {...rest} className={cx(\"ps1ui-details\", className)}>\n      <summary className=\"ps1ui-details__summary\">{summary}</summary>\n      <div className=\"ps1ui-details__body\">{children}</div>\n    </details>\n  );\n}\n"],"mappings":";;;AAOA,SAAgB,QAAQ,EAAE,SAAS,UAAU,WAAW,GAAG,QAAsB;CAC/E,OACE,qBAAC,WAAD;EAAS,GAAI;EAAM,WAAW,GAAG,iBAAiB,SAAS;YAA3D,CACE,oBAAC,WAAD;GAAS,WAAU;aAA0B;EAAiB,CAAA,GAC9D,oBAAC,OAAD;GAAK,WAAU;GAAuB;EAAc,CAAA,CAC7C;;AAEb"}
+{"version":3,"file":"Details.mjs","names":[],"sources":["../../../src/components/Details/Details.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type DetailsProps = ComponentProps<\"details\"> & {\n  /** Content of the always-visible summary row. */\n  summary: ReactNode;\n};\n\nexport function Details({ summary, children, className, ...rest }: DetailsProps) {\n  return (\n    <details {...rest} className={cx(\"ps1ui-details\", className)}>\n      <summary className=\"ps1ui-details__summary\">{summary}</summary>\n      <div className=\"ps1ui-details__body\">{children}</div>\n    </details>\n  );\n}\n"],"mappings":";;;AAQA,SAAgB,QAAQ,EAAE,SAAS,UAAU,WAAW,GAAG,QAAsB;CAC/E,OACE,qBAAC,WAAD;EAAS,GAAI;EAAM,WAAW,GAAG,iBAAiB,SAAS;YAA3D,CACE,oBAAC,WAAD;GAAS,WAAU;aAA0B;EAAiB,CAAA,GAC9D,oBAAC,OAAD;GAAK,WAAU;GAAuB;EAAc,CAAA,CAC7C;;AAEb"}

package/dist/components/Grid/Grid.d.mts

@@ -4,7 +4,15 @@ import { ComponentProps } from "react";
 //#region src/components/Grid/Grid.d.ts
 type GridGap = SpaceScale;
 type GridProps = ComponentProps<"div"> & {
+  /**
+   * Number of equal-width columns.
+   * @default 1
+   */
   columns?: Responsive<number>;
+  /**
+   * Gap between cells on the space scale.
+   * @default "md"
+   */
   gap?: Responsive<GridGap>;
 };
 declare function Grid({ columns, gap, className, style, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","names":[],"sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { safePositiveInt } from \"../../utils/numbers\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type GridGap = SpaceScale;\n\nexport type GridProps = ComponentProps<\"div\"> & {\n  columns?: Responsive<number>;\n  gap?: Responsive<GridGap>;\n};\n\nexport function Grid({ columns, gap, className, style, ...rest }: GridProps) {\n  // `repeat(N, ...)` requires N ≥ 1 integer — `safePositiveInt` clamps at\n  // the system boundary. See utils/numbers.ts for the full rationale.\n  const columnsVars = resolveResponsive(columns, \"--_grid-columns\", safePositiveInt);\n  const gapVars = resolveResponsive(gap, \"--_grid-gap\", spaceToVar);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...columnsVars,\n    ...gapVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-grid\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;;AAaA,SAAgB,KAAK,EAAE,SAAS,KAAK,WAAW,OAAO,GAAG,QAAmB;CAG3E,MAAM,cAAc,kBAAkB,SAAS,mBAAmB,eAAe;CACjF,MAAM,UAAU,kBAAkB,KAAK,eAAe,UAAU;CAGhE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,cAAc,SAAS;EAAG,OAAO;CAAc,CAAA;AACrF"}
+{"version":3,"file":"Grid.mjs","names":[],"sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { safePositiveInt } from \"../../utils/numbers\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type GridGap = SpaceScale;\n\nexport type GridProps = ComponentProps<\"div\"> & {\n  /**\n   * Number of equal-width columns.\n   * @default 1\n   */\n  columns?: Responsive<number>;\n  /**\n   * Gap between cells on the space scale.\n   * @default \"md\"\n   */\n  gap?: Responsive<GridGap>;\n};\n\nexport function Grid({ columns, gap, className, style, ...rest }: GridProps) {\n  // `repeat(N, ...)` requires N ≥ 1 integer — `safePositiveInt` clamps at\n  // the system boundary. See utils/numbers.ts for the full rationale.\n  const columnsVars = resolveResponsive(columns, \"--_grid-columns\", safePositiveInt);\n  const gapVars = resolveResponsive(gap, \"--_grid-gap\", spaceToVar);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...columnsVars,\n    ...gapVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-grid\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,KAAK,EAAE,SAAS,KAAK,WAAW,OAAO,GAAG,QAAmB;CAG3E,MAAM,cAAc,kBAAkB,SAAS,mBAAmB,eAAe;CACjF,MAAM,UAAU,kBAAkB,KAAK,eAAe,UAAU;CAGhE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,cAAc,SAAS;EAAG,OAAO;CAAc,CAAA;AACrF"}

package/dist/components/GridItem/GridItem.d.mts

@@ -2,6 +2,10 @@ import { Responsive } from "../../utils/responsive.mjs";
 import { ComponentProps } from "react";
 //#region src/components/GridItem/GridItem.d.ts
 type GridItemProps = ComponentProps<"div"> & {
+  /**
+   * Number of grid columns the item spans.
+   * @default 1
+   */
   colSpan?: Responsive<number>;
 };
 declare function GridItem({ colSpan, className, style, ...rest }: GridItemProps): import("react").JSX.Element;

package/dist/components/GridItem/GridItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.mjs","names":[],"sources":["../../../src/components/GridItem/GridItem.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { safePositiveInt } from \"../../utils/numbers\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\n\nexport type GridItemProps = ComponentProps<\"div\"> & {\n  colSpan?: Responsive<number>;\n};\n\nexport function GridItem({ colSpan, className, style, ...rest }: GridItemProps) {\n  // `grid-column: span N` requires N ≥ 1 integer — `safePositiveInt` clamps\n  // at the system boundary. See utils/numbers.ts for the full rationale.\n  const colSpanVars = resolveResponsive(colSpan, \"--_griditem-col-span\", safePositiveInt);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...colSpanVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-griditem\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AASA,SAAgB,SAAS,EAAE,SAAS,WAAW,OAAO,GAAG,QAAuB;CAG9E,MAAM,cAAc,kBAAkB,SAAS,wBAAwB,eAAe;CAGtF,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,kBAAkB,SAAS;EAAG,OAAO;CAAc,CAAA;AACzF"}
+{"version":3,"file":"GridItem.mjs","names":[],"sources":["../../../src/components/GridItem/GridItem.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { safePositiveInt } from \"../../utils/numbers\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\n\nexport type GridItemProps = ComponentProps<\"div\"> & {\n  /**\n   * Number of grid columns the item spans.\n   * @default 1\n   */\n  colSpan?: Responsive<number>;\n};\n\nexport function GridItem({ colSpan, className, style, ...rest }: GridItemProps) {\n  // `grid-column: span N` requires N ≥ 1 integer — `safePositiveInt` clamps\n  // at the system boundary. See utils/numbers.ts for the full rationale.\n  const colSpanVars = resolveResponsive(colSpan, \"--_griditem-col-span\", safePositiveInt);\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...colSpanVars,\n  } as CSSProperties;\n  return <div {...rest} className={cx(\"ps1ui-griditem\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAaA,SAAgB,SAAS,EAAE,SAAS,WAAW,OAAO,GAAG,QAAuB;CAG9E,MAAM,cAAc,kBAAkB,SAAS,wBAAwB,eAAe;CAGtF,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;CACL;CACA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,kBAAkB,SAAS;EAAG,OAAO;CAAc,CAAA;AACzF"}

package/dist/components/Heading/Heading.d.mts

@@ -7,9 +7,13 @@ type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 type HeadingSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 type HeadingWeight = FontWeight;
 type HeadingOwnProps<E extends HeadingElement> = {
+  /** Semantic level: renders the matching h1–h6 tag and sets the default size and weight. */
   level: HeadingLevel;
+  /** Heading tag to render when it should differ from level — visual defaults stay driven by level. */
   as?: E;
+  /** Font size. Defaults to the level's size. */
   size?: Responsive<HeadingSize>;
+  /** Font weight. Defaults to the level's weight. */
   weight?: Responsive<HeadingWeight>;
 };
 type HeadingProps<E extends HeadingElement = HeadingElement> = HeadingOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps<E>>;

package/dist/components/Heading/Heading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, withResponsiveBase, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nexport type HeadingSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n// HeadingWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type HeadingWeight = FontWeight;\n\ntype HeadingOwnProps<E extends HeadingElement> = {\n  level: HeadingLevel;\n  as?: E;\n  size?: Responsive<HeadingSize>;\n  weight?: Responsive<HeadingWeight>;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Text: with a polymorphic `as` prop TypeScript cannot correctly narrow the\n// `ref` type. All h1-h6 do resolve to HTMLHeadingElement so ref would happen to work today, but\n// keeping the polymorphic pattern consistent avoids surprises if the tag set ever widens.\nexport type HeadingProps<E extends HeadingElement = HeadingElement> = HeadingOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps<E>>;\n\n// Exhaustive over HeadingLevel so a new level cannot be added without classifying its defaults.\nconst LEVEL_DEFAULTS: Record<HeadingLevel, { size: HeadingSize; weight: HeadingWeight }> = {\n  1: { size: \"3xl\", weight: \"bold\" },\n  2: { size: \"2xl\", weight: \"semibold\" },\n  3: { size: \"xl\", weight: \"semibold\" },\n  4: { size: \"lg\", weight: \"semibold\" },\n  5: { size: \"md\", weight: \"medium\" },\n  6: { size: \"sm\", weight: \"medium\" },\n};\n\nexport function Heading<E extends HeadingElement = HeadingElement>({\n  level,\n  as,\n  size: sizeProp,\n  weight: weightProp,\n  className,\n  style,\n  ...rest\n}: HeadingProps<E>) {\n  const tag = as ?? (`h${level}` as HeadingElement);\n  const defaults = LEVEL_DEFAULTS[level];\n  // `withResponsiveBase` bakes the level's default in at the `base`\n  // breakpoint when the caller either omits the prop entirely or passes a\n  // responsive object with no `base` entry. Concretely, `<Heading level={1}\n  // size={{ md: \"2xl\" }}>` renders as level 1's default `3xl` at base, then\n  // `2xl` at the md breakpoint — matching the intuition \"level sets the\n  // default; the object overrides at specific widths\".\n  const size = withResponsiveBase(sizeProp, defaults.size);\n  const weight = withResponsiveBase(weightProp, defaults.weight);\n\n  const sizeVars = resolveResponsive(size, \"--_heading-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_heading-weight\", weightToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, {\n    ...rest,\n    className: cx(\"ps1ui-heading\", className),\n    style: mergedStyle,\n  });\n}\n"],"mappings":";;;;;AA8BA,MAAM,iBAAqF;CACzF,GAAG;EAAE,MAAM;EAAO,QAAQ;CAAO;CACjC,GAAG;EAAE,MAAM;EAAO,QAAQ;CAAW;CACrC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAW;CACpC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAW;CACpC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAS;CAClC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAS;AACpC;AAEA,SAAgB,QAAmD,EACjE,OACA,IACA,MAAM,UACN,QAAQ,YACR,WACA,OACA,GAAG,QACe;CAClB,MAAM,MAAM,MAAO,IAAI;CACvB,MAAM,WAAW,eAAe;CAOhC,MAAM,OAAO,mBAAmB,UAAU,SAAS,IAAI;CACvD,MAAM,SAAS,mBAAmB,YAAY,SAAS,MAAM;CAE7D,MAAM,WAAW,kBAAkB,MAAM,mBAAmB,aAAa;CACzE,MAAM,aAAa,kBAAkB,QAAQ,qBAAqB,aAAa;CAI/E,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EACxB,GAAG;EACH,WAAW,GAAG,iBAAiB,SAAS;EACxC,OAAO;CACT,CAAC;AACH"}
+{"version":3,"file":"Heading.mjs","names":[],"sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, withResponsiveBase, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nexport type HeadingSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n// HeadingWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type HeadingWeight = FontWeight;\n\ntype HeadingOwnProps<E extends HeadingElement> = {\n  /** Semantic level: renders the matching h1–h6 tag and sets the default size and weight. */\n  level: HeadingLevel;\n  /** Heading tag to render when it should differ from level — visual defaults stay driven by level. */\n  as?: E;\n  /** Font size. Defaults to the level's size. */\n  size?: Responsive<HeadingSize>;\n  /** Font weight. Defaults to the level's weight. */\n  weight?: Responsive<HeadingWeight>;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow —\n// same reasoning as Text: with a polymorphic `as` prop TypeScript cannot correctly narrow the\n// `ref` type. All h1-h6 do resolve to HTMLHeadingElement so ref would happen to work today, but\n// keeping the polymorphic pattern consistent avoids surprises if the tag set ever widens.\nexport type HeadingProps<E extends HeadingElement = HeadingElement> = HeadingOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps<E>>;\n\n// Exhaustive over HeadingLevel so a new level cannot be added without classifying its defaults.\nconst LEVEL_DEFAULTS: Record<HeadingLevel, { size: HeadingSize; weight: HeadingWeight }> = {\n  1: { size: \"3xl\", weight: \"bold\" },\n  2: { size: \"2xl\", weight: \"semibold\" },\n  3: { size: \"xl\", weight: \"semibold\" },\n  4: { size: \"lg\", weight: \"semibold\" },\n  5: { size: \"md\", weight: \"medium\" },\n  6: { size: \"sm\", weight: \"medium\" },\n};\n\nexport function Heading<E extends HeadingElement = HeadingElement>({\n  level,\n  as,\n  size: sizeProp,\n  weight: weightProp,\n  className,\n  style,\n  ...rest\n}: HeadingProps<E>) {\n  const tag = as ?? (`h${level}` as HeadingElement);\n  const defaults = LEVEL_DEFAULTS[level];\n  // `withResponsiveBase` bakes the level's default in at the `base`\n  // breakpoint when the caller either omits the prop entirely or passes a\n  // responsive object with no `base` entry. Concretely, `<Heading level={1}\n  // size={{ md: \"2xl\" }}>` renders as level 1's default `3xl` at base, then\n  // `2xl` at the md breakpoint — matching the intuition \"level sets the\n  // default; the object overrides at specific widths\".\n  const size = withResponsiveBase(sizeProp, defaults.size);\n  const weight = withResponsiveBase(weightProp, defaults.weight);\n\n  const sizeVars = resolveResponsive(size, \"--_heading-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_heading-weight\", weightToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, {\n    ...rest,\n    className: cx(\"ps1ui-heading\", className),\n    style: mergedStyle,\n  });\n}\n"],"mappings":";;;;;AAkCA,MAAM,iBAAqF;CACzF,GAAG;EAAE,MAAM;EAAO,QAAQ;CAAO;CACjC,GAAG;EAAE,MAAM;EAAO,QAAQ;CAAW;CACrC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAW;CACpC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAW;CACpC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAS;CAClC,GAAG;EAAE,MAAM;EAAM,QAAQ;CAAS;AACpC;AAEA,SAAgB,QAAmD,EACjE,OACA,IACA,MAAM,UACN,QAAQ,YACR,WACA,OACA,GAAG,QACe;CAClB,MAAM,MAAM,MAAO,IAAI;CACvB,MAAM,WAAW,eAAe;CAOhC,MAAM,OAAO,mBAAmB,UAAU,SAAS,IAAI;CACvD,MAAM,SAAS,mBAAmB,YAAY,SAAS,MAAM;CAE7D,MAAM,WAAW,kBAAkB,MAAM,mBAAmB,aAAa;CACzE,MAAM,aAAa,kBAAkB,QAAQ,qBAAqB,aAAa;CAI/E,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EACxB,GAAG;EACH,WAAW,GAAG,iBAAiB,SAAS;EACxC,OAAO;CACT,CAAC;AACH"}

package/dist/components/List/List.d.mts

@@ -1,8 +1,10 @@
 import { ComponentProps, ReactElement } from "react";
 //#region src/components/List/List.d.ts
 type ListProps = ({
+  /** Render an <ol> with numbered markers instead of an <ul>. */
   ordered?: false;
 } & ComponentProps<"ul">) | ({
+  /** Render an <ol> with numbered markers instead of an <ul>. */
   ordered: true;
 } & Omit<ComponentProps<"ol">, "type">);
 declare function List(props: ListProps): ReactElement;

package/dist/components/List/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\n// Discriminated union: an unordered <List> shouldn't typecheck with <ol>-only\n// attributes (start / reversed) and shouldn't type its ref as HTMLOListElement.\n// `type` is dropped from the ordered variant because the visible marker is\n// drawn by `::before`, not the browser's `::marker`, so `type=\"a\"` would\n// silently not affect the visible numbering.\nexport type ListProps =\n  | ({ ordered?: false } & ComponentProps<\"ul\">)\n  | ({ ordered: true } & Omit<ComponentProps<\"ol\">, \"type\">);\n\n// Return type annotated so tsdown emits a small ReactElement in the .d.mts\n// instead of the wide DetailedReactHTMLElement createElement infers for a\n// `\"ol\" | \"ul\"` tag union.\nexport function List(props: ListProps): ReactElement {\n  const { ordered = false, className, ...rest } = props;\n  const tag = ordered ? \"ol\" : \"ul\";\n  return createElement(tag, {\n    // Safari's a11y tree drops list semantics (\"list, N items\") when the\n    // computed `list-style-type` is `none` — the global reset applies that,\n    // so `role=\"list\"` restores VoiceOver's announcement. Placed before\n    // `...rest` so a caller can override with a different role.\n    role: \"list\",\n    ...rest,\n    className: cx(\n      \"ps1ui-list\",\n      ordered ? \"ps1ui-list--ordered\" : \"ps1ui-list--unordered\",\n      className,\n    ),\n  });\n}\n"],"mappings":";;;AAgBA,SAAgB,KAAK,OAAgC;CACnD,MAAM,EAAE,UAAU,OAAO,WAAW,GAAG,SAAS;CAEhD,OAAO,cADK,UAAU,OAAO,MACH;EAKxB,MAAM;EACN,GAAG;EACH,WAAW,GACT,cACA,UAAU,wBAAwB,yBAClC,SACF;CACF,CAAC;AACH"}
+{"version":3,"file":"List.mjs","names":[],"sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentProps, ReactElement } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\n// Discriminated union: an unordered <List> shouldn't typecheck with <ol>-only\n// attributes (start / reversed) and shouldn't type its ref as HTMLOListElement.\n// `type` is dropped from the ordered variant because the visible marker is\n// drawn by `::before`, not the browser's `::marker`, so `type=\"a\"` would\n// silently not affect the visible numbering.\nexport type ListProps =\n  | ({\n      /** Render an <ol> with numbered markers instead of an <ul>. */\n      ordered?: false;\n    } & ComponentProps<\"ul\">)\n  | ({\n      /** Render an <ol> with numbered markers instead of an <ul>. */\n      ordered: true;\n    } & Omit<ComponentProps<\"ol\">, \"type\">);\n\n// Return type annotated so tsdown emits a small ReactElement in the .d.mts\n// instead of the wide DetailedReactHTMLElement createElement infers for a\n// `\"ol\" | \"ul\"` tag union.\nexport function List(props: ListProps): ReactElement {\n  const { ordered = false, className, ...rest } = props;\n  const tag = ordered ? \"ol\" : \"ul\";\n  return createElement(tag, {\n    // Safari's a11y tree drops list semantics (\"list, N items\") when the\n    // computed `list-style-type` is `none` — the global reset applies that,\n    // so `role=\"list\"` restores VoiceOver's announcement. Placed before\n    // `...rest` so a caller can override with a different role.\n    role: \"list\",\n    ...rest,\n    className: cx(\n      \"ps1ui-list\",\n      ordered ? \"ps1ui-list--ordered\" : \"ps1ui-list--unordered\",\n      className,\n    ),\n  });\n}\n"],"mappings":";;;AAsBA,SAAgB,KAAK,OAAgC;CACnD,MAAM,EAAE,UAAU,OAAO,WAAW,GAAG,SAAS;CAEhD,OAAO,cADK,UAAU,OAAO,MACH;EAKxB,MAAM;EACN,GAAG;EACH,WAAW,GACT,cACA,UAAU,wBAAwB,yBAClC,SACF;CACF,CAAC;AACH"}

package/dist/components/Stack/Stack.d.mts

@@ -7,10 +7,24 @@ type StackGap = SpaceScale;
 type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
 type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
 type StackProps = ComponentProps<"div"> & {
+  /**
+   * Main-axis direction.
+   * @default "column"
+   */
   direction?: Responsive<StackDirection>;
+  /**
+   * Gap between items on the space scale.
+   * @default "md"
+   */
   gap?: Responsive<StackGap>;
+  /** Cross-axis alignment (align-items). */
   align?: Responsive<StackAlign>;
+  /** Main-axis distribution (justify-content). */
   justify?: Responsive<StackJustify>;
+  /**
+   * Wrap items onto multiple lines instead of overflowing.
+   * @default false
+   */
   wrap?: Responsive<boolean>;
 };
 declare function Stack({ direction, gap, align, justify, wrap, className, style, ...rest }: StackProps): import("react").JSX.Element;

package/dist/components/Stack/Stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.mjs","names":[],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = SpaceScale;\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type StackJustify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n\nexport type StackProps = ComponentProps<\"div\"> & {\n  direction?: Responsive<StackDirection>;\n  gap?: Responsive<StackGap>;\n  align?: Responsive<StackAlign>;\n  justify?: Responsive<StackJustify>;\n  wrap?: Responsive<boolean>;\n};\n\n// direction values pass straight through — CSS flex-direction accepts\n// `row` / `column` (and `row-reverse` / `column-reverse`, which the union\n// deliberately excludes; add those to the union if the API ever grows).\nconst directionToValue = (v: StackDirection): string => v;\n\n// Flexbox uses `flex-start` / `flex-end` in the box-alignment spec. The\n// StackAlign union exposes the shorter `start` / `end` alias for terseness;\n// the transform remaps them so the CSS variable holds a valid `align-items`\n// value directly.\nconst alignToValue = (v: StackAlign): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    default:\n      return v;\n  }\n};\n\n// Same treatment as `alignToValue`, plus expansions for the `space-*`\n// justify-content variants.\nconst justifyToValue = (v: StackJustify): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    case \"between\":\n      return \"space-between\";\n    case \"around\":\n      return \"space-around\";\n    case \"evenly\":\n      return \"space-evenly\";\n    default:\n      return v;\n  }\n};\n\n// boolean → CSS flex-wrap keyword.\nconst wrapToValue = (v: boolean): string => (v ? \"wrap\" : \"nowrap\");\n\nexport function Stack({\n  direction,\n  gap,\n  align,\n  justify,\n  wrap,\n  className,\n  style,\n  ...rest\n}: StackProps) {\n  const directionVars = resolveResponsive(direction, \"--_stack-direction\", directionToValue);\n  const gapVars = resolveResponsive(gap, \"--_stack-gap\", spaceToVar);\n  const alignVars = resolveResponsive(align, \"--_stack-align\", alignToValue);\n  const justifyVars = resolveResponsive(justify, \"--_stack-justify\", justifyToValue);\n  const wrapVars = resolveResponsive(wrap, \"--_stack-wrap\", wrapToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...directionVars,\n    ...gapVars,\n    ...alignVars,\n    ...justifyVars,\n    ...wrapVars,\n  } as CSSProperties;\n\n  return <div {...rest} className={cx(\"ps1ui-stack\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAqBA,MAAM,oBAAoB,MAA8B;AAMxD,MAAM,gBAAgB,MAA0B;CAC9C,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAIA,MAAM,kBAAkB,MAA4B;CAClD,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAGA,MAAM,eAAe,MAAwB,IAAI,SAAS;AAE1D,SAAgB,MAAM,EACpB,WACA,KACA,OACA,SACA,MACA,WACA,OACA,GAAG,QACU;CACb,MAAM,gBAAgB,kBAAkB,WAAW,sBAAsB,gBAAgB;CACzF,MAAM,UAAU,kBAAkB,KAAK,gBAAgB,UAAU;CACjE,MAAM,YAAY,kBAAkB,OAAO,kBAAkB,YAAY;CACzE,MAAM,cAAc,kBAAkB,SAAS,oBAAoB,cAAc;CACjF,MAAM,WAAW,kBAAkB,MAAM,iBAAiB,WAAW;CAIrE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,eAAe,SAAS;EAAG,OAAO;CAAc,CAAA;AACtF"}
+{"version":3,"file":"Stack.mjs","names":[],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { spaceToVar, type SpaceScale } from \"../../utils/spacing\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = SpaceScale;\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type StackJustify = \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\";\n\nexport type StackProps = ComponentProps<\"div\"> & {\n  /**\n   * Main-axis direction.\n   * @default \"column\"\n   */\n  direction?: Responsive<StackDirection>;\n  /**\n   * Gap between items on the space scale.\n   * @default \"md\"\n   */\n  gap?: Responsive<StackGap>;\n  /** Cross-axis alignment (align-items). */\n  align?: Responsive<StackAlign>;\n  /** Main-axis distribution (justify-content). */\n  justify?: Responsive<StackJustify>;\n  /**\n   * Wrap items onto multiple lines instead of overflowing.\n   * @default false\n   */\n  wrap?: Responsive<boolean>;\n};\n\n// direction values pass straight through — CSS flex-direction accepts\n// `row` / `column` (and `row-reverse` / `column-reverse`, which the union\n// deliberately excludes; add those to the union if the API ever grows).\nconst directionToValue = (v: StackDirection): string => v;\n\n// Flexbox uses `flex-start` / `flex-end` in the box-alignment spec. The\n// StackAlign union exposes the shorter `start` / `end` alias for terseness;\n// the transform remaps them so the CSS variable holds a valid `align-items`\n// value directly.\nconst alignToValue = (v: StackAlign): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    default:\n      return v;\n  }\n};\n\n// Same treatment as `alignToValue`, plus expansions for the `space-*`\n// justify-content variants.\nconst justifyToValue = (v: StackJustify): string => {\n  switch (v) {\n    case \"start\":\n      return \"flex-start\";\n    case \"end\":\n      return \"flex-end\";\n    case \"between\":\n      return \"space-between\";\n    case \"around\":\n      return \"space-around\";\n    case \"evenly\":\n      return \"space-evenly\";\n    default:\n      return v;\n  }\n};\n\n// boolean → CSS flex-wrap keyword.\nconst wrapToValue = (v: boolean): string => (v ? \"wrap\" : \"nowrap\");\n\nexport function Stack({\n  direction,\n  gap,\n  align,\n  justify,\n  wrap,\n  className,\n  style,\n  ...rest\n}: StackProps) {\n  const directionVars = resolveResponsive(direction, \"--_stack-direction\", directionToValue);\n  const gapVars = resolveResponsive(gap, \"--_stack-gap\", spaceToVar);\n  const alignVars = resolveResponsive(align, \"--_stack-align\", alignToValue);\n  const justifyVars = resolveResponsive(justify, \"--_stack-justify\", justifyToValue);\n  const wrapVars = resolveResponsive(wrap, \"--_stack-wrap\", wrapToValue);\n\n  // Caller style first, internal `--_*` vars win — see Text.tsx. Cast because\n  // csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...directionVars,\n    ...gapVars,\n    ...alignVars,\n    ...justifyVars,\n    ...wrapVars,\n  } as CSSProperties;\n\n  return <div {...rest} className={cx(\"ps1ui-stack\", className)} style={mergedStyle} />;\n}\n"],"mappings":";;;;;AAmCA,MAAM,oBAAoB,MAA8B;AAMxD,MAAM,gBAAgB,MAA0B;CAC9C,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAIA,MAAM,kBAAkB,MAA4B;CAClD,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,KAAK,WACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,KAAK,UACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAGA,MAAM,eAAe,MAAwB,IAAI,SAAS;AAE1D,SAAgB,MAAM,EACpB,WACA,KACA,OACA,SACA,MACA,WACA,OACA,GAAG,QACU;CACb,MAAM,gBAAgB,kBAAkB,WAAW,sBAAsB,gBAAgB;CACzF,MAAM,UAAU,kBAAkB,KAAK,gBAAgB,UAAU;CACjE,MAAM,YAAY,kBAAkB,OAAO,kBAAkB,YAAY;CACzE,MAAM,cAAc,kBAAkB,SAAS,oBAAoB,cAAc;CACjF,MAAM,WAAW,kBAAkB,MAAM,iBAAiB,WAAW;CAIrE,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,eAAe,SAAS;EAAG,OAAO;CAAc,CAAA;AACtF"}

package/dist/components/Text/Text.d.mts

@@ -7,10 +7,18 @@ type TextVariant = "body" | "muted" | "subtle" | "primary" | "accent";
 type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
 type TextWeight = FontWeight;
 type TextOwnProps<E extends TextElement> = {
+  /** Element to render. */
   as?: E;
+  /** Color variant. */
   variant?: TextVariant;
+  /**
+   * Font size on the type scale.
+   * @default "sm"
+   */
   size?: Responsive<TextSize>;
+  /** Font weight. */
   weight?: Responsive<TextWeight>;
+  /** Truncate overflowing text with an ellipsis instead of wrapping. */
   truncate?: boolean;
 };
 type TextProps<E extends TextElement = "p"> = TextOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;

package/dist/components/Text/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type TextElement = \"p\" | \"span\" | \"div\" | \"label\" | \"strong\" | \"em\" | \"small\";\n\nexport type TextVariant = \"body\" | \"muted\" | \"subtle\" | \"primary\" | \"accent\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n// TextWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type TextWeight = FontWeight;\n\ntype TextOwnProps<E extends TextElement> = {\n  as?: E;\n  variant?: TextVariant;\n  size?: Responsive<TextSize>;\n  weight?: Responsive<TextWeight>;\n  truncate?: boolean;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow.\n// With the polymorphic `as` prop, TypeScript cannot narrow the `ref` prop's type against the\n// resolved element E — allowing `ref` here would silently accept mismatched ref types\n// (e.g. a ref typed for HTMLParagraphElement on `<Text as=\"span\" ref={…} />`). Keeping `ref`\n// out of the prop type entirely is safer than a misleading loose type; don't switch this\n// to ComponentProps for consistency with the other components.\nexport type TextProps<E extends TextElement = \"p\"> = TextOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;\n\n// Exhaustive over TextElement so adding a tag without classifying it fails to typecheck,\n// instead of silently leaving truncate's inline-block fix un-applied for that tag.\nconst INLINE_TEXT_ELEMENTS: Record<TextElement, boolean> = {\n  p: false,\n  div: false,\n  span: true,\n  label: true,\n  strong: true,\n  em: true,\n  small: true,\n};\n\nexport function Text<E extends TextElement = \"p\">({\n  as,\n  variant = \"body\",\n  size,\n  weight,\n  truncate = false,\n  className,\n  style,\n  ...rest\n}: TextProps<E>) {\n  const tag = as ?? \"p\";\n  const sizeVars = resolveResponsive(size, \"--_text-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_text-weight\", weightToValue);\n\n  const classes = cx(\n    \"ps1ui-text\",\n    `ps1ui-text--${variant}`,\n    truncate && \"ps1ui-text--truncate\",\n    truncate && INLINE_TEXT_ELEMENTS[tag] && \"ps1ui-text--truncate-inline\",\n    className,\n  );\n\n  // Caller style first, resolved vars last: `--_*` is the reserved internal\n  // prefix and wins on purpose — responsive values are prop-controlled. Cast\n  // because csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, { ...rest, className: classes, style: mergedStyle });\n}\n"],"mappings":";;;;;AAkCA,MAAM,uBAAqD;CACzD,GAAG;CACH,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,IAAI;CACJ,OAAO;AACT;AAEA,SAAgB,KAAkC,EAChD,IACA,UAAU,QACV,MACA,QACA,WAAW,OACX,WACA,OACA,GAAG,QACY;CACf,MAAM,MAAM,MAAM;CAClB,MAAM,WAAW,kBAAkB,MAAM,gBAAgB,aAAa;CACtE,MAAM,aAAa,kBAAkB,QAAQ,kBAAkB,aAAa;CAE5E,MAAM,UAAU,GACd,cACA,eAAe,WACf,YAAY,wBACZ,YAAY,qBAAqB,QAAQ,+BACzC,SACF;CAKA,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;EAAS,OAAO;CAAY,CAAC;AAC/E"}
+{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport { resolveResponsive, type Responsive } from \"../../utils/responsive\";\nimport { fontSizeToVar, weightToValue, type FontWeight } from \"../../utils/typography\";\n\nexport type TextElement = \"p\" | \"span\" | \"div\" | \"label\" | \"strong\" | \"em\" | \"small\";\n\nexport type TextVariant = \"body\" | \"muted\" | \"subtle\" | \"primary\" | \"accent\";\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n// TextWeight is a re-export of the shared FontWeight scale. Keeping a\n// component-local alias preserves the public type name (backwards compat)\n// while the underlying scale stays single-sourced in utils/typography.ts.\nexport type TextWeight = FontWeight;\n\ntype TextOwnProps<E extends TextElement> = {\n  /** Element to render. */\n  as?: E;\n  /** Color variant. */\n  variant?: TextVariant;\n  /**\n   * Font size on the type scale.\n   * @default \"sm\"\n   */\n  size?: Responsive<TextSize>;\n  /** Font weight. */\n  weight?: Responsive<TextWeight>;\n  /** Truncate overflowing text with an ellipsis instead of wrapping. */\n  truncate?: boolean;\n};\n\n// Deliberate exception to the general \"use ComponentProps<'tag'>\" rule other components follow.\n// With the polymorphic `as` prop, TypeScript cannot narrow the `ref` prop's type against the\n// resolved element E — allowing `ref` here would silently accept mismatched ref types\n// (e.g. a ref typed for HTMLParagraphElement on `<Text as=\"span\" ref={…} />`). Keeping `ref`\n// out of the prop type entirely is safer than a misleading loose type; don't switch this\n// to ComponentProps for consistency with the other components.\nexport type TextProps<E extends TextElement = \"p\"> = TextOwnProps<E> &\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;\n\n// Exhaustive over TextElement so adding a tag without classifying it fails to typecheck,\n// instead of silently leaving truncate's inline-block fix un-applied for that tag.\nconst INLINE_TEXT_ELEMENTS: Record<TextElement, boolean> = {\n  p: false,\n  div: false,\n  span: true,\n  label: true,\n  strong: true,\n  em: true,\n  small: true,\n};\n\nexport function Text<E extends TextElement = \"p\">({\n  as,\n  variant = \"body\",\n  size,\n  weight,\n  truncate = false,\n  className,\n  style,\n  ...rest\n}: TextProps<E>) {\n  const tag = as ?? \"p\";\n  const sizeVars = resolveResponsive(size, \"--_text-size\", fontSizeToVar);\n  const weightVars = resolveResponsive(weight, \"--_text-weight\", weightToValue);\n\n  const classes = cx(\n    \"ps1ui-text\",\n    `ps1ui-text--${variant}`,\n    truncate && \"ps1ui-text--truncate\",\n    truncate && INLINE_TEXT_ELEMENTS[tag] && \"ps1ui-text--truncate-inline\",\n    className,\n  );\n\n  // Caller style first, resolved vars last: `--_*` is the reserved internal\n  // prefix and wins on purpose — responsive values are prop-controlled. Cast\n  // because csstype has no index signature for `--*` keys (React 19 included).\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...sizeVars,\n    ...weightVars,\n  } as CSSProperties;\n\n  return createElement(tag, { ...rest, className: classes, style: mergedStyle });\n}\n"],"mappings":";;;;;AA0CA,MAAM,uBAAqD;CACzD,GAAG;CACH,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,IAAI;CACJ,OAAO;AACT;AAEA,SAAgB,KAAkC,EAChD,IACA,UAAU,QACV,MACA,QACA,WAAW,OACX,WACA,OACA,GAAG,QACY;CACf,MAAM,MAAM,MAAM;CAClB,MAAM,WAAW,kBAAkB,MAAM,gBAAgB,aAAa;CACtE,MAAM,aAAa,kBAAkB,QAAQ,kBAAkB,aAAa;CAE5E,MAAM,UAAU,GACd,cACA,eAAe,WACf,YAAY,wBACZ,YAAY,qBAAqB,QAAQ,+BACzC,SACF;CAKA,MAAM,cAA6B;EACjC,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAEA,OAAO,cAAc,KAAK;EAAE,GAAG;EAAM,WAAW;EAAS,OAAO;CAAY,CAAC;AAC/E"}

package/dist/components.css

@@ -782,13 +782,13 @@
   color: var(--ps1ui-color-fg);
 }
 
-/* List — semantic <ul>/<ol> wrapper with terminal-style markers.
+/* List — semantic <ul>/<ol> wrapper with plain-text markers.
 
    The global reset in base.css sets `list-style: none` on every <ul>/<ol>,
    which strips the UA bullet/number glyph. List re-introduces a marker via
    `::before` on each direct <li> — `-` for unordered, `NN.` for ordered —
    so the "reset removes bullets" side effect turns into an on-brand
-   terminal glyph rather than a hole.
+   plain-text glyph rather than a hole.
 
    The ordered marker uses `counter(list-item)` — the browser-maintained
    list-item counter that already honours `<ol start>`, `<ol reversed>`,
@@ -1104,7 +1104,7 @@
   display: none;
 }
 
-/* Terminal-style disclosure marker: `▸` when closed, `▾` when open. Fixed
+/* Glyph disclosure marker: `▸` when closed, `▾` when open. Fixed
    inline-block width so the summary text baseline stays put across states —
    the two glyphs don't measure identically in the JetBrains Mono fallback
    monospace stack. Colored with fg-muted so the arrow reads as chrome, not
@@ -1402,7 +1402,7 @@
   }
 }
 
-/* Table — semantic <table> with terminal-style grid borders, wrapped in a
+/* Table — semantic <table> with box-drawing-style grid borders, wrapped in a
    horizontal-scroll container.
 
    Scroll wrapper: `display: table` boxes don't honor overflow, so Table.tsx
@@ -1414,8 +1414,8 @@
    high-contrast mode; the grouped rule restores a real outline).
 
    Grid borders: `border-collapse: collapse` + a uniform 1px cell border in
-   --ps1ui-color-border draw the closed single-stroke grid a terminal
-   box-drawing table (┌─┬─┐) renders — collapsing is what merges adjacent
+   --ps1ui-color-border draw the closed single-stroke grid a box-drawing
+   table (┌─┬─┐) renders — collapsing is what merges adjacent
    cell edges into one shared rule. The header row separates on two axes:
    a surface background and a border-strong bottom rule. That rule is
    declared on the <th> (cell origin) deliberately — in border-collapse

package/dist/styles.css

@@ -975,13 +975,13 @@ html {
   line-height: 1.6;
   color: var(--ps1ui-color-fg);
 }
-/* List — semantic <ul>/<ol> wrapper with terminal-style markers.
+/* List — semantic <ul>/<ol> wrapper with plain-text markers.
 
    The global reset in base.css sets `list-style: none` on every <ul>/<ol>,
    which strips the UA bullet/number glyph. List re-introduces a marker via
    `::before` on each direct <li> — `-` for unordered, `NN.` for ordered —
    so the "reset removes bullets" side effect turns into an on-brand
-   terminal glyph rather than a hole.
+   plain-text glyph rather than a hole.
 
    The ordered marker uses `counter(list-item)` — the browser-maintained
    list-item counter that already honours `<ol start>`, `<ol reversed>`,
@@ -1261,7 +1261,7 @@ html {
 .ps1ui-details__summary::-webkit-details-marker {
   display: none;
 }
-/* Terminal-style disclosure marker: `▸` when closed, `▾` when open. Fixed
+/* Glyph disclosure marker: `▸` when closed, `▾` when open. Fixed
    inline-block width so the summary text baseline stays put across states —
    the two glyphs don't measure identically in the JetBrains Mono fallback
    monospace stack. Colored with fg-muted so the arrow reads as chrome, not
@@ -1519,7 +1519,7 @@ html {
     --_wrap: var(--_wrap-xl);
   }
 }
-/* Table — semantic <table> with terminal-style grid borders, wrapped in a
+/* Table — semantic <table> with box-drawing-style grid borders, wrapped in a
    horizontal-scroll container.
 
    Scroll wrapper: `display: table` boxes don't honor overflow, so Table.tsx
@@ -1531,8 +1531,8 @@ html {
    high-contrast mode; the grouped rule restores a real outline).
 
    Grid borders: `border-collapse: collapse` + a uniform 1px cell border in
-   --ps1ui-color-border draw the closed single-stroke grid a terminal
-   box-drawing table (┌─┬─┐) renders — collapsing is what merges adjacent
+   --ps1ui-color-border draw the closed single-stroke grid a box-drawing
+   table (┌─┬─┐) renders — collapsing is what merges adjacent
    cell edges into one shared rule. The header row separates on two axes:
    a surface background and a border-strong bottom rule. That rule is
    declared on the <th> (cell origin) deliberately — in border-collapse

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ps1ui/core",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "homepage": "https://github.com/koki-develop/ps1ui",
   "license": "MIT",
   "author": "koki-develop <kou.pg.0131@gmail.com>",
@@ -53,7 +53,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "5.2.8",
     "hast-util-to-jsx-runtime": "2.3.6",
     "refractor": "5.0.0"
   },