https://flur.ee/assets/DevInputs-Dgl8cyDu.js

1import{r as p,j as e}from"./react-vendor-VptLKEvj.js";import{P as w,S as N,a1 as x,O as j,Q as o,F as t,e as n,t as u,r as v}from"./index-BWlUU3al.js";import"./ui-vendor-BsZg97Zl.js";const g=[{label:"Large (32 px)",value:"lg"},{label:"Medium (24 px)",value:"md"},{label:"Small (16 px)",value:"sm"}],r=({title:i,children:c})=>e.jsxs("div",{className:"mb-16",children:[e.jsx("h2",{className:"mb-8 font-gotham font-[900] text-[30px] leading-[36px] tracking-[0.6px] text-[#091133]",children:i}),c]}),l=({label:i,children:c})=>e.jsxs("div",{className:"mb-6",children:[e.jsx("p",{className:"mb-3 font-operator font-[700] text-[12px] uppercase tracking-[1.6px] text-[#202152]",children:i}),e.jsx("div",{className:"flex flex-wrap items-center gap-6",children:c})]}),C=()=>{const[i,c]=p.useState({}),[d,m]=p.useState({}),h=s=>c(a=>({...a,[s]:!a[s]}));return e.jsxs(w,{children:[e.jsx(N,{title:"Dev Inputs",description:"Internal input component showcase.",noindex:!0}),e.jsx("section",{className:"pb-20 pt-32 md:pt-40",children:e.jsxs("div",{className:"container mx-auto px-6",children:[e.jsx("div",{className:"mb-4 inline-flex items-center rounded-[1px] bg-[#13c6ff] px-[14px] py-[4px]",children:e.jsx("span",{className:"font-gotham font-[400] text-[11px] leading-[15px] tracking-[0.55px] text-[#091133]",children:"YETI DESIGN SYSTEM"})}),e.jsx("h1",{className:"font-gotham font-[900] text-[48px] leading-[50px] tracking-[0.96px] text-[#091133] md:text-[60px] md:leading-[62px]",children:"Checkboxes & Radios"}),e.jsx("p",{className:"mt-4 max-w-[600px] font-gotham-narrow text-[18px] leading-[28px] text-[#202152]",children:"Custom Fluree-styled input controls at three sizes with full state coverage."}),e.jsxs("div",{className:"mt-16",children:[e.jsx(r,{title:"Checkbox — Sizes",children:g.map(({label:s,value:a})=>e.jsxs(l,{label:s,children:[e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(x,{size:a,checked:i[`cb-${a}`]||!1,onCheckedChange:()=>h(`cb-${a}`)}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:"Unchecked"})]}),e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(x,{size:a,checked:!0,onCheckedChange:()=>{}}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:"Checked"})]}),e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(x,{size:a,disabled:!0}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[rgba(9,17,51,0.33)]",children:"Disabled"})]})]},a))}),e.jsxs(r,{title:"Checkbox — Interactive",children:[e.jsx(l,{label:"Click to toggle",children:["lg","md","sm"].map(s=>e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(x,{size:s,checked:i[`int-${s}`]||!1,onCheckedChange:()=>h(`int-${s}`)}),e.jsxs("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:["Option ",s.toUpperCase()]})]},s))}),e.jsx("p",{className:"mt-2 font-gotham-narrow text-[14px] text-[#202152]",children:"Tab into any checkbox to see the focus glow. Click or press Space to toggle."})]}),e.jsx(r,{title:"Radio Button — Sizes",children:g.map(({label:s,value:a})=>e.jsx(l,{label:s,children:e.jsxs(j,{value:d[`radio-${a}`],onValueChange:b=>m(f=>({...f,[`radio-${a}`]:b})),className:"flex flex-wrap items-center gap-6",children:[e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(o,{size:a,value:"a"}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:"Option A"})]}),e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(o,{size:a,value:"b"}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:"Option B"})]}),e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(o,{size:a,value:"c",disabled:!0}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[rgba(9,17,51,0.33)]",children:"Disabled"})]})]})},a))}),e.jsxs(r,{title:"Text Input — States",children:[e.jsx(l,{label:"Default",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-default",children:"Form Label"}),e.jsx(n,{id:"demo-default",placeholder:"Default text : hex value #282966"})]})}),e.jsx(l,{label:"With value",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-value",children:"Form Label"}),e.jsx(n,{id:"demo-value",defaultValue:"Value=completed text: hex #091133",state:"success"})]})}),e.jsx(l,{label:"Error state",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-error",children:"Form Label"}),e.jsx(n,{id:"demo-error",defaultValue:"[email protected]",state:"error",validationMessage:{heading:"Oh Snap!",body:"We need this to be a valid email. Please try [email protected]."}})]})}),e.jsx(l,{label:"Success state",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-success",children:"Form Label"}),e.jsx(n,{id:"demo-success",defaultValue:"[email protected]",state:"success",validationMessage:{heading:"Thanks for c

1orrecting this field!",body:"This looks just right, all is well."}})]})}),e.jsx(l,{label:"Disabled",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-disabled",disabled:!0,children:"Label text"}),e.jsx(n,{id:"demo-disabled",placeholder:"Disabled",disabled:!0})]})}),e.jsx(l,{label:"Small size (footer/compact)",children:e.jsx("div",{className:"w-full max-w-[300px]",children:e.jsx(n,{size:"sm",placeholder:"[email protected]"})})})]}),e.jsxs(r,{title:"Textarea",children:[e.jsx(l,{label:"Default",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-textarea",children:"Message"}),e.jsx(u,{id:"demo-textarea",placeholder:"Tell us about your use case...",rows:4})]})}),e.jsx(l,{label:"Error",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-textarea-err",children:"Message"}),e.jsx(u,{id:"demo-textarea-err",state:"error",defaultValue:"Too short",helperText:"Message must be at least 20 characters."})]})})]}),e.jsx(r,{title:"Select",children:e.jsx(l,{label:"Default",children:e.jsxs("div",{className:"w-full max-w-[429px]",children:[e.jsx(t,{htmlFor:"demo-select",children:"Role"}),e.jsxs(v,{id:"demo-select",defaultValue:"",children:[e.jsx("option",{value:"",disabled:!0,children:"Select your role…"}),e.jsx("option",{children:"C-Suite / VP"}),e.jsx("option",{children:"Data / Analytics Leader"}),e.jsx("option",{children:"Engineering / Architecture"}),e.jsx("option",{children:"Product Management"}),e.jsx("option",{children:"Other"})]})]})})}),e.jsxs(r,{title:"Labels",children:[e.jsx(l,{label:"Form label (default)",children:e.jsx(t,{children:"Form Label"})}),e.jsx(l,{label:"Required label",children:e.jsx(t,{required:!0,children:"Email Address"})}),e.jsx(l,{label:"Group heading",children:e.jsx(t,{variant:"group-heading",children:"Group Heading"})}),e.jsx(l,{label:"Disabled label",children:e.jsx(t,{disabled:!0,children:"Label text"})})]}),e.jsxs(r,{title:"Radio Button — Interactive Group",children:[e.jsx(l,{label:"Select one option",children:e.jsx(j,{value:d.demo,onValueChange:s=>m(a=>({...a,demo:s})),className:"flex flex-wrap items-center gap-6",children:["Semantic Web","Knowledge Graph","Data Fabric"].map(s=>e.jsxs("label",{className:"flex items-center gap-3 cursor-pointer",children:[e.jsx(o,{size:"md",value:s}),e.jsx("span",{className:"font-gotham-narrow font-[500] text-[16px] leading-[24px] text-[#091133]",children:s})]},s))})}),e.jsx("p",{className:"mt-2 font-gotham-narrow text-[14px] text-[#202152]",children:"Tab into any radio to see the focus glow. Arrow keys move selection within the group."})]})]})]})})]})};export{C as default};