var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var F=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var s in e)a(l,s,{get:e[s],enumerable:!0})},i=(l,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of D(e))!u.call(l,c)&&c!==s&&a(l,c,{get:()=>e[c],enumerable:!(r=y(e,c))||r.enumerable});return l};var b=(l,e,s)=>(s=l!=null?p(m(l)):{},i(e||!l||!l.__esModule?a(s,"default",{value:l,enumerable:!0}):s,l)),C=l=>i(a({},"__esModule",{value:!0}),l);var d=F((v,o)=>{o.exports=_jsx_runtime});var x={};f(x,{default:()=>T,frontmatter:()=>g});var n=b(d()),g={title:"Sheet",description:"Expands the Dialog component to show additional content that complements the main screen.",libraryImport:'import { Sheet } from "@xbeshui/core"',sourceGitLink:"View source code",sourceEditGitLink:"Edit this page",npmPackage:"@xbeshui/core",npmLink:"https://www.npmjs.com/package/xbeshui",gitLink:"https://github.com/madhavdutta/xbeshUI",docGitLink:"https://github.com/madhavdutta/xbesh-ui-kit-docs"};function h(l){let e=Object.assign({h3:"h3",a:"a",span:"span",div:"div",pre:"pre",code:"code",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},l.components),{Tabs:s,XbSheet:r}=e;return s||t("Tabs",!0),s.TabsContent||t("Tabs.TabsContent",!0),s.TabsList||t("Tabs.TabsList",!0),s.TabsTrigger||t("Tabs.TabsTrigger",!0),r||t("XbSheet",!0),(0,n.jsxs)(s,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,n.jsxs)(s.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,n.jsx)(s.TabsTrigger,{value:"compTab",children:"Component"}),(0,n.jsx)(s.TabsTrigger,{value:"props",children:"Props"})]}),(0,n.jsxs)(s.TabsContent,{value:"compTab",children:[(0,n.jsxs)(e.h3,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),(0,n.jsxs)(s,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,n.jsxs)(s.TabsList,{className:"border-b w-full bg-zinc-100 dark:bg-black justify-start",children:[(0,n.jsx)(s.TabsTrigger,{value:"preview1",children:"Preview"}),(0,n.jsx)(s.TabsTrigger,{value:"code1",children:"Code"})]}),(0,n.jsx)(s.TabsContent,{value:"code1",className:"p-5",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Button, Group, Sheet } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"XbSheet"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Group"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"justify"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"spaceAround"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Sheet"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"left"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"Trigger"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Open sheet left"'}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Sheet tiitle"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Sheet content"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Sheet"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"side"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"right"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"Trigger"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Open sheet right"'}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"title"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Sheet tiitle"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Sheet content"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" );"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,n.jsx)(s.TabsContent,{value:"preview1",children:(0,n.jsx)("div",{className:"flex justify-center p-10",children:(0,n.jsx)(r,{})})})]})]}),(0,n.jsxs)(s.TabsContent,{value:"props",children:[(0,n.jsxs)(e.h3,{id:"sheet-component-props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#sheet-component-props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Sheet component props"]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"size"}),(0,n.jsx)(e.td,{children:"default | full | xl | lg | md | sm | xs"}),(0,n.jsx)(e.td,{children:"Adjusts the dimensions of the component, converting numerical values to relative units of measurement. Defaults to 'md' size."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"fontFamily"}),(0,n.jsx)(e.td,{children:"default | serif | mono | sans"}),(0,n.jsx)(e.td,{children:"Specifies the typeface used for text."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"side"}),(0,n.jsx)(e.td,{children:"default |left | right"}),(0,n.jsx)(e.td,{children:"Specifies the side used for sheets."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"defaultVariants"}),(0,n.jsx)(e.td,{children:"side | size | fontFamily"}),(0,n.jsx)(e.td,{children:"The DefaultVariants component allows for the definition of default styles and variants for UI elements, ensuring consistent design patterns and ease of customization."})]})]})]})]})]})}function N(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var T=N;function t(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(x);})(); ;return Component;