https://tailwindadmin-tanstack-start-pro.netlify.app/assets/form-layouts-CvRgUJl7.js

1import{r as N,j as e}from"./main-DTgSv9p_.js";import{T as l}from"./TitleBorderCard-CZYFQ14i.js";import{a as h}from"./index-CkTbSlTF.js";import{I as r}from"./input-7L2t0RTE.js";import{L as s}from"./label-CtrJxAjH.js";import{B as i}from"./button-BCCjuZ0P.js";import{R as u,a as t}from"./radio-group-Co5ijsSx.js";import{A as p,a as j}from"./alert-Csv91qgP.js";import{S as n,a as m,b as o,c as x,e as a}from"./select-CsbA4kT-.js";import{c as f}from"./utils-4perknFd.js";import{C as y}from"./calendar-CJASbdRP.js";import{P as b,a as g,b as F}from"./popover-CZO_I3Z0.js";import{f as w}from"./format-CNjrC8BB.js";import{T as S}from"./textarea-DkEN1SJg.js";import{C as d}from"./checkbox-DbtoG8BB.js";import{B as I}from"./BreadcrumbComp-CsiY6TRt.js";import"./_commonjsHelpers-CE1G-McA.js";import"./card-CpOP64kH.js";import"./iconBase-DbUBhT8e.js";import"./index-Cft9Cwv8.js";import"./index-DahqhhqS.js";import"./index-BJmaLURS.js";import"./index-BsJZfXWL.js";import"./index-iNwbFFs7.js";import"./index-BpehJJ13.js";import"./index-pkvTMEII.js";import"./index-Bequ1tCx.js";import"./index-B89h947f.js";import"./index-C3HJTmKN.js";import"./index-DudGXFlK.js";import"./index-BdD4bfGm.js";import"./circle-BJTAxXBH.js";import"./createLucideIcon-D0XuVdCV.js";import"./index-BdQq_4o_.js";import"./index-Cje_hKxh.js";import"./index-BkOpU2nn.js";import"./tslib.es6-CmEaCU22.js";import"./index-BaR1yCY5.js";import"./floating-ui.dom-D7G01c1r.js";import"./chevron-down-8Z0d8zmC.js";import"./check-DxwWfJw3.js";import"./en-US-Dw4dfe3S.js";import"./toDate-BK_JsdFu.js";import"./addMonths-BQ1GswEf.js";import"./chevron-right-56uabHn8.js";import"./CardBox-Bm8QxxqP.js";const C=()=>{const[c,v]=N.useState(void 0);return e.jsx("div",{children:e.jsxs(l,{title:"Basic Header Form",children:[e.jsx("div",{className:"pb-6",children:e.jsxs(p,{variant:"lightprimary",children:[e.jsx(h,{className:"h-4 w-4 !text-inherit"}),e.jsx(j,{className:"text-inherit",children:"Person Info"})]})}),e.jsxs("div",{className:"grid grid-cols-12 gap-6",children:[e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"firstname",className:"mb-2 block",children:"First Name"}),e.jsx(r,{id:"firstname",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"lastname",className:"mb-2 block",children:"Last Name"}),e.jsx(r,{id:"lastname",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"gender",className:"mb-2 block",children:"Select Gender"}),e.jsxs(n,{required:!0,children:[e.jsx(m,{id:"gender",className:"select-md",children:e.jsx(o,{placeholder:"Select gender"})}),e.jsxs(x,{children:[e.jsx(a,{value:"male",children:"Male"}),e.jsx(a,{value:"female",children:"Female"}),e.jsx(a,{value:"other",children:"Other"})]})]})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"birth",className:"mb-2 block",children:"Date of Birth"}),e.jsxs(b,{children:[e.jsx(g,{asChild:!0,children:e.jsx(i,{variant:"outline",className:f("w-full justify-start text-left font-normal hover:bg-transparent text-ld hover:text-ld",!c&&"text-muted-foreground hover:text-muted-foreground"),children:c?w(c,"PPP"):e.jsx("span",{children:"Pick a date"})})}),e.jsx(F,{className:"w-auto p-0",align:"start",children:e.jsx(y,{mode:"single",selected:c,onSelect:v,initialFocus:!0})})]})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(s,{htmlFor:"membership",className:"mb-3 inline-block",children:"Membership"}),e.jsxs(u,{defaultValue:"free",className:"flex items-center gap-6",children:[e.jsxs("div",{className:"flex items-center gap-2 pb-2",children:[e.jsx(t,{value:"free",id:"free"}),e.jsx(s,{htmlFor:"free",className:"mb-0",children:"Free"})]}),e.jsxs("div",{className:"flex items-center gap-2 pb-2",children:[e.jsx(t,{value:"paid",id:"paid"}),e.jsx(s,{htmlFor:"paid",className:"mb-0",children:"Paid"})]})]})]}),e.jsx("div",{className:"col-span-12",children:e.jsxs(p,{variant:"lightprimary",children:[e.jsx(h,{className:"h-4 w-4 !text-inherit"}),e.jsx(j,{className:"text-inherit",children:"Address"})]})}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(s,{htmlFor:"street",className:"mb-2 block",children:"Street"}),e.jsx(r,{id:"street",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"city",className:"mb-2 block",children:"City"}),e.jsx(r,{id:"city",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"state",className:"mb-2 block",children:"State"}),e.jsx(r,{id:"state",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"postcode",className:"mb-2 block",children:"Post Code"}),e.jsx(r,{id:"postcode",type:"text"})]}),e.jsxs("div",{className:"sm:col-span-6 col-span-12",children:[e.jsx(s,{htmlFor:"country",className:"mb-2 block",children:"Country"}),e.jsxs(n,{required:!0,children:[e.jsx(m,{id:"country",className:"select-md",children:e.jsx(o,{placeholder:"Select a country"})}),e.jsxs(x,{children:[e.jsx(a,{value:"united-states",children:"United States"}),e.jsx(a,{value:"canada",children:"Canada"}),e.jsx(a,{value:"france",children:"France"}),e.jsx(a,{value:"germany",children:"Germany"})]})]})]}),e.jsxs("div",{className:"col-span-12 flex items-center gap-[1rem]",children:[e.jsx(i,{type:"reset",variant:"destructive",children:"Cancel"}),e.jsx(i,{type:"submit",children:"Submit"})]})]})]})})},P=()=>e.jsx("div",{children:e.jsx(l,{title:"Default Form",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"Default Text",children:"Default Text"})}),e.jsx(r,{id:"default",type:"text",placeholder:"Marcal"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"email1",children:"Email"})}),e.jsx(r,{id:"email1",type:"email",placeholder:"[email protected]",required:!0})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"password1",children:"Password"})}),e.jsx(r,{id:"password1",type:"password",required:!0})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"comment",children:"Your message"})}),e.jsx(S,{id:"comment",placeholder:"Leave a comment...",required:!0,rows:4})]}),e.jsxs("div",{className:"sm:flex items-center gap-[1.875rem] col-span-12",children:[e.jsxs("div",{className:"flex flex-col gap-[1rem]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(d,{id:"promotion"}),e.jsx(s,{htmlFor:"promotion",className:"mb-0",children:"I want to get promotional offers"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(d,{id:"promotion1"}),e.jsx(s,{htmlFor:"promotion1",className:"mb-0",children:"I want to get promotional offers"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(d,{id:"promotion2"}),e.jsx(s,{htmlFor:"promotion2",className:"mb-0",children:"I want to get promotional offers"})]})]}),e.jsxs(u,{defaultValue:"USA",className:"flex flex-col gap-[1rem] md:mt-0 mt-6",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t,{value:"USA",id:"usa"}),e.jsx(s,{htmlFor:"usa",className:"mb-0",children:"United States"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t,{value:"Germany",id:"germany"}),e.jsx(s,{htmlFor:"germany",className:"mb-0",children:"Germany"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t,{value:"Spain",id:"spain"}),e.jsx(s,{htmlFor:"spain",className:"mb-0",children:"Spain"})]})]})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"countries",children:"Select"})}),e.jsxs(n,{required:!0,children:[e.jsx(m,{id:"countries",children:e.jsx(o,{placeholder:"Select a country"})}),e.jsxs(x,{children:[e.jsx(a,{value:"united-states",children:"United States"}),e.jsx(a,{value:"canada",children:"Canada"}),e.jsx(a,{value:"france",children:"France"}),e.jsx(a,{value:"germany",children:"Germany"})]})]}),e.jsx("div",{className:"pt-5",children:e.jsx(i,{type:"submit",children:"Submit"})})]})]})})}),q=()=>e.jsx("div",{children:e.jsx(l,{title:"Disabled Form",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"disabledInput1",children:"Name"})}),e.jsx(r,{id:"disabledInput1",type:"text",disabled:!0})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"disabledInput2",children:"Email"})}),e.jsx(r,{id:"disabledInput2",type:"email",disabled:!0,required:!0}),e.jsxs("p",{className:"mt-1 text-sm text-muted-foreground",children:["We’ll never share your details. Read our",e.jsx("a",{href:"#",className:"ml-1 font-medium text-primary hover:underline",children:"Privacy Policy"}),"."]})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"disabledInput3",children:"Password"})}),e.jsx(r,{id:"disabledInput3",type:"password",disabled:!0})]}),e.jsx("div",{children:e.jsx(i,{type:"submit",disabled:!0,children:"Submit"})})]})})}),k=()=>e.jsx("div",{children:e.jsx(l,{title:"Input Variants",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"input-gray",className:"text-gray",children:"Gray"})}),e.jsx(r,{id:"input-gray",placeholder:"Input Gray",required:!0,variant:"gray"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"input-info",className:"text-info",children:"Info"})}),e.jsx(r,{id:"input-info",placeholder:"Input Info",required:!0,variant:"info"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"input-success",className:"text-success",children:"Success"})}),e.jsx(r,{id:"input-success",placeholder:"Input Success",required:!0,variant:"success"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"input-failure",className:"text-error",children:"Failure"})}),e.jsx(r,{id:"input-failure",placeholder:"Input Failure",required:!0,variant:"failure"})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"input-warning",className:"text-warning",children:"Warning"})}),e.jsx(r,{id:"input-warning",placeholder:"Input Warning",required:!0,variant:"warning"})]})]})})}),R=()=>e.jsx("div",{children:e.jsx(l,{title:"Ordrinary Form",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"email1",children:"Email"})}),e.jsx(r,{className:"form-control",id:"email3",type:"email",placeholder:"[email protected]",required:!0}),e.jsx("p",{children:e.jsxs(e.Fragment,{children:["We’ll never share your details. Read our",e.jsx("a",{href:"#",className:"ml-1 font-medium text-primary hover:underline dark:text-primary",children:"Privacy Policy"}),"."]})})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"password1",children:"Password"})}),e.jsx(r,{className:"form-control",id:"password1",type:"password",required:!0}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(d,{id:"remember"}),e.jsx(s,{htmlFor:"remember",className:"mb-0",children:"RememberMe!"})]})]}),e.jsx("div",{children:e.jsx(i,{type:"submit",children:"Submit"})})]})})}),G=()=>e.jsx("div",{children:e.jsx(l,{title:"Readonly Form",children:e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"name",children:"Name"})}),e.jsx(r,{id:"name",type:"text",value:"Wrappixel",onChange:()=>{}})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"emailid",children:"Email"})}),e.jsx(r,{id:"emailid",type:"email",value:"[email protected]",onChange:()=>{},required:!0}),e.jsxs("p",{className:"mt-1 text-sm text-muted-foreground",children:["We’ll never share your details. Read our",e.jsx("a",{href:"#",className:"ml-1 font-medium text-primary hover:underline",children:"Privacy Policy"}),"."]})]}),e.jsxs("div",{className:"space-y-1",children:[e.jsx("div",{children:e.jsx(s,{htmlFor:"password1",children:"Password"})}),e.jsx(r,{id:"password1",type:"password",value:"[email protected]",onChange:()=>{},required:!0})]}),e.jsx("div",{children:e.jsx(i,{type:"submit",children:"Submit"})})]})})}),T=[{to:"/",title:"Home"},{to:"/",title:"Form Layouts"}];function Ie(){return e.jsxs(e.Fragment,{children:[e.jsx(I,{title:"Form Layout",items:T}),e.jsxs("div",{className:"grid grid-cols-12 gap-6",children:[e.jsx("div",{className:"col-span-12",children:e.jsx(R,{})}),e.jsx("div",{className:"col-span-12",children:e.jsx(k,{})}),e.jsx("div",{className:"col-span-12",children:e.jsx(P,{})}),e.jsx("div",{className:"col-span-12",children:e.jsx(C,{})}),e.jsx("div",{className:"col-span-12",children:e.jsx(G,{})}),e.jsx("div",{className:"col-span-12",children:e.jsx(q,{})})]})]})}export{Ie as component};