@handamade/psi-react 0.3.0

package/dist/manifest.json

@@ -0,0 +1,413 @@
+{
+  "components": [
+    {
+      "name": "Button",
+      "description": "",
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"accent\" | \"accent-subtle\" | \"neutral\" | \"neutral-subtle\" | \"ghost\" | \"danger\" | \"danger-subtle\" | \"outline\"",
+          "required": false,
+          "default": "neutral",
+          "description": "Visual variant."
+        },
+        {
+          "name": "size",
+          "type": "24 | 32 | 40 | 48",
+          "required": false,
+          "default": 32,
+          "description": "Height in px (24 | 32 | 40 | 48)."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Anchor target; only used with href."
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Anchor rel; only used with href."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "IconButton",
+      "description": "",
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"accent\" | \"neutral\" | \"ghost\" | \"danger\"",
+          "required": false,
+          "default": "neutral",
+          "description": "Visual variant."
+        },
+        {
+          "name": "size",
+          "type": "24 | 32 | 40 | 48",
+          "required": false,
+          "default": 32,
+          "description": "Square size in px (24 | 32 | 40 | 48)."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Anchor target; only used with href."
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Anchor rel; only used with href."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Card",
+      "description": "",
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"stacked\" | \"featured\"",
+          "required": false,
+          "default": "stacked",
+          "description": "stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md."
+        },
+        {
+          "name": "media",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Media slot rendered edge-to-edge (img, AspectRatio, …)."
+        },
+        {
+          "name": "hoverLift",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Lift on hover: translateY(-6px) over --psi-duration-350."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the root element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Input",
+      "description": "",
+      "props": [
+        {
+          "name": "size",
+          "type": "24 | 32 | 40 | 48",
+          "required": false,
+          "default": 32,
+          "description": "Height in px (24 | 32 | 40 | 48)."
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Show error styling."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying `<input>` element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Select",
+      "description": "",
+      "props": [
+        {
+          "name": "size",
+          "type": "24 | 32 | 40 | 48",
+          "required": false,
+          "default": 32,
+          "description": "Height in px (24 | 32 | 40 | 48). Replaces the native `size` attribute\n(which sets the visible option-row count on a listbox-style `<select>`)\nwith the design system's control height in pixels."
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Show error styling."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSelectElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying `<select>` element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Label text."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying `<input type=\"checkbox\">` element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Switch",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Label text."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying `<input type=\"checkbox\" role=\"switch\">` element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Tag",
+      "description": "",
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "default": "neutral",
+          "description": "Semantic color variant."
+        },
+        {
+          "name": "subtle",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Use tinted background with semantic foreground."
+        },
+        {
+          "name": "onDismiss",
+          "type": "(() => void)",
+          "required": false,
+          "default": null,
+          "description": "When provided, renders a dismiss button that calls this handler."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSpanElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the underlying `<span>` element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "description": "",
+      "props": [
+        {
+          "name": "content",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Tooltip content."
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>",
+          "required": true,
+          "default": null,
+          "description": "The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur)."
+        },
+        {
+          "name": "placement",
+          "type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+          "required": false,
+          "default": "top",
+          "description": "Preferred placement."
+        }
+      ]
+    },
+    {
+      "name": "NavBar",
+      "description": "",
+      "props": [
+        {
+          "name": "brand",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Brand slot (wordmark / logo link), leading edge."
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Trailing actions slot (theme switch, CTA)."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Nav links."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the header element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    },
+    {
+      "name": "AspectRatio",
+      "description": "",
+      "props": [
+        {
+          "name": "ratio",
+          "type": "number",
+          "required": true,
+          "default": null,
+          "description": "Width/height ratio, e.g. 16/10 or 4/5."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": "Forwarded ref to the frame element."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Additional CSS class name(s) merged onto the component's root element."
+        }
+      ]
+    }
+  ]
+}

package/dist/styles.css

@@ -0,0 +1 @@
+._button_m8fis_3{display:inline-flex;align-items:center;justify-content:center;gap:var(--psi-space-6);border:none;border-radius:var(--psi-radius-8);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_m8fis_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_m8fis_3:disabled{opacity:.4;cursor:not-allowed}._button_m8fis_3._disabled_m8fis_31{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_m8fis_39{height:var(--psi-size-24);padding-inline:var(--psi-space-8);font:var(--psi-button-font, var(--psi-text-12-16-medium))}._size32_m8fis_45{height:var(--psi-size-32);padding-inline:var(--psi-space-12);font:var(--psi-button-font, var(--psi-text-14-20-medium))}._size40_m8fis_51{height:var(--psi-size-40);padding-inline:var(--psi-space-16);font:var(--psi-button-font, var(--psi-text-16-24-medium))}._size48_m8fis_57{height:var(--psi-size-48);padding-inline:var(--psi-space-20);font:var(--psi-button-font, var(--psi-text-18-28-medium))}._accent_m8fis_66{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_m8fis_66:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-hover)}._accent_m8fis_66:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-bg-active)}._accentSubtle_m8fis_78{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_m8fis_78:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_m8fis_78:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-accent-subtle-bg-active)}._neutral_m8fis_90{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_m8fis_90:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-hover)}._neutral_m8fis_90:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_m8fis_102{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_m8fis_102:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_m8fis_102:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_m8fis_114{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_m8fis_114:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-hover)}._ghost_m8fis_114:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-ghost-bg-active)}._danger_m8fis_126{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_m8fis_126:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-hover)}._danger_m8fis_126:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-bg-active)}._dangerSubtle_m8fis_138{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_m8fis_138:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_m8fis_138:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-danger-subtle-bg-active)}._outline_m8fis_150{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_m8fis_150:hover:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_m8fis_150:active:not(:disabled):not(._disabled_m8fis_31){background:var(--psi-button-outline-bg-active)}._iconButton_1dldx_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-radius-8);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_1dldx_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_1dldx_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_1dldx_3._disabled_1dldx_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_1dldx_37{width:var(--psi-size-24);height:var(--psi-size-24)}._size32_1dldx_42{width:var(--psi-size-32);height:var(--psi-size-32)}._size40_1dldx_47{width:var(--psi-size-40);height:var(--psi-size-40)}._size48_1dldx_52{width:var(--psi-size-48);height:var(--psi-size-48)}._accent_1dldx_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_1dldx_60:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-hover)}._accent_1dldx_60:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-accent-bg-active)}._neutral_1dldx_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_1dldx_72:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-hover)}._neutral_1dldx_72:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-neutral-bg-active)}._ghost_1dldx_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_1dldx_84:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-hover)}._ghost_1dldx_84:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-ghost-bg-active)}._danger_1dldx_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_1dldx_96:hover:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-hover)}._danger_1dldx_96:active:not(:disabled):not(._disabled_1dldx_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._navbar_1auk1_1{position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1auk1_11{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1auk1_18{display:flex;align-items:center}._links_1auk1_19{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._actions_1auk1_25{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._input_8tzcf_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-radius-8);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);padding-inline:var(--psi-space-8);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_8tzcf_3::placeholder{color:var(--psi-input-placeholder)}._input_8tzcf_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_8tzcf_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_8tzcf_3:disabled{opacity:.4;cursor:not-allowed}._size24_8tzcf_38{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_8tzcf_43{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_8tzcf_48{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_8tzcf_53{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_8tzcf_60{border-color:var(--psi-input-border-error)}._error_8tzcf_60:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_140kg_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-radius-8);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--psi-space-8) center;color:var(--psi-select-fg);font-family:var(--psi-font-sans);padding-inline-start:var(--psi-space-8);padding-inline-end:var(--psi-space-24);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_140kg_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_140kg_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_140kg_3:disabled{opacity:.4;cursor:not-allowed}._size24_140kg_40{height:var(--psi-size-24);font:var(--psi-text-12-16-regular)}._size32_140kg_45{height:var(--psi-size-32);font:var(--psi-text-14-20-regular)}._size40_140kg_50{height:var(--psi-size-40);font:var(--psi-text-16-24-regular)}._size48_140kg_55{height:var(--psi-size-48);font:var(--psi-text-18-28-medium)}._error_140kg_62{border-color:var(--psi-select-border-error)}._error_140kg_62:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_n457n_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_n457n_13{opacity:.4;cursor:not-allowed}._input_n457n_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_n457n_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-radius-4);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_n457n_20:checked+._indicator_n457n_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_n457n_20:checked+._indicator_n457n_34:after{content:"";display:block;width:4px;height:8px;border:solid var(--psi-checkbox-check-fg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_n457n_20:focus-visible+._indicator_n457n_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_n457n_74{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_17qua_3{position:relative;display:inline-flex}._tooltip_17qua_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-radius-6);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_17qua_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_17qua_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_17qua_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_17qua_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}

package/docs/AspectRatio.md

@@ -0,0 +1,27 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# AspectRatio
+
+
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `ratio` | `number` | — | yes | Width/height ratio, e.g. 16/10 or 4/5. |
+| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the frame element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Theming
+
+Override `--psi-aspect-ratio-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).

package/docs/Button.md

@@ -0,0 +1,50 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# Button
+
+
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `variant` | `"accent" \| "accent-subtle" \| "neutral" \| "neutral-subtle" \| "ghost" \| "danger" \| "danger-subtle" \| "outline"` | neutral | no | Visual variant. |
+| `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
+| `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |
+| `target` | `string` | — | no | Anchor target; only used with href. |
+| `rel` | `string` | — | no | Anchor rel; only used with href. |
+| `ref` | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | — | no | Forwarded ref to the underlying element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Keyboard & assistive tech
+
+| Keys | Behavior |
+|---|---|
+| Enter / Space | Activates the button. |
+| Tab | Focusable; visible focus ring via :focus-visible. |
+
+With href it renders an <a>; disabled anchors get aria-disabled, lose the href attribute, and suppress activation (D33).
+
+## Theming
+
+Override `--psi-button-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+## Variant guidance
+
+- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.
+- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.
+- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.
+- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.
+- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.
+- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.
+- **danger** — Destructive action. Delete, remove, disconnect.
+- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.
+- **success | warning** — Status communication (Tag only). Status badges, labels.
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).

package/docs/Card.md

@@ -0,0 +1,39 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# Card
+
+
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `variant` | `"stacked" \| "featured"` | stacked | no | stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md. |
+| `media` | `ReactNode` | — | no | Media slot rendered edge-to-edge (img, AspectRatio, …). |
+| `hoverLift` | `boolean` | false | no | Lift on hover: translateY(-6px) over --psi-duration-350. |
+| `ref` | `Ref<HTMLDivElement>` | — | no | Forwarded ref to the root element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Theming
+
+Override `--psi-card-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+## Variant guidance
+
+- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.
+- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.
+- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.
+- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.
+- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.
+- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.
+- **danger** — Destructive action. Delete, remove, disconnect.
+- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.
+- **success | warning** — Status communication (Tag only). Status badges, labels.
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).

package/docs/Checkbox.md

@@ -0,0 +1,34 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# Checkbox
+
+
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `children` | `ReactNode` | — | no | Label text. |
+| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input type="checkbox">` element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Keyboard & assistive tech
+
+| Keys | Behavior |
+|---|---|
+| Space | Toggles. Native <input type=checkbox> underneath (visually hidden). |
+
+
+## Theming
+
+Override `--psi-checkbox-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).

package/docs/IconButton.md

@@ -0,0 +1,49 @@
+<!-- Generated by emit-docs.ts — do not edit. -->
+# IconButton
+
+
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|---|---|---|---|---|
+| `variant` | `"accent" \| "neutral" \| "ghost" \| "danger"` | neutral | no | Visual variant. |
+| `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Square size in px (24 \| 32 \| 40 \| 48). |
+| `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |
+| `target` | `string` | — | no | Anchor target; only used with href. |
+| `rel` | `string` | — | no | Anchor rel; only used with href. |
+| `ref` | `Ref<HTMLButtonElement \| HTMLAnchorElement>` | — | no | Forwarded ref to the underlying element. |
+| `className` | `string` | — | no | Additional CSS class name(s) merged onto the component's root element. |
+
+## Keyboard & assistive tech
+
+| Keys | Behavior |
+|---|---|
+| Enter / Space | Activates. |
+
+Requires an accessible name — pass aria-label. IconButton does not hide its icon for you; mark the icon aria-hidden yourself.
+
+## Theming
+
+Override `--psi-button-*` custom properties at any scope; interactive states derive automatically (L - 0.04 hover, L - 0.08 active).
+
+## Variant guidance
+
+- **accent** — Primary action, draws attention. Submit, CTA, main action in a group.
+- **accent-subtle** — Accent tone, lower visual weight. Selected state, active filter, soft CTA.
+- **neutral** — Default, structurally present. Secondary actions, toolbar buttons.
+- **neutral-subtle** — Minimal chrome. Inline actions, table row actions.
+- **ghost** — No visible container until hover. Icon-only triggers, compact toolbars.
+- **outline** — Bordered ghost — visible structure, no fill until hover. Marketing CTA, download button; hover fills accent.
+- **danger** — Destructive action. Delete, remove, disconnect.
+- **danger-subtle** — Destructive context, low urgency. Warning badges, soft destructive hints.
+- **success | warning** — Status communication (Tag only). Status badges, labels.
+
+## Rules
+
+- One accent per visual group; everything else neutral or ghost.
+- danger only for actions with real consequences.
+- Sizes are px numbers (24|32|40|48), never S/M/L.
+- Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.
+- Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.
+- --psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono).