@tangle-network/sandbox-ui 0.133.6 → 0.133.7

package/dist/pages.js

@@ -7,7 +7,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { useState } from "react";
 import { AlertCircle, CheckCircle, ChevronDown, ChevronUp, Clock, Cpu, Eye, EyeOff, GripVertical, Key, Layers, Lock, MemoryStick, Pencil, Plus, Power, PowerOff, Terminal, Trash2, Upload } from "lucide-react";
-import { focusField } from "@tangle-network/ui/utils";
+import { cn, focusField, focusRing, ixControl, ixControlSoft, ixField } from "@tangle-network/ui/utils";
 //#region src/pages/auth-page.tsx
 const C = {
 	pageBg: "hsl(var(--background, 240 5% 97%))",
@@ -15,8 +15,6 @@ const C = {
 	border: "hsl(var(--border, 214 32% 91%))",
 	text: "hsl(var(--card-foreground, 222 47% 11%))",
 	muted: "hsl(var(--muted-foreground, 240 4% 46%))",
-	inputBg: "var(--well-card, var(--bg-input, #f5f5f4))",
-	inputBorder: "var(--field-border, hsl(var(--border, 214 32% 91%)))",
 	hover: "hsl(var(--muted, 240 5% 96%))",
 	danger: "hsl(var(--destructive, 0 72% 42%))",
 	ink: "hsl(var(--foreground, 222 47% 11%))",
@@ -66,6 +64,9 @@ function GoogleIcon() {
 		]
 	});
 }
+const OUTLINE_CONTROL = cn("border border-border", focusRing, ixControl);
+const FIELD = cn("border", focusField, ixField);
+const FILLED_CONTROL = cn("border border-transparent", focusRing, ixControl);
 const SOCIAL_LABEL = {
 	github: "GitHub",
 	google: "Google"
@@ -109,19 +110,16 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 		width: "100%",
 		padding: "0 16px",
 		...CONTROL,
-		border: `1px solid ${C.border}`,
 		background: "transparent",
 		color: C.text,
 		fontWeight: 500,
 		cursor: "pointer",
-		transition: "background 120ms"
+		transition: "background 120ms, border-color 120ms, box-shadow 120ms"
 	};
 	const inputStyle = {
 		width: "100%",
 		padding: "0 16px",
 		...CONTROL,
-		border: `1px solid ${C.inputBorder}`,
-		background: C.inputBg,
 		color: C.text
 	};
 	return /* @__PURE__ */ jsx("div", {
@@ -134,6 +132,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 			background: C.pageBg
 		},
 		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "card",
 			className,
 			style: {
 				width: "100%",
@@ -164,6 +163,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 				}),
 				/* @__PURE__ */ jsxs("a", {
 					href: tangleAuthUrl,
+					className: FILLED_CONTROL,
 					style: {
 						display: "flex",
 						alignItems: "center",
@@ -173,11 +173,10 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 						padding: "0 16px",
 						...CONTROL,
 						background: buttonBg,
-						border: "1px solid transparent",
 						color: buttonFg,
 						fontWeight: 600,
 						textDecoration: "none",
-						transition: "background 120ms"
+						transition: "background 120ms, border-color 120ms, box-shadow 120ms"
 					},
 					onMouseEnter: (e) => e.currentTarget.style.background = buttonHoverBg,
 					onMouseLeave: (e) => e.currentTarget.style.background = buttonBg,
@@ -192,6 +191,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 					},
 					children: providers.map((p) => /* @__PURE__ */ jsxs("button", {
 						type: "button",
+						className: OUTLINE_CONTROL,
 						style: outlineBtn,
 						onClick: () => {
 							window.location.href = socialHref(p);
@@ -247,6 +247,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 							autoComplete: "name",
 							value: name,
 							onChange: (e) => setName(e.target.value),
+							className: FIELD,
 							style: inputStyle
 						}),
 						/* @__PURE__ */ jsx("input", {
@@ -256,6 +257,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 							placeholder: "Email",
 							value: email,
 							onChange: (e) => setEmail(e.target.value),
+							className: FIELD,
 							style: inputStyle
 						}),
 						/* @__PURE__ */ jsx("input", {
@@ -265,6 +267,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 							placeholder: "Password",
 							value: password,
 							onChange: (e) => setPassword(e.target.value),
+							className: FIELD,
 							style: inputStyle
 						}),
 						error && /* @__PURE__ */ jsx("p", {
@@ -278,6 +281,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 						/* @__PURE__ */ jsx("button", {
 							type: "submit",
 							disabled: loading,
+							className: OUTLINE_CONTROL,
 							style: {
 								...outlineBtn,
 								opacity: loading ? .5 : 1
@@ -296,6 +300,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 					},
 					children: [isSignup ? "Already have an account? " : `New to Tangle${product ? ` ${product}` : ""}? `, /* @__PURE__ */ jsx("a", {
 						href: altHref,
+						className: cn("rounded-sm", focusRing, ixControlSoft),
 						style: {
 							fontWeight: 500,
 							color: C.text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.133.6",
+  "version": "0.133.7",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {