@xcelsior/ui-chat 2.0.4 → 2.0.5

package/storybook-static/assets/BrandIcons.stories-C6gBovfU.js

@@ -0,0 +1,106 @@
+import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";import{X as s,a as n,C as c}from"./BrandIcons-BsRAdWzL.js";import"./index-yBjzXJbu.js";const D={title:"Brand/Icons",parameters:{layout:"padded"},tags:["autodocs"]},a={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-4",children:[e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:16,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"16px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:24,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"24px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:32,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"32px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:48,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"48px"})]})]})},t={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-6 bg-gray-900 rounded-lg",children:[e.jsx(s,{size:24,color:"white"}),e.jsx(s,{size:32,color:"white"}),e.jsx(s,{size:48,color:"white"})]})},r={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-4",children:[e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(n,{size:24}),e.jsx("span",{className:"text-xs text-gray-500",children:"24px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(n,{size:32}),e.jsx("span",{className:"text-xs text-gray-500",children:"32px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(n,{size:40}),e.jsx("span",{className:"text-xs text-gray-500",children:"40px (default)"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(n,{size:56}),e.jsx("span",{className:"text-xs text-gray-500",children:"56px (FAB)"})]})]})},i={render:()=>e.jsxs("div",{className:"flex flex-col gap-10 p-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-semibold text-gray-400 mb-4",children:"Actual FAB (36px icon in 64px circle)"}),e.jsx("div",{className:"rounded-full flex items-center justify-center",style:{width:64,height:64,background:"linear-gradient(135deg, #337eff, #005eff)",boxShadow:"0 4px 24px 0 rgba(51,126,255,0.5)"},children:e.jsx(c,{size:36,color:"white"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-semibold text-gray-400 mb-4",children:"Enlarged 2x"}),e.jsx("div",{className:"rounded-full flex items-center justify-center",style:{width:128,height:128,background:"linear-gradient(135deg, #337eff, #005eff)"},children:e.jsx(c,{size:72,color:"white"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-semibold text-gray-400 mb-4",children:"On dark page"}),e.jsx("div",{className:"flex items-center gap-10 p-10 rounded-lg",style:{background:"linear-gradient(180deg, #0a0e27, #111633)"},children:e.jsx("div",{className:"rounded-full flex items-center justify-center",style:{width:64,height:64,background:"linear-gradient(135deg, #337eff, #005eff)",boxShadow:"0 4px 24px 0 rgba(51,126,255,0.5), 0 8px 32px -4px rgba(0,0,0,0.3)"},children:e.jsx(c,{size:36,color:"white"})})})]})]})},l={render:()=>e.jsxs("div",{className:"flex flex-col gap-3 max-w-md p-4 bg-gray-900 rounded-lg",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(n,{size:32}),e.jsxs("div",{className:"bg-gray-800 rounded-lg px-3 py-2 text-sm text-white",children:[e.jsx("p",{className:"text-xs text-blue-400 mb-1",children:"AI Assistant"}),"Hello! How can I help you today?"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-medium",children:"S"}),e.jsxs("div",{className:"bg-gray-800 rounded-lg px-3 py-2 text-sm text-white",children:[e.jsx("p",{className:"text-xs text-green-400 mb-1",children:"Sarah (Agent)"}),"I'm here to help with your inquiry!"]})]})]})};var d,x,o,m,p;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={16} color="#337eff" />
+                <span className="text-xs text-gray-500">16px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={24} color="#337eff" />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={32} color="#337eff" />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={48} color="#337eff" />
+                <span className="text-xs text-gray-500">48px</span>
+            </div>
+        </div>
+}`,...(o=(x=a.parameters)==null?void 0:x.docs)==null?void 0:o.source},description:{story:"Xcelsior X symbol at various sizes",...(p=(m=a.parameters)==null?void 0:m.docs)==null?void 0:p.description}}};var g,f,h,v,u;t.parameters={...t.parameters,docs:{...(g=t.parameters)==null?void 0:g.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-6 bg-gray-900 rounded-lg">
+            <XcelsiorSymbol size={24} color="white" />
+            <XcelsiorSymbol size={32} color="white" />
+            <XcelsiorSymbol size={48} color="white" />
+        </div>
+}`,...(h=(f=t.parameters)==null?void 0:f.docs)==null?void 0:h.source},description:{story:"Symbol on dark backgrounds",...(u=(v=t.parameters)==null?void 0:v.docs)==null?void 0:u.description}}};var y,b,N,j,z;r.parameters={...r.parameters,docs:{...(y=r.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={24} />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={32} />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={40} />
+                <span className="text-xs text-gray-500">40px (default)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={56} />
+                <span className="text-xs text-gray-500">56px (FAB)</span>
+            </div>
+        </div>
+}`,...(N=(b=r.parameters)==null?void 0:b.docs)==null?void 0:N.source},description:{story:"Xcelsior avatar (gradient circle with symbol) at various sizes",...(z=(j=r.parameters)==null?void 0:j.docs)==null?void 0:z.description}}};var w,S,A,X,k;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  render: () => <div className="flex flex-col gap-10 p-8">
+            {/* Actual FAB size */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">Actual FAB (36px icon in 64px circle)</h3>
+                <div className="rounded-full flex items-center justify-center" style={{
+        width: 64,
+        height: 64,
+        background: 'linear-gradient(135deg, #337eff, #005eff)',
+        boxShadow: '0 4px 24px 0 rgba(51,126,255,0.5)'
+      }}>
+                    <ChatBubbleIcon size={36} color="white" />
+                </div>
+            </div>
+            {/* Enlarged */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">Enlarged 2x</h3>
+                <div className="rounded-full flex items-center justify-center" style={{
+        width: 128,
+        height: 128,
+        background: 'linear-gradient(135deg, #337eff, #005eff)'
+      }}>
+                    <ChatBubbleIcon size={72} color="white" />
+                </div>
+            </div>
+            {/* On dark page */}
+            <div>
+                <h3 className="text-sm font-semibold text-gray-400 mb-4">On dark page</h3>
+                <div className="flex items-center gap-10 p-10 rounded-lg" style={{
+        background: 'linear-gradient(180deg, #0a0e27, #111633)'
+      }}>
+                    <div className="rounded-full flex items-center justify-center" style={{
+          width: 64,
+          height: 64,
+          background: 'linear-gradient(135deg, #337eff, #005eff)',
+          boxShadow: '0 4px 24px 0 rgba(51,126,255,0.5), 0 8px 32px -4px rgba(0,0,0,0.3)'
+        }}>
+                        <ChatBubbleIcon size={36} color="white" />
+                    </div>
+                </div>
+            </div>
+        </div>
+}`,...(A=(S=i.parameters)==null?void 0:S.docs)==null?void 0:A.source},description:{story:"ChatBubbleIcon — FAB robot icon at various sizes",...(k=(X=i.parameters)==null?void 0:X.docs)==null?void 0:k.description}}};var B,I,C,F,O;l.parameters={...l.parameters,docs:{...(B=l.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  render: () => <div className="flex flex-col gap-3 max-w-md p-4 bg-gray-900 rounded-lg">
+            <div className="flex items-start gap-3">
+                <XcelsiorAvatar size={32} />
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-blue-400 mb-1">AI Assistant</p>
+                    Hello! How can I help you today?
+                </div>
+            </div>
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-medium">
+                    S
+                </div>
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-green-400 mb-1">Sarah (Agent)</p>
+                    I&apos;m here to help with your inquiry!
+                </div>
+            </div>
+        </div>
+}`,...(C=(I=l.parameters)==null?void 0:I.docs)==null?void 0:C.source},description:{story:"Avatar in context — message list style",...(O=(F=l.parameters)==null?void 0:F.docs)==null?void 0:O.description}}};const _=["SymbolSizes","SymbolOnDark","AvatarSizes","ChatBubbleSizes","AvatarInContext"];export{l as AvatarInContext,r as AvatarSizes,i as ChatBubbleSizes,t as SymbolOnDark,a as SymbolSizes,_ as __namedExportsOrder,D as default};