@momoi-labs/kiso 0.4.0 → 0.5.0

package/README.md

@@ -61,3 +61,12 @@ Code, config, and templates: **MIT**. Brand assets (name, logo, type):
 **CC BY 4.0** — brand usage rules live in [`kiso/docs/brand.md`](kiso/docs/brand.md).
 
 © 2026 Momoi Labs — [momoi-labs.dev](https://momoi-labs.dev)
+
+## React components and releases
+
+[`@momoi-labs/kiso-react`](packages/kiso-react/README.md) provides React components
+using Kiso tokens and CSS. Run `npm ci` and `npm run prototype` to open the
+Self Host simulation and the full component gallery.
+
+See [Publishing Kiso](docs/publishing.md) for the first npm publication, trusted
+publisher setup, release PRs, and version tags.

package/kiso/docs/components/README.md

@@ -36,6 +36,7 @@ token consumption, and a Radix/shadcn behavioral reference where one exists.
 
 ## Navigation and structure
 
+- [BrandMark](brand-mark.md): Decorative letter or icon beside a product name.
 - [Breadcrumb](breadcrumb.md) — Shows the current location within a hierarchy.
 - [Header](header.md) — Composes persistent application navigation and global actions.
 - [Navigation](navigation.md) — Provides a generic semantic container for destination links.

package/kiso/docs/components/brand-mark.md

@@ -0,0 +1,43 @@
+# BrandMark
+
+## Purpose
+
+BrandMark is the small rounded square next to a product name in a sidebar or
+login header. It holds a letter or a single inline SVG. The self-host console
+uses the momoi-labs terminal prompt logo, as shown in
+[self-host PR #48](https://github.com/momoi-labs/self-host/pull/48).
+
+## Anatomy and variants
+
+- A decorative `span` with the existing `.brand-mark` class.
+- Letter content, such as "S", keeps the class's font weight and font size.
+- Icon content uses `.icon.icon-sm`. The icon inherits `currentColor`, has no
+  fill, and uses a 1.75 stroke width with round caps and joins.
+- The adjacent product name supplies the accessible name.
+
+In React, pass either content through `children`, as with Button and Badge.
+BrandMark adds the icon classes to an element child without an extra wrapper.
+Custom icon components must forward `className` to their inline SVG.
+
+`TerminalIcon` supplies the momoi-labs `>_` glyph on a 16 by 16 viewBox. Its
+paths are `M4 4.5L8 8l-4 3.5` and `M9.5 11.5H13`.
+
+## States and accessibility
+
+BrandMark is static and always has `aria-hidden="true"`, including when a
+consumer passes a different value. Keep the product name visible beside it.
+Do not put interactive or focusable content inside the mark. If the brand
+navigates, wrap the mark and product name together in a Link.
+
+## Token consumption
+
+The existing `.brand-mark` CSS remains unchanged. Grid placement centers the
+content; `--size-control-sm` sets both dimensions and `--radius-lg` rounds the
+corners. The background uses `--color-primary` and the foreground uses
+`--color-primary-foreground`. Letter typography uses `--type-weight-bold` and
+`--type-size-label`; icon dimensions use `--size-icon-sm`.
+
+## Radix/shadcn mapping
+
+There is no dedicated behavioral primitive. The React implementation uses
+Radix Slot to merge icon classes onto the child SVG.

package/kiso/docs/components/button.md

@@ -160,9 +160,9 @@ Map Kiso variants onto shadcn *by intent*, not by name:
 
 | Kiso variant | shadcn `variant` |
 | --- | --- |
-| `primary` | `outline`, restyled: `--color-primary` text and border, `--type-weight-semibold`. Do not use shadcn's filled `default` — that needs an on-primary text role Kiso does not have. |
+| `primary` | `default`, restyled: `--color-primary` fill, `--color-primary-foreground` label. Do not restyle shadcn's `outline` into an accent-text primary — that treatment reads as a secondary control. |
 | `default` | `outline` with `--color-foreground` / `--color-border` |
-| `destructive` | `outline` restyled with `--color-danger` text and border, not filled `destructive` |
+| `destructive` | `destructive`, restyled: `--color-danger` fill, `--color-danger-foreground` label |
 | `ghost` | `ghost` |
 
 Do **not** use shadcn `variant="link"`. That style is [Link](link.md).

package/kiso/docs/components/icon-button.md

@@ -145,7 +145,7 @@ No dedicated Radix or shadcn `IconButton` primitive. Implement as shadcn
 | IconButton `sm` | `size="icon-sm"` (or `icon-xs` only if it still uses `--spacing-xs` padding) |
 | IconButton `md` | `size="icon"` |
 | IconButton `lg` | `size="icon-lg"` |
-| variants | Same Button mapping as [Button](button.md) (Kiso `primary` and `default` both start from shadcn `outline`, restyled) |
+| variants | Same Button mapping as [Button](button.md) (Kiso `primary` is a fill, `default` starts from shadcn `outline`) |
 
 Always pass `aria-label`. Do not rely on the icon's title or a Tooltip
 alone.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/momoi-labs/blueprint.git"
+    "url": "git+https://github.com/momoi-labs/blueprint.git",
+    "directory": "packages/kiso"
   },
   "type": "module",
   "files": [
@@ -22,23 +23,11 @@
     "./contracts/*": "./kiso/*"
   },
   "scripts": {
-    "build": "style-dictionary build --config style-dictionary.config.mjs",
-    "check": "npm run build && npm run check:generated && npm run check:tokens",
-    "check:generated": "git diff --exit-code -- tokens/build/",
-    "check:tokens": "node scripts/validate-dtcg.mjs && node scripts/check-contrast.mjs tokens/tokens.json && node scripts/check-component-token-refs.mjs",
-    "changeset": "changeset",
-    "release": "changeset publish"
+    "build": "node ../../scripts/build-kiso-package.mjs",
+    "prepack": "npm run build"
   },
   "publishConfig": {
     "access": "public",
     "provenance": true
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "ajv": "^8.17.1",
-    "style-dictionary": "^5.0.0"
-  },
-  "engines": {
-    "node": ">=24"
   }
 }