@ps1ui/core 0.0.0 → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Koki Sato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/base.css

@@ -0,0 +1,378 @@
+@import "@fontsource-variable/jetbrains-mono";
+/* Palette hexes are mirrored in .storybook/ps1uiTheme.ts — see note there. */
+:root {
+  --ps1ui-font-mono:
+    "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas,
+    monospace;
+
+  --ps1ui-color-bg: #0b0f14;
+  --ps1ui-color-surface: #0f1520;
+  --ps1ui-color-border: #21262d;
+  --ps1ui-color-border-strong: #30363d;
+  --ps1ui-color-fg: #c7d5df;
+  --ps1ui-color-fg-muted: #8b98a5;
+  /* fg-subtle must maintain ≥ 4.5:1 (WCAG AA) vs BOTH --ps1ui-color-bg and --ps1ui-color-surface.
+     Surface is the tighter case; verified by Text.contrast.test.tsx. */
+  --ps1ui-color-fg-subtle: #7a8593;
+  --ps1ui-color-primary: #7ee787;
+  --ps1ui-color-primary-hover: #56d364;
+  --ps1ui-color-primary-active: #3fb950;
+  --ps1ui-color-primary-fg: #0b0f14;
+  --ps1ui-color-accent: #ffa657;
+  --ps1ui-color-focus-ring-soft: color-mix(in srgb, var(--ps1ui-color-primary) 14%, transparent);
+  --ps1ui-shadow-focus-ring: 0 0 0 3px var(--ps1ui-color-focus-ring-soft);
+
+  /* Syntax-highlight palette for CodeBlock. Every value is verified ≥ 4.5:1 vs
+     BOTH --ps1ui-color-bg and --ps1ui-color-surface by CodeBlock.contrast.test.tsx. */
+  --ps1ui-code-comment: #7a8593;
+  --ps1ui-code-string: #f0c880;
+  --ps1ui-code-keyword: #ff7b95;
+  --ps1ui-code-function: #79c0ff;
+  --ps1ui-code-constant: #ffa657;
+  --ps1ui-code-type: #5eead4;
+  --ps1ui-code-tag: #ff9587;
+  --ps1ui-code-attr: #ffdc99;
+  --ps1ui-code-punctuation: #7a8593;
+  /* Diff-specific: green = added, rose = removed. Kept separate from tag/string so
+     the semantic overlap doesn't leak between grammars (a removed diff line has
+     nothing to do with an HTML <tag>, and an added line isn't a string literal). */
+  --ps1ui-code-inserted: #7ee787;
+  --ps1ui-code-deleted: #ff8896;
+
+  --ps1ui-radius-md: 3px;
+  --ps1ui-radius-lg: 4px;
+
+  --ps1ui-space-xs: 4px;
+  --ps1ui-space-sm: 8px;
+  --ps1ui-space-md: 12px;
+  --ps1ui-space-lg: 16px;
+  --ps1ui-space-xl: 24px;
+  --ps1ui-space-2xl: 32px;
+
+  /* Vertical padding for 1px-bordered controls (Button, Input): border +
+     padding = --ps1ui-space-sm (8px), so this is a derived value, not a new
+     spacing step. */
+  --ps1ui-control-padding-y: 7px;
+
+  /* Container max-widths, in rem so they scale with the user's browser
+     font-size preference (WCAG-friendly). Numeric equivalents at the
+     browser-default 16px root: 40 = 640, 48 = 768, 64 = 1024, 80 = 1280.
+     Doubles as the breakpoint scale — see --ps1ui-breakpoint-* below. */
+  --ps1ui-container-sm: 40rem;
+  --ps1ui-container-md: 48rem;
+  --ps1ui-container-lg: 64rem;
+  --ps1ui-container-xl: 80rem;
+
+  /* Responsive breakpoints, in rem for the same accessibility reason.
+     Values are identical to --ps1ui-container-* by design: a Container
+     of size=lg (64rem) fills at exactly the `lg` breakpoint. These are
+     documentation tokens — @container / @media conditions cannot use
+     `var()` per the CSS spec, so the same numeric values are also
+     hardcoded in each component's CSS. Keep in sync. */
+  --ps1ui-breakpoint-sm: 40rem;
+  --ps1ui-breakpoint-md: 48rem;
+  --ps1ui-breakpoint-lg: 64rem;
+  --ps1ui-breakpoint-xl: 80rem;
+
+  /* Type scale, in rem so text tracks the user's browser font-size preference
+     (same rationale as the container/breakpoint tokens above). All values sit
+     on the 0.125rem (2px) grid; px equivalents at the default 16px root:
+     12 / 14 / 16 / 18 / 22 / 26 / 32. */
+  --ps1ui-font-size-xs: 0.75rem;
+  --ps1ui-font-size-sm: 0.875rem;
+  --ps1ui-font-size-md: 1rem;
+  --ps1ui-font-size-lg: 1.125rem;
+  --ps1ui-font-size-xl: 1.375rem;
+  --ps1ui-font-size-2xl: 1.625rem;
+  --ps1ui-font-size-3xl: 2rem;
+
+  --ps1ui-transition-fast: 120ms ease;
+}
+/* ==========================================================================
+ * Reset
+ * --------------------------------------------------------------------------
+ * Included in base.css (and therefore in styles.css) so consumers who commit
+ * fully to the PS1 UI look get a consistent baseline across browsers.
+ *
+ * NEVER duplicate any of these rules in components.css — that entry is for
+ * consumers embedding PS1 UI into a foreign design system, where a global
+ * reset would collide with the host system. The invariant is enforced by
+ * scripts/check-css-split.mjs at build time.
+ *
+ * Consumer heads-up: raw semantic tags rendered outside PS1 UI's own
+ * components lose their UA appearance under this reset — a bare <a> paints
+ * with inherited color/no underline (route through <Anchor>), a bare <h1>
+ * collapses to body text (route through <Heading>), a bare <button> has no
+ * chrome (route through <Button>), <img> becomes block (breaks inline avatar
+ * layouts unless you set display:inline explicitly), <ul>/<ol> lose their
+ * bullets. Locked in by src/styles/reset.test.tsx.
+ * ========================================================================== */
+/* Box model + border baseline. Applied to `*` only — NOT to ::before/::after
+   /::backdrop/::file-selector-button. Pseudo-elements with border-drawn
+   glyphs (the classic rotated-L checkmark, tooltip carets, radio-dot rings)
+   need the initial `box-sizing: content-box` so their declared width/height
+   sit INSIDE the border. Josh Comeau's reset excludes pseudos for this
+   exact reason; Tailwind Preflight includes them but then has to document
+   the "authors doing border tricks must override" caveat. We pick the
+   Comeau side because ps1ui components (Checkbox) already use the trick.
+   Locked in by reset.test.tsx's "reset does not touch pseudos" block. */
+* {
+  box-sizing: border-box;
+  border: 0 solid;
+}
+body,
+blockquote,
+dl,
+dd,
+figure,
+fieldset,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+menu,
+ol,
+p,
+pre,
+ul {
+  margin: 0;
+}
+fieldset,
+legend,
+menu,
+ol,
+ul {
+  padding: 0;
+}
+html {
+  color-scheme: dark;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -moz-tab-size: 4;
+    -o-tab-size: 4;
+       tab-size: 4;
+  text-rendering: optimizeLegibility;
+}
+body {
+  min-height: 100dvh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* Heading responsibility belongs to <Heading>; raw h1..h6 inherit so a bare
+   <h1> outside <Heading> doesn't blow up to the UA default. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+p {
+  text-wrap: pretty;
+  overflow-wrap: break-word;
+}
+ol,
+ul,
+menu {
+  list-style: none;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+/* Anchor responsibility belongs to <Anchor>; raw <a> inherits color/decoration
+   so it doesn't paint as UA blue underline against the dark canvas. */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+/* UA still refuses to inherit font/color into form controls in 2026.
+   Inherit font-feature-settings / font-variation-settings too so JetBrains
+   Mono Variable's axes stay live inside <input> / <textarea>. */
+button,
+input,
+optgroup,
+select,
+textarea,
+::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  opacity: 1;
+}
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+input:where([type="button"], [type="reset"], [type="submit"]),
+::file-selector-button {
+  -moz-appearance: button;
+       appearance: button;
+  -webkit-appearance: button;
+}
+button {
+  cursor: pointer;
+}
+textarea {
+  resize: vertical;
+}
+/* `in srgb` for consistency with the library's other color-mix calls. The
+   space is irrelevant when mixing with `transparent` (premultiplied-alpha
+   interpolation, CSS Color 4), so diverging from Tailwind Preflight's oklab
+   here is visually a no-op. */
+::-moz-placeholder {
+  opacity: 1;
+  color: color-mix(in srgb, currentcolor 55%, transparent);
+}
+::placeholder {
+  opacity: 1;
+  color: color-mix(in srgb, currentcolor 55%, transparent);
+}
+::-webkit-date-and-time-value {
+  min-height: 1lh;
+  text-align: inherit;
+}
+::-webkit-datetime-edit {
+  display: inline-flex;
+  padding: 0;
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+  height: auto;
+}
+/* number spinner: Chromium is already handled by ::-webkit-inner/outer-spin-button
+   { appearance: none } above. Firefox needs its own vendor prefix — the unprefixed
+   `appearance: textfield` is deprecated per CSS UI Level 4 (moved to compatibility
+   appendix) and dropped by Tailwind v4 Preflight, so we omit it. */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration,
+::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline: auto;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ps1ui-font-mono);
+  font-size: 1em;
+}
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+q::before,
+q::after {
+  content: "";
+}
+/* Keeps sub/sup from expanding the parent line-height. */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top: 1px solid;
+}
+summary {
+  display: list-item;
+}
+/* [hidden] would lose to `display: flex` etc. without this. */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+/* ==========================================================================
+ * Ambient environment
+ * --------------------------------------------------------------------------
+ * `background`/`color`/`font-family` intentionally live on `html`, not `body`.
+ * Rationale: the reset above zeros `body { margin }`, but the browser still
+ * paints the area beyond `body` (macOS/iOS rubber-band overscroll region,
+ * horizontal-scroll overflow, viewport slack) using the canvas root's
+ * background — which is `html`. If these rules were on `body`, that overscroll
+ * area would reveal the light UA default and flash white on scroll. `color`
+ * and `font-family` cascade down to `body` and descendants naturally.
+ * ========================================================================== */
+html {
+  background: var(--ps1ui-color-bg);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+}
+::-moz-selection {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+}
+::selection {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+}

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

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+//#region src/components/Anchor/Anchor.d.ts
+type AnchorVariant = "primary" | "subtle";
+type AnchorOwnProps<E extends ElementType> = {
+  as?: E;
+  variant?: AnchorVariant;
+};
+type AnchorProps<E extends ElementType = "a"> = AnchorOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof AnchorOwnProps<E>>;
+declare function Anchor<E extends ElementType = "a">({ as, variant, className, ...rest }: AnchorProps<E>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Anchor, AnchorProps, AnchorVariant };
+//# sourceMappingURL=Anchor.d.mts.map

