@patterninc/pattern-ui 0.0.0-main.202610080442.f227f6fcab21 → 0.0.0-main.202610080449.ea0e8cb183ed

package/dist/ai-elements/sources/source-collected.js

@@ -38,7 +38,7 @@ function SourceCollected(t0) {
 	const t3 = isActive && "border-depth-black-4 bg-depth-black-4";
 	let t4;
 	if ($[7] !== className || $[8] !== t3) {
-		t4 = cn("inline-flex items-center justify-center gap-1 rounded-[10px] p-2", "border border-transparent outline-none focus:outline-none focus-visible:outline-none", "transition-all", "hover:bg-depth-black-4", "active:scale-95 active:bg-depth-black-4", t3, className);
+		t4 = cn("inline-flex items-center justify-center gap-1 rounded-10 p-2", "border border-transparent outline-hidden focus-visible:shadow-outline-primary", "backdrop-blur-xs transition-all", "hover:bg-depth-black-4", "active:scale-95 active:bg-depth-black-4", t3, className);
 		$[7] = className;
 		$[8] = t3;
 		$[9] = t4;

package/dist/components/Divider/Divider.js

@@ -1,4 +1,5 @@
 import { TAP_SCALE } from "../shared/button-constants.js";
+import PatternLogoIcon from "../icons/PatternLogoIcon.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "cn";
@@ -9,6 +10,7 @@ const dividerTypes = [
 	"line",
 	"lineSolid",
 	"dashed",
+	"dashedLogo",
 	"space",
 	"textAndLine",
 	"text",
@@ -48,7 +50,7 @@ function DashedLine() {
 	return t0;
 }
 function Divider(t0) {
-	const $ = c(42);
+	const $ = c(46);
 	const { type: t1, spacing, textSeparator, action, qaTestId: t2 } = t0;
 	const type = t1 === void 0 ? "line" : t1;
 	const qaTestId = t2 === void 0 ? "divider" : t2;
@@ -201,38 +203,71 @@ function Divider(t0) {
 		} else t6 = $[31];
 		return t6;
 	}
+	if (type === "dashedLogo") {
+		let t3;
+		if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 flex",
+				children: /* @__PURE__ */ jsx(DashedLine, {})
+			});
+			$[32] = t3;
+		} else t3 = $[32];
+		let t4;
+		if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: "relative flex h-full items-center bg-base-inverse px-5",
+				children: /* @__PURE__ */ jsx(PatternLogoIcon, {
+					size: 24,
+					className: "size-9 text-depth-black-8",
+					"aria-hidden": true
+				})
+			});
+			$[33] = t4;
+		} else t4 = $[33];
+		let t5;
+		if ($[34] !== qaTestId) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className: "relative flex h-9 w-full items-center justify-center",
+				"qa-test-id": qaTestId,
+				children: [t3, t4]
+			});
+			$[34] = qaTestId;
+			$[35] = t5;
+		} else t5 = $[35];
+		return t5;
+	}
 	const t3 = spacing && "flex h-4 shrink-0 items-center";
 	let t4;
-	if ($[32] !== t3) {
+	if ($[36] !== t3) {
 		t4 = cn("w-full", t3);
-		$[32] = t3;
-		$[33] = t4;
-	} else t4 = $[33];
+		$[36] = t3;
+		$[37] = t4;
+	} else t4 = $[37];
 	const t5 = dividerClasses[type];
 	let t6;
-	if ($[34] !== t5) {
+	if ($[38] !== t5) {
 		t6 = cn(t5, "w-full");
-		$[34] = t5;
-		$[35] = t6;
-	} else t6 = $[35];
+		$[38] = t5;
+		$[39] = t6;
+	} else t6 = $[39];
 	let t7;
-	if ($[36] !== t6) {
+	if ($[40] !== t6) {
 		t7 = /* @__PURE__ */ jsx("div", { className: t6 });
-		$[36] = t6;
-		$[37] = t7;
-	} else t7 = $[37];
+		$[40] = t6;
+		$[41] = t7;
+	} else t7 = $[41];
 	let t8;
-	if ($[38] !== qaTestId || $[39] !== t4 || $[40] !== t7) {
+	if ($[42] !== qaTestId || $[43] !== t4 || $[44] !== t7) {
 		t8 = /* @__PURE__ */ jsx("div", {
 			className: t4,
 			"qa-test-id": qaTestId,
 			children: t7
 		});
-		$[38] = qaTestId;
-		$[39] = t4;
-		$[40] = t7;
-		$[41] = t8;
-	} else t8 = $[41];
+		$[42] = qaTestId;
+		$[43] = t4;
+		$[44] = t7;
+		$[45] = t8;
+	} else t8 = $[45];
 	return t8;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patterninc/pattern-ui",
-  "version": "0.0.0-main.202610080442.f227f6fcab21",
+  "version": "0.0.0-main.202610080449.ea0e8cb183ed",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/patterninc/pattern-exp.git",

package/src/ai-elements/sources/source-collected.tsx

@@ -34,9 +34,10 @@ export function SourceCollected({
     <button
       type='button'
       className={cn(
-        'inline-flex items-center justify-center gap-1 rounded-[10px] p-2',
-        'border border-transparent outline-none focus:outline-none focus-visible:outline-none',
-        'transition-all',
+        'inline-flex items-center justify-center gap-1 rounded-10 p-2',
+        'border border-transparent outline-hidden focus-visible:shadow-outline-primary',
+        // Standard blur scale: `backdrop-blur-xs` = 4px.
+        'backdrop-blur-xs transition-all',
         'hover:bg-depth-black-4',
         'active:scale-95 active:bg-depth-black-4',
         isActive && 'border-depth-black-4 bg-depth-black-4',

package/src/components/Divider/Divider.tsx

@@ -3,12 +3,14 @@ import { motion } from 'motion/react'
 import type { ComponentType } from 'react'
 
 import type { RestrictedIconProps } from '../../lib/utils/icon-helpers'
+import PatternLogoIcon from '../icons/PatternLogoIcon'
 import { TAP_SCALE } from '../shared/button-constants'
 
 export const dividerTypes = [
   'line',
   'lineSolid',
   'dashed',
+  'dashedLogo',
   'space',
   'textAndLine',
   'text',
@@ -140,6 +142,21 @@ export function Divider({
     )
   }
 
+  if (type === 'dashedLogo') {
+    return (
+      <div className='relative flex h-9 w-full items-center justify-center' qa-test-id={qaTestId}>
+        <div className='absolute inset-x-0 flex'>
+          <DashedLine />
+        </div>
+        {/* base-inverse masks the dashed line behind the logo; 20px side padding per Figma */}
+        <div className='relative flex h-full items-center bg-base-inverse px-5'>
+          {/* The 24px icon is scaled to Figma's 36px mark; icon sizes are restricted to 16/20/24 */}
+          <PatternLogoIcon size={24} className='size-9 text-depth-black-8' aria-hidden />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
       className={cn('w-full', spacing && 'flex h-4 shrink-0 items-center')}