@elytracms/studio 0.0.42 → 0.0.43

package/dist/ui/segmented-control.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+/**
+ * Two named tab/toggle primitives (EC-328), replacing 4 hand-rolled
+ * `<button aria-pressed={active}>` instances that shared one of two visual
+ * families but had no shared component:
+ *
+ * - {@link SegmentedControl} — the "segmented pill" family: a `bg-muted/50`
+ *   strip where the active item lifts on a `bg-background` pill with a subtle
+ *   shadow. For NARROWING controls (a namespace filter, a list/grid toggle, a
+ *   named-view selector) — options are peers of the same kind of thing.
+ * - {@link TabButton} — the "accent tab" family: loose buttons (no shared pill
+ *   container — callers already have their own `Row`) where the active tab
+ *   lifts on a `bg-accent` chip. For SWITCHING between distinct content panes
+ *   (a component's Preview/Manifest/References lens row, a fixture-state
+ *   selector).
+ */
+export interface SegmentedControlItem {
+    key: string;
+    label: ReactNode;
+    /** Optional trailing count/badge (e.g. a namespace's manifest count). */
+    count?: number;
+    active: boolean;
+    onClick: () => void;
+    /** Required when `label` is icon-only (no visible text for the button name). */
+    ariaLabel?: string;
+    testId?: string;
+}
+export interface SegmentedControlProps {
+    items: readonly SegmentedControlItem[];
+    ariaLabel?: string;
+    /** Items share the row's width equally (the namespace filter's 3-way split). Default false — items size to content. */
+    equalWidth?: boolean;
+    className?: string;
+    testId?: string;
+}
+/** The "segmented pill" tab family — see the module doc comment. */
+export declare function SegmentedControl({ items, ariaLabel, equalWidth, className, testId, }: SegmentedControlProps): import("react").JSX.Element;
+export interface TabButtonProps {
+    active: boolean;
+    onClick: () => void;
+    children: ReactNode;
+    className?: string;
+    testId?: string;
+}
+/** The "accent tab" family — see the module doc comment. */
+export declare function TabButton({ active, onClick, children, className, testId }: TabButtonProps): import("react").JSX.Element;

