@shipsite.dev/components 0.2.20 → 0.2.21

package/dist/marketing/CalloutCard.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils';
 export function CalloutCard({ title, description, variant = 'info', children }) {
-    const variantStyles = {
-        info: 'bg-primary/5 border-primary/20 dark:bg-primary/10',
-        success: 'bg-emerald-500/10 border-emerald-500/20',
-        warning: 'bg-amber-500/10 border-amber-500/20',
+    const accentStyles = {
+        info: 'border-l-primary',
+        success: 'border-l-emerald-500',
+        warning: 'border-l-amber-500',
     };
-    return (_jsx("div", { className: cn('mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] my-8'), children: _jsxs("div", { className: cn('rounded-xl border p-6', variantStyles[variant]), children: [_jsx("h3", { className: "font-semibold text-foreground mb-2", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description }), children] }) }));
+    return (_jsx("div", { className: cn('mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] my-8'), children: _jsxs("div", { className: cn('glass-1 rounded-xl border-l-4 p-6 shadow-xl', accentStyles[variant]), children: [_jsx("h3", { className: "font-semibold tracking-tight text-foreground mb-2", children: title }), _jsx("p", { className: "text-sm text-muted-foreground text-balance", children: description }), children] }) }));
 }
 //# sourceMappingURL=CalloutCard.js.map

package/dist/marketing/CalloutCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutCard.js","sourceRoot":"","sources":["../../src/marketing/CalloutCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AASlC,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAoB;IAC9F,MAAM,aAAa,GAAG;QACpB,IAAI,EAAE,mDAAmD;QACzD,OAAO,EAAE,yCAAyC;QAClD,OAAO,EAAE,qCAAqC;KAC/C,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,6DAA6D,CAAC,YACjF,eAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,aACjE,aAAI,SAAS,EAAC,oCAAoC,YAAE,KAAK,GAAM,EAC/D,YAAG,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAK,EAC7D,QAAQ,IACL,GACA,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CalloutCard.js","sourceRoot":"","sources":["../../src/marketing/CalloutCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AASlC,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAoB;IAC9F,MAAM,YAAY,GAAG;QACnB,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,sBAAsB;QAC/B,OAAO,EAAE,oBAAoB;KAC9B,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,6DAA6D,CAAC,YAC/E,eAAK,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,aACtF,aAAI,SAAS,EAAC,mDAAmD,YAAE,KAAK,GAAM,EAC9E,YAAG,SAAS,EAAC,4CAA4C,YAAE,WAAW,GAAK,EAC1E,QAAQ,IACL,GACF,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipsite.dev/components",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "repository": {
     "type": "git",
     "url": "https://github.com/shipsite/shipsite",

package/src/marketing/CalloutCard.tsx

@@ -9,19 +9,19 @@ interface CalloutCardProps {
 }
 
 export function CalloutCard({ title, description, variant = 'info', children }: CalloutCardProps) {
-  const variantStyles = {
-    info: 'bg-primary/5 border-primary/20 dark:bg-primary/10',
-    success: 'bg-emerald-500/10 border-emerald-500/20',
-    warning: 'bg-amber-500/10 border-amber-500/20',
+  const accentStyles = {
+    info: 'border-l-primary',
+    success: 'border-l-emerald-500',
+    warning: 'border-l-amber-500',
   };
 
   return (
     <div className={cn('mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] my-8')}>
-    <div className={cn('rounded-xl border p-6', variantStyles[variant])}>
-      <h3 className="font-semibold text-foreground mb-2">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-      {children}
-    </div>
+      <div className={cn('glass-1 rounded-xl border-l-4 p-6 shadow-xl', accentStyles[variant])}>
+        <h3 className="font-semibold tracking-tight text-foreground mb-2">{title}</h3>
+        <p className="text-sm text-muted-foreground text-balance">{description}</p>
+        {children}
+      </div>
     </div>
   );
 }