@ps1ui/core 0.0.0 → 0.1.0

package/dist/components/CodeBlock/CodeBlock.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { cx } from "../../utils/cx.mjs";
+import { useMergedRef } from "../../utils/useMergedRef.mjs";
+import { useScrollableFocus } from "../../utils/useScrollableFocus.mjs";
+import { refractor } from "./refractor.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useLayoutEffect, useMemo } from "react";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+//#region src/components/CodeBlock/CodeBlock.tsx
+function CodeBlock({ code, children, language, className, onBlur, ref: forwardedRef, ...rest }) {
+	const source = code ?? children ?? "";
+	const { highlighted, registered } = useMemo(() => {
+		const isRegistered = !!language && refractor.registered(language);
+		return {
+			registered: isRegistered,
+			highlighted: isRegistered ? toJsxRuntime(refractor.highlight(source, language), {
+				Fragment,
+				jsx,
+				jsxs
+			}) : source
+		};
+	}, [source, language]);
+	const { scrollerRef, tabIndex, measure } = useScrollableFocus();
+	useLayoutEffect(() => measure(), [measure, source]);
+	const mergedRef = useMergedRef(scrollerRef, forwardedRef);
+	return /* @__PURE__ */ jsx("pre", {
+		tabIndex,
+		...rest,
+		ref: mergedRef,
+		className: cx("ps1ui-codeblock", className),
+		onBlur: (event) => {
+			onBlur?.(event);
+			measure();
+		},
+		children: /* @__PURE__ */ jsx("code", {
+			className: registered ? `language-${language}` : void 0,
+			children: highlighted
+		})
+	});
+}
+//#endregion
+export { CodeBlock };
+
+//# sourceMappingURL=CodeBlock.mjs.map

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

@@ -0,0 +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 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/CodeBlock/refractor.d.mts

@@ -0,0 +1,7 @@
+import "refractor";
+//#region src/components/CodeBlock/refractor.d.ts
+declare const KNOWN_LANGS: readonly ["arduino", "bash", "basic", "c", "cpp", "csharp", "css", "diff", "go", "ini", "java", "javascript", "json", "kotlin", "less", "lua", "makefile", "markdown", "markup", "objectivec", "perl", "php", "python", "r", "regex", "ruby", "rust", "sass", "scss", "sql", "swift", "typescript", "vbnet", "yaml", "dart", "docker", "graphql", "jsx", "nginx", "powershell", "shell-session", "toml", "tsx", "zig"];
+type CodeBlockLanguage = (typeof KNOWN_LANGS)[number];
+//#endregion
+export { CodeBlockLanguage };
+//# sourceMappingURL=refractor.d.mts.map

package/dist/components/CodeBlock/refractor.mjs