package/dist/components/Anchor/Anchor.mjs

@@ -0,0 +1,15 @@
+import { cx } from "../../utils/cx.mjs";
+import { createElement } from "react";
+//#region src/components/Anchor/Anchor.tsx
+function Anchor({ as, variant = "primary", className, ...rest }) {
+	const tag = as ?? "a";
+	const classes = cx("ps1ui-anchor", `ps1ui-anchor--${variant}`, className);
+	return createElement(tag, {
+		...rest,
+		className: classes
+	});
+}
+//#endregion
+export { Anchor };
+
+//# sourceMappingURL=Anchor.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,24 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+//#region src/components/Button/Button.d.ts
+type ButtonVariant = "primary" | "secondary";
+type ButtonOwnProps<E extends ElementType> = {
+  as?: E;
+  variant?: ButtonVariant;
+};
+/**
+ * Props for {@link Button}. Derived from the props of the rendered element `E`,
+ * so what's accepted follows the `as` target.
+ *
+ * `disabled` and polymorphism: `disabled` only exists on form elements, so
+ * `<Button as="a" href="…" disabled>` is a type error (`ComponentPropsWithoutRef<"a">`
+ * has no `disabled` — locked in by `Button.test-d.tsx`). This is intentional and
+ * matches the ARIA Authoring Practices: links are not disabled. When the action is
+ * 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 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>>;
+//#endregion
+export { Button, ButtonProps, ButtonVariant };
+//# sourceMappingURL=Button.d.mts.map

package/dist/components/Button/Button.mjs

@@ -0,0 +1,17 @@
+import { cx } from "../../utils/cx.mjs";
+import { createElement } from "react";
+//#region src/components/Button/Button.tsx
+function Button({ as, variant = "primary", className, ...rest }) {
+	const tag = as ?? "button";
+	const classes = cx("ps1ui-button", `ps1ui-button--${variant}`, className);
+	const props = {
+		...rest,
+		className: classes
+	};
+	if (tag === "button" && props.type === void 0) props.type = "button";
+	return createElement(tag, props);
+}
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +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"}

package/dist/components/Card/Card.d.mts

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

package/dist/components/Card/Card.mjs

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

package/dist/components/Card/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type CardProps = ComponentProps<\"div\">;\n\nexport function Card({ className, ...rest }: CardProps) {\n  const classes = cx(\"ps1ui-card\", className);\n  return <div {...rest} className={classes} />;\n}\n"],"mappings":";;;AAKA,SAAgB,KAAK,EAAE,WAAW,GAAG,QAAmB;CACtD,MAAM,UAAU,GAAG,cAAc,SAAS;CAC1C,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;CAAU,CAAA;AAC7C"}

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+//#region src/components/Checkbox/Checkbox.d.ts
+type CheckboxProps = Omit<ComponentProps<"input">, "type"> & {
+  indeterminate?: boolean;
+};
+declare function Checkbox({ className, indeterminate, ref: forwardedRef, ...rest }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps };
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { cx } from "../../utils/cx.mjs";
+import { useMergedRef } from "../../utils/useMergedRef.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/Checkbox/Checkbox.tsx
+function Checkbox({ className, indeterminate = false, ref: forwardedRef, ...rest }) {
+	const localRef = useRef(null);
+	useLayoutEffect(() => {
+		localRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	const mergedRef = useMergedRef(localRef, forwardedRef);
+	return /* @__PURE__ */ jsx("input", {
+		...rest,
+		ref: mergedRef,
+		type: "checkbox",
+		className: cx("ps1ui-checkbox", className)
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.mjs.map

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

@@ -0,0 +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"}

package/dist/components/Code/Code.d.mts

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

package/dist/components/Code/Code.mjs

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

package/dist/components/Code/Code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.mjs","names":[],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type CodeProps = ComponentProps<\"code\">;\n\nexport function Code({ className, ...rest }: CodeProps) {\n  const classes = cx(\"ps1ui-code\", className);\n  return <code {...rest} className={classes} />;\n}\n"],"mappings":";;;AAKA,SAAgB,KAAK,EAAE,WAAW,GAAG,QAAmB;CACtD,MAAM,UAAU,GAAG,cAAc,SAAS;CAC1C,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAM,WAAW;CAAU,CAAA;AAC9C"}

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

@@ -0,0 +1,12 @@
+import { CodeBlockLanguage } from "./refractor.mjs";
+import { ComponentProps } from "react";
+//#region src/components/CodeBlock/CodeBlock.d.ts
+type CodeBlockProps = Omit<ComponentProps<"pre">, "children"> & {
+  code?: string;
+  children?: string;
+  language?: CodeBlockLanguage | (string & {});
+};
+declare function CodeBlock({ code, children, language, className, onBlur, ref: forwardedRef, ...rest }: CodeBlockProps): import("react").JSX.Element;
+//#endregion
+export { CodeBlock, type CodeBlockLanguage, CodeBlockProps };
+//# sourceMappingURL=CodeBlock.d.mts.map

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?: 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"}

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