@stackshift-ui/date-picker 1.0.0-beta.1 → 1.0.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/date-picker",
   "description": "A date picker component with range and presets.",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -31,23 +31,23 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
-    "@stackshift-ui/button": "6.1.0-beta.0",
-    "@stackshift-ui/scripts": "6.1.0-beta.0",
-    "@stackshift-ui/popover": "1.0.0-beta.1",
-    "@stackshift-ui/system": "6.1.0-beta.0",
-    "@stackshift-ui/calendar": "1.0.0-beta.1",
-    "@stackshift-ui/input": "7.0.0-beta.0",
-    "@stackshift-ui/label": "1.0.0-beta.1"
+    "@stackshift-ui/calendar": "1.0.0-beta.10",
+    "@stackshift-ui/button": "7.0.0-beta.9",
+    "@stackshift-ui/popover": "1.0.0-beta.8",
+    "@stackshift-ui/input": "7.0.0-beta.7",
+    "@stackshift-ui/label": "1.0.0-beta.8",
+    "@stackshift-ui/scripts": "7.0.0-beta.6",
+    "@stackshift-ui/system": "7.0.0-beta.7"
   },
   "peerDependencies": {
-    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@stackshift-ui/system": ">=7.0.0-beta.7",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",

package/src/date-picker.tsx

@@ -49,7 +49,7 @@ export function DatePicker({
       </Label>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button variant="outline" id="date" className="w-48 justify-between font-normal">
+          <Button variant="outline" id="date" className="w-48 font-normal [&>span]:w-full [&>span]:justify-between">
             {date ? date.toLocaleDateString() : "Select date"}
             <ChevronDownIcon />
           </Button>
@@ -195,7 +195,7 @@ export function DatePickerTime({ label, selectedDate, onSelect, ...props }: Date
         </Label>
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
-            <Button variant="outline" id="date-picker" className="w-32 justify-between font-normal">
+            <Button variant="outline" id="date-picker" className="w-32 font-normal [&>span]:w-full [&>span]:justify-between">
               {date ? date.toLocaleDateString() : "Select date"}
               <ChevronDownIcon />
             </Button>

package/dist/chunk-WYFM625G.mjs

@@ -1 +0,0 @@
-import{Calendar as B,ChevronDownIcon as T}from"lucide-react";import*as c from"react";import{Button as v}from"@stackshift-ui/button";import{Calendar as P}from"@stackshift-ui/calendar";import{Input as I}from"@stackshift-ui/input";import{Label as D}from"@stackshift-ui/label";import{Popover as h,PopoverContent as N,PopoverTrigger as k}from"@stackshift-ui/popover";import{cn as F,DefaultComponent as C,useStackShiftUIComponents as w}from"@stackshift-ui/system";import{jsx as e,jsxs as t}from"react/jsx-runtime";var L="DatePicker",S="DatePickerInput",V="DatePickerTime";function z({label:a,mode:u="range",selectedDate:n,onSelect:p,...i}){let{[L]:f=C}=w(),[m,s]=c.useState(!1),o=n||new Date,d=l=>{s(!1),p==null||p(l)};return t(f,{className:F("flex flex-col gap-3",i.className),...i,children:[e(D,{htmlFor:"date",className:"px-1",children:a}),t(h,{open:m,onOpenChange:s,children:[e(k,{asChild:!0,children:t(v,{variant:"outline",id:"date",className:"w-48 justify-between font-normal",children:[o?o.toLocaleDateString():"Select date",e(T,{})]})}),e(N,{className:"w-auto overflow-hidden p-0",align:"start",children:e(P,{mode:u,selected:o,captionLayout:"dropdown",onSelect:d})})]})]})}z.displayName=L;function y(a){return a?a.toLocaleDateString("en-US",{day:"2-digit",month:"long",year:"numeric"}):""}function E(a){return a?!isNaN(a.getTime()):!1}function U({label:a,selectedDate:u,onSelect:n,selectedMonth:p,onMonthChange:i,...f}){let{[S]:m=C}=w(),[s,o]=c.useState(!1),[d,l]=c.useState(u||new Date),[O,x]=c.useState(p||d),[R,b]=c.useState(y(d));return t(m,{className:"flex flex-col gap-3",...f,children:[e(D,{htmlFor:"date",className:"px-1",children:a}),t("div",{className:"relative flex gap-2",children:[e(I,{id:"date",value:R,placeholder:"June 01, 2025",className:"bg-background pr-10",onChange:r=>{let g=new Date(r.target.value);b(r.target.value),E(g)&&(l(g),x(g),n==null||n(g),i==null||i(g))},onKeyDown:r=>{r.key==="ArrowDown"&&(r.preventDefault(),o(!0))}}),t(h,{open:s,onOpenChange:o,children:[e(k,{asChild:!0,children:t(v,{id:"date-picker",variant:"ghost",className:"absolute top-1/2 right-2 size-6 -translate-y-1/2",children:[e(B,{className:"size-3.5"}),e("span",{className:"sr-only",children:"Select date"})]})}),e(N,{className:"w-auto overflow-hidden p-0",align:"end",alignOffset:-8,sideOffset:10,children:e(P,{mode:"single",selected:d,captionLayout:"dropdown",month:O,onMonthChange:x,onSelect:r=>{r&&(l(r),b(y(r)),o(!1))}})})]})]})]})}U.displayName=S;function W({label:a,selectedDate:u,onSelect:n,...p}){let{[V]:i=C}=w(),[f,m]=c.useState(!1),[s,o]=c.useState(u),d=l=>{o(l),m(!1),l&&(n==null||n(l))};return t(i,{className:"flex gap-4",...p,children:[t("div",{className:"flex flex-col gap-3",children:[e(D,{htmlFor:"date-picker",className:"px-1",children:a}),t(h,{open:f,onOpenChange:m,children:[e(k,{asChild:!0,children:t(v,{variant:"outline",id:"date-picker",className:"w-32 justify-between font-normal",children:[s?s.toLocaleDateString():"Select date",e(T,{})]})}),e(N,{className:"w-auto overflow-hidden p-0",align:"start",children:e(P,{mode:"single",selected:s,captionLayout:"dropdown",onSelect:d})})]})]}),t("div",{className:"flex flex-col gap-3",children:[e(D,{htmlFor:"time-picker",className:"px-1",children:"Time"}),e(I,{type:"time",id:"time-picker",step:"1",defaultValue:"10:30:00",className:"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"})]})]})}export{z as a,U as b,W as c};