@@ -0,0 +1,26 @@
+import { refractor } from "refractor";
+import dart from "refractor/dart";
+import docker from "refractor/docker";
+import graphql from "refractor/graphql";
+import jsx from "refractor/jsx";
+import nginx from "refractor/nginx";
+import powershell from "refractor/powershell";
+import shellSession from "refractor/shell-session";
+import toml from "refractor/toml";
+import tsx from "refractor/tsx";
+import zig from "refractor/zig";
+//#region src/components/CodeBlock/refractor.ts
+refractor.register(dart);
+refractor.register(docker);
+refractor.register(graphql);
+refractor.register(jsx);
+refractor.register(nginx);
+refractor.register(powershell);
+refractor.register(shellSession);
+refractor.register(toml);
+refractor.register(tsx);
+refractor.register(zig);
+//#endregion
+export { refractor };
+
+//# sourceMappingURL=refractor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"refractor.mjs","names":[],"sources":["../../../src/components/CodeBlock/refractor.ts"],"sourcesContent":["// Shared Refractor singleton. `refractor` (as opposed to `refractor/core`) ships with\n// ~36 \"checked\" languages pre-registered — see refractor/lib/common.js. We layer a\n// curated set of additional languages on top so common ecosystem grammars work out of\n// the box. Static imports on purpose: only CodeBlock consumers pay for them (this\n// module is its own side-effectful dist chunk — see package.json `sideEffects`),\n// and lazy `import()` registration would make highlighting async (unhighlighted\n// first paint, no SSR story) for a few KB per grammar. Keep this list intentional.\nimport { refractor } from \"refractor\";\n\nimport dart from \"refractor/dart\";\nimport docker from \"refractor/docker\";\nimport graphql from \"refractor/graphql\";\nimport jsx from \"refractor/jsx\";\nimport nginx from \"refractor/nginx\";\nimport powershell from \"refractor/powershell\";\nimport shellSession from \"refractor/shell-session\";\nimport toml from \"refractor/toml\";\nimport tsx from \"refractor/tsx\";\nimport zig from \"refractor/zig\";\n\nrefractor.register(dart);\nrefractor.register(docker);\nrefractor.register(graphql);\nrefractor.register(jsx);\nrefractor.register(nginx);\nrefractor.register(powershell);\nrefractor.register(shellSession);\nrefractor.register(toml);\nrefractor.register(tsx);\nrefractor.register(zig);\n\n// Canonical display names of every language the singleton has registered AND\n// makes sense to expose to consumers. Kept as an `as const` tuple purely so\n// `CodeBlockLanguage` can derive from it — the array itself is intentionally\n// unexported (tree-shakes to nothing in consumer bundles).\n//\n// If you add/remove a `refractor.register(...)` above OR alter what refractor's\n// `common` bundle registers, update this list to match. `scripts/check-languages.mjs`\n// enforces the invariant that every name here is actually registered at runtime.\n//\n// Deliberately EXCLUDED even though refractor registers them:\n//   - `clike`, `markup-templating` — base grammars other languages extend; passing\n//     them as the top-level language produces near-empty highlighting.\n//\n// Aliases (e.g. `ts` → `typescript`, `html` → `markup`) are NOT listed here; they\n// still resolve at runtime via refractor's alias table and pass through the type\n// via the `(string & {})` escape hatch on `CodeBlockProps[\"language\"]`.\nconst KNOWN_LANGS = [\n  // from refractor/lib/common.js (registered by `import { refractor } from \"refractor\"`)\n  \"arduino\",\n  \"bash\",\n  \"basic\",\n  \"c\",\n  \"cpp\",\n  \"csharp\",\n  \"css\",\n  \"diff\",\n  \"go\",\n  \"ini\",\n  \"java\",\n  \"javascript\",\n  \"json\",\n  \"kotlin\",\n  \"less\",\n  \"lua\",\n  \"makefile\",\n  \"markdown\",\n  \"markup\",\n  \"objectivec\",\n  \"perl\",\n  \"php\",\n  \"python\",\n  \"r\",\n  \"regex\",\n  \"ruby\",\n  \"rust\",\n  \"sass\",\n  \"scss\",\n  \"sql\",\n  \"swift\",\n  \"typescript\",\n  \"vbnet\",\n  \"yaml\",\n  // registered above\n  \"dart\",\n  \"docker\",\n  \"graphql\",\n  \"jsx\",\n  \"nginx\",\n  \"powershell\",\n  \"shell-session\",\n  \"toml\",\n  \"tsx\",\n  \"zig\",\n] as const;\n\nexport type CodeBlockLanguage = (typeof KNOWN_LANGS)[number];\n\nexport { refractor };\n"],"mappings":";;;;;;;;;;;;AAoBA,UAAU,SAAS,IAAI;AACvB,UAAU,SAAS,MAAM;AACzB,UAAU,SAAS,OAAO;AAC1B,UAAU,SAAS,GAAG;AACtB,UAAU,SAAS,KAAK;AACxB,UAAU,SAAS,UAAU;AAC7B,UAAU,SAAS,YAAY;AAC/B,UAAU,SAAS,IAAI;AACvB,UAAU,SAAS,GAAG;AACtB,UAAU,SAAS,GAAG"}

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

@@ -0,0 +1,21 @@
+import { Responsive } from "../../utils/responsive.mjs";
+import { SpaceScale } from "../../utils/spacing.mjs";
+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;
+//#endregion
+export { Container, ContainerProps, ContainerSize };
+//# sourceMappingURL=Container.d.mts.map

package/dist/components/Container/Container.mjs

@@ -0,0 +1,24 @@
+import { cx } from "../../utils/cx.mjs";
+import { resolveResponsive } from "../../utils/responsive.mjs";
+import { spaceToVar } from "../../utils/spacing.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Container/Container.tsx
+const sizeToVar = (v) => v === "full" ? "none" : `var(--ps1ui-container-${v})`;
+function Container({ size, px, className, style, ...rest }) {
+	const sizeVars = resolveResponsive(size, "--_container-size", sizeToVar);
+	const pxVars = resolveResponsive(px, "--_container-px", spaceToVar);
+	const mergedStyle = {
+		...style,
+		...sizeVars,
+		...pxVars
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("ps1ui-container", className),
+		style: mergedStyle
+	});
+}
+//#endregion
+export { Container };
+
+//# sourceMappingURL=Container.mjs.map

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

