https://social-flow.dev/assets/styleguide-GalB-TeU.js

1import{aa as e,K as x,a3 as k,a as N,B as s,L as i,I as w,E as C}from"./index-CAXCr2dA.js";import{S as d,f as S,C as h,a as g,d as p,e as u,b as j,c as f}from"./stat-card-85n6mUBd.js";import{E as T}from"./empty-state-DTbr10Wb.js";import{E as A}from"./error-state-C8YtfWas.js";import{P as L,C as n}from"./card-C3jtoumP.js";import"./react-vendor-Clvj-Tss.js";import{B as l,C as P}from"./checkbox-kl_Gj1W-.js";import{S as B,c as E,d as F,a as I,b as m}from"./select-PFbjbvb2.js";import{S as R}from"./switch-ClLJHu83.js";import{T as D,d as K,e as v,c,a as Y,b as o}from"./table-BmF3gmF6.js";import{T as z}from"./textarea-C2uDxR1b.js";import{P as H}from"./plus-DyFxazA-.js";import{H as V}from"./heart-hHxjfQ-G.js";import{C as G}from"./clock-Dp9w2RZ-.js";import{b as M,C as W,X as _,Y as q,B as b,e as O,P as X}from"./chart-vendor-CRVLmFP-.js";import{Z}from"./zap-ChB8cAS6.js";import{I as J}from"./inbox-YKIausZk.js";import"./supabase-vendor-c_8iEK2M.js";import"./check-Dc4DkCYO.js";import"./index-c4iYVU8j.js";const $=k("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",{variants:{variant:{default:"bg-card text-card-foreground",destructive:"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"}},defaultVariants:{variant:"default"}});function Q({className:a,variant:r,...y}){return e.jsx("div",{"data-slot":"alert",role:"alert",className:x($({variant:r}),a),...y})}function U({className:a,...r}){return e.jsx("div",{"data-slot":"alert-title",className:x("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",a),...r})}function ee({className:a,...r}){return e.jsx("div",{"data-slot":"alert-description",className:x("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",a),...r})}const ae=[{platform:"TikTok",watched:320,liked:88},{platform:"YouTube",watched:254,liked:64},{platform:"Instagram",watched:198,liked:51},{platform:"Facebook",watched:132,liked:29}],se={watched:{label:"Watched",color:"var(--chart-1)"},liked:{label:"Liked",color:"var(--chart-2)"}},te={tiktok:{label:"TikTok",color:"var(--chart-1)"},youtube:{label:"YouTube",color:"var(--chart-2)"},instagram:{label:"Instagram",color:"var(--chart-3)"},facebook:{label:"Facebook",color:"var(--chart-4)"}},re=[{platform:"tiktok",sessions:142,fill:"var(--color-tiktok)"},{platform:"youtube",sessions:96,fill:"var(--color-youtube)"},{platform:"instagram",sessions:74,fill:"var(--color-instagram)"},{platform:"facebook",sessions:41,fill:"var(--color-facebook)"}],le=[{name:"background",className:"bg-background border"},{name:"card",className:"bg-card border"},{name:"primary",className:"bg-primary"},{name:"secondary",className:"bg-secondary border"},{name:"muted",className:"bg-muted border"},{name:"accent",className:"bg-accent border"},{name:"success",className:"bg-success"},{name:"warning",className:"bg-warning"},{name:"destructive",className:"bg-destructive"},{name:"border",className:"bg-border"}],ie=[{platform:"TikTok",personality:"Casual",watched:42,status:"Completed"},{platform:"YouTube",personality:"Binge",watched:88,status:"Completed"},{platform:"Instagram",personality:"Engage",watched:31,status:"Running"}];function t({title:a,children:r}){return e.jsxs("section",{className:"space-y-4",children:[e.jsx("h2",{className:"text-sm font-semibold uppercase tracking-wider text-muted-foreground",children:a}),r]})}function Te(){return e.jsx(N,{isAdmin:!0,user:{name:"Adaline Lively",email:"[email protected]"},children:e.jsxs("div",{className:"space-y-10",children:[e.jsx(L,{title:"Design system",description:"Phase 1 — tokens, components and the app shell. Toggle the theme in the top bar.",actions:e.jsxs(s,{children:[e.jsx(H,{}),"New widget"]})}),e.jsx(t,{title:"Color tokens",children:e.jsx("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5",children:le.map(a=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:`h-16 w-full rounded-lg ${a.className}`}),e.jsx("p",{className:"text-xs font-medium text-muted-foreground",children:a.name})]},a.name))})}),e.jsx(t,{title:"Typography",children:e.jsxs(n,{className:"gap-2 p-6",children:[e.jsx("p",{className:"text-3xl font-bold tracking-tight",children:"Warm up accounts, the human way"}),e.jsx("p",{className:"text-lg font-semibold",children:"Section heading — Plus Jakarta Sans"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Body copy. The quick brown fox jumps over the lazy dog — 1,234,567 sessions tracked."}),e.jsx("p",{className:"text-xs uppercase tracking-wider text-muted-foreground",children:"Overline label"})]})}),e.jsx(t,{title:"Buttons",children:e.jsx(n,{className:"p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(s,{children:"Primary"}),e.jsx(s,{variant:"secondary",children:"Secondary"}),e.jsx(s,{variant:"outline",children:"Outline"}),e.jsx(s,{variant:"ghost",children:"Ghost"}),e.jsx(s,{variant:"destructive",children:"Destructive"}),e.jsx(s,{variant:"link",children:"Link"}),e.jsx(s,{size:"sm",children:"Small"}),e.jsx(s,{size:"lg",children:"Large"}),e.jsx(s,{disabled:!0,children:"Disabled"})]})})}),e.jsx(t,{title:"Badges",children:e.jsx(n,{className:"p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(l,{children:"Active"}),e.jsx(l,{variant:"secondary",children:"Monthly"}),e.jsx(l,{variant:"outline",children:"Lifetime"}),e.jsx(l,{variant:"destructive",children:"Expired"}),e.jsx(l,{className:"bg-success text-success-foreground",children:"Completed"}),e.jsx(l,{className:"bg-warning text-warning-foreground",children:"Running"})]})})}),e.jsx(t,{title:"Form controls",children:e.jsxs(n,{className:"grid gap-5 p-6 sm:grid-cols-2",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(i,{htmlFor:"sg-email",children:"Email address"}),e.jsx(w,{id:"sg-email",type:"email",placeholder:"[email protected]"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(i,{htmlFor:"sg-plan",children:"Plan"}),e.jsxs(B,{children:[e.jsx(E,{id:"sg-plan",children:e.jsx(F,{placeholder:"Select a plan"})}),e.jsxs(I,{children:[e.jsx(m,{value:"lifetime",children:"Lifetime"}),e.jsx(m,{value:"monthly",children:"Monthly"}),e.jsx(m,{value:"yearly",children:"Yearly"})]})]})]}),e.jsxs("div",{className:"space-y-2 sm:col-span-2",children:[e.jsx(i,{htmlFor:"sg-note",children:"Message"}),e.jsx(z,{id:"sg-note",placeholder:"Tell us what's happening…"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(P,{id:"sg-check",defaultChecked:!0}),e.jsx(i,{htmlFor:"sg-check",children:"Email me a weekly summary"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(R,{id:"sg-switch",defaultChecked:!0}),e.jsx(i,{htmlFor:"sg-switch",children:"Pause warm-up on weekends"})]})]})}),e.jsx(t,{title:"Stat cards",children:e.jsxs("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[e.jsx(d,{label:"Videos wat

1ched",value:"2,418",icon:C,trend:{value:12.4,label:"vs last week"}}),e.jsx(d,{label:"Likes given",value:"612",icon:V,trend:{value:8.1,label:"vs last week"}}),e.jsx(d,{label:"Active time",value:"34h 12m",icon:G,trend:{value:-3.6,label:"vs last week"}}),e.jsx(S,{})]})}),e.jsx(t,{title:"Charts",children:e.jsxs("div",{className:"grid gap-4 lg:grid-cols-3",children:[e.jsx(h,{title:"Engagement by platform",description:"Videos watched vs. liked",className:"lg:col-span-2",children:e.jsx(g,{config:se,className:"h-[260px] w-full",children:e.jsxs(M,{accessibilityLayer:!0,data:ae,barGap:6,children:[e.jsx(W,{vertical:!1,strokeDasharray:"3 3"}),e.jsx(_,{dataKey:"platform",tickLine:!1,axisLine:!1,tickMargin:10}),e.jsx(q,{tickLine:!1,axisLine:!1,width:36}),e.jsx(p,{content:e.jsx(u,{})}),e.jsx(j,{content:e.jsx(f,{})}),e.jsx(b,{dataKey:"watched",fill:"var(--color-watched)",radius:[6,6,0,0],isAnimationActive:!1}),e.jsx(b,{dataKey:"liked",fill:"var(--color-liked)",radius:[6,6,0,0],isAnimationActive:!1})]})})}),e.jsx(h,{title:"Sessions by platform",description:"Last 30 days",children:e.jsx(g,{config:te,className:"mx-auto aspect-square max-h-[260px] w-full",children:e.jsxs(O,{children:[e.jsx(p,{content:e.jsx(u,{nameKey:"platform",hideLabel:!0})}),e.jsx(X,{data:re,dataKey:"sessions",nameKey:"platform",innerRadius:60,outerRadius:104,paddingAngle:2,strokeWidth:4,isAnimationActive:!1}),e.jsx(j,{content:e.jsx(f,{nameKey:"platform"}),verticalAlign:"bottom"})]})})})]})}),e.jsx(t,{title:"Data table",children:e.jsx(n,{className:"overflow-hidden p-0",children:e.jsxs(D,{children:[e.jsx(K,{children:e.jsxs(v,{children:[e.jsx(c,{children:"Platform"}),e.jsx(c,{children:"Personality"}),e.jsx(c,{className:"text-right",children:"Watched"}),e.jsx(c,{children:"Status"})]})}),e.jsx(Y,{children:ie.map(a=>e.jsxs(v,{children:[e.jsx(o,{className:"font-medium",children:a.platform}),e.jsx(o,{className:"text-muted-foreground",children:a.personality}),e.jsx(o,{className:"text-right tabular-nums",children:a.watched}),e.jsx(o,{children:e.jsx(l,{className:a.status==="Running"?"bg-warning text-warning-foreground":"bg-success text-success-foreground",children:a.status})})]},a.platform))})]})})}),e.jsx(t,{title:"Feedback surfaces",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(Q,{children:[e.jsx(Z,{}),e.jsx(U,{children:"Your warm-up is on track"}),e.jsx(ee,{children:"Sessions ran on every connected platform in the last 24 hours."})]}),e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsx(T,{icon:J,title:"No sessions yet",description:"Install the Social Flow extension to start warming up your accounts.",action:e.jsx(s,{size:"sm",children:"Get the extension"})}),e.jsx(A,{onRetry:()=>{}})]})]})})]})})}export{Te as StyleguidePage};