@tapizlabs/ui 0.2.7 → 0.2.10

package/CHANGELOG.md

@@ -10,6 +10,11 @@ The format is based on Keep a Changelog and the package follows Semantic Version
 - npm-ready README with package setup, exports, examples, and publishing guidance
 - shared support for landing icon exports such as `Star`, `AppleIcon`, and `GooglePlayIcon`
 
+## [0.2.9] - 2026-06-13
+
+### Added
+- `LogoMark` gains a `"playground"` variant — Tapiz "T" with a shell prompt `>_` glyph (chevron in signal yellow, white cursor) for the Tapiz Playground product
+
 ### Changed
 - shared `Button` accepts icon component references in addition to rendered nodes
 - shared `ConfirmDialog` supports both `description` and compatibility `message` props

package/dist/index.d.ts

@@ -102,8 +102,17 @@ interface LogoMarkProps {
     bgClassName?: string;
     bgFill?: string;
     bgOpacity?: number;
+    /**
+     * Product glyph:
+     * - "lms" = T monogram
+     * - "boards" = kanban columns
+     * - "playground" = T + shell prompt `>_` (SQL/terminal)
+     * - "whiteboard" = tabla sa skiciranim potezom
+     * - "cloud" = oblak sa T monogramom (Tapiz Cloud Platform / status)
+     */
+    variant?: "lms" | "boards" | "playground" | "whiteboard" | "cloud";
 }
-declare const LogoMark: ({ size, className, }: LogoMarkProps) => react.JSX.Element;
+declare const LogoMark: ({ size, className, bgClassName, bgFill, bgOpacity, variant, }: LogoMarkProps) => react.JSX.Element;
 
 declare const FormIcon: ({ size, className, style }: IconProps) => react.JSX.Element;
 declare const CalendarWeek: ({ size, className, style }: IconProps) => react.JSX.Element;

package/dist/index.js

@@ -491,27 +491,88 @@ var Clock = ({ size = 13, className, style }) => /* @__PURE__ */ jsxs5("svg", {
 ] });
 
 // src/components/icons/LogoIcons.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var LogoMark = ({
   size = 28,
-  className
+  className,
+  bgClassName,
+  bgFill = "#1496b3",
+  bgOpacity = 1,
+  variant = "lms"
 }) => /* @__PURE__ */ jsxs6(
   "svg",
   {
     width: size,
     height: size,
-    className: `${className} w-[${size}px] h-[${size}px]`,
-    viewBox: "0 0 32 32",
+    className,
+    viewBox: "0 0 64 64",
     fill: "none",
     children: [
-      /* @__PURE__ */ jsx6("rect", { width: "32", height: "32", rx: "8", fill: "none" }),
-      /* @__PURE__ */ jsx6("path", { d: "M5 9 L5 5 L9 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square" }),
-      /* @__PURE__ */ jsx6("path", { d: "M23 5 L27 5 L27 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square" }),
-      /* @__PURE__ */ jsx6("path", { d: "M5 23 L5 27 L9 27", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square" }),
-      /* @__PURE__ */ jsx6("path", { d: "M23 27 L27 27 L27 23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", className: "opacity-50" }),
-      /* @__PURE__ */ jsxs6("g", { fill: "currentColor", children: [
-        /* @__PURE__ */ jsx6("rect", { x: "15", y: "10", width: "2", height: "14" }),
-        /* @__PURE__ */ jsx6("rect", { x: "10", y: "10", width: "12", height: "2" })
+      /* @__PURE__ */ jsx6("rect", { width: "64", height: "64", rx: "14", fill: bgFill, opacity: bgOpacity, className: bgClassName }),
+      variant === "lms" && /* @__PURE__ */ jsxs6("g", { fill: "#fff", children: [
+        /* @__PURE__ */ jsx6("rect", { x: "14", y: "14", width: "36", height: "10", rx: "3" }),
+        /* @__PURE__ */ jsx6("rect", { x: "27", y: "14", width: "10", height: "36", rx: "3" })
+      ] }),
+      variant === "boards" && /* @__PURE__ */ jsxs6("g", { fill: "#fff", children: [
+        /* @__PURE__ */ jsx6("rect", { x: "13", y: "15", width: "10", height: "26", rx: "5" }),
+        /* @__PURE__ */ jsx6("rect", { x: "27", y: "15", width: "10", height: "34", rx: "5" }),
+        /* @__PURE__ */ jsx6("rect", { x: "41", y: "15", width: "10", height: "20", rx: "5" })
+      ] }),
+      variant === "playground" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsxs6("g", { fill: "#fff", children: [
+          /* @__PURE__ */ jsx6("rect", { x: "13", y: "12", width: "38", height: "9", rx: "3" }),
+          /* @__PURE__ */ jsx6("rect", { x: "27", y: "12", width: "10", height: "30", rx: "3" })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            d: "M16 46 L23 51 L16 56",
+            stroke: "#d4ff3a",
+            strokeWidth: "4.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx6("rect", { x: "30", y: "52.5", width: "14", height: "4.5", rx: "2.25", fill: "#fff" })
+      ] }),
+      variant === "whiteboard" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx6("rect", { x: "12", y: "15", width: "40", height: "28", rx: "4", fill: "#fff" }),
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            d: "M19 35 C24 24, 30 24, 33 31 C35.5 37, 41 36, 45 27",
+            stroke: "#1496b3",
+            strokeWidth: "3.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx6("circle", { cx: "19", cy: "35", r: "2.6", fill: "#1496b3" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "45", cy: "27", r: "2.6", fill: "#d4ff3a" }),
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            d: "M22 43 L19 51 M42 43 L45 51",
+            stroke: "#fff",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ] }),
+      variant === "cloud" && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx6(
+          "path",
+          {
+            fill: "#fff",
+            d: "M23 45 q-4.6 0-7.8-3.2Q12 38.6 12 34 q0-3.95 2.5-7 2.5-3.05 6.4-3.83 1.05-4.25 4.6-6.91Q29.05 13.6 33.7 13.6 q5.75 0 9.78 3.9 4.03 3.9 4.22 9.52 3.26.29 5.38 2.69 2.12 2.4 2.12 5.63 0 3.58-2.56 6.11T46 47 H23Z"
+          }
+        ),
+        /* @__PURE__ */ jsxs6("g", { fill: "#1496b3", children: [
+          /* @__PURE__ */ jsx6("rect", { x: "25", y: "30", width: "16", height: "3.6", rx: "1.6" }),
+          /* @__PURE__ */ jsx6("rect", { x: "31.2", y: "30", width: "3.6", height: "12", rx: "1.6" })
+        ] })
       ] })
     ]
   }
