var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),g=(i,n)=>{for(var l in n)o(i,l,{get:n[l],enumerable:!0})},a=(i,n,l,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of D(n))!b.call(i,c)&&c!==l&&o(i,c,{get:()=>n[c],enumerable:!(t=u(n,c))||t.enumerable});return i};var f=(i,n,l)=>(l=i!=null?p(m(i)):{},a(n||!i||!i.__esModule?o(l,"default",{value:i,enumerable:!0}):l,i)),C=i=>a(o({},"__esModule",{value:!0}),i);var s=y((k,d)=>{d.exports=_jsx_runtime});var v={};g(v,{default:()=>w,frontmatter:()=>T});var e=f(s()),T={title:"Dialog",description:"A pop-up window appearing on top of the main window or another dialog, making the content beneath inactive.",libraryImport:'import { Dialog } 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(i){let n=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",h2:"h2",p:"p"},i.components),{Tabs:l,Dialog:t}=n;return t||r("Dialog",!0),t.Close||r("Dialog.Close",!0),t.Content||r("Dialog.Content",!0),t.Description||r("Dialog.Description",!0),t.Footer||r("Dialog.Footer",!0),t.Header||r("Dialog.Header",!0),t.Title||r("Dialog.Title",!0),t.Trigger||r("Dialog.Trigger",!0),l||r("Tabs",!0),l.TabsContent||r("Tabs.TabsContent",!0),l.TabsList||r("Tabs.TabsList",!0),l.TabsTrigger||r("Tabs.TabsTrigger",!0),(0,e.jsxs)(l,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,e.jsxs)(l.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,e.jsx)(l.TabsTrigger,{variant:"underline",value:"compTab",children:"Component"}),(0,e.jsx)(l.TabsTrigger,{variant:"underline",value:"props",children:"Props"})]}),(0,e.jsxs)(l.TabsContent,{value:"compTab",children:[(0,e.jsxs)(n.h3,{id:"default",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Default"]}),(0,e.jsxs)(l,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,e.jsxs)(l.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,e.jsx)(l.TabsTrigger,{value:"preview1",children:"Preview"}),(0,e.jsx)(l.TabsTrigger,{value:"code1",children:"Code"})]}),(0,e.jsx)(l.TabsContent,{value:"code1",className:"p-5",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(n.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" { Dialog, TextInput } "}),(0,e.jsx)(n.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#D2A8FF"},children:"DialogDemo"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(n.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Trigger"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">Open Dialog"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Content"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Header"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Title"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">Dialog Title"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Description"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">Dialog Description"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Footer"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#7EE787"},children:"Dialog.Close"}),(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:">Close"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,e.jsx)(l.TabsContent,{value:"preview1",children:(0,e.jsx)("div",{className:"flex justify-center p-10",children:(0,e.jsxs)(t,{children:[(0,e.jsx)(t.Trigger,{children:"Open Dialog"}),(0,e.jsxs)(t.Content,{children:[(0,e.jsxs)(t.Header,{children:[(0,e.jsx)(t.Title,{children:"Dialog Title"}),(0,e.jsx)(t.Description,{children:"Dialog Description"})]}),(0,e.jsx)(t.Footer,{children:(0,e.jsx)(t.Close,{children:"Close"})})]})]})})})]})]}),(0,e.jsxs)(l.TabsContent,{value:"props",children:[(0,e.jsxs)(n.h3,{id:"dialog-component-props",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#dialog-component-props",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Dialog Component Props"]}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Value"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"size"}),(0,e.jsx)(n.td,{children:"default, xs, sm, md, lg, xl, full"}),(0,e.jsx)(n.td,{children:"Adjusts the dimensions of the component, converting numerical values to relative units of measurement. Defaults to 'md' size."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"radius"}),(0,e.jsx)(n.td,{children:"default, xs, sm, md, lg, xl, full"}),(0,e.jsx)(n.td,{children:"Specifies the border-radius using the key from theme.radius or any valid CSS value. Numeric values are converted to rem, with a default value of theme.defaultRadius."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"defaultVariants"}),(0,e.jsx)(n.td,{children:"Variant, Size, Radius"}),(0,e.jsx)(n.td,{children:"The DefaultVariants component allows for the definition of default styles and variants for UI elements."})]})]})]}),(0,e.jsxs)(n.h2,{id:"root",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#root",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Root"]}),(0,e.jsx)(n.p,{children:"Contains all the parts of a dialog."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"defaultOpen"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Determines whether the component is initially open or closed by default."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"open"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Controls whether the component is currently open or closed."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onOpenChange"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Specifies a function to be called when the open state of the component changes."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"modal"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Specifies whether the component is rendered as a modal, typically used for overlaying content on top of the rest of the page."})]})]})]}),(0,e.jsxs)(n.h2,{id:"trigger",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#trigger",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Trigger"]}),(0,e.jsx)(n.p,{children:"The button that opens the dialog."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,e.jsxs)(n.h2,{id:"portal",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#portal",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Portal"]}),(0,e.jsx)(n.p,{children:"When used, portals your overlay and content parts into the body."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"forceMount"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"container"}),(0,e.jsx)(n.td,{children:"HTMLElement"}),(0,e.jsx)(n.td,{children:"Specifies the container element in which the component should be rendered."})]})]})]}),(0,e.jsxs)(n.h2,{id:"overlay",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#overlay",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Overlay"]}),(0,e.jsx)(n.p,{children:"A layer that covers the inert portion of the view when the dialog is open."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"forceMount"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]})]})]}),(0,e.jsxs)(n.h2,{id:"content",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#content",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Content"]}),(0,e.jsx)(n.p,{children:"Contains content to be rendered in the open dialog."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"forceMount"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onOpenAutoFocus"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Determines whether the component automatically focuses when it opens."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onCloseAutoFocus"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Specifies whether the component automatically focuses when it closes."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onEscapeKeyDown"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Specifies a function to be called when the escape key is pressed while the component is focused."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onPointerDownOutside"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Specifies a function to be called when a pointer event occurs outside of the component."})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"onInteractOutside"}),(0,e.jsx)(n.td,{children:"function"}),(0,e.jsx)(n.td,{children:"Specifies a function to be called when any interaction occurs outside of the component, such as clicks or touches."})]})]})]}),(0,e.jsxs)(n.h2,{id:"close",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#close",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Close"]}),(0,e.jsx)(n.p,{children:"The button that closes the dialog."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,e.jsxs)(n.h2,{id:"title",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#title",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Title"]}),(0,e.jsx)(n.p,{children:"An accessible title to be announced when the dialog is opened."}),(0,e.jsxs)(n.p,{children:["If you want to hide the title, wrap it inside our Visually Hidden utility like this ",(0,e.jsx)(n.code,{children:""}),"."]}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,e.jsxs)(n.h2,{id:"description",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#description",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Description"]}),(0,e.jsx)(n.p,{children:"An optional accessible description to be announced when the dialog is opened."}),(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Name"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"aschild"}),(0,e.jsx)(n.td,{children:"boolean"}),(0,e.jsx)(n.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]})]})]})}function N(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(h,i)})):h(i)}var w=N;function r(i,n){throw new Error("Expected "+(n?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})(); ;return Component;