27:o1,#27:oe57,1:I[768017,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"HTTPAccessFallbackBoundary"] 2:I[479520,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],""] 3:I[305215,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeProvider"] 4:"$Sreact.suspense" 5:I[357003,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"TRPCReactProvider"] 6:I[492605,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"BetterModalProvider"] 7:I[12985,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"NuqsAdapter"] :HL["/_next/static/immutable/chunks/3-y5jlwadbcp9.css","style"] :HL["/_next/static/immutable/chunks/1_idk1l4ecx9m.css","style"] 17:X 18:X 1d:X 1e:X 20:X 21:X 22:X 27:o1432,0:{"f":[[["",{"children":[["registry","weinc","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16546]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450],"modal":["(__SLOT__)",{"children":[["registry","weinc","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16418]},"$undefined","$undefined",16482]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450]},"$undefined","$undefined",16402],[["$","$L1","c",{"notFound":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3-y5jlwadbcp9.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/1_idk1l4ecx9m.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/3arlv5bvukoo2.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/39v64hmfyo-sr.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/2nvof3-29tvc3.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/3tjobt77z_9dj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/04j_o97cgxn2x.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/3upr08c9vtj8w.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/1ww0328si-u8x.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/immutable/chunks/11mfl5ymqld9-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/immutable/chunks/2xxcqy6ppds3l.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/immutable/chunks/1bpgyrs5qflhu.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/_next/static/immutable/chunks/43_s7jweyypoh.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/_next/static/immutable/chunks/0p6vao205o1jc.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":["$L8","$L9"]}],"$La","$Lb"]}]}],"$Lc","$Ld"],"$Le","$Lf","$undefined","$L10"]}]}],"$L11","$L12"]}]}]}]}]}]]}]],"children":["$0:f:0:1:0:props:notFound:0","$L13"]}],{"children":["$L14",{"children":["$L15",{"children":["$L16",{},null,false,"$17"]},null,false,"$18"]},null,false,"$18"],"modal":["$L19",{"children":["$L1a",{"children":["$L1b",{"children":["$L1c",{},null,false,"$1d"]},null,false,"$18"]},null,false,"$18"]},null,false,"$18"]},null,false,"$1e"],"$L1f",false]],"q":"","i":true,"S":false,"h":"$20","r":"$21","s":"$22","a":"$@23","u":"$@24"} 27:o1000,25:I[522016,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],""] 26:I[332862,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeToggle"] 27:I[618898,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"UserButton"] 28:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Sheet"] 29:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTrigger"] 2a:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_ne27:o1000,xt/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetContent"] 2b:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTitle"] 2c:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetDescription"] 2d:I[767877,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"PrimaryNavigation"] 36:I[246331,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Toaster"] 37:I[994245,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"AffiliateToast"] 41:"$Sreact.fragment" 42:I[339756,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 43:I[837457,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 45:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"OutletBoundary"] 47:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"ViewportBoundary"] 49:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"MetadataBoundary"] 8:["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}] 9:["$","span",null,{"className":"sr-o27:o425,nly md:not-sr-only","children":"1 slot open this month"}] a:["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}] b:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 27:o7b3,c:["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o7dd,d:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o1368,e:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L25",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L28",null,{"modal":true,"children":[["$","$L29",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L2a",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2b",null,{"className":"text-lg","children":"Tools"}],["$","$L2c",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2d",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L25",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L2e","$L2f","$L30","$L31","$L32"]}],"$L33"]}],"$L34","$L35"]}]}]] 27:o6a3,f:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":[[],[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"$f:props:children:props:children:0"]]}]}] 10:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L25",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L25",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 11:["$","$L36",null,{}] 12:["$","$L37",null,{}] 27:o103e,13:["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}],["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],"$L38"]}],"$L39"]}]}],"$L3a"],"$L3b","$L3c","$L3d","$L3e"]}]}],"$L3f","$L40"]}]}]}]}]}]]}] 27:o2a0,14:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 15:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 27:odfc,16:["$","$41","c",{"children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-col py-8","children":["$","$4",null,{"fallback":["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col motion-reduce:[&_*]:animate-none","role":"status","aria-label":"Loading item","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md mb-6 h-5 w-64 max-w-full","aria-hidden":true}],["$","div",null,{"className":"grid shrink-0 gap-3","aria-hidden":true,"children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 w-56 min-w-0 sm:h-9"}],["$","div",null,{"className":"flex shrink-0 gap-1.5 pt-0.5","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8 sm:w-24"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}]]}]]}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-full max-w-3xl"}]]}],["$","div",null,{"className":"mt-3 shrink-0","aria-hidden":true,"children":["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-10"}]}],["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}]]}],"children":"$L44"}]}],[["$","script","script-0",{"src":"/_next/static/immutable/chunks/1_kyvgkyokw92.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1lo-zn37dolb5.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1v8k6yxw1rg0u.js","async":true,"nonce":"$undefined"}]],["$","$L45",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@46"}]}]]}] 27:o51c,19:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1a:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1b:["$","$41","c",{"children":[null,["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1c:["$","$41","c",{"children":[null,null,null]}] 1f:["$","$41","h",{"children":[null,["$","$L47","VgkFvtEJW8c2RANnleEI0v",{"children":"$L48"}],["$","div","VgkFvtEJW8c2RANnleEI0m",{"hidden":true,"children":["$","$L49",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":"$L4a"}]}]}]]}] 27:o62f,17:T1,?18:C 1d:T1,?20:T1,?22:300 2e:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 2f:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 30:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 31:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 32:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 33:["$","span",null,{"children":"shadcnregistry"}] 34:["$","$L2d",null,{"className":"mx-auto"}] 35:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}]]}] 38:["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}] 39:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 27:o7de,3a:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 27:o1369,3b:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L25",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L28",null,{"modal":true,"children":[["$","$L29",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L2a",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2b",null,{"className":"text-lg","children":"Tools"}],["$","$L2c",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2d",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L25",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L4b","$L4c","$L4d","$L4e","$L4f"]}],"$L50"]}],"$L51","$L52"]}]}]] 27:o4ac,3c:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":["$","$L42",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$f:props:children:props:children:1","forbidden":"$undefined","unauthorized":"$undefined"}]}]}] 3d:["$","$L42",null,{"parallelRouterKey":"modal","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L43",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}] 3e:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L25",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L25",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 3f:["$","$L36",null,{}] 40:["$","$L37",null,{}] 27:o2be,4b:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 4c:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 4d:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 4e:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 4f:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 50:["$","span",null,{"children":"shadcnregistry"}] 51:["$","$L2d",null,{"className":"mx-auto"}] 52:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L26",null,{}],["$","$L27",null,{}]]}] 27:o7f,48:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 27:o37,17:T8,registry20:T8,registry17:T4,item22:300 20:T4,item27:o4b,59:I[27201,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"IconMark"] 27:o10b5,44:["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","div",null,{"className":"pb-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5","children":[["$","$41","/",{"children":[false,["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L25",null,{"href":"/","children":"Registries","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$41","/weinc",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L25",null,{"href":"/weinc","children":"weinc","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$41","/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-foreground font-normal","children":"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML"}]}]]}]]}]}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Registries\",\"item\":\"https://shadcnregistry.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"weinc\",\"item\":\"https://shadcnregistry.com/weinc\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML\",\"item\":\"https://shadcnregistry.com/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html\"}]}"}}]]}],["$","header",null,{"className":"min-w-0 shrink-0","children":["$","div",null,{"className":"grid min-w-0 gap-3","children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2","children":[["$","h1",null,{"className":"min-w-0 break-words font-semibold text-2xl sm:text-3xl","children":"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML"}],["$","span",null,{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground","children":["$L53","block"]}]]}],"$L54"]}],"$L55"]}]}],"$L56","$L57","$L58"]}] 27:o8,46:null 27:ocf4,4a:[["$","title","0",{"children":"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML – shadcn/ui Block by weinc | shadcnregistry"}],["$","meta","1",{"name":"description","content":"Free quantity input steppers for online stores in React and HTML: min, max and step limits, spinbutton keyboard support, decimals and a cart line with totals. Install the Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML shadcn/ui block from weinc."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","meta","3",{"name":"robots","content":"index, follow"}],["$","link","4",{"rel":"canonical","href":"https://shadcnregistry.com/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html"}],["$","meta","5",{"property":"og:title","content":"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML – shadcn/ui Block by weinc"}],["$","meta","6",{"property":"og:description","content":"Free quantity input steppers for online stores in React and HTML: min, max and step limits, spinbutton keyboard support, decimals and a cart line with totals. Install the Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML shadcn/ui block from weinc."}],["$","meta","7",{"property":"og:url","content":"https://shadcnregistry.com/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html"}],["$","meta","8",{"property":"og:site_name","content":"shadcnregistry"}],["$","meta","9",{"property":"og:locale","content":"en_US"}],["$","meta","10",{"property":"og:image","content":"https://shadcnregistry.com/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html/opengraph-image"}],["$","meta","11",{"property":"og:type","content":"article"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML – shadcn/ui Block by weinc"}],["$","meta","14",{"name":"twitter:description","content":"Free quantity input steppers for online stores in React and HTML: min, max and step limits, spinbutton keyboard support, decimals and a cart line with totals. Install the Quantity Input Collection With Plus And Minus Stepper, Spinbutton Keys And Cart Line In React And HTML shadcn/ui block from weinc."}],["$","meta","15",{"name":"twitter:image","content":"https://shadcnregistry.com/weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html/opengraph-image"}],["$","link","16",{"rel":"icon","href":"/favicon.ico?favicon.0ggckis0s0yna.ico","sizes":"48x48","type":"image/x-icon"}],["$","link","17",{"rel":"icon","href":"/icon0.svg?icon0.25eth_vi9vax4.svg","sizes":"any","type":"image/svg+xml"}],["$","link","18",{"rel":"icon","href":"/icon1.png?icon1.2qsj88a3tgltl.png","sizes":"96x96","type":"image/png"}],["$","link","19",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.1l19rp7u12rg6.png","sizes":"180x180","type":"image/png"}],["$","$L59","20",{}]] 27:oe7f,5a:I[591164,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ActionButtons"] 5b:I[638118,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"Installation"] 53:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-blocks text-pink-400 size-3!","children":["$undefined",["$","path","svg-0",{"d":"M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z"}],["$","path","svg-1",{"d":"M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12"}],"$undefined"]}] 54:["$","div",null,{"className":"shrink-0 pt-0.5","children":["$","$L5a",null,{"item":{"id":"@weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html","name":"Quantity Input Collection with Plus and Minus Stepper, Spinbutton Keys and Cart Line in React and HTML","description":"Free quantity input steppers for online stores in React and HTML: min, max and step limits, spinbutton keyboard support, decimals and a cart line with totals.","type":"registry:block","slug":"quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html","source":"https://we.inc/r/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html.json","namespace":"@weinc","upstreamName":"quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html"}}]}] 55:["$","p",null,{"className":"max-w-3xl break-words text-muted-foreground text-sm leading-6","children":"Free quantity input steppers for online stores in React and HTML: min, max and step limits, spinbutton keyboard support, decimals and a cart line with totals."}] 56:["$","div",null,{"className":"mt-3 shrink-0","children":["$","$L5b",null,{"sourceUrl":"https://we.inc/r/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html.json","itemId":"@weinc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html"}]}] 27:oe8a,57:["$","div",null,{"className":"mt-4 shrink-0","children":["$","a",null,{"href":"https://link.jln.dev/shadcnblocks","target":"_blank","rel":"sponsored noopener noreferrer","data-umami-event":"affiliate-banner-click","data-umami-event-namespace":"@shadcnblocks","data-umami-event-surface":"item-page","data-umami-event-campaign":"item-page-banner","className":"group relative block w-full max-w-lg overflow-hidden rounded-lg py-0.5 text-left focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-amber-400/60","children":[["$","span",null,{"aria-hidden":"true","className":"absolute right-[-250%] bottom-[-11px] h-1/2 w-[300%] animate-star-movement-bottom rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"aria-hidden":"true","className":"absolute top-[-10px] left-[-250%] h-1/2 w-[300%] animate-star-movement-top rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"className":"relative flex items-center justify-between gap-4 rounded-[calc(var(--radius)-1px)] border bg-background p-4","children":[["$","span",null,{"className":"flex min-w-0 items-center gap-3","children":[["$","svg",null,{"viewBox":"0 0 1200 1200","xmlns":"http://www.w3.org/2000/svg","className":"size-9 shrink-0","fill":"currentColor","aria-hidden":"true","children":["$","g",null,{"children":[["$","path",null,{"d":"m700.78 88.312-39.328-22.547v186.94l39.328 22.828z"}],["$","path",null,{"d":"m780 134.39-39.375-22.781v187.18l39.375 22.594z"}],["$","path",null,{"d":"m858.47 180.24-39.328-22.547v186.94l39.328 22.594z"}],["$","path",null,{"d":"m185.53 360.71 39.328 22.594v-133.69l-39.328 22.547z"}],["$","path",null,{"d":"m146.16 337.92v-42.469l-37.219 21.328z"}],["$","path",null,{"d":"m1095.4 317.29-39.141-22.594v45.375l-39.375 22.547v-90.469l-39.094-22.547v135.1l-39.375 22.594v-181.22l-40.078-23.297v187.22l35.297 20.625v378.74l-1.9219 1.1719-33.375-19.172v38.625l-39.844 22.547v-85.172l-39.328-23.297v131.29l-39.141 23.25v-177.84l-39.375-23.25v223.69l-39.844 22.547v-269.53l-39.328-23.297v315.37l-39.375 23.531v-362.16l-19.219-12.75 0.75-376.08 18.469 11.297v-186.94l-20.625-12-16.594 9.3281v187.69l-39.797 22.547v-186.94l-39.375 22.547v186.98l-39.375 22.781v-186.47l-39.094 22.547v186.47l-40.078 22.594v-186.24l-39.141 23.25v185.76l-39.375 23.297v-186.52l-43.922 25.922v179.06l6 3.375 1.4531 381.32 36.469 21.375v-42.469l39.375-23.297v89.062l39.141 22.781v-135.14l40.078-24v181.69l39.094 23.297v-228.24l39.375-23.297v274.08l39.375 22.828v-320.44l39.797-23.25v366.94l18 10.594v-0.75 188.39l493.22-284.86 0.70312-568.55z"}]]}]}],["$","span",null,{"className":"min-w-0","children":[["$","span",null,{"className":"block font-semibold text-base leading-snug","children":"Premium blocks for shadcn/ui"}],["$","span",null,{"className":"mt-0.5 block text-muted-foreground text-xs","children":"Shadcnblocks.com · Affiliate"}]]}]]}],["$","span",null,{"className":"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-linear-to-b from-amber-200 to-amber-400 px-3 font-medium text-amber-950 text-sm shadow-sm transition-[filter] group-hover:brightness-110","children":[["$","span",null,{"className":"sr-only sm:not-sr-only","children":"Explore"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-up-right size-4","aria-hidden":"true","children":[["$","path","1tivn9",{"d":"M7 7h10v10"}],["$","path","1vkiza",{"d":"M7 17 17 7"}],"$undefined"]}]]}]]}]]}]}] 27:o67e,58:["$","$4",null,{"fallback":["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}],"children":"$L5c"}] 27:o344,5d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 5e:Tfe48,27:ofe48,import { useEffect, useRef, useState, type KeyboardEvent, type ReactElement } from "react"; /* Every piece below is written once: the function renders the live demo and the string next to it is that same source file, so the code you copy is the code you see. */ type Lang = "react" | "html"; type Piece = { id: string; name: string; blurb: string; group: string; Demo: () => ReactElement; react: string; html?: string; stage: string; }; const q1Demo = (() => { const MIN = 1; const MAX = 10; function QuantityClassic() { const [qty, setQty] = useState(2); const [draft, setDraft] = useState("2"); const set = (n: number) => { const v = Math.min(MAX, Math.max(MIN, Math.round(n))); setQty(v); setDraft(String(v)); }; // Spinbutton keys from the WAI-ARIA Authoring Practices. function onKeyDown(e: KeyboardEvent) { const keys: Record = { ArrowUp: qty + 1, ArrowDown: qty - 1, PageUp: qty + 5, PageDown: qty - 5, Home: MIN, End: MAX }; if (e.key in keys) { e.preventDefault(); set(keys[e.key]); } else if (e.key === "Enter") set(Number(draft) || MIN); } const btn = "grid w-11 place-items-center text-stone-700 transition-colors hover:bg-stone-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 aria-disabled:cursor-not-allowed aria-disabled:text-stone-300 aria-disabled:hover:bg-transparent"; return (