@@ -0,0 +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  /**\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

@@ -0,0 +1,10 @@
+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;
+//#endregion
+export { Details, DetailsProps };
+//# sourceMappingURL=Details.d.mts.map

package/dist/components/Details/Details.mjs

@@ -0,0 +1,20 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Details/Details.tsx
+function Details({ summary, children, className, ...rest }) {
+	return /* @__PURE__ */ jsxs("details", {
+		...rest,
+		className: cx("ps1ui-details", className),
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "ps1ui-details__summary",
+			children: summary
+		}), /* @__PURE__ */ jsx("div", {
+			className: "ps1ui-details__body",
+			children
+		})]
+	});
+}
+//#endregion
+export { Details };
+
+//# sourceMappingURL=Details.mjs.map

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

@@ -0,0 +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  /** 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

@@ -0,0 +1,21 @@
+import { Responsive } from "../../utils/responsive.mjs";
+import { SpaceScale } from "../../utils/spacing.mjs";
+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;
+//#endregion
+export { Grid, GridGap, GridProps };
+//# sourceMappingURL=Grid.d.mts.map

package/dist/components/Grid/Grid.mjs

@@ -0,0 +1,24 @@
+import { cx } from "../../utils/cx.mjs";
+import { resolveResponsive } from "../../utils/responsive.mjs";
+import { spaceToVar } from "../../utils/spacing.mjs";
+import { safePositiveInt } from "../../utils/numbers.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Grid/Grid.tsx
+function Grid({ columns, gap, className, style, ...rest }) {
+	const columnsVars = resolveResponsive(columns, "--_grid-columns", safePositiveInt);
+	const gapVars = resolveResponsive(gap, "--_grid-gap", spaceToVar);
+	const mergedStyle = {
+		...style,
+		...columnsVars,
+		...gapVars
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("ps1ui-grid", className),
+		style: mergedStyle
+	});
+}
+//#endregion
+export { Grid };
+
+//# sourceMappingURL=Grid.mjs.map

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

@@ -0,0 +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  /**\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

@@ -0,0 +1,14 @@
+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;
+//#endregion
+export { GridItem, GridItemProps };
+//# sourceMappingURL=GridItem.d.mts.map

package/dist/components/GridItem/GridItem.mjs

@@ -0,0 +1,21 @@
+import { cx } from "../../utils/cx.mjs";
+import { resolveResponsive } from "../../utils/responsive.mjs";
+import { safePositiveInt } from "../../utils/numbers.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/GridItem/GridItem.tsx
+function GridItem({ colSpan, className, style, ...rest }) {
+	const colSpanVars = resolveResponsive(colSpan, "--_griditem-col-span", safePositiveInt);
+	const mergedStyle = {
+		...style,
+		...colSpanVars
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("ps1ui-griditem", className),
+		style: mergedStyle
+	});
+}
+//#endregion
+export { GridItem };
+
+//# sourceMappingURL=GridItem.mjs.map

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

@@ -0,0 +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  /**\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

@@ -0,0 +1,26 @@
+import { Responsive } from "../../utils/responsive.mjs";
+import { FontWeight } from "../../utils/typography.mjs";
+import { CSSProperties, ComponentPropsWithoutRef } from "react";
+//#region src/components/Heading/Heading.d.ts
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+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>>;
+declare function Heading<E extends HeadingElement = HeadingElement>({ level, as, size: sizeProp, weight: weightProp, className, style, ...rest }: HeadingProps<E>): import("react").ReactElement<Omit<HeadingProps<E>, "as" | "className" | "level" | "size" | "style" | "weight"> & {
+  className: string;
+  style: CSSProperties;
+}, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Heading, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, HeadingWeight };
+//# sourceMappingURL=Heading.d.mts.map

package/dist/components/Heading/Heading.mjs

@@ -0,0 +1,53 @@
+import { cx } from "../../utils/cx.mjs";
+import { resolveResponsive, withResponsiveBase } from "../../utils/responsive.mjs";
+import { fontSizeToVar, weightToValue } from "../../utils/typography.mjs";
+import { createElement } from "react";
+//#region src/components/Heading/Heading.tsx
+const LEVEL_DEFAULTS = {
+	1: {
+		size: "3xl",
+		weight: "bold"
+	},
+	2: {
+		size: "2xl",
+		weight: "semibold"
+	},
+	3: {
+		size: "xl",
+		weight: "semibold"
+	},
+	4: {
+		size: "lg",
+		weight: "semibold"
+	},
+	5: {
+		size: "md",
+		weight: "medium"
+	},
+	6: {
+		size: "sm",
+		weight: "medium"
+	}
+};
+function Heading({ level, as, size: sizeProp, weight: weightProp, className, style, ...rest }) {
+	const tag = as ?? `h${level}`;
+	const defaults = LEVEL_DEFAULTS[level];
+	const size = withResponsiveBase(sizeProp, defaults.size);
+	const weight = withResponsiveBase(weightProp, defaults.weight);
+	const sizeVars = resolveResponsive(size, "--_heading-size", fontSizeToVar);
+	const weightVars = resolveResponsive(weight, "--_heading-weight", weightToValue);
+	const mergedStyle = {
+		...style,
+		...sizeVars,
+		...weightVars
+	};
+	return createElement(tag, {
+		...rest,
+		className: cx("ps1ui-heading", className),
+		style: mergedStyle
+	});
+}
+//#endregion
+export { Heading };
+
+//# sourceMappingURL=Heading.mjs.map

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

@@ -0,0 +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  /** 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/Input/Input.d.mts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/Input/Input.d.ts
+type InputProps = ComponentProps<"input">;
+declare function Input({ className, type, ...rest }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input, InputProps };
+//# sourceMappingURL=Input.d.mts.map

package/dist/components/Input/Input.mjs

@@ -0,0 +1,15 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+function Input({ className, type = "text", ...rest }) {
+	const classes = cx("ps1ui-input", className);
+	return /* @__PURE__ */ jsx("input", {
+		...rest,
+		type,
+		className: classes
+	});
+}
+//#endregion
+export { Input };
+
+//# sourceMappingURL=Input.mjs.map

