var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var a in e)r(t,a,{get:e[a],enumerable:!0})},c=(t,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!g.call(t,o)&&o!==a&&r(t,o,{get:()=>e[o],enumerable:!(i=p(e,o))||i.enumerable});return t};var P=(t,e,a)=>(a=t!=null?m(f(t)):{},c(e||!t||!t.__esModule?r(a,"default",{value:t,enumerable:!0}):a,t)),w=t=>c(r({},"__esModule",{value:!0}),t);var s=D((v,l)=>{l.exports=_jsx_runtime});var M={};x(M,{default:()=>h,frontmatter:()=>b});var n=P(s()),b={id:"date-picker-modal",title:"DatePickerModal",description:"Allow users to select a Date and Time value."};function d(t){let e={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...t.components},{ComponentLinks:a,Info:i}=e;return a||u("ComponentLinks",!0),i||u("Info",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{github:{package:"saas-ui-date-picker"},npm:{package:"@saas-ui/date-picker"},theme:{componentName:"date-picker"},beta:!0}),` `,(0,n.jsx)(i,{children:(0,n.jsx)(e.p,{children:`The DatePicker is currently in beta, we'd love to hear your feedback while we finalize the API.`})}),` `,(0,n.jsx)(e.h2,{children:"Import"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DatePickerModal"}),": The container component that manages state and context."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"DatePickerTimeField"}),": Time field to allow users enter a time."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { DatePickerModal, DatePickerTimeField } from '@saas-ui/date-picker' `})}),` `,(0,n.jsx)(e.h2,{children:"Usage"}),` `,(0,n.jsx)(i,{children:(0,n.jsxs)(e.p,{children:[`The DatePicker uses `,(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/internationalized/date/",children:"@internationalized/date"}),` to represent and manipulate dates. `,(0,n.jsx)(e.a,{href:"https://react-spectrum.adobe.com/internationalized/date/",children:`Check out the documentation`}),` to learn how to work with Date objects.`]})}),` `,(0,n.jsx)(e.h3,{children:"Basic"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:"420px",children:`function Page() { const disclosure = useDisclosure() const [value, setValue] = React.useState('') return ( <> ) } `})}),` `,(0,n.jsx)(e.h3,{children:"With time"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",height:"420px",children:`function Page() { const disclosure = useDisclosure() const [value, setValue] = React.useState('') return ( <> ) } `})})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function u(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(M);})(); ;return Component;