@@ -1773,7 +1834,7 @@ function StatusBadge({ label, variant = "default", className = "" }) {
 // src/components/shared/ActionMenu.tsx
 import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { Fragment, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var defaultMenuStyle = {
   background: "var(--color-ink-200)",
   border: "1px solid var(--color-border-hi)",
@@ -1857,7 +1918,7 @@ function ActionMenu({
       document.removeEventListener("keydown", handle);
     };
   }, [open]);
-  const menuNode = open && pos ? /* @__PURE__ */ jsxs28(Fragment, { children: [
+  const menuNode = open && pos ? /* @__PURE__ */ jsxs28(Fragment2, { children: [
     /* @__PURE__ */ jsx41("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
     /* @__PURE__ */ jsx41(
       "div",
@@ -2235,7 +2296,7 @@ function Breadcrumbs({ items, separator = "/", className = "" }) {
 }
 
 // src/components/navigation/SidebarNav.tsx
-import { Fragment as Fragment2, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function SidebarNav({ groups, header, footer, className = "" }) {
   return /* @__PURE__ */ jsxs39("div", { className: `flex h-full min-h-screen flex-col bg-[var(--tapiz-bg-surface)] ${className}`, children: [
     header ? /* @__PURE__ */ jsx56("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-4", children: header }) : null,
@@ -2252,7 +2313,7 @@ function SidebarNavLink({ item }) {
     item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)] shadow-[inset_3px_0_0_var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] hover:text-[var(--tapiz-text-primary)]",
     item.disabled ? "pointer-events-none opacity-40" : ""
   ].filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ jsxs39(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs39(Fragment3, { children: [
     item.icon ? /* @__PURE__ */ jsx56("span", { className: "grid size-5 place-items-center text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
     /* @__PURE__ */ jsx56("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
     item.badge ? /* @__PURE__ */ jsx56("span", { children: item.badge }) : null
@@ -2858,9 +2919,9 @@ function DataToolbar({ title, description, search, filters, actions, className =
 }
 
 // src/components/framework/ResourceCard.tsx
-import { Fragment as Fragment3, jsx as jsx88, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx88, jsxs as jsxs65 } from "react/jsx-runtime";
 function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
-  const content = /* @__PURE__ */ jsxs65(Fragment3, { children: [
+  const content = /* @__PURE__ */ jsxs65(Fragment4, { children: [
     /* @__PURE__ */ jsxs65("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs65("div", { className: "flex min-w-0 items-start gap-3", children: [
         icon ? /* @__PURE__ */ jsx88("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
@@ -3155,12 +3216,12 @@ function MasonryGrid({ children, columns = 3, gap = "md", className = "", style
 }
 
 // src/components/layout/PageRail.tsx
-import { Fragment as Fragment4, jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
 function PageRail({ title, items, actions, className = "", style }) {
   return /* @__PURE__ */ jsxs79("aside", { className: ["sticky top-20 rounded-none border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)]", className].filter(Boolean).join(" "), style, children: [
     title ? /* @__PURE__ */ jsx103("div", { className: "kicker mb-3 px-2", children: title }) : null,
     /* @__PURE__ */ jsx103("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
-      const content = /* @__PURE__ */ jsxs79(Fragment4, { children: [
+      const content = /* @__PURE__ */ jsxs79(Fragment5, { children: [
         /* @__PURE__ */ jsx103("span", { className: "truncate", children: item.label }),
         item.meta ? /* @__PURE__ */ jsx103("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
       ] });