package/dist/components/Input/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","names":[],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type InputProps = ComponentProps<\"input\">;\n\nexport function Input({ className, type = \"text\", ...rest }: InputProps) {\n  const classes = cx(\"ps1ui-input\", className);\n  return <input {...rest} type={type} className={classes} />;\n}\n"],"mappings":";;;AAKA,SAAgB,MAAM,EAAE,WAAW,OAAO,QAAQ,GAAG,QAAoB;CACvE,MAAM,UAAU,GAAG,eAAe,SAAS;CAC3C,OAAO,oBAAC,SAAD;EAAO,GAAI;EAAY;EAAM,WAAW;CAAU,CAAA;AAC3D"}

package/dist/components/Label/Label.d.mts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/Label/Label.d.ts
+type LabelProps = ComponentProps<"label">;
+declare function Label({ className, ...rest }: LabelProps): import("react").JSX.Element;
+//#endregion
+export { Label, LabelProps };
+//# sourceMappingURL=Label.d.mts.map

package/dist/components/Label/Label.mjs

@@ -0,0 +1,14 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Label/Label.tsx
+function Label({ className, ...rest }) {
+	const classes = cx("ps1ui-label", className);
+	return /* @__PURE__ */ jsx("label", {
+		...rest,
+		className: classes
+	});
+}
+//#endregion
+export { Label };
+
+//# sourceMappingURL=Label.mjs.map

package/dist/components/Label/Label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.mjs","names":[],"sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type LabelProps = ComponentProps<\"label\">;\n\nexport function Label({ className, ...rest }: LabelProps) {\n  const classes = cx(\"ps1ui-label\", className);\n  // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- ultra-thin <label> wrapper; the caller supplies htmlFor or nests the control.\n  return <label {...rest} className={classes} />;\n}\n"],"mappings":";;;AAKA,SAAgB,MAAM,EAAE,WAAW,GAAG,QAAoB;CACxD,MAAM,UAAU,GAAG,eAAe,SAAS;CAE3C,OAAO,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;CAAU,CAAA;AAC/C"}

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

@@ -0,0 +1,13 @@
+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;
+//#endregion
+export { List, ListProps };
+//# sourceMappingURL=List.d.mts.map

package/dist/components/List/List.mjs

@@ -0,0 +1,15 @@
+import { cx } from "../../utils/cx.mjs";
+import { createElement } from "react";
+//#region src/components/List/List.tsx
+function List(props) {
+	const { ordered = false, className, ...rest } = props;
+	return createElement(ordered ? "ol" : "ul", {
+		role: "list",
+		...rest,
+		className: cx("ps1ui-list", ordered ? "ps1ui-list--ordered" : "ps1ui-list--unordered", className)
+	});
+}
+//#endregion
+export { List };
+
+//# sourceMappingURL=List.mjs.map

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

