1"use strict";(self.webpackChunkposthog_com=self.webpackChunkposthog_com||[]).push([[483],{47742:function(e,r,s){s.r(r),s.d(r,{default:function(){return w}});var a=s(19371),i=s(30758),l=s(63629),d=s(8462),t=s(49271),c=s(14038),o=s(39106),n=s(55156),m=s(10489),x=s(52722),p=s(7025),h=s(6858),b=s(53109),j=s(33721),y=s(42057),u=s(11826),N=s(86070);function v(e,r){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),s.push.apply(s,a)}return s}function g(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{};r%2?v(Object(s),!0).forEach(function(r){(0,a.A)(e,r,s[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):v(Object(s)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(s,r))})}return e}const f=[{value:"Open graph image templates",url:"og-templates",depth:0},{value:"OSButton",url:"osbutton",depth:0},{value:"Form elements",url:"form-elements",depth:0},{value:"OSInput",url:"osinput",depth:1},{value:"OSTextarea",url:"ostextarea",depth:1},{value:"Fieldset",url:"fieldset",depth:1},{value:"OSSelect",url:"osselect",depth:0},{value:"Combobox",url:"combobox",depth:1},{value:"Checkbox",url:"checkbox",depth:1},{value:"TeamMemberMultiSelect",url:"teammembermultiselect",depth:1},{value:"Competitor feature matrix",url:"competitor-matrix",depth:0},{value:"useCustomers",url:"usecustomers",depth:0}];function w(){const{customers:e}=(0,n.d)(),r=(0,l.useStaticQuery)("890999101"),s=i.useMemo(()=>{const e=new Map;return r.allProfiles.nodes.forEach(r=>{e.set(r.id,r.squeakId)}),e},[r.allProfiles.nodes]),a=i.useMemo(()=>r.allTeams.nodes.map(e=>g(g({},e),{},{profiles:{data:e.profiles.data.map(e=>g(g({},e),{},{attributes:g(g({},e.attributes),{},{squeakId:s.get(e.id)||e.id})}))}})),[r.allTeams.nodes,s]),{0:v,1:w}=(0,i.useState)([]),{0:A,1:k}=(0,i.useState)([]),{0:z,1:S}=(0,i.useState)([]),{0:I,1:C}=(0,i.useState)(!1),{0:_,1:D}=(0,i.useState)(!0),{0:L,1:F}=(0,i.useState)(!1),{0:O,1:P}=(0,i.useState)([]),{0:B,1:T}=(0,i.useState)([]),M=e=>{if(!e.logo)return(0,N.jsx)("span",{className:"text-sm text-muted",children:e.name});if("function"==typeof e.logo){const r=e.logo,s=("w-full fill-current object-contain "+(e.height?"h-"+e.height:"")).trim();return(0,N.jsx)(r,{className:s})}const r=e.height?"max-h-"+e.height:"max-h-10";return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)("img",{src:e.logo.light,alt:e.name,className:"w-auto object-contain dark:hidden "+r}),(0,N.jsx)("img",{src:e.logo.dark,alt:e.name,className:"w-auto object-contain hidden dark:block "+r})]})};return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(d.Ay,{title:"Components - PostHog",description:"Components for PostHog",image:"/images/og/default.png"}),(0,N.jsx)(b.Ay,{title:"Components",leftSidebar:(0,N.jsx)(j.s,{items:y.a}),tableOfContents:f,showQuestions:!1,children:(0,N.jsx)("div",{className:"@container text-primary",children:(0,N.jsxs)("div",{className:"space-y-12",children:[(0,N.jsx)("section",{children:(0,N.jsxs)("div",{className:"bg-accent p-4 rounded border border-primary mt-4",children:[(0,N.jsx)("p",{className:"mt-0",children:"This is an internal playground for some React components that are used throughout the site."}),(0,N.jsxs)("p",{className:"mb-0",children:["If you're looking for components to be used in articles (like blog posts and docs), check out the"," ",(0,N.jsx)(l.Link,{to:"/handbook/engineering/posthog-com/markdown",state:{newWindow:!0},children:"MDX components handbook page"}),"."]})]})}),(0,N.jsxs)("section",{id:"logo",children:[(0,N.jsx)("h2",{children:(0,N.jsx)("code",{children:"<Logo />"})}),(0,N.jsxs)("p",{children:["Import from ",(0,N.jsx)("code",{children:"@posthog/brand/logo"}),". When sizing by height, use the CSS"," ",(0,N.jsx)("code",{children:"w-auto"})," utility so the view box controls the aspect ratio."]}),(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Variant"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Preview"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Code"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Landscape â gradient"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:"<Logo />"}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Default treatment for digital surfaces with a light background."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Icon only â gradient"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{layout:"logomark",className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo layout="logomark" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Tight space
1s, inline with copy, app icons, favicons."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Landscape â print (4-color)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{variant:"print",className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo variant="print" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Solid CMYK-friendly fills for print, swag, and any surface where gradients won't reproduce reliably."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Icon only â print (4-color)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{variant:"print",layout:"logomark",className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo variant="print" layout="logomark" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Print/swag in compact spaces â stickers, lapel pins, embroidery."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Landscape â mono (black)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{variant:"mono",className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo variant="mono" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Single-color treatment for press kits, partner pages, embedded signatures."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Landscape â mono (white)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top bg-black",children:(0,N.jsx)(u.g,{variant:"mono",color:"white",className:"h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo variant="mono" color="white" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Use on dark backgrounds, photography, or any surface where the color logo lacks contrast."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Icon only â mono (primary)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{variant:"mono",color:"currentColor",layout:"logomark",className:"text-primary h-7 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo variant="mono" color="currentColor" layout="logomark" className="text-primary" />'}),(0,N.jsxs)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:["Brand-tinted accent in UI â section dividers, watermarks, hover states. Pass any color string (Tailwind token, hex, or",(0,N.jsx)("code",{className:"mx-1 text-xs",children:"currentColor"}),")."]})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Stacked â gradient"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{layout:"stacked",className:"h-24 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo layout="stacked" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Vertical layouts â square cards, social posts, business cards, presentation covers."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Stacked â print (4-color)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{layout:"stacked",variant:"print",className:"h-24 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo layout="stacked" variant="print" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Stacked layout for print â posters, swag tags, portrait flyers."})]})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:"Stacked â mono (black)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2 align-top",children:(0,N.jsx)(u.g,{layout:"stacked",variant:"mono",className:"h-24 w-auto"})}),(0,N.jsxs)("td",{className:"border border-primary px-4 py-2 align-top",children:[(0,N.jsx)("code",{className:"text-xs whitespace-pre",children:'<Logo layout="stacked" variant="mono" />'}),(0,N.jsx)("p",{className:"mt-2 mb-0 text-xs text-secondary",children:"Mono treatment in vertical layout â partner stack-ups, signage, single-color print runs."})]})]})]})]})]}),(0,N.jsxs)("section",{id:"og-templates",children:[(0,N.jsx)("h2",{children:"Open graph image templates"}),(0,N.jsx)("div",{className:"inline-block w-[600px] h-[315px] border border-primary bg-accent",children:"hello"})]}),(0,N.jsxs)("section",{id:"osbutton",children:[(0,N.jsx)("h2",{className:"",children:(0,N.jsx)("code",{children:"<OSButton />"})}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Common usage"}),(0,N.jsxs)("div",{className:"flex items-center gap-px flex-wrap",children:[(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconSearch,{})}),(0,N.jsx)(o.A,{variant:"primary",children:"Get started â free"}),(0,N.jsx)(o.A,{variant:"secondary",children:"Get started â free"})]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Hover styles comparison"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{className:"flex items-center gap-4",children:[(0,N.jsx)(o.A,{children:"Default (border hover)"}),(0,N.jsx)("span",{className:"text-sm text-muted",children:"Hover shows border"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-4",children:[(0,N.jsx)(o.A,{hover:"background",children:"Backgroun
1d hover"}),(0,N.jsx)("span",{className:"text-sm text-muted",children:"Hover shows background color"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-4",children:[(0,N.jsx)(o.A,{active:!0,children:"Active state (border hover)"}),(0,N.jsx)("span",{className:"text-sm text-muted",children:"Active with opacity"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-4",children:[(0,N.jsx)(o.A,{hover:"background",active:!0,children:"Active state (background hover)"}),(0,N.jsx)("span",{className:"text-sm text-muted",children:"Active with full color"})]})]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Variants with all sizes"}),(0,N.jsx)(c.A,{className:"h-96",children:(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Variant"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Description"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XS"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"SM"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"MD"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"LG"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XL"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"default"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Transparent background with subtle hover effects (formerly ghost)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",children:"Button"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"primary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Orange background with black text, primary action button"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"xs",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"sm",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"md",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"lg",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"xl",children:"Button"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"secondary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"White background with primary text, secondary action button"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xs",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"sm",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"md",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"lg",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xl",children:"Button"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"underline"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Always shows underline, removes on hover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underline",size:"xs",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underline",size:"sm",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underline",size:"md",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underline",size:"lg",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underline",size:"xl",children:"Button"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"underlineOnHover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Transparent background with underline on hover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"xs",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"sm",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"md",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"lg",children:"Button"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"xl",children:"Button"})})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Icon-only buttons"}),(0,N.jsx)(c.A,{className:"h-96",children:(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Variant"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Description"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XS"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"SM"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"MD"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"LG"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XL"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"default"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Icon-only button with default styling"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",icon:(0,N.jsx)(t.IconSearch,{})})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"primary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Icon-only button with primary styling"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"xs",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"sm",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"md",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"lg",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"primary",size:"xl",icon:(0,N.jsx)(t.IconSearch,{})})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"secondary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Icon-only button with secondary styling"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xs",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"sm",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"md",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"lg",icon:(0,N.jsx)(t.IconSearch,{})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xl",icon:(0,N.jsx)(t.IconSearch,{})})})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"States with all sizes"}),(0,N.jsx)(c.A,{className:"h-96",children:(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"State"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Description"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XS"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"SM"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"MD"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"LG"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XL"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"normal"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Normal interactive state"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",children:"Normal"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",children:"Normal"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",children:"Normal"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",children:"Normal"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",children:"Normal"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"disabled"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Disabled state with reduced opacity and no interactions"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",disabled:!0,children:"Disabled"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",disabled:!0,children:"Disabled"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",disabled:!0,children:"Disabled"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",disabled:!0,children:"Disabled"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",disabled:!0,children:"Disabled"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"active"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Active state (for default variant)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",active:!0,children:"Active"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",active:!0,children:"Active"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",active:!0,children:"Active"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",active:!0,children:"Active"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",active:!0,children:"Active"})})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Features with all sizes"}),(0,N.jsx)(c.A,{className:"h-96",children:(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Feature"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Description"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XS"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"SM"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"MD"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"LG"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XL"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"icon (left)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Icon positioned to the left of text"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",icon:(0,N.jsx)(t.IconUser,{}),children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconUser,{}),children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconUser,{}),children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",icon:(0,N.jsx)(t.IconUser,{}),children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",icon:(0,N.jsx)(t.IconUser,{}),children:"Icon"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"icon (right)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Icon positioned to the right of text"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"ri
1ght",children:"Icon"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Icon"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"label"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Additional label text with secondary color"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",label:"New",children:"Create"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",label:"New",children:"Create"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",label:"New",children:"Create"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",label:"New",children:"Create"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",label:"New",children:"Create"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"chip"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Chip badge with border (optional color)"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",chip:"New",children:"Create"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",chip:"Beta",chipColor:"blue",children:"Feature"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",chip:"Pro",chipColor:"green",children:"Upgrade"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",chip:"Hot",chipColor:"red",children:"Deal"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",chip:"Limited",chipColor:"orange",children:"Offer"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"tooltip"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Info icon with tooltip on hover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",tooltip:"This is a helpful tooltip",children:"Tooltip"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",tooltip:"This is a helpful tooltip",children:"Tooltip"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",tooltip:"This is a helpful tooltip",children:"Tooltip"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",tooltip:"This is a helpful tooltip",children:"Tooltip"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",tooltip:"This is a helpful tooltip",children:"Tooltip"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"zoomHover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Zoom effect on hover"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",zoomHover:!0,children:"Zoom"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",zoomHover:!0,children:"Zoom"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",zoomHover:!0,children:"Zoom"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",zoomHover:!0,children:"Zoom"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",zoomHover:!0,children:"Zoom"})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:'hover="background"'}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:"Backgroun
1d color on hover instead of border"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xs",hover:"background",children:"Background"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"sm",hover:"background",children:"Background"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"md",hover:"background",children:"Background"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"lg",hover:"background",children:"Background"})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)(o.A,{size:"xl",hover:"background",children:"Background"})})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Full width examples"}),(0,N.jsx)(c.A,{className:"h-96",children:(0,N.jsxs)("table",{className:"w-full border-collapse border border-primary",children:[(0,N.jsx)("thead",{children:(0,N.jsxs)("tr",{className:"bg-accent",children:[(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"Variant"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XS"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"SM"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"MD"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"LG"}),(0,N.jsx)("th",{className:"border border-primary px-4 py-2 text-left",children:"XL"})]})}),(0,N.jsxs)("tbody",{children:[(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"default"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{size:"xs",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{size:"sm",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{size:"md",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{size:"lg",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{size:"xl",width:"full",children:"Full Width"})})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"primary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"primary",size:"xs",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"primary",size:"sm",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"primary",size:"md",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"primary",size:"lg",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"primary",size:"xl",width:"full",children:"Full Width"})})})]}),(0,N.jsxs)("tr",{children:[(0,N.jsx)("td",{className:"border border-primary px-4 py-2 font-mono",children:"secondary"}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xs",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"secondary",size:"sm",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"secondary",size:"md",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"secondary",size:"lg",width:"full",children:"Full Width"})})}),(0,N.jsx)("td",{className:"border border-primary px-4 py-2",children:(0,N.jsx)("div",{className:"w-48",children:(0,N.jsx)(o.A,{variant:"secondary",size:"xl",width:"full",children:"Full Width"})})})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Complex examples with all sizes"}),(0,N.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Default with icon & label"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"}),(0,N.jsx)(o.A,{size:"xs",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"}),(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"}),(0,N.jsx)(o.A,{size:"md",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"}),(0,N.jsx)(o.A,{size:"lg",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"}),(0,N.jsx)(o.A,{size:"xl",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Primary with icon & label"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"xs",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"sm",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"md",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"lg",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"xl",icon:(0,N.jsx)(t.IconUser,{}),label:"New",children:"Create"})]})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Secondary with right icon"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"})," ",(0,N.jsx)(o.A,{variant:"secondary",size:"xs",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Next"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"})," ",(0,N.jsx)(o.A,{variant:"secondary",size:"sm",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Next"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"})," ",(0,N.jsx)(o.A,{variant:"secondary",size:"md",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Next"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"})," ",(0,N.jsx)(o.A,{variant:"secondary",size:"lg",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Next"})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"})," ",(0,N.jsx)(o.A,{variant:"secondary",size:"xl",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Next"})]})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Default with tooltip"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"}),(0,N.jsx)(o.A,{size:"xs",tooltip:"This action cannot be undone",children:"Delete"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"}),(0,N.jsx)(o.A,{size:"sm",tooltip:"This action cannot be undone",children:"Delete"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"}),(0,N.jsx)(o.A,{size:"md",tooltip:"This action cannot be undone",children:"Delete"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"}),(0,N.jsx)(o.A,{size:"lg",tooltip:"This action cannot be undone",children:"Delete"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"}),(0,N.jsx)(o.A,{size:"xl",tooltip:"This action cannot be undone",children:"Delete"})]})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Button with chip & icon"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"}),(0,N.jsx)(o.A,{size:"xs",icon:(0,N.jsx)(t.IconUser,{}),chip:"Pro",children:"Profile"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"}),(0,N.jsx)(o.A,{size:"sm",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",chip:"New",chipColor:"green",children:"Try it"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"}),(0,N.jsx)(o.A,{size:"md",variant:"primary",chip:"Beta",chipColor:"blue",children:"Enable feature"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"}),(0,N.jsx)(o.A,{size:"lg",variant:"secondary",icon:(0,N.jsx)(t.IconInfo,{}),chip:"Limited",children:"Learn more"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"}),(0,N.jsx)(o.A,{size:"xl",label:"$99/mo",chip:"Sale",chipColor:"red",children:"Upgrade now"})]})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Disabled primary"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XS:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"xs",disabled:!0,children:"Loading..."})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"SM:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"sm",disabled:!0,children:"Loading..."})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"MD:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"md",disabled:!0,children:"Loading..."})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"LG:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"lg",disabled:!0,children:"Loading..."})]}),(0,N.jsxs)("div",{children:[(0,N.jsx)("span",{className:"text-sm font-mono",children:"XL:"})," ",(0,N.jsx)(o.A,{variant:"primary",size:"xl",disabled:!0,children:"Loading..."})]})]})]})]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Additional features"}),(0,N.jsxs)("div",{className:"space-y-6",children:[(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Button as Link"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{asLink:!0,to:"/docs",icon:(0,N.jsx)(t.IconArrowRight,{}),iconPosition:"right",children:"Go to docs (internal)"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{asLink:!0,to:"https://github.com/posthog/posthog",external:!0,variant:"primary",children:"View on GitHub (external)"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{asLink:!0,to:"/pricing",variant:"secondary",size:"sm",children:"View pricing"})})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Alignment"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsx)("div",{className:"w-64 border border-dashed border-primary p-1",children:(0,N.jsx)(o.A,{width:"full",align:"left",icon:(0,N.jsx)(t.IconUser,{}),children:"Left aligned (default)"})}),(0,N.jsx)("div",{className:"w-64 border border-dashed border-primary p-1",children:(0,N.jsx)(o.A,{width:"full",align:"center",icon:(0,N.jsx)(t.IconUser,{}),children:"Center aligned"})})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Custom Styling"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{className:"!bg-red-500 !text-white hover:!bg-red-600",children:"Custom colors via className"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{icon:(0,N.jsx)(t.IconSearch,{}),iconClassName:"text-orange",children:"Custom icon color"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{variant:"primary",className:"!rounded-full",children:"Fully rounded"})})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Special Props"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{asLink:!0,to:"/docs",state:{from:"components-page"},variant:"secondary",children:"Link with state prop"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{zoomHover:!1,children:"Default variant without ZoomHover"})}),(0,N.jsx)("div",{children:(0,N.jsx)(o.A,{variant:"primary",zoomHover:!0,children:"Primary with manual ZoomHover"})})]})]}),(0,N.jsxs)("div",{className:"border border-primary p-4 rounded",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Inline Usage"}),(0,N.jsxs)("div",{className:"space-y-2",children:[(0,N.jsxs)("p",{children:["This is some text with an"," ",(0,N.jsx)(o.A,{variant:"underline",size:"sm",children:"inline underline button"})," ","and an"," ",(0,N.jsx)(o.A,{variant:"underlineOnHover",size:"sm",children:"underline on hover button"}
1)," ","in the middle."]}),(0,N.jsxs)("p",{children:["You can also use"," ",(0,N.jsx)(o.A,{size:"xs",asLink:!0,to:"/docs",children:"tiny link buttons"})," ","inline."]})]})]})]})]})]}),(0,N.jsxs)("section",{id:"form-elements",children:[(0,N.jsx)("h2",{className:"",children:"Form elements"}),(0,N.jsxs)("div",{className:"mb-8",id:"osinput",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<OSInput />"})}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Basic examples"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.NK,{label:"Email",type:"email",placeholder:"[email protected]",name:"email-basic"}),(0,N.jsx)(m.NK,{label:"Password",type:"password",name:"password-basic"}),(0,N.jsx)(m.NK,{label:"Phone",type:"tel",placeholder:"+1 (555) 000-0000",name:"phone-basic"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Sizes"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.NK,{label:"Small",size:"sm",placeholder:"Small input",name:"small-input"}),(0,N.jsx)(m.NK,{label:"Medium",size:"md",placeholder:"Medium input (default)",name:"medium-input"}),(0,N.jsx)(m.NK,{label:"Large",size:"lg",placeholder:"Large input",name:"large-input"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Label directions"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.NK,{label:"Row direction",direction:"row",placeholder:"Label on the left",name:"row-direction"}),(0,N.jsx)(m.NK,{label:"Column direction",direction:"column",placeholder:"Label above",name:"column-direction"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Width options"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)("div",{className:"border border-dashed border-primary p-2",children:(0,N.jsx)(m.NK,{label:"Full width",width:"full",placeholder:"Takes full container width",name:"full-width"})}),(0,N.jsx)("div",{className:"border border-dashed border-primary p-2",children:(0,N.jsx)(m.NK,{label:"Auto width",width:"auto",placeholder:"Auto width",name:"auto-width"})}),(0,N.jsx)("div",{className:"border border-dashed border-primary p-2",children:(0,N.jsx)(m.NK,{label:"Fit width",width:"fit",placeholder:"Fit",name:"fit-width"})})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Features"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.NK,{label:"Required field",required:!0,placeholder:"This field is required",name:"required-field"}),(0,N.jsx)(m.NK,{label:"With description",description:"Enter your primary email address",placeholder:"[email protected]",name:"with-description"}),(0,N.jsx)(m.NK,{label:"With tooltip",tooltip:"We'll never share your email",placeholder:"Hover the info icon",name:"with-tooltip"}),(0,N.jsx)(m.NK,{label:"Hidden label",showLabel:!1,placeholder:"No visible label",name:"hidden-label"}),(0,N.jsx)(m.NK,{label:"Custom label width",labelWidth:"w-32",placeholder:"Wider label column",name:"custom-label-width"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Error states"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.NK,{label:"Invalid email",type:"email",touched:!0,error:"Please enter a valid email address",placeholder:"[email protected]",name:"error-email"}),(0,N.jsx)(m.NK,{label:"Required field",touched:!0,error:"This field is required",placeholder:"Cannot be empty",name:"error-required"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Complex examples"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.NK,{label:"Full featured",type:"email",required:!0,tooltip:"Your primary contact email",description:"We'll use this for account notifications",placeholder:"[email protected]",direction:"column",size:"lg",name:"full-featured"})})]})]}),(0,N.jsxs)("div",{className:"mb-8",id:"ostextarea",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<OSTextarea />"})}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Basic examples"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Fk,{label:"Message",placeholder:"Enter your message here...",name:"message-basic"}),(0,N.jsx)(m.Fk,{label:"Description",rows:6,placeholder:"Provide a detailed description...",name:"description-basic"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Features"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Fk,{label:"Required textarea",required:!0,placeholder:"This field is required",name:"required-textarea"}),(0,N.jsx)(m.Fk,{label:"With description",description:"Please be as detailed as possible",placeholder:"Your detailed response...",name:"textarea-with-description"}),(0,N.jsx)(m.Fk,{label:"With tooltip",tooltip:"Markdown formatting is supported",placeholder:"You can use **bold** and *italic*",name:"textarea-with-tooltip"}),(0,N.jsx)(m.Fk,{label:"Column layout",direction:"column",placeholder:"Label appears above the textarea",
1name:"textarea-column"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Error states"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.Fk,{label:"Invalid input",touched:!0,error:"Message must be at least 10 characters",placeholder:"Too short...",name:"textarea-error"})})]})]}),(0,N.jsxs)("div",{className:"mb-8",id:"fieldset",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<Fieldset />"})}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Group related form fields"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsxs)(x.L,{legend:"Personal Information",children:[(0,N.jsx)(m.NK,{label:"First name",direction:"column",name:"first-name"}),(0,N.jsx)(m.NK,{label:"Last name",direction:"column",name:"last-name"}),(0,N.jsx)(m.NK,{label:"Email",type:"email",direction:"column",name:"fieldset-email"})]}),(0,N.jsxs)(x.L,{legend:"Address",children:[(0,N.jsx)(m.NK,{label:"Street",direction:"column",name:"street"}),(0,N.jsxs)("div",{className:"grid grid-cols-2 gap-2",children:[(0,N.jsx)(m.NK,{label:"City",direction:"column",name:"city"}),(0,N.jsx)(m.NK,{label:"ZIP",direction:"column",name:"zip"})]})]})]})]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Complete form examples"}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Two-column form"}),(0,N.jsxs)("div",{className:"border border-primary rounded p-6 bg-accent",children:[(0,N.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[(0,N.jsx)(m.NK,{label:"First name",direction:"column",required:!0,name:"form-first-name"}),(0,N.jsx)(m.NK,{label:"Last name",direction:"column",required:!0,name:"form-last-name"}),(0,N.jsx)(m.NK,{label:"Email",type:"email",direction:"column",required:!0,tooltip:"We'll never share your email",name:"form-email"}),(0,N.jsx)(m.NK,{label:"Phone",type:"tel",direction:"column",name:"form-phone"}),(0,N.jsx)("div",{className:"md:col-span-2",children:(0,N.jsx)(m.Fk,{label:"Message",direction:"column",required:!0,rows:4,description:"Tell us what you're looking for",name:"form-message"})})]}),(0,N.jsx)("div",{className:"mt-4",children:(0,N.jsx)(o.A,{variant:"primary",size:"md",children:"Submit"})})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Inline form with consistent label widths"}),(0,N.jsxs)("div",{className:"border border-primary rounded p-6 bg-accent",children:[(0,N.jsxs)("div",{className:"space-y-3",children:[(0,N.jsx)(m.NK,{label:"Username",labelWidth:"w-24",required:!0,name:"inline-username"}),(0,N.jsx)(m.NK,{label:"Email",type:"email",labelWidth:"w-24",required:!0,name:"inline-email"}),(0,N.jsx)(m.NK,{label:"Password",type:"password",labelWidth:"w-24",required:!0,name:"inline-password"}),(0,N.jsx)(m.Fk,{label:"Bio",labelWidth:"w-24",rows:3,name:"inline-bio"})]}),(0,N.jsx)("div",{className:"mt-4 ml-26",children:(0,N.jsx)(o.A,{variant:"secondary",size:"sm",children:"Save Profile"})})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Data scheme variations"}),(0,N.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[(0,N.jsxs)("div",{"data-scheme":"secondary",className:"border border-primary rounded p-6 bg-primary",children:[(0,N.jsx)("h5",{className:"font-semibold mb-3",children:"Primary scheme inputs"}),(0,N.jsx)("p",{className:"text-sm text-secondary mb-4",children:'These inputs use dataScheme="primary" on a secondary background'}),(0,N.jsxs)("div",{className:"space-y-3",children:[(0,N.jsx)(m.NK,{label:"Name",dataScheme:"primary",direction:"column",name:"primary-name"}),(0,N.jsx)(m.Fk,{label:"Description",dataScheme:"primary",direction:"column",rows:3,name:"primary-desc"})]})]}),(0,N.jsxs)("div",{"data-scheme":"primary",className:"border border-primary rounded p-6 bg-primary",children:[(0,N.jsx)("h5",{className:"font-semibold mb-3",children:"Secondary sc
1heme inputs"}),(0,N.jsx)("p",{className:"text-sm text-secondary mb-4",children:'These inputs use dataScheme="secondary" on a primary background'}),(0,N.jsxs)("div",{className:"space-y-3",children:[(0,N.jsx)(m.NK,{label:"Name",dataScheme:"secondary",direction:"column",name:"secondary-name"}),(0,N.jsx)(m.Fk,{label:"Description",dataScheme:"secondary",direction:"column",rows:3,name:"secondary-desc"})]})]})]})]})]})]}),(0,N.jsxs)("section",{id:"osselect",children:[(0,N.jsx)("h2",{className:"",children:(0,N.jsx)("code",{children:"<OSSelect />"})}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Basic examples"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Dm,{label:"Status",options:[{label:"In Progress",value:"in-progress"},{label:"Complete",value:"complete"},{label:"Under Consideration",value:"under-consideration"}],placeholder:"Select status..."}),(0,N.jsx)(m.Dm,{label:"Priority",options:[{label:"Low",value:"low"},{label:"Medium",value:"medium"},{label:"High",value:"high"},{label:"Critical",value:"critical"}],placeholder:"Select priority...",required:!0})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Sizes"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Dm,{label:"Small",size:"sm",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"Small select"}),(0,N.jsx)(m.Dm,{label:"Medium",size:"md",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"Medium select (default)"}),(0,N.jsx)(m.Dm,{label:"Large",size:"lg",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"Large select"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Label directions"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Dm,{label:"Row direction",direction:"row",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"Label on the left"}),(0,N.jsx)(m.Dm,{label:"Column direction",direction:"column",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"Label above"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Features"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Dm,{label:"With description",description:"Choose the appropriate status for this item",options:[{label:"Draft",value:"draft"},{label:"Published",value:"published"},{label:"Archived",value:"archived"}],placeholder:"Select status..."}),(0,N.jsx)(m.Dm,{label:"With tooltip",tooltip:"This determines the visibility of your content",options:[{label:"Public",value:"public"},{label:"Private",value:"private"},{label:"Unlisted",value:"unlisted"}],placeholder:"Select visibility..."}),(0,N.jsx)(m.Dm,{label:"Disabled",disabled:!0,options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"This select is disabled"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Searchable selects"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Dm,{label:"Searchable (default)",options:[{label:"Apple",value:"apple",description:"A red fruit"},{label:"Banana",value:"banana",description:"A yellow fruit"},{label:"Cherry",value:"cherry",description:"A small red fruit"},{label:"Date",value:"date",description:"A sweet dried fruit"},{label:"Elderberry",value:"elderberry",description:"A dark purple berry"},{label:"Fig",value:"fig",description:"A soft sweet fruit"},{label:"Grape",value:"grape",description:"Small round fruits"},{label:"Honeydew",value:"honeydew",description:"A sweet melon"}],placeholder:"Search fruits...",searchPlaceholder:"Type to search fruits..."}),(0,N.jsx)(m.Dm,{label:"Non-searchable",searchable:!1,options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"No search available"})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Error states"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.Dm,{label:"Invalid selection",touched:!0,error:"Please select a valid option",options:[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],placeholder:"This has an error"})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Complex examples"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.Dm,{label:"Full featured",required:!0,tooltip:"
1Choose your team for this project",description:"This will determine who has access to this project",options:[{label:"Engineering",value:"engineering",description:"Software development team"},{label:"Design",value:"design",description:"User experience and visual design"},{label:"Product",value:"product",description:"Product strategy and management"},{label:"Marketing",value:"marketing",description:"Brand and growth marketing"}],direction:"column",size:"lg",placeholder:"Select your team..."})})]})]}),(0,N.jsxs)("section",{id:"combobox",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<Combobox />"})}),(0,N.jsx)("p",{className:"mb-6 text-secondary",children:"A multi-select combobox component with search, keyboard navigation, and optional creation of new options. Perfect for tags, categories, and multi-value selections."}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Basic example (with creation enabled)"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.G3,{label:"Tags",placeholder:"Select or create tags...",description:"Type to search or create new tags",options:[{label:"React",value:"react"},{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"},{label:"Python",value:"python"},{label:"Go",value:"go"}],value:v,onChange:w})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Without creation (predefined options only)"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.G3,{label:"Team members",placeholder:"Select team members...",description:"Choose from existing team members",options:[{label:"Alice Johnson",value:"alice"},{label:"Bob Smith",value:"bob"},{label:"Charlie Brown",value:"charlie"},{label:"Diana Prince",value:"diana"}],value:A,onChange:k,allowCreate:!1})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Error state"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.G3,{label:"Categories",placeholder:"Select at least one category...",description:"At least one category is required",options:[{label:"Frontend",value:"frontend"},{label:"Backend",value:"backend"},{label:"DevOps",value:"devops"},{label:"Design",value:"design"}],value:z,onChange:S,touched:!0,error:"Please select at least one category"})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Key features"}),(0,N.jsx)("div",{className:"space-y-2 text-sm",children:(0,N.jsxs)("ul",{className:"list-disc list-inside space-y-1 text-secondary",children:[(0,N.jsx)("li",{children:"Multi-select with visual chips for selected items"}),(0,N.jsx)("li",{children:"Search/filter options by typing"}),(0,N.jsx)("li",{children:"Keyboard navigation (Arrow Up/Down, Enter, Escape, Backspace)"}),(0,N.jsx)("li",{children:"Optional creation of new options (allowCreate prop)"}),(0,N.jsx)("li",{children:"Click to select/deselect items"}),(0,N.jsx)("li",{children:"Remove items by clicking X or using Backspace"}),(0,N.jsx)("li",{children:"Checkmark indicator for selected items in dropdown"}),(0,N.jsx)("li",{children:"Auto-scrolling for keyboard navigation"})]})})]})]}),(0,N.jsxs)("section",{id:"checkbox",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<Checkbox />"})}),(0,N.jsx)("p",{className:"mb-6 text-secondary",children:"A checkbox component built with Radix UI. Supports controlled and uncontrolled states, disabled state, and custom styling."}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Basic examples"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-basic",checked:I,onCheckedChange:C}),(0,N.jsx)("label",{htmlFor:"checkbox-basic",className:"text-sm cursor-pointer",children:"Basic checkbox (click to toggle)"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-checked",checked:_,onCheckedChange:D}),(0,N.jsx)("label",{htmlFor:"checkbox-checked",className:"text-sm cursor-pointer",children:"Default checked"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-disabled",disabled:!0,checked:L}),(0,N.jsx)("label",{htmlFor:"checkbox-disabled",className:"text-sm opacity-50",children:"Disabled checkbox"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-disabled-checked",disabled:!0,checked:!0}),(0,N.jsx)("label",{htmlFor:"checkbox-disabled-checked",className:"text-sm opacity-50",children:"Disabled checked"})]})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Data scheme variations"}),(0,N.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[(0,N.jsxs)("div",{"data-scheme":"secondary",className:"border border-primary rounded p-6 bg-primary space-y-3",children:[(0,N.jsx)("h5",{className:"font-semibold mb-3",children:"Primary scheme"}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-primary-1",dataScheme:"primary",defaultChecked:!0}),(0,N.jsx)("label",{htmlFor:"checkbox-primary-1",className:"text-sm cursor-pointer",children:"Checked"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-primary-2",dataScheme:"primary"}),(0,N.jsx)("label",{htmlFor:"checkbox-primary-2",className:"text-sm cursor-pointer",children:"Unchecked"})]})]}),(0,N.jsxs)("div",{"data-scheme":"primary",className:"border border-primary rounded p-6 bg-primary space-y-3",children:[(0,N.jsx)("h5",{className:"font-semibold mb-3",children:"Secondary sc
1heme"}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-secondary-1",dataScheme:"secondary",defaultChecked:!0}),(0,N.jsx)("label",{htmlFor:"checkbox-secondary-1",className:"text-sm cursor-pointer",children:"Checked"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"checkbox-secondary-2",dataScheme:"secondary"}),(0,N.jsx)("label",{htmlFor:"checkbox-secondary-2",className:"text-sm cursor-pointer",children:"Unchecked"})]})]})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Form integration"}),(0,N.jsx)("div",{className:"border border-primary rounded p-6 bg-accent",children:(0,N.jsxs)("fieldset",{className:"space-y-3",children:[(0,N.jsx)("legend",{className:"font-semibold mb-2",children:"Select your preferences"}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"pref-1",name:"newsletter",value:"newsletter"}),(0,N.jsx)("label",{htmlFor:"pref-1",className:"text-sm cursor-pointer",children:"Subscribe to newsletter"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"pref-2",name:"updates",value:"updates",defaultChecked:!0}),(0,N.jsx)("label",{htmlFor:"pref-2",className:"text-sm cursor-pointer",children:"Receive product updates"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"pref-3",name:"marketing",value:"marketing"}),(0,N.jsx)("label",{htmlFor:"pref-3",className:"text-sm cursor-pointer",children:"Marketing communications"})]}),(0,N.jsxs)("div",{className:"flex items-center gap-2",children:[(0,N.jsx)(p.S,{id:"pref-4",name:"terms",value:"terms",required:!0}),(0,N.jsxs)("label",{htmlFor:"pref-4",className:"text-sm cursor-pointer",children:["I agree to the terms and conditions"," ",(0,N.jsx)("span",{className:"text-red dark:text-yellow",children:"*"})]})]})]})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Key features"}),(0,N.jsx)("div",{className:"space-y-2 text-sm",children:(0,N.jsxs)("ul",{className:"list-disc list-inside space-y-1 text-secondary",children:[(0,N.jsx)("li",{children:"Built on Radix UI for accessibility"}),(0,N.jsx)("li",{children:"Controlled and uncontrolled modes"}),(0,N.jsx)("li",{children:"Disabled state support"}),(0,N.jsx)("li",{children:"Data scheme variations (primary/secondary)"}),(0,N.jsx)("li",{children:"Required field support"}),(0,N.jsx)("li",{children:"Custom styling via className prop"}),(0,N.jsx)("li",{children:"Keyboard accessible"}),(0,N.jsx)("li",{children:"ARIA compliant"})]})})]})]}),(0,N.jsxs)("section",{id:"teammembermultiselect",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:(0,N.jsx)("code",{children:"<TeamMemberMultiSelect />"})}),(0,N.jsx)("p",{className:"mb-6 text-secondary",children:"A complex multi-select component for choosing team members from small teams. Features collapsible team sections, search functionality, avatar display, and deduplication across teams."}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Basic example"}),(0,N.jsxs)("div",{className:"space-y-4",children:[(0,N.jsx)(m.Bh,{label:"Team members",description:"Select team members for this project",placeholder:"Search teams and members...",teams:a,value:O,onChange:P}),O.length>0&&(0,N.jsxs)("div",{className:"text-sm text-secondary",children:["Selected:"," ",O.map(e=>e.firstName+" "+e.lastName).join(", ")]})]})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Error state"}),(0,N.jsx)("div",{className:"space-y-4",children:(0,N.jsx)(m.Bh,{label:"Required team members",description:"At least one team member is required",placeholder:"Search teams and members...",teams:a,value:B,onChange:T,touched:!0,error:"Please select at least one team member"})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Key features"}),(0,N.jsx)("div",{className:"space-y-2 text-sm",children:(0,N.jsxs)("ul",{className:"list-disc list-inside space-y-1 text-secondary",children:[(0,N.jsx)("li",{children:"Multi-select with avatar chips for selected members"}),(0,N.jsx)("li",{children:'"All members" checkbox to select/deselect everyone'}),(0,N.jsx)("li",{children:"Collapsible team sections using Radix UI Accordion"}),(0,N.jsx)("li",{children:"Team-level checkboxes to select/deselect all team members"}),(0,N.jsx)("li",{children:"Search functionality filtering team and member names"}),(0,N.jsx)("li",{children:"Auto-expand teams with matching members when searching"}),(0,N.jsx)("li",{children:"Member deduplication by squeakId across multiple teams"}),(0,N.jsx)("li",{children:"Avatar display with colored backgrounds (like TeamMember component)"}),(0,N.jsx)("li",{children:'Selection count badges on team headers (e.g., "2/3 selected")'}),(0,N.jsx)("li",{children:"Tooltip on chips showing team affiliations"}),(0,N.jsx)("li",{children:"Keyboard navigation (Escape to close, Backspace to remove last)"}),(0,N.jsx)("li",{children:"Receives data as props for flexibility"})]})})]}),(0,N.jsxs)("div",{className:"mb-6",children:[(0,N.jsx)("h4",{className:"font-semibold mb-4",children:"Data structure"}),(0,N.jsxs)("div",{className:"text-sm",children:[(0,N.jsx)("p",{className:"mb-2 text-secondary",children:"The component receives teams with nested profiles and returns selected members with full metadata:"}),(0,N.jsx)("div",{className:"bg-accent p-4 rounded border border-primary",children:(0,N.jsx)("pre",{className:"text-xs overflow-x-auto",children:"// Teams prop structure\nteams: Array<{\n id: string\n name: string\n slug: string\n miniCrest?: { data: { attributes: { url: string } } }\n profiles: {\n data: Array<{\n id: string\n attributes: {\n squeakId: string\n firstName: string\n lastName: string\n companyRole?: string\n avatar?: { data: { attributes: { url: string } } }\n color?: string\n }\n }>\n }\n}>\n\n// Value/onChange structure\nSelectedMember: {\n squeakId: string\n firstName: string\n lastName: string\n avatar?: { url: string }\n color?: string\n teams: string[] // Team names\n}"})})]})]})]}),(0,N.jsxs)("section",{id:"competitor-matrix",children:[(0,N.jsx)("h2",{className:"",children:"Competitor feature matrix"}),(0,N.jsx)("p",{className:"mb-6 text-secondary",children:"Comprehensive view of all product and platform features across competitors. This serves as internal tooling for QA, content creation, and identifying gaps in competitive data."}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Error Tracking Features"}),(0,N.jsx)(h.A,{competitors:["posthog","sentry","logrocket","bugsnag","datadog"],rows:[{path:"error_tracking.core.error_alerts"},{path:"error_tracking.core.exception_capture"}
1,{path:"error_tracking.core.issue_management"},{path:"error_tracking.core.error_grouping"},{path:"error_tracking.core.stack_tracing"},{path:"error_tracking.monitoring.performance_monitoring"},{path:"error_tracking.monitoring.source_map_support"},{path:"error_tracking.integrations.product_analytics"},{path:"error_tracking.integrations.session_replay"},{path:"error_tracking.integrations.ab_experiments"}]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Session Replay Features"}),(0,N.jsx)(h.A,{competitors:["posthog","fullstory","hotjar","logrocket","clarity","matomo"],rows:[{path:"session_replay.ai.ai_summaries"},{path:"session_replay.platform_support.single_page_app"},{path:"session_replay.platform_support.ios_recordings"},{path:"session_replay.platform_support.android_recordings"},{path:"session_replay.platform_support.react_native_recordings"},{path:"session_replay.platform_support.flutter_recordings"},{path:"session_replay.identity.identity_detection"},{path:"session_replay.targeting.target_by_url"},{path:"session_replay.targeting.filter_by_user_or_event"},{path:"session_replay.export.export_to_json"},{path:"session_replay.export.retention_policy"}]})]}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"Platform Features"}),(0,N.jsx)(h.A,{competitors:["posthog","sentry","logrocket","bugsnag","glitchtip","signoz"],rows:[{path:"platform.deployment.open_source"},{path:"platform.deployment.self_host"},{path:"platform.pricing.usage_based_pricing"},{path:"platform.pricing.transparent_pricing"},{path:"platform.pricing.free_tier"},{path:"platform.support.console_log_capture"},{path:"platform.support.mobile_sdk_coverage"},{path:"platform.integrations.ci_cd_integrations"},{path:"platform.analytics_integration.built_in_analytics"}]})]})]}),(0,N.jsxs)("section",{id:"usecustomers",children:[(0,N.jsx)("h2",{className:"",children:(0,N.jsx)("code",{children:"useCustomers"})}),(0,N.jsxs)("div",{className:"mb-8",children:[(0,N.jsx)("h3",{className:"text-xl font-semibold mb-4",children:"All customer logos with normalized sizing"}),(0,N.jsx)("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6",children:Object.values(e).map(e=>(0,N.jsxs)("div",{className:"flex flex-col items-center space-y-2 p-4 border border-primary rounded",children:[(0,N.jsx)("div",{className:"flex items-center justify-center h-16 w-full",children:M(e)}),(0,N.jsxs)("div",{className:"text-center",children:[(0,N.jsx)("div",{className:"text-sm font-medium",children:e.name}),e.height&&(0,N.jsxs)("div",{className:"text-xs text-muted",children:["Height: ",e.height]}),e.featured&&(0,N.jsx)("div",{className:"text-xs text-orange",children:"Featured"})]})]},e.slug))})]})]})]})})})]})}}}]); 2//# sourceMappingURL=88cc037c-e30efc8339427fedc566.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.