Quantity

setDraft(e.target.value.replace(/\D/g, "").slice(0, 2))} onBlur={() => set(Number(draft) || MIN)} onKeyDown={onKeyDown} className="w-14 border-x border-stone-300 text-center text-base font-semibold tabular-nums text-stone-900 outline-none focus-visible:bg-emerald-50" />

Limit {MAX} per order. Arrow keys, Page Up and Page Down work too.

); } return QuantityClassic; })(); const q1React = "import { useState, type KeyboardEvent } from \"react\";\n\nconst MIN = 1;\nconst MAX = 10;\n\nexport default function QuantityClassic() {\n const [qty, setQty] = useState(2);\n const [draft, setDraft] = useState(\"2\");\n\n const set = (n: number) => {\n const v = Math.min(MAX, Math.max(MIN, Math.round(n)));\n setQty(v);\n setDraft(String(v));\n };\n\n // Spinbutton keys from the WAI-ARIA Authoring Practices.\n function onKeyDown(e: KeyboardEvent) {\n const keys: Record = { ArrowUp: qty + 1, ArrowDown: qty - 1, PageUp: qty + 5, PageDown: qty - 5, Home: MIN, End: MAX };\n if (e.key in keys) {\n e.preventDefault();\n set(keys[e.key]);\n } else if (e.key === \"Enter\") set(Number(draft) || MIN);\n }\n\n const btn =\n \"grid w-11 place-items-center text-stone-700 transition-colors hover:bg-stone-100 focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 aria-disabled:cursor-not-allowed aria-disabled:text-stone-300 aria-disabled:hover:bg-transparent\";\n\n return (\n