@@ -0,0 +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  | ({\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/ListItem/ListItem.d.mts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/ListItem/ListItem.d.ts
+type ListItemProps = ComponentProps<"li">;
+declare function ListItem({ className, ...rest }: ListItemProps): import("react").JSX.Element;
+//#endregion
+export { ListItem, ListItemProps };
+//# sourceMappingURL=ListItem.d.mts.map

package/dist/components/ListItem/ListItem.mjs

@@ -0,0 +1,13 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ListItem/ListItem.tsx
+function ListItem({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("li", {
+		...rest,
+		className: cx("ps1ui-listitem", className)
+	});
+}
+//#endregion
+export { ListItem };
+
+//# sourceMappingURL=ListItem.mjs.map

package/dist/components/ListItem/ListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.mjs","names":[],"sources":["../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\n// Thin typed wrapper for `<li>` inside a `<List>`. The marker styling lives\n// on `.ps1ui-list > li` in List.css, so a bare `<li>` continues to render\n// identically — ListItem exists to give call sites a stable class hook\n// (`.ps1ui-listitem`, matching GridItem's `.ps1ui-griditem`) and a\n// documented API surface for what belongs inside a `<List>`.\nexport type ListItemProps = ComponentProps<\"li\">;\n\nexport function ListItem({ className, ...rest }: ListItemProps) {\n  return <li {...rest} className={cx(\"ps1ui-listitem\", className)} />;\n}\n"],"mappings":";;;AAUA,SAAgB,SAAS,EAAE,WAAW,GAAG,QAAuB;CAC9D,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAM,WAAW,GAAG,kBAAkB,SAAS;CAAI,CAAA;AACpE"}

package/dist/components/PS1Root/PS1Root.d.mts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/components/PS1Root/PS1Root.d.ts
+type PS1RootProps = ComponentProps<"div">;
+declare function PS1Root({ className, ...rest }: PS1RootProps): import("react").JSX.Element;
+//#endregion
+export { PS1Root, PS1RootProps };
+//# sourceMappingURL=PS1Root.d.mts.map

package/dist/components/PS1Root/PS1Root.mjs

@@ -0,0 +1,13 @@
+import { cx } from "../../utils/cx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/PS1Root/PS1Root.tsx
+function PS1Root({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cx("ps1ui-root", className)
+	});
+}
+//#endregion
+export { PS1Root };
+
+//# sourceMappingURL=PS1Root.mjs.map

package/dist/components/PS1Root/PS1Root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PS1Root.mjs","names":[],"sources":["../../../src/components/PS1Root/PS1Root.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type PS1RootProps = ComponentProps<\"div\">;\n\n// PS1Root establishes the app-level responsive containment context.\n//\n// Wrap your app's tree in `<PS1Root>` once, at the top level. Responsive props\n// on descendant ps1ui components (`Grid columns={{ base: 1, md: 3 }}` and\n// friends) query their nearest ancestor with CSS `container-type: inline-size`\n// — this component provides that ancestor. Without a PS1Root (or another\n// containment ancestor like Container / Grid / Stack), responsive props\n// silently fall back to their `base` value only.\n//\n// A side effect of `container-type: inline-size` per CSS Containment L2:\n// `contain: layout` is implied, which makes PS1Root the containing block for\n// `position: fixed` descendants. For overlays that must anchor to the viewport\n// (Modal, Tooltip, Popover) render them via React Portal to `document.body`\n// so they escape PS1Root's containment. Raw `position: fixed` inside PS1Root\n// scrolls with the page instead of pinning to the viewport.\nexport function PS1Root({ className, ...rest }: PS1RootProps) {\n  return <div {...rest} className={cx(\"ps1ui-root\", className)} />;\n}\n"],"mappings":";;;AAoBA,SAAgB,QAAQ,EAAE,WAAW,GAAG,QAAsB;CAC5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,GAAG,cAAc,SAAS;CAAI,CAAA;AACjE"}

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

@@ -0,0 +1,33 @@
+import { Responsive } from "../../utils/responsive.mjs";
+import { SpaceScale } from "../../utils/spacing.mjs";
+import { ComponentProps } from "react";
+//#region src/components/Stack/Stack.d.ts
+type StackDirection = "row" | "column";
+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;
+//#endregion
+export { Stack, StackAlign, StackDirection, StackGap, StackJustify, StackProps };
+//# sourceMappingURL=Stack.d.mts.map