package/dist/ui/segmented-control.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+/** The "segmented pill" tab family — see the module doc comment. */
+export function SegmentedControl({ items, ariaLabel, equalWidth, className, testId, }) {
+    return (_jsx("div", { role: "group", ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), ...(testId ? { 'data-testid': testId } : {}), className: cn('flex items-center gap-1 rounded-md bg-muted/50 p-0.5', className), children: items.map((item) => (_jsxs("button", { type: "button", "aria-pressed": item.active, onClick: item.onClick, ...(item.ariaLabel ? { 'aria-label': item.ariaLabel, title: item.ariaLabel } : {}), ...(item.testId ? { 'data-testid': item.testId } : {}), className: cn('items-center justify-center gap-1.5 rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors', equalWidth ? 'flex flex-1' : 'inline-flex', item.active
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'), children: [item.label, item.count !== undefined ? (_jsx("span", { className: "font-mono text-[0.65rem] text-muted-foreground", children: item.count })) : null] }, item.key))) }));
+}
+/** The "accent tab" family — see the module doc comment. */
+export function TabButton({ active, onClick, children, className, testId }) {
+    return (_jsx("button", { type: "button", "aria-pressed": active, onClick: onClick, ...(testId ? { 'data-testid': testId } : {}), className: cn('inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors', active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground', className), children: children }));
+}
+//# sourceMappingURL=segmented-control.js.map

package/dist/ui/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAuCjC,oEAAoE;AACpE,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,MAAM,GACgB;IACtB,OAAO,CACL,cACE,IAAI,EAAC,OAAO,KACR,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC9C,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,EAAE,CAAC,sDAAsD,EAAE,SAAS,CAAC,YAE/E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,kBAEE,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,MAAM,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,KACjB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC/E,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACvD,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAC1C,IAAI,CAAC,MAAM;gBACT,CAAC,CAAC,yCAAyC;gBAC3C,CAAC,CAAC,6CAA6C,CAClD,aAEA,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,eAAM,SAAS,EAAC,gDAAgD,YAAE,IAAI,CAAC,KAAK,GAAQ,CACrF,CAAC,CAAC,CAAC,IAAI,KAjBH,IAAI,CAAC,GAAG,CAkBN,CACV,CAAC,GACE,CACP,CAAA;AACH,CAAC;AAUD,4DAA4D;AAC5D,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAkB;IACxF,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,kBACC,MAAM,EACpB,OAAO,EAAE,OAAO,KACZ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,4DAA4D,EAC1G,SAAS,CACV,YAEA,QAAQ,GACF,CACV,CAAA;AACH,CAAC","sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * Two named tab/toggle primitives (EC-328), replacing 4 hand-rolled\n * `<button aria-pressed={active}>` instances that shared one of two visual\n * families but had no shared component:\n *\n * - {@link SegmentedControl} — the \"segmented pill\" family: a `bg-muted/50`\n *   strip where the active item lifts on a `bg-background` pill with a subtle\n *   shadow. For NARROWING controls (a namespace filter, a list/grid toggle, a\n *   named-view selector) — options are peers of the same kind of thing.\n * - {@link TabButton} — the \"accent tab\" family: loose buttons (no shared pill\n *   container — callers already have their own `Row`) where the active tab\n *   lifts on a `bg-accent` chip. For SWITCHING between distinct content panes\n *   (a component's Preview/Manifest/References lens row, a fixture-state\n *   selector).\n */\n\nexport interface SegmentedControlItem {\n  key: string\n  label: ReactNode\n  /** Optional trailing count/badge (e.g. a namespace's manifest count). */\n  count?: number\n  active: boolean\n  onClick: () => void\n  /** Required when `label` is icon-only (no visible text for the button name). */\n  ariaLabel?: string\n  testId?: string\n}\n\nexport interface SegmentedControlProps {\n  items: readonly SegmentedControlItem[]\n  ariaLabel?: string\n  /** Items share the row's width equally (the namespace filter's 3-way split). Default false — items size to content. */\n  equalWidth?: boolean\n  className?: string\n  testId?: string\n}\n\n/** The \"segmented pill\" tab family — see the module doc comment. */\nexport function SegmentedControl({\n  items,\n  ariaLabel,\n  equalWidth,\n  className,\n  testId,\n}: SegmentedControlProps) {\n  return (\n    <div\n      role=\"group\"\n      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}\n      {...(testId ? { 'data-testid': testId } : {})}\n      className={cn('flex items-center gap-1 rounded-md bg-muted/50 p-0.5', className)}\n    >\n      {items.map((item) => (\n        <button\n          key={item.key}\n          type=\"button\"\n          aria-pressed={item.active}\n          onClick={item.onClick}\n          {...(item.ariaLabel ? { 'aria-label': item.ariaLabel, title: item.ariaLabel } : {})}\n          {...(item.testId ? { 'data-testid': item.testId } : {})}\n          className={cn(\n            'items-center justify-center gap-1.5 rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors',\n            equalWidth ? 'flex flex-1' : 'inline-flex',\n            item.active\n              ? 'bg-background text-foreground shadow-sm'\n              : 'text-muted-foreground hover:text-foreground',\n          )}\n        >\n          {item.label}\n          {item.count !== undefined ? (\n            <span className=\"font-mono text-[0.65rem] text-muted-foreground\">{item.count}</span>\n          ) : null}\n        </button>\n      ))}\n    </div>\n  )\n}\n\nexport interface TabButtonProps {\n  active: boolean\n  onClick: () => void\n  children: ReactNode\n  className?: string\n  testId?: string\n}\n\n/** The \"accent tab\" family — see the module doc comment. */\nexport function TabButton({ active, onClick, children, className, testId }: TabButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      onClick={onClick}\n      {...(testId ? { 'data-testid': testId } : {})}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n        active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -130,7 +130,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.42"
+    "@elytracms/core": "^0.0.43"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",