\n \n Quantity\n \n

\n \n setDraft(e.target.value.replace(/\\D/g, \"\").slice(0, 2))}\n onBlur={() => set(Number(draft) || MIN)}\n onKeyDown={onKeyDown}\n className=\"w-14 border-x border-stone-300 text-center text-base font-semibold tabular-nums text-stone-900 outline-none focus-visible:bg-emerald-50\"\n />\n \n

\n Limit {MAX} per order. Arrow keys, Page Up and Page Down work too.\n

\n );\n}\n"; const q1Html = `

Quantity

Limit 10 per order. Arrow keys, Page Up and Page Down work too.

`; const q3Demo = (() => { const STEP = 6; // sold by the case const MIN = 6; const MAX = 48; function QuantityCasePacks() { const [qty, setQty] = useState(12); const [draft, setDraft] = useState("12"); const [note, setNote] = useState(""); // Snaps any typed number to the nearest whole case. function commit(n: number) { const snapped = Math.min(MAX, Math.max(MIN, Math.round(n / STEP) * STEP)); setNote(n && snapped !== n ? `Rounded ${n} to ${snapped}, a full case.` : ""); setQty(snapped); setDraft(String(snapped)); } function onKeyDown(e: KeyboardEvent) { const keys: Record = { ArrowUp: qty + STEP, ArrowDown: qty - STEP, Home: MIN, End: MAX }; if (e.key in keys) { e.preventDefault(); commit(keys[e.key]); } else if (e.key === "Enter") commit(Number(draft)); } const cases = qty / STEP; const side = "flex h-12 w-12 items-center justify-center rounded-xl border border-stone-300 bg-white text-lg font-medium text-stone-800 hover:border-stone-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700 disabled:cursor-not-allowed disabled:text-stone-300"; return (

Sparkling water, bottles

Sold in cases of {STEP}, up to {MAX} bottles.

setDraft(e.target.value.replace(/\D/g, "").slice(0, 3))} onBlur={() => commit(Number(draft))} onKeyDown={onKeyDown} className="w-16 rounded bg-transparent text-center text-base font-semibold leading-tight tabular-nums text-emerald-950 outline-none focus-visible:ring-2 focus-visible:ring-emerald-700" />

{note}

); } return QuantityCasePacks; })(); const q3React = "import { useState, type KeyboardEvent } from \"react\";\n\nconst STEP = 6; // sold by the case\nconst MIN = 6;\nconst MAX = 48;\n\nexport default function QuantityCasePacks() {\n const [qty, setQty] = useState(12);\n const [draft, setDraft] = useState(\"12\");\n const [note, setNote] = useState(\"\");\n\n // Snaps any typed number to the nearest whole case.\n function commit(n: number) {\n const snapped = Math.min(MAX, Math.max(MIN, Math.round(n / STEP) * STEP));\n setNote(n && snapped !== n ? `Rounded ${n} to ${snapped}, a full case.` : \"\");\n setQty(snapped);\n setDraft(String(snapped));\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const keys: Record = { ArrowUp: qty + STEP, ArrowDown: qty - STEP, Home: MIN, End: MAX };\n if (e.key in keys) {\n e.preventDefault();\n commit(keys[e.key]);\n } else if (e.key === \"Enter\") commit(Number(draft));\n }\n\n const cases = qty / STEP;\n const side =\n \"flex h-12 w-12 items-center justify-center rounded-xl border border-stone-300 bg-white text-lg font-medium text-stone-800 hover:border-stone-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700 disabled:cursor-not-allowed disabled:text-stone-300\";\n\n return (\n

\n \n Sparkling water, bottles\n \n

\n Sold in cases of {STEP}, up to {MAX} bottles.\n

\n \n

\n setDraft(e.target.value.replace(/\\D/g, \"\").slice(0, 3))}\n onBlur={() => commit(Number(draft))}\n onKeyDown={onKeyDown}\n className=\"w-16 rounded bg-transparent text-center text-base font-semibold leading-tight tabular-nums text-emerald-950 outline-none focus-visible:ring-2 focus-visible:ring-emerald-700\"\n />\n \n {cases} {cases === 1 ? \"case\" : \"cases\"}\n \n

\n \n

\n {note}\n

\n );\n}\n"; const q5Demo = (() => { // Work in whole quarter-kilos so 0.1 + 0.2 style rounding errors never show up. const STEP_Q = 1; // 0.25 kg const MIN_Q = 1; const MAX_Q = 20; // 5 kg const PRICE_PER_KG = 18; function QuantityWeightDecimal() { const [q, setQ] = useState(5); const [draft, setDraft] = useState("1.25"); const kg = (n: number) => (n / 4).toFixed(2); function set(n: number) { const v = Math.min(MAX_Q, Math.max(MIN_Q, Math.round(n))); setQ(v); setDraft(kg(v)); } function onKeyDown(e: KeyboardEvent) { const keys: Record = { ArrowUp: q + STEP_Q, ArrowDown: q - STEP_Q, PageUp: q + 4, PageDown: q - 4, Home: MIN_Q, End: MAX_Q }; if (e.key in keys) { e.preventDefault(); set(keys[e.key]); } else if (e.key === "Enter") set(parseFloat(draft) * 4 || MIN_Q); } const arrow = "grid h-1/2 w-11 place-items-center text-stone-600 hover:bg-stone-100 hover:text-stone-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 disabled:text-stone-300"; return (

Arabica beans, whole

setDraft(e.target.value.replace(/[^0-9.]/g, "").slice(0, 5))} onBlur={() => set(parseFloat(draft) * 4 || MIN_Q)} onKeyDown={onKeyDown} className="w-full min-w-0 bg-transparent text-xl font-semibold tabular-nums text-stone-900 outline-none" />

${PRICE_PER_KG.toFixed(2)} per kg: ${((q / 4) * PRICE_PER_KG).toFixed(2)}

); } return QuantityWeightDecimal; })(); const q5React = "import { useState, type KeyboardEvent } from \"react\";\n\n// Work in whole quarter-kilos so 0.1 + 0.2 style rounding errors never show up.\nconst STEP_Q = 1; // 0.25 kg\nconst MIN_Q = 1;\nconst MAX_Q = 20; // 5 kg\nconst PRICE_PER_KG = 18;\n\nexport default function QuantityWeightDecimal() {\n const [q, setQ] = useState(5);\n const [draft, setDraft] = useState(\"1.25\");\n const kg = (n: number) => (n / 4).toFixed(2);\n\n function set(n: number) {\n const v = Math.min(MAX_Q, Math.max(MIN_Q, Math.round(n)));\n setQ(v);\n setDraft(kg(v));\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const keys: Record = { ArrowUp: q + STEP_Q, ArrowDown: q - STEP_Q, PageUp: q + 4, PageDown: q - 4, Home: MIN_Q, End: MAX_Q };\n if (e.key in keys) {\n e.preventDefault();\n set(keys[e.key]);\n } else if (e.key === \"Enter\") set(parseFloat(draft) * 4 || MIN_Q);\n }\n\n const arrow =\n \"grid h-1/2 w-11 place-items-center text-stone-600 hover:bg-stone-100 hover:text-stone-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 disabled:text-stone-300\";\n\n return (\n

\n \n Arabica beans, whole\n \n

\n setDraft(e.target.value.replace(/[^0-9.]/g, \"\").slice(0, 5))}\n onBlur={() => set(parseFloat(draft) * 4 || MIN_Q)}\n onKeyDown={onKeyDown}\n className=\"w-full min-w-0 bg-transparent text-xl font-semibold tabular-nums text-stone-900 outline-none\"\n />\n \n kg\n \n

\n \n \n

${PRICE_PER_KG.toFixed(2)} per kg: ${((q / 4) * PRICE_PER_KG).toFixed(2)}

\n );\n}\n"; const q2Demo = (() => { const product = { name: "Oat milk, barista", size: "1 litre carton", price: 3.4, max: 12 }; function QuantityPillCard() { const [qty, setQty] = useState(3); const set = (n: number) => setQty(Math.min(product.max, Math.max(0, n))); function onKeyDown(e: KeyboardEvent) { const keys: Record = { ArrowUp: qty + 1, ArrowRight: qty + 1, ArrowDown: qty - 1, ArrowLeft: qty - 1, Home: 0, End: product.max }; if (e.key in keys) { e.preventDefault(); set(keys[e.key]); } } const round = "grid h-10 w-10 place-items-center rounded-full text-white transition-colors hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40"; return (

); } return QuantityPillCard; })(); const q2React = "import { useState, type KeyboardEvent } from \"react\";\n\nconst product = { name: \"Oat milk, barista\", size: \"1 litre carton\", price: 3.4, max: 12 };\n\nexport default function QuantityPillCard() {\n const [qty, setQty] = useState(3);\n const set = (n: number) => setQty(Math.min(product.max, Math.max(0, n)));\n\n function onKeyDown(e: KeyboardEvent) {\n const keys: Record = { ArrowUp: qty + 1, ArrowRight: qty + 1, ArrowDown: qty - 1, ArrowLeft: qty - 1, Home: 0, End: product.max };\n if (e.key in keys) {\n e.preventDefault();\n set(keys[e.key]);\n }\n }\n\n const round =\n \"grid h-10 w-10 place-items-center rounded-full text-white transition-colors hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40\";\n\n return (\n

\n {product.name}\n

{product.size}

\n ${(product.price * Math.max(qty, 1)).toFixed(2)}\n

\n \n \n {qty}\n

\n \n

\n );\n}\n"; const q4Demo = (() => { const MAX = 9; function AddToCartStepper() { const [qty, setQty] = useState(1); const [message, setMessage] = useState(""); const addRef = useRef(null); const valueRef = useRef(null); const moveFocus = useRef(false); // After the button swaps for the stepper (or back), keep keyboard focus in a sensible place. useEffect(() => { if (!moveFocus.current) return; moveFocus.current = false; (qty === 0 ? addRef.current : valueRef.current)?.focus(); }, [qty]); function change(n: number, swap = false) { const v = Math.min(MAX, Math.max(0, n)); moveFocus.current = swap; setQty(v); setMessage(v === 0 ? "Removed from cart" : `${v} in cart`); } function onKeyDown(e: KeyboardEvent) { if (e.key === "ArrowUp" || e.key === "ArrowRight") change(qty + 1); else if (e.key === "ArrowDown" || e.key === "ArrowLeft") change(qty - 1, qty === 1); else return; e.preventDefault(); } const icon = "grid h-11 w-11 place-items-center rounded-lg text-white hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40"; return (

Linen tea towel, olive

$14.00

{qty === 0 ? ( ) : (

{qty} in cart

)}

{message}

); } return AddToCartStepper; })(); const q4React = "import { useEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst MAX = 9;\n\nexport default function AddToCartStepper() {\n const [qty, setQty] = useState(1);\n const [message, setMessage] = useState(\"\");\n const addRef = useRef(null);\n const valueRef = useRef(null);\n const moveFocus = useRef(false);\n\n // After the button swaps for the stepper (or back), keep keyboard focus in a sensible place.\n useEffect(() => {\n if (!moveFocus.current) return;\n moveFocus.current = false;\n (qty === 0 ? addRef.current : valueRef.current)?.focus();\n }, [qty]);\n\n function change(n: number, swap = false) {\n const v = Math.min(MAX, Math.max(0, n));\n moveFocus.current = swap;\n setQty(v);\n setMessage(v === 0 ? \"Removed from cart\" : `${v} in cart`);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n if (e.key === \"ArrowUp\" || e.key === \"ArrowRight\") change(qty + 1);\n else if (e.key === \"ArrowDown\" || e.key === \"ArrowLeft\") change(qty - 1, qty === 1);\n else return;\n e.preventDefault();\n }\n\n const icon = \"grid h-11 w-11 place-items-center rounded-lg text-white hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-40\";\n\n return (\n

Linen tea towel, olive

$14.00

\n {qty === 0 ? (\n change(1, true)}\n className=\"h-11 w-full rounded-lg bg-emerald-800 text-sm font-semibold text-white transition-colors hover:bg-emerald-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-800 focus-visible:ring-offset-2\"\n >\n Add to cart\n \n ) : (\n

\n \n \n {qty} in cart\n

\n \n

\n )}\n

\n {message}\n

\n \n );\n}\n"; const q6Demo = (() => { type Line = { id: string; name: string; variant: string; price: number; qty: number; max: number }; const START: Line[] = [ { id: "apron", name: "Linen apron", variant: "Sand, one size", price: 28, qty: 1, max: 5 }, { id: "wraps", name: "Beeswax wraps", variant: "Set of 3", price: 16, qty: 2, max: 10 }, ]; const money = (n: number) => `$${n.toFixed(2)}`; function CartLineQuantity() { const [lines, setLines] = useState(START); const [status, setStatus] = useState(""); function setQty(id: string, n: number) { const next = lines.map((l) => (l.id === id ? { ...l, qty: Math.min(l.max, Math.max(1, n)) } : l)); setLines(next); setStatus(`Subtotal ${money(next.reduce((s, l) => s + l.price * l.qty, 0))}`); } function remove(id: string) { const line = lines.find((l) => l.id === id); setLines(lines.filter((l) => l.id !== id)); setStatus(`${line?.name} removed`); } function onKeyDown(l: Line, e: KeyboardEvent) { const keys: Record = { ArrowUp: l.qty + 1, ArrowDown: l.qty - 1, Home: 1, End: l.max }; if (!(e.key in keys)) return; e.preventDefault(); setQty(l.id, keys[e.key]); } const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0); const step = "grid h-10 w-9 place-items-center text-stone-700 hover:bg-stone-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 disabled:text-stone-300"; return (

{l.name}

{l.variant} · {money(l.price)}

setQty(l.id, Number(e.target.value.replace(/\D/g, "")) || 1)} onKeyDown={(e) => onKeyDown(l, e)} className="h-10 w-9 border-x border-stone-300 text-center text-base font-semibold tabular-nums text-stone-900 outline-none focus-visible:bg-emerald-50" />
{money(l.price * l.qty)}
Your cart is empty.

Subtotal {money(subtotal)}

{status}

); } return CartLineQuantity; })(); const q6React = "import { useState, type KeyboardEvent } from \"react\";\n\ntype Line = { id: string; name: string; variant: string; price: number; qty: number; max: number };\n\nconst START: Line[] = [\n { id: \"apron\", name: \"Linen apron\", variant: \"Sand, one size\", price: 28, qty: 1, max: 5 },\n { id: \"wraps\", name: \"Beeswax wraps\", variant: \"Set of 3\", price: 16, qty: 2, max: 10 },\n];\n\nconst money = (n: number) => `$${n.toFixed(2)}`;\n\nexport default function CartLineQuantity() {\n const [lines, setLines] = useState(START);\n const [status, setStatus] = useState(\"\");\n\n function setQty(id: string, n: number) {\n const next = lines.map((l) => (l.id === id ? { ...l, qty: Math.min(l.max, Math.max(1, n)) } : l));\n setLines(next);\n setStatus(`Subtotal ${money(next.reduce((s, l) => s + l.price * l.qty, 0))}`);\n }\n\n function remove(id: string) {\n const line = lines.find((l) => l.id === id);\n setLines(lines.filter((l) => l.id !== id));\n setStatus(`${line?.name} removed`);\n }\n\n function onKeyDown(l: Line, e: KeyboardEvent) {\n const keys: Record = { ArrowUp: l.qty + 1, ArrowDown: l.qty - 1, Home: 1, End: l.max };\n if (!(e.key in keys)) return;\n e.preventDefault();\n setQty(l.id, keys[e.key]);\n }\n\n const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0);\n const step = \"grid h-10 w-9 place-items-center text-stone-700 hover:bg-stone-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-700 disabled:text-stone-300\";\n\n return (\n

\n
\n
\n {l.name}\n
\n
\n {l.variant} · {money(l.price)}\n
\n
\n
\n \n setQty(l.id, Number(e.target.value.replace(/\\D/g, \"\")) || 1)}\n onKeyDown={(e) => onKeyDown(l, e)}\n className=\"h-10 w-9 border-x border-stone-300 text-center text-base font-semibold tabular-nums text-stone-900 outline-none focus-visible:bg-emerald-50\"\n />\n \n
\n {money(l.price * l.qty)}\n remove(l.id)}\n className=\"grid h-10 w-10 place-items-center rounded-md text-stone-500 hover:bg-stone-100 hover:text-stone-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700\"\n >\n \n \n
\n Your cart is empty.\n \n

\n Subtotal\n {money(subtotal)}\n

\n {status}\n

\n );\n}\n"; const q6Html = `

