@tapizlabs/ui 0.2.6 → 0.2.8

package/dist/index.d.ts

@@ -102,8 +102,10 @@ interface LogoMarkProps {
     bgClassName?: string;
     bgFill?: string;
     bgOpacity?: number;
+    /** Product glyph: "lms" = T monogram, "boards" = kanban columns */
+    variant?: "lms" | "boards";
 }
-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

@@ -494,24 +494,28 @@ var Clock = ({ size = 13, className, style }) => /* @__PURE__ */ jsxs5("svg", {
 import { 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" })
+      ] }) : /* @__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" })
       ] })
     ]
   }
@@ -2360,17 +2364,17 @@ import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxs44("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsx61("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-[var(--tapiz-bg-overlay)]", onClick: onClose }),
-    /* @__PURE__ */ jsxs44("section", { className: `absolute top-0 h-full w-full max-w-md border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-lg)] ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
-      /* @__PURE__ */ jsxs44("header", { className: "flex items-start justify-between gap-4 border-b border-[var(--tapiz-border-subtle)] p-5", children: [
+    /* @__PURE__ */ jsx61("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
+    /* @__PURE__ */ jsxs44("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
+      /* @__PURE__ */ jsxs44("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
         /* @__PURE__ */ jsxs44("div", { children: [
-          title ? /* @__PURE__ */ jsx61("h2", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
-          description ? /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+          title ? /* @__PURE__ */ jsx61("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
+          description ? /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsx61("button", { type: "button", onClick: onClose, className: "border border-[var(--tapiz-border-subtle)] px-2 py-1 font-mono text-sm text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-text-primary)]", children: "\xD7" })
+        /* @__PURE__ */ jsx61("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
       ] }),
       /* @__PURE__ */ jsx61("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
-      footer ? /* @__PURE__ */ jsx61("footer", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx61("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
     ] })
   ] });
 }
@@ -3057,14 +3061,14 @@ function PasswordInput({
   return /* @__PURE__ */ jsxs74(
     "div",
     {
-      className: `flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
+      className: `flex border border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) focus-within:border-(--tapiz-border-focus) focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
       children: [
         /* @__PURE__ */ jsx97(
           "input",
           {
             ...props,
             type: visible ? "text" : "password",
-            className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-[var(--tapiz-text-primary)] outline-none focus:shadow-none!"
+            className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-(--tapiz-text-primary) outline-none focus:shadow-none!"
           }
         ),
         /* @__PURE__ */ jsx97(
@@ -3075,7 +3079,7 @@ function PasswordInput({
             "aria-pressed": visible,
             onClick: () => setVisible((v) => !v),
             tabIndex: -1,
-            className: "grid place-items-center px-3 text-[var(--tapiz-text-muted)] transition-colors hover:text-[var(--tapiz-text-primary)]",
+            className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
             children: visible ? /* @__PURE__ */ jsx97(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx97(Eye, { size: 15 })
           }
         )