@instruments/materia-ui 0.1.0 → 0.3.0

package/dist/{components/segmented/segmented-variants.d.ts → tokens/segmented.d.ts}

@@ -1,4 +1,15 @@
-import type { ComponentSize } from "../../tokens/size.js";
+/**
+ * The segmented "pill" visual language: shell, padding, gap, trigger text and
+ * active-indicator class strings, with size-to-class maps.
+ *
+ * SegmentedControl, Tabs and TabNavigation all consume these, so they render
+ * an identical shell at any size. They are class strings, not components:
+ * apply them through `className`. For an actual segmented UI, use
+ * `SegmentedControl`.
+ *
+ * @module
+ */
+import type { ComponentSize } from "./size.js";
 /**
  * Shared shell classes for segmented controls (Tabs default, ToggleGroup pill).
  *

package/dist/{components/segmented/segmented-variants.js → tokens/segmented.js}

@@ -1,3 +1,14 @@
+/**
+ * The segmented "pill" visual language: shell, padding, gap, trigger text and
+ * active-indicator class strings, with size-to-class maps.
+ *
+ * SegmentedControl, Tabs and TabNavigation all consume these, so they render
+ * an identical shell at any size. They are class strings, not components:
+ * apply them through `className`. For an actual segmented UI, use
+ * `SegmentedControl`.
+ *
+ * @module
+ */
 /**
  * Shared shell classes for segmented controls (Tabs default, ToggleGroup pill).
  *

package/lint/tokens.mjs

@@ -40,6 +40,7 @@ export const colorTokens = [
   "brand-accent",
   "brand-foreground",
   "brand-soft",
+  "brand-strong",
   "card",
   "card-background",
   "card-border",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -392,10 +392,6 @@
       "types": "./dist/components/section.d.ts",
       "default": "./dist/components/section.js"
     },
-    "./components/segmented": {
-      "types": "./dist/components/segmented.d.ts",
-      "default": "./dist/components/segmented.js"
-    },
     "./components/segmented-control": {
       "types": "./dist/components/segmented-control.d.ts",
       "default": "./dist/components/segmented-control.js"
@@ -792,6 +788,10 @@
       "types": "./dist/tokens/radius-tokens.d.ts",
       "default": "./dist/tokens/radius-tokens.js"
     },
+    "./tokens/segmented": {
+      "types": "./dist/tokens/segmented.d.ts",
+      "default": "./dist/tokens/segmented.js"
+    },
     "./tokens/shadows": {
       "types": "./dist/tokens/shadows.d.ts",
       "default": "./dist/tokens/shadows.js"

package/dist/components/segmented/segmented-root.d.ts

@@ -1,12 +0,0 @@
-/**
- * Shared class-name token primitives for the segmented-control visual language.
- *
- * Consumed by SegmentedControl, Tabs, and TabNavigation so they render an
- * identical shell, padding, gap, and active indicator at any size.
- * Not components - these are Tailwind class strings and size→class maps.
- *
- * @bestPractice These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.
- * @bestPractice Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.
- * @category forms
- */
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "./segmented-variants.js";

package/dist/components/segmented/segmented-root.js

@@ -1,12 +0,0 @@
-/**
- * Shared class-name token primitives for the segmented-control visual language.
- *
- * Consumed by SegmentedControl, Tabs, and TabNavigation so they render an
- * identical shell, padding, gap, and active indicator at any size.
- * Not components - these are Tailwind class strings and size→class maps.
- *
- * @bestPractice These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.
- * @bestPractice Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.
- * @category forms
- */
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "./segmented-variants.js";

package/dist/components/segmented.d.ts

@@ -1 +0,0 @@
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, } from "./segmented/segmented-variants.js";

package/dist/components/segmented.js

@@ -1 +0,0 @@
-export { SEGMENTED_GAP, SEGMENTED_INDICATOR_ACTIVE_CLASS, SEGMENTED_INDICATOR_CLASS, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, } from "./segmented/segmented-variants.js";