Linen apron

Sand, one size · $28.00

$28.00
Beeswax wraps

Set of 3 · $16.00

$32.00

Subtotal$60.00

`; const PIECES: Piece[] = [ { id: "q1", name: "Classic bordered stepper", blurb: "Text field with spinbutton keys, a typed value that clamps on blur and buttons that stay focusable at the limits.", group: "fields", Demo: q1Demo, react: q1React, html: q1Html, stage: "bg-[#f7f5f1] ring-1 ring-inset ring-stone-200/80" }, { id: "q3", name: "Step of six, rounded to whole cases", blurb: "Typed amounts snap to the nearest case and say so in a status line.", group: "fields", Demo: q3Demo, react: q3React, stage: "bg-[#f7f5f1] ring-1 ring-inset ring-stone-200/80" }, { id: "q5", name: "Decimal weight with stacked arrows", blurb: "Quarter-kilo steps counted as whole numbers, with a running price.", group: "fields", Demo: q5Demo, react: q5React, stage: "bg-[#f7f5f1] ring-1 ring-inset ring-stone-200/80" }, { id: "q2", name: "Pill stepper on a product card", blurb: "Compact dark control where the number itself is the focusable spinbutton.", group: "shop", Demo: q2Demo, react: q2React, stage: "bg-[#f7f5f1] ring-1 ring-inset ring-stone-200/80" }, { id: "q4", name: "Add to cart that turns into a stepper", blurb: "The minus becomes a bin at one, and focus moves with the swap.", group: "shop", Demo: q4Demo, react: q4React, stage: "bg-[#f7f5f1] ring-1 ring-inset ring-stone-200/80" }, { id: "q6", name: "Cart lines with totals", blurb: "Per-line limits, line totals, remove buttons and an announced subtotal.", group: "shop", Demo: q6Demo, react: q6React, html: q6Html, stage: "bg-white ring-1 ring-inset ring-stone-200/80" } ]; const GROUPS: { key: string; label: string }[] = [{"key":"fields","label":"Stepper fields"},{"key":"shop","label":"Product and cart"}]; const TEXT: { eyebrow: string; title: string; lead: string; refTitle: string; refNote: string } = {"eyebrow":"React · HTML, CSS and JS · spinbutton keys","title":"Quantity inputs for online stores","lead":"Six plus and minus steppers built for checkout pages: limits that disable the right button, step sizes such as cases of six, decimal weights, an add to cart button that becomes a stepper and a full cart line with live totals.","refTitle":"Spinbutton keyboard and ARIA reference","refNote":"Keys and attributes follow the spinbutton pattern in the WAI-ARIA Authoring Practices Guide. Page Up and Page Down are optional in that pattern; two pieces here use them for jumps of five."}; const REF_HEAD: string[] = ["Key or attribute","Behaviour","Used in"]; const REF_ROWS: string[][] = [ [ "Up Arrow / Down Arrow", "Increase or decrease the value by one step.", "Every piece (the pill and cart button also accept Right and Left)." ], [ "Home / End", "Jump to the minimum or the maximum, when one is set.", "Every piece with a field you can focus." ], [ "Page Up / Page Down", "Optional larger step. Here, five units or one kilo.", "Classic stepper, decimal weight." ], [ "role=\"spinbutton\"", "Tells assistive technology this control holds a number in a range that can be stepped.", "On the focusable value, whether an input or a div with tabindex=0." ], [ "aria-valuenow / min / max", "The current value and its limits. Update aria-valuenow on every change.", "All six." ], [ "aria-valuetext", "A readable version when the bare number is unclear, such as '12 bottles, 2 cases' or '1.25 kilograms'.", "Case packs, decimal weight, pill card." ], [ "Label", "The spinbutton needs a name: a label element, aria-label or aria-labelledby pointing at the product name.", "Cart line uses the product name as the label." ] ]; const COPY_ICON = "M9 9h10v10H9zM5 15V5h10"; const CHECK_ICON = "M5 12.5l4.5 4.5L19 7.5"; const CODE_ICON = "M8 7l-5 5 5 5M16 7l5 5-5 5"; export default function QuantityInputCollection() { const [group, setGroup] = useState("all"); const [langs, setLangs] = useState>({}); const [open, setOpen] = useState(null); const [copied, setCopied] = useState(null); const [announce, setAnnounce] = useState(""); const timer = useRef | null>(null); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [] ); const shown = group === "all" ? PIECES : PIECES.filter((p) => p.group === group); const langOf = (p: Piece): Lang => (p.html ? langs[p.id] ?? "react" : "react"); const codeOf = (p: Piece) => (langOf(p) === "html" && p.html ? p.html : p.react); const langName = (l: Lang) => (l === "html" ? "HTML, CSS and JS" : "React and Tailwind"); async function copy(p: Piece) { let ok = false; try { await navigator.clipboard.writeText(codeOf(p)); ok = true; } catch { ok = false; } if (!ok) setOpen(p.id); setCopied(ok ? p.id : null); setAnnounce(ok ? `${p.name}: ${langName(langOf(p))} copied` : "Copy was blocked, so the code is shown under the demo for you to select"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(null), 1600); } const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-700 focus-visible:ring-offset-2"; const chip = `inline-flex min-h-[40px] items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-[13px] font-medium transition-colors ${ring}`; return (

{TEXT.eyebrow}

{TEXT.title}

{TEXT.lead}

{[{ key: "all", label: "All" }, ...GROUPS, { key: "ref", label: "Reference table" }].map((g) => { const on = group === g.key; const n = g.key === "ref" ? REF_ROWS.length : g.key === "all" ? PIECES.length : PIECES.filter((p) => p.group === g.key).length; return ( ); })}

{announce}

{group !== "ref" && (

{p.name}

{p.blurb}

{p.html && (
{(["react", "html"] as Lang[]).map((x) => ( ))}
)}
{isOpen && (
```
                    {codeOf(p)}
                  
```
)}

)} {group === "ref" && (

{TEXT.refTitle}

{TEXT.refNote}

{REF_HEAD.map((h) => ( ))} {REF_ROWS.map((r, i) => ( {r.map((c, j) => j === 0 ? ( ) : ( ) )} ))}

{h}
{c}	{c}

)}

); } 27:o154,5c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5d",null,{"files":[{"path":"components/we-inc/quantity-input-collection-with-plus-minus-stepper-spinbutton-keys-and-cart-line-in-react-and-html.tsx","content":"$5e","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}] 27:o30,22:C 20:C 21:C 17:C 1d:C 1e:C 24:false 23:49054 27:C