@peduarte starred 3 repositories

Toggle

@radix-ui/primitives

@radix-ui/colors

@stitches/react

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"vitesse-dark",raw:`"use client"; import { CaretUpDown } from "@phosphor-icons/react"; import { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "@sihaxito/deluxe-ui"; export function CollapsibleDemo() { return (

@peduarte starred 3 repositories

Toggle

@radix-ui/primitives

@radix-ui/colors

@stitches/react

); } `,children:(0,l.jsxs)(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"vitesse-dark",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" CaretUpDown"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"@phosphor-icons/react"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" Collapsible"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" CollapsibleTrigger"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" CollapsibleContent"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"@sihaxito/deluxe-ui"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CB7676"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#80A665"},children:" CollapsibleDemo"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"Collapsible"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"space-y-2"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"flex items-center justify-between gap-2 px-4"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"h4"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"text-sm font-semibold"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:" @peduarte starred 3 repositories"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"CollapsibleTrigger"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"flex h-6 w-6 items-center justify-center rounded-lg bg-neutral-100 p-2 dark:bg-neutral-800"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"CaretUpDown"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"sr-only"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"rounded-md border px-4 py-3 font-mono text-sm dark:border-neutral-800"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:" @radix-ui/primitives"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"CollapsibleContent"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up space-y-2 overflow-hidden transition-all duration-500 ease-out"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"rounded-md border px-4 py-3 font-mono text-sm dark:border-neutral-800"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:" @radix-ui/colors"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"rounded-md border px-4 py-3 font-mono text-sm dark:border-neutral-800"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:" @stitches/react"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#666666"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#666666"},children:"}"})})]})})})}),` `,(0,l.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,l.jsx)("hr",{className:"mt-6 dark:border-neutral-800"}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"vitesse-dark",raw:`import {\r Collapsible,\r CollapsibleTrigger,\r CollapsibleContent,\r } from "@sihaxito/deluxe-ui"; `,children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" Collapsible"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" CollapsibleTrigger"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#BD976A"},children:" CollapsibleContent"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#4D9375"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#C98A7D"},children:"@sihaxito/deluxe-ui"}),(0,l.jsx)(e.span,{style:{color:"#C98A7D99"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:";"})]})]})})}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"vitesse-dark",raw:`\r Click me\r Collapsed element\r `,children:(0,l.jsxs)(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"vitesse-dark",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"Collapsible"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"CollapsibleTrigger"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:"Click me"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#B8A965"},children:"CollapsibleContent"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#DBD7CAEE"},children:"Collapsed element"}),(0,l.jsx)(e.span,{style:{color:"#666666"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#666666"},children:""})]})]})})}),` `,(0,l.jsx)(e.h2,{id:"examples",children:"Examples"}),` `,(0,l.jsx)("hr",{className:"mt-6 dark:border-neutral-800"}),` `,(0,l.jsx)(e.h3,{id:"controlled-state",children:"Controlled state"}),` `,(0,l.jsx)(r,{name:"collapsible/controlled",children:(0,l.jsx)(e.figure,{raw:"","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"vitesse-dark",raw:"",children:(0,l.jsx)(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"vitesse-dark",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:(0,l.jsx)(e.span,{"data-line":"",children:" "})})})})}),` `,(0,l.jsx)(e.h2,{id:"useful-links",children:"Useful links"})]})}function A(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(d,n)})):d(n)}var f=A;function v(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(B);})(); ;return Component;