var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),D=(t,e)=>{for(var i in e)r(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!g.call(t,o)&&o!==i&&r(t,o,{get:()=>e[o],enumerable:!(a=m(e,o))||a.enumerable});return t};var x=(t,e,i)=>(i=t!=null?h(k(t)):{},c(e||!t||!t.__esModule?r(i,"default",{value:t,enumerable:!0}):i,t)),b=t=>c(r({},"__esModule",{value:!0}),t);var s=f((S,l)=>{l.exports=_jsx_runtime});var M={};D(M,{default:()=>j,frontmatter:()=>P});var n=x(s()),P={id:"date-picker-modal",title:"DatePickerModal",description:"Allow users to select a Date and Time value."};function d(t){let e=Object.assign({p:"p",h2:"h2",ul:"ul",li:"li",code:"code",pre:"pre",a:"a",h3:"h3"},t.components),{ComponentLinks:i,Info:a}=e;return i||u("ComponentLinks",!0),a||u("Info",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i,{github:{package:"saas-ui-date-picker"},npm:{package:"@saas-ui/date-picker"},theme:{componentName:"date-picker"},beta:!0}),` `,(0,n.jsx)(a,{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,{id:"import",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,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(a,{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,{id:"basic",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,{id:"with-time",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 w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var j=w;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 b(M);})(); ;return Component;