https://reviewsjet.com/assets/design-system-wKQQ87zH.js

1import{G as N,j as e,I as S,c as l,R as C,S as T,e as M,l as B,g as E,H as L,M as R,T as b,J as F,K as d,N as m,O as D,B as W,C as y,Q as $,U as z,W as O,V as P}from"./index-BXeh8s_H.js";import{C as u,B as f}from"./surface-CJqtS42k.js";const I=l("w-full rounded-lg bg-white text-body text-ink-900 placeholder:text-ink-400","ring-1 ring-ink-200 transition-[box-shadow,background-color]","duration-[var(--duration-fast)]","hover:ring-ink-300","focus:ring-2 focus:ring-accent-600 focus:outline-none","disabled:bg-ink-25 disabled:text-ink-400");function k({label:a,hint:t,error:s,prefix:i,id:r,className:x,...c}){const n=N.useId(),h=r??n,p=`${h}-hint`,j=`${h}-error`;return e.jsxs("div",{className:x,children:[e.jsx(S,{htmlFor:h,children:a}),e.jsxs("div",{className:"relative mt-1.5",children:[i?e.jsx("span",{className:"pointer-events-none absolute inset-y-0 left-3 flex items-center text-ink-400",children:i}):null,e.jsx("input",{id:h,"aria-invalid":s?!0:void 0,"aria-describedby":l(s&&j,t&&p).trim()||void 0,className:l(I,"h-11 px-3.5",i&&"pl-10",s&&"ring-critical-600 hover:ring-critical-600 focus:ring-critical-600"),...c})]}),t&&!s?e.jsx("p",{id:p,className:"mt-1.5 text-caption text-ink-500",children:t}):null,s?e.jsx("p",{id:j,role:"alert",className:"mt-1.5 text-caption text-critical-700",children:s}):null]})}function G({label:a,hint:t,error:s,id:i,className:r,children:x,...c}){const n=N.useId(),h=i??n,p=`${h}-hint`,j=`${h}-error`;return e.jsxs("div",{className:r,children:[e.jsx(S,{htmlFor:h,children:a}),e.jsx("select",{id:h,"aria-invalid":s?!0:void 0,"aria-describedby":l(s&&j,t&&p).trim()||void 0,className:l(I,"mt-1.5 h-11 appearance-none bg-no-repeat pr-10 pl-3.5",s&&"ring-critical-600 focus:ring-critical-600"),style:{backgroundImage:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.2 7.8 4.8 4.8 4.8-4.8'/%3E%3C/svg%3E")`,backgroundPosition:"right 0.75rem center",backgroundSize:"1.25rem"},...c,children:x}),t&&!s?e.jsx("p",{id:p,className:"mt-1.5 text-caption text-ink-500",children:t}):null,s?e.jsx("p",{id:j,role:"alert",className:"mt-1.5 text-caption text-critical-700",children:s}):null]})}function g({rating:a,size:t=16,className:s,label:i}){const r=Math.max(0,Math.min(5,a)),x=i??`${r} out of 5`;return e.jsx("span",{className:l("inline-flex shrink-0 gap-[2px]",s),role:x?"img":"presentation","aria-label":x||void 0,"aria-hidden":x?void 0:!0,children:[1,2,3,4,5].map(c=>{const n=Math.max(0,Math.min(1,r-c+1));return e.jsxs("svg",{width:t,height:t,viewBox:"0 0 20 20","aria-hidden":!0,children:[e.jsx("defs",{children:n>0&&n<1?e.jsx("clipPath",{id:`rj-star-${c}-${Math.round(n*100)}`,children:e.jsx("rect",{x:"0",y:"0",width:20*n,height:"20"})}):null}),e.jsx("path",{d:"M10 1.4l2.5 5.07 5.6.82-4.05 3.95.96 5.57L10 14.19l-5.01 2.62.96-5.57L1.9 7.29l5.6-.82z",className:"fill-ink-200"}),n>0?e.jsx("path",{d:"M10 1.4l2.5 5.07 5.6.82-4.05 3.95.96 5.57L10 14.19l-5.01 2.62.96-5.57L1.9 7.29l5.6-.82z",className:"fill-gold-400",clipPath:n<1?`url(#rj-star-${c}-${Math.round(n*100)})`:void 0}):null]},c)})})}function v({src:a,name:t,size:s=36,className:i}){const[r,x]=N.useState(!1),c=t.split(" ").slice(0,2).map(n=>n[0]?.toUpperCase()??"").join("");return a&&!r?e.jsx("img",{src:a,alt:"",width:s,height:s,loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",onError:()=>x(!0),className:l("shrink-0 rounded-full object-cover",i),style:{width:s,height:s}}):e.jsx("span",{"aria-hidden":!0,className:l("grid shrink-0 place-items-center rounded-full bg-ink-100 font-semibold text-ink-600",i),style:{width:s,height:s,fontSize:Math.round(s*.36)},children:c})}function A({people:a,size:t=32,className:s,ringClass:i="ring-white"}){return e.jsx("span",{className:l("flex items-center -space-x-2",s),children:a.map(r=>e.jsx(v,{src:r.avatar,name:r.name,size:t,className:l("ring-2",i)},r.name))})}function U({source:a,className:t,showLabel:s=!0}){const i=C[a];return e.jsxs("span",{className:l("inline-flex items-center gap-2 text-body-sm text-ink-700",t),children:[e.jsx(T,{source:a,className:"size-4 shrink-0"}),s?i.label:e.jsx("span",{className:"sr-only",children:i.label})]})}function w({rating:a,total:t,className:s,size:i="base"}){return e.jsxs("span",{className:l("inline-flex items-center gap-2.5",s),children:[e.jsx(g,{rating:a,size:i==="lg"?20:16,label:""}),e.jsxs("span",{className:l("nums text-ink-700",i==="lg"?"text-body-lg":"text-body-sm"),children:[e.jsx("span",{className:"font-semibold text-ink-950",children:a.toFixed(1)}),e.jsxs("span",{className:"text-ink-500",children:[" ","from ",t.toLocaleStr

1ing()," review",t===1?"":"s"]})]})]})}function o({title:a,children:t}){return e.jsxs("div",{className:"py-8",children:[e.jsx("h3",{className:"text-caption font-semibold text-ink-950",children:a}),e.jsx("div",{className:"mt-4",children:t})]})}function H(){return e.jsxs(e.Fragment,{children:[e.jsx(M,{size:"tight",children:e.jsxs(B,{children:[e.jsx(E,{children:"Internal"}),e.jsxs(L,{level:1,size:"hero",className:"mt-4",children:["The ",e.jsx(R,{children:"visual system"})]}),e.jsx(b,{size:"lead",className:"mt-5",children:"Ink for structure and action, gold for stars and nothing else, blue for interactive text and focus. Typography and whitespace carry the page."})]})}),e.jsxs(F,{width:"page",className:"pb-24",children:[e.jsx(d,{}),e.jsx(o,{title:"Type scale",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx("p",{className:"text-display-xl text-ink-950 optical-left",children:"Display XL"}),e.jsx("p",{className:"text-display-lg text-ink-950 optical-left",children:"Display LG"}),e.jsx("p",{className:"text-display text-ink-950 optical-left",children:"Display"}),e.jsx("p",{className:"text-display-sm text-ink-950",children:"Display SM"}),e.jsx("p",{className:"text-title text-ink-950",children:"Title"}),e.jsx("p",{className:"text-body-lg text-ink-600",children:"Body large — the paragraph under a page heading."}),e.jsx("p",{className:"text-body text-ink-600",children:"Body — the default. Set to a 34rem measure in prose contexts, because a line much longer than about 68 characters stops being comfortable to read."}),e.jsx("p",{className:"text-body-sm text-ink-600",children:"Body small"}),e.jsx("p",{className:"text-caption text-ink-500",children:"Caption"}),e.jsx("p",{className:"text-micro text-ink-500",children:"Micro"}),e.jsx("p",{className:"eyebrow text-ink-400",children:"Eyebrow"})]})}),e.jsx(d,{}),e.jsx(o,{title:"Foreground hierarchy",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-body text-ink-950",children:"ink-950 — headings"}),e.jsx("p",{className:"text-body text-ink-900",children:"ink-900 — emphasised body"}),e.jsx("p",{className:"text-body text-ink-600",children:"ink-600 — body copy, 7.5:1 on white"}),e.jsx("p",{className:"text-body text-ink-500",children:"ink-500 — muted; the floor for text"}),e.jsx("p",{className:"text-body text-ink-400",children:"ink-400 — labels and glyphs only, never a sentence"})]})}),e.jsx(d,{}),e.jsxs(o,{title:"Buttons",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(m,{children:"Start free"}),e.jsx(m,{variant:"secondary",children:"See widgets"}),e.jsx(m,{variant:"ghost",children:"Learn more"}),e.jsx(m,{size:"sm",children:"Small"}),e.jsx(m,{size:"lg",children:"Large"}),e.jsx(m,{disabled:!0,children:"Disabled"})]}),e.jsx("div",{className:"on-ink mt-4 rounded-xl bg-ink-950 p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(m,{variant:"inverse",children:"Start free"}),e.jsx(m,{variant:"inverse-ghost",children:"Talk to us"})]})})]}),e.jsx(d,{}),e.jsx(o,{title:"Links",children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs(b,{children:["An inline link is ",e.jsx(D,{to:"/",children:"underlined and accent-coloured"}),", because colour alone is not a signal everybody receives."]}),e.jsx(W,{to:"/",variant:"secondary",size:"sm",children:"Button-shaped link"})]})}),e.jsx(d,{}),e.jsx(o,{title:"Surfaces",children:e.jsxs("div",{className:"grid gap-4 sm:grid-cols-3",children:[e.jsxs(u,{className:"p-5",children:[e.jsx("p",{className:"text-body-sm font-medium text-ink-950",children:"Default"}),e.jsx("p",{className:"mt-1 text-caption text-ink-500",children:"Hairline on white."})]}),e.jsxs(u,{tone:"raised",className:"p-5",children:[e.jsx("p",{className:"text-body-sm font-medium text-ink-950",children:"Raised"}),e.jsx("p",{className:"mt-1 text-caption text-ink-500",children:"One shadow step."})]}),e.jsxs(u,{tone:"sunken",className:"p-5",children:[e.jsx("p",{className:"text-body-sm font-medium text-ink-950",children:"Sunken"}),e.jsx("p",{className:"mt-1 text-caption text-ink-500",children:"A recess, not a lift."})]})]})}),e.jsx(d,{}),e.jsx(o,{title:"Badges",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx(f,{children:"Chrome extension"}),e.jsx(f,{tone:"positive",children:"Native Wix app"}),e.jsx("span",{className:"on-ink inline-flex rounded-md bg-ink-950 p-2",children:e.jsx(f,{tone:"inverse",children:"On ink"})})]})}),e.jsx(d,{}

1),e.jsx(o,{title:"Ratings, avatars and sources",children:e.jsxs("div",{className:"space-y-5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(g,{rating:5}),e.jsx(g,{rating:4.5}),e.jsx(g,{rating:3}),e.jsx(g,{rating:4.5,size:22})]}),e.jsx("div",{children:e.jsx(w,{rating:4.8,total:312})}),e.jsx("div",{children:e.jsx(w,{rating:4.8,total:312,size:"lg"})}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6",children:[e.jsx(v,{name:"Sarah Johnson",src:"/images/sample/a1.svg"}),e.jsx(v,{name:"Michael Chen"}),e.jsx(A,{people:[{name:"Sarah Johnson",avatar:"/images/sample/a1.svg"},{name:"Michael Chen",avatar:"/images/sample/a2.svg"},{name:"Amara Osei",avatar:"/images/sample/a3.svg"},{name:"Tom Baker"}]})]}),e.jsx("div",{className:"flex flex-wrap items-center gap-5",children:y.map(a=>e.jsx(U,{source:a.id},a.id))}),e.jsx("div",{className:"flex flex-wrap items-center gap-3",children:y.map(a=>e.jsx($,{source:a.id},a.id))})]})}),e.jsx(d,{}),e.jsxs(o,{title:"Widget layout sketches",children:[e.jsx("p",{className:"mb-4 text-caption text-ink-500",children:"The dashboard's own thumbnails, from the shared package. Full review cards are drawn by the real widget renderer, never by this 

1system."}),e.jsx("div",{className:"grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-7",children:z.map(a=>e.jsxs("div",{children:[e.jsx(O,{type:a}),e.jsx("p",{className:"mt-2 text-micro text-ink-500 capitalize",children:a})]},a))})]}),e.jsx(d,{}),e.jsx(o,{title:"Form controls",children:e.jsxs("div",{className:"grid max-w-md gap-5",children:[e.jsx(k,{label:"Your Google Business Profile URL",placeholder:"https://maps.google.com/?cid=…"}),e.jsx(k,{label:"With a hint",placeholder:"https://…",hint:"Paste the address of your public listing."}),e.jsx(k,{label:"With an error",defaultValue:"not-a-url",error:"That doesn’t look like a full web address."}),e.jsxs(G,{label:"Widget layout",defaultValue:"masonry",children:[e.jsx("option",{value:"carousel",children:"Carousel"}),e.jsx("option",{value:"masonry",children:"Masonry"}),e.jsx("option",{value:"grid",children:"Grid"})]})]})}),e.jsx(d,{}),e.jsx(o,{title:"Pull quote",children:e.jsx(P,{cite:"Not a real customer — a specimen.",children:"The reviews were already there. Getting them onto the page took an afternoon."})})]})]})}export{H as component};
2//# sourceMappingURL=design-system-wKQQ87zH.js.map