@clasing/ui 2.0.1 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/calendar.cjs.js +1 -1
- package/dist/components/calendar.d.ts +8 -15
- package/dist/components/calendar.es.js +188 -2
- package/dist/components/textarea.cjs.js +1 -1
- package/dist/components/textarea.d.ts +4 -16
- package/dist/components/textarea.es.js +55 -128
- package/package.json +1 -11
- package/dist/calendar-DA08oJl2.js +0 -117
- package/dist/calendar-gxLdKgjb.cjs +0 -1
- package/dist/components/blocks/date-picker.cjs.js +0 -1
- package/dist/components/blocks/date-picker.d.ts +0 -30
- package/dist/components/blocks/date-picker.es.js +0 -181
- package/dist/components/blocks/date-range-picker.cjs.js +0 -1
- package/dist/components/blocks/date-range-picker.d.ts +0 -29
- package/dist/components/blocks/date-range-picker.es.js +0 -246
- package/dist/entries/blocks/date-picker.d.ts +0 -2
- package/dist/entries/blocks/date-range-picker.d.ts +0 -2
- package/dist/style-BNIXVvBA.js +0 -1172
- package/dist/style-CA5976Oh.cjs +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const l=require("./jsx-runtime-BuHQgaKs.cjs"),D=require("./index-DoxiiusW.cjs"),s=require("date-fns"),y=require("react"),S=require("react-day-picker"),c=require("./style-CA5976Oh.cjs"),k=require("./icon-component-D5YssRbR.cjs"),N=({onChange:r,value:t,options:n})=>l.jsxRuntimeExports.jsx("select",{className:"text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-2xl border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",onChange:r,value:t,children:n?.map((o,d)=>{const b=o.value===t;return l.jsxRuntimeExports.jsx("option",{value:o.value,disabled:o.disabled,className:D.cn("disabled:hidden",{"bg-blue-050 font-semibold text-blue-800":b}),children:o.label},d)})}),z=({orientation:r="down",size:t=16})=>l.jsxRuntimeExports.jsx(k.IconComponent,{iconName:r==="left"?"IconChevronLeft":"IconChevronRight",stroke:"1.5",size:t}),I=({locale:r="enGB",disabledDates:t,enabledDates:n,dropdownsSelectors:o=!0,hideNavigation:d=!1,showOutsideDays:b=!0,minDate:j,maxDate:E,value:f,className:C,onChange:m})=>{const[_,p]=y.useState(),q=e=>e.filter(a=>a!==void 0),u=Array.isArray(n)?n.map(e=>new Date(e)):n?new Date(n):void 0,i=Array.isArray(u)?q(u):u?[u]:[],g=i.length>0?s.min(i):void 0,x=i.length>0?s.max(i):void 0,h=()=>Array.isArray(t)?t.map(e=>new Date(e)):t?new Date(t):void 0,v=Array.isArray(h())?[...h()]:[];if(g&&x){const e=s.startOfMonth(g),a=s.endOfMonth(x);s.eachDayOfInterval({start:e,end:a}).forEach(w=>{i.some(R=>R.setHours(0,0,0,0)===w.setHours(0,0,0,0))||v.push(w)})}y.useEffect(()=>{if(f){const e=new Date(f);isNaN(e.getTime())||p(e)}else p(void 0)},[f]);const A=e=>{p(e),m&&m(e?s.format(e,"yyyy-MM-dd"):void 0)},M=r==="enGB"?c.enGB:r==="enUS"?c.enUS:r==="fr"?c.fr:c.es;return l.jsxRuntimeExports.jsx(S.DayPicker,{mode:"single",captionLayout:o?"dropdown":"label",selected:_,onSelect:A,locale:M,startMonth:j||g||new Date(1900,1,1),endMonth:E||x||new Date(2100,12,31),disabled:v,showOutsideDays:b,hideNavigation:d,className:D.cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,C),classNames:{root:"w-fit text-sm text-center",weekday:"text-muted-foreground font-regular",month_grid:"border-separate",month_caption:`h-9 relative flex items-center w-full ${d?"hidden":""}`,dropdowns:"absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",button_next:"rounded-md border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",button_previous:"rounded-md border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",nav:"w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",selected:"bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold",today:"bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",disabled:"bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",caption_label:"text-neutral-1000 text-base font-semibold leading-none self-center w-full",outside:"bg-white text-neutral-200 border-[0.5px] border-neutral-000",day_button:"text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-md",day:"h-9 w-9 aspect-square text-sm rounded-md border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap"},components:{Dropdown:N,Chevron:({orientation:e,size:a})=>l.jsxRuntimeExports.jsx(z,{orientation:e,size:a})}})};exports.Calendar=I;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-BuHQgaKs.cjs"),T=require("../../calendar-gxLdKgjb.cjs"),j=require("../../icon-component-D5YssRbR.cjs"),F=require("../../label-U5GnYvFO.cjs"),x=require("../../popover-4V87msIT.cjs"),a=require("../../index-DoxiiusW.cjs"),L=require("../../index-C8P6Mn4U.cjs"),l=require("date-fns"),m=require("react"),i=require("../../style-CA5976Oh.cjs"),U=L.cva("border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",selected:"bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",error:"border-error-main"}},defaultVariants:{size:"md",rounded:"default",state:"default"}}),O=m.forwardRef(({className:y,placeholder:v,side:R="bottom",align:E="center",size:N="md",rounded:D="default",label:p,helperText:f,disabledDates:q,enabledDates:w,calendarDropdowns:C=!0,hideNavigation:S=!1,showOutsideDays:P=!0,locale:s="enGB",error:o,touched:b,value:r,minDate:M,onChange:g,maxDate:k,disabled:d=!1,...u},z)=>{const[n,c]=m.useState(),I=t=>{c(t),g&&g({target:{name:u.name,value:t?l.format(t,"yyyy-MM-dd"):""}})};m.useEffect(()=>{if(r){const t=new Date(r);isNaN(t.getTime())||c(t)}else c(void 0)},[r]);const B=s==="enGB"?i.enGB:s==="enUS"?i.enUS:s==="fr"?i.fr:i.es;return e.jsxRuntimeExports.jsxs("div",{ref:z,className:a.cn("flex flex-col gap-3",y),...u,children:[p&&e.jsxRuntimeExports.jsx(F.Label,{htmlFor:u.id,className:a.cn({"text-neutral-700":d}),children:p}),e.jsxRuntimeExports.jsxs(x.Popover,{children:[e.jsxRuntimeExports.jsx(x.PopoverTrigger,{children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:a.cn(U({size:N,rounded:D,state:n&&!o?"selected":o&&b?"error":"default"}),{"text-neutral-800":!n}),disabled:d,children:[e.jsxRuntimeExports.jsx(j.IconComponent,{iconName:"IconCalendar",size:20,className:"pointer-events-none"}),n?l.format(n,"PPP",{locale:B}):v||"Select a date",e.jsxRuntimeExports.jsx("input",{hidden:!0,onChange:()=>null,value:n?l.format(n,"yyyy-MM-dd"):r||""}),e.jsxRuntimeExports.jsx(j.IconComponent,{iconName:"IconChevronDown",size:16,className:"pointer-events-none ml-auto"})]})}),e.jsxRuntimeExports.jsx(x.PopoverContent,{className:"w-auto overflow-hidden p-0",side:R,align:E,children:e.jsxRuntimeExports.jsx(T.Calendar,{locale:s,disabledDates:q,enabledDates:w,hideNavigation:S,dropdownsSelectors:C,showOutsideDays:P,value:n?l.format(n,"yyyy-MM-dd"):r,maxDate:k,minDate:M,onChange:t=>{const G=t?new Date(t):void 0;I(G)}})})]}),o&&b?e.jsxRuntimeExports.jsx("span",{className:"text-error-main text-label-md -mt-1",children:o}):f?e.jsxRuntimeExports.jsx("span",{className:a.clsx("text-muted-foreground text-label-md -mt-1",{"text-neutral-700":d}),children:f}):null]})}),h=O;h.displayName="Datepicker";exports.Datepicker=h;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import 'react-day-picker/dist/style.css';
|
|
3
|
-
declare const datepickerTriggerStyles: (props?: ({
|
|
4
|
-
size?: "lg" | "md" | "sm" | null | undefined;
|
|
5
|
-
rounded?: "default" | "full" | null | undefined;
|
|
6
|
-
state?: "selected" | "default" | "error" | null | undefined;
|
|
7
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
export interface IDatepickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof datepickerTriggerStyles> {
|
|
9
|
-
label?: string;
|
|
10
|
-
helperText?: string;
|
|
11
|
-
error?: string;
|
|
12
|
-
touched?: boolean;
|
|
13
|
-
value?: string;
|
|
14
|
-
locale?: 'enGB' | 'enUS' | 'es' | 'fr';
|
|
15
|
-
size?: 'sm' | 'md' | 'lg';
|
|
16
|
-
rounded?: 'default' | 'full';
|
|
17
|
-
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
18
|
-
align?: 'start' | 'center' | 'end';
|
|
19
|
-
placeholder?: string;
|
|
20
|
-
disabledDates?: string | string[] | Date | Date[] | undefined;
|
|
21
|
-
enabledDates?: string | string[] | Date | Date[] | undefined;
|
|
22
|
-
calendarDropdowns?: boolean;
|
|
23
|
-
hideNavigation?: boolean;
|
|
24
|
-
showOutsideDays?: boolean;
|
|
25
|
-
minDate?: Date;
|
|
26
|
-
maxDate?: Date;
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
}
|
|
29
|
-
export declare const Datepicker: import("react").ForwardRefExoticComponent<IDatepickerProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
30
|
-
export {};
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import { j as e } from "../../jsx-runtime-DywqP_6a.js";
|
|
2
|
-
import { C as G } from "../../calendar-DA08oJl2.js";
|
|
3
|
-
import { I as x } from "../../icon-component-CxQsODCa.js";
|
|
4
|
-
import { L } from "../../label-_kG7WBoJ.js";
|
|
5
|
-
import { P as E, c as R, b as T } from "../../popover-CHAUhJda.js";
|
|
6
|
-
import { c as m, a as U } from "../../index-CRiPKpXj.js";
|
|
7
|
-
import { c as F } from "../../index-BqtVL8d-.js";
|
|
8
|
-
import { format as o } from "date-fns";
|
|
9
|
-
import { forwardRef as V, useState as q, useEffect as A } from "react";
|
|
10
|
-
import { e as H, a as J, f as K, b as O } from "../../style-BNIXVvBA.js";
|
|
11
|
-
const Q = F(
|
|
12
|
-
"border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",
|
|
13
|
-
{
|
|
14
|
-
variants: {
|
|
15
|
-
size: {
|
|
16
|
-
sm: "text-label-md h-8 rounded-sm px-2 py-1",
|
|
17
|
-
md: "text-label-lg h-12 rounded-md px-3 py-1",
|
|
18
|
-
lg: "text-label-xl h-16 rounded-lg px-4 py-2"
|
|
19
|
-
},
|
|
20
|
-
rounded: {
|
|
21
|
-
default: "",
|
|
22
|
-
full: "rounded-full"
|
|
23
|
-
},
|
|
24
|
-
state: {
|
|
25
|
-
default: "",
|
|
26
|
-
selected: "bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",
|
|
27
|
-
error: "border-error-main"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
defaultVariants: {
|
|
31
|
-
size: "md",
|
|
32
|
-
rounded: "default",
|
|
33
|
-
state: "default"
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
), W = V(
|
|
37
|
-
({
|
|
38
|
-
className: b,
|
|
39
|
-
placeholder: g,
|
|
40
|
-
side: h = "bottom",
|
|
41
|
-
align: v = "center",
|
|
42
|
-
size: y = "md",
|
|
43
|
-
rounded: j = "default",
|
|
44
|
-
label: c,
|
|
45
|
-
helperText: u,
|
|
46
|
-
disabledDates: N,
|
|
47
|
-
enabledDates: w,
|
|
48
|
-
calendarDropdowns: D = !0,
|
|
49
|
-
hideNavigation: C = !1,
|
|
50
|
-
showOutsideDays: P = !0,
|
|
51
|
-
locale: s = "enGB",
|
|
52
|
-
error: n,
|
|
53
|
-
touched: f,
|
|
54
|
-
value: r,
|
|
55
|
-
minDate: S,
|
|
56
|
-
onChange: p,
|
|
57
|
-
maxDate: M,
|
|
58
|
-
disabled: l = !1,
|
|
59
|
-
...d
|
|
60
|
-
}, k) => {
|
|
61
|
-
const [a, i] = q(), z = (t) => {
|
|
62
|
-
i(t), p && p({
|
|
63
|
-
target: {
|
|
64
|
-
name: d.name,
|
|
65
|
-
value: t ? o(t, "yyyy-MM-dd") : ""
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
A(() => {
|
|
70
|
-
if (r) {
|
|
71
|
-
const t = new Date(r);
|
|
72
|
-
isNaN(t.getTime()) || i(t);
|
|
73
|
-
} else
|
|
74
|
-
i(void 0);
|
|
75
|
-
}, [r]);
|
|
76
|
-
const I = s === "enGB" ? H : s === "enUS" ? J : s === "fr" ? K : O;
|
|
77
|
-
return /* @__PURE__ */ e.jsxs(
|
|
78
|
-
"div",
|
|
79
|
-
{
|
|
80
|
-
ref: k,
|
|
81
|
-
className: m("flex flex-col gap-3", b),
|
|
82
|
-
...d,
|
|
83
|
-
children: [
|
|
84
|
-
c && /* @__PURE__ */ e.jsx(
|
|
85
|
-
L,
|
|
86
|
-
{
|
|
87
|
-
htmlFor: d.id,
|
|
88
|
-
className: m({ "text-neutral-700": l }),
|
|
89
|
-
children: c
|
|
90
|
-
}
|
|
91
|
-
),
|
|
92
|
-
/* @__PURE__ */ e.jsxs(E, { children: [
|
|
93
|
-
/* @__PURE__ */ e.jsx(R, { children: /* @__PURE__ */ e.jsxs(
|
|
94
|
-
"button",
|
|
95
|
-
{
|
|
96
|
-
type: "button",
|
|
97
|
-
className: m(
|
|
98
|
-
Q({
|
|
99
|
-
size: y,
|
|
100
|
-
rounded: j,
|
|
101
|
-
state: a && !n ? "selected" : n && f ? "error" : "default"
|
|
102
|
-
}),
|
|
103
|
-
{
|
|
104
|
-
"text-neutral-800": !a
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
disabled: l,
|
|
108
|
-
children: [
|
|
109
|
-
/* @__PURE__ */ e.jsx(
|
|
110
|
-
x,
|
|
111
|
-
{
|
|
112
|
-
iconName: "IconCalendar",
|
|
113
|
-
size: 20,
|
|
114
|
-
className: "pointer-events-none"
|
|
115
|
-
}
|
|
116
|
-
),
|
|
117
|
-
a ? o(a, "PPP", { locale: I }) : g || "Select a date",
|
|
118
|
-
/* @__PURE__ */ e.jsx(
|
|
119
|
-
"input",
|
|
120
|
-
{
|
|
121
|
-
hidden: !0,
|
|
122
|
-
onChange: () => null,
|
|
123
|
-
value: a ? o(a, "yyyy-MM-dd") : r || ""
|
|
124
|
-
}
|
|
125
|
-
),
|
|
126
|
-
/* @__PURE__ */ e.jsx(
|
|
127
|
-
x,
|
|
128
|
-
{
|
|
129
|
-
iconName: "IconChevronDown",
|
|
130
|
-
size: 16,
|
|
131
|
-
className: "pointer-events-none ml-auto"
|
|
132
|
-
}
|
|
133
|
-
)
|
|
134
|
-
]
|
|
135
|
-
}
|
|
136
|
-
) }),
|
|
137
|
-
/* @__PURE__ */ e.jsx(
|
|
138
|
-
T,
|
|
139
|
-
{
|
|
140
|
-
className: "w-auto overflow-hidden p-0",
|
|
141
|
-
side: h,
|
|
142
|
-
align: v,
|
|
143
|
-
children: /* @__PURE__ */ e.jsx(
|
|
144
|
-
G,
|
|
145
|
-
{
|
|
146
|
-
locale: s,
|
|
147
|
-
disabledDates: N,
|
|
148
|
-
enabledDates: w,
|
|
149
|
-
hideNavigation: C,
|
|
150
|
-
dropdownsSelectors: D,
|
|
151
|
-
showOutsideDays: P,
|
|
152
|
-
value: a ? o(a, "yyyy-MM-dd") : r,
|
|
153
|
-
maxDate: M,
|
|
154
|
-
minDate: S,
|
|
155
|
-
onChange: (t) => {
|
|
156
|
-
const B = t ? new Date(t) : void 0;
|
|
157
|
-
z(B);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
)
|
|
161
|
-
}
|
|
162
|
-
)
|
|
163
|
-
] }),
|
|
164
|
-
n && f ? /* @__PURE__ */ e.jsx("span", { className: "text-error-main text-label-md -mt-1", children: n }) : u ? /* @__PURE__ */ e.jsx(
|
|
165
|
-
"span",
|
|
166
|
-
{
|
|
167
|
-
className: U("text-muted-foreground text-label-md -mt-1", {
|
|
168
|
-
"text-neutral-700": l
|
|
169
|
-
}),
|
|
170
|
-
children: u
|
|
171
|
-
}
|
|
172
|
-
) : null
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
), X = W;
|
|
178
|
-
X.displayName = "Datepicker";
|
|
179
|
-
export {
|
|
180
|
-
X as Datepicker
|
|
181
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../jsx-runtime-BuHQgaKs.cjs"),$=require("../../label-U5GnYvFO.cjs"),b=require("../../index-DoxiiusW.cjs"),I=require("../../index-C8P6Mn4U.cjs"),a=require("date-fns"),w=require("react"),T=require("react-day-picker"),f=require("../../style-CA5976Oh.cjs"),N=require("../../icon-component-D5YssRbR.cjs"),j=require("../../popover-4V87msIT.cjs"),L=I.cva("border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",selected:"bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",error:"border-error-main"}},defaultVariants:{size:"md",rounded:"default",state:"default"}}),B=({onChange:d,value:o,options:x})=>e.jsxRuntimeExports.jsx("select",{className:"text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-md border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",onChange:d,value:o,children:x?.map((n,m)=>{const g=n.value===o;return e.jsxRuntimeExports.jsx("option",{value:n.value,disabled:n.disabled,className:b.cn("disabled:hidden",{"bg-blue-050 font-semibold text-blue-800":g}),children:n.label},m)})}),G=({orientation:d="down",size:o=16})=>e.jsxRuntimeExports.jsx(N.IconComponent,{iconName:d==="left"?"IconChevronLeft":"IconChevronRight",stroke:"1.5",size:o}),F=w.forwardRef(({className:d,locale:o="enGB",placeholder:x,label:n,size:m="md",rounded:g="default",disabledDates:E,helperText:C,side:q="bottom",align:M="center",error:c,touched:p,startDate:i,endDate:l,calendarDropdowns:S=!0,onChange:R,minDate:k,maxDate:_,disabled:h=!1,...u},z)=>{const[t,v]=w.useState({from:i?new Date(i):void 0,to:l?new Date(l):void 0}),D=r=>{if(v(r),R){const s={from:r.from?a.format(r.from,"yyyy-MM-dd"):"",to:r.to?a.format(r.to,"yyyy-MM-dd"):""};R({target:{name:u.name,value:s}})}};w.useEffect(()=>{if(i){const r=new Date(i);isNaN(r.getTime())||v(s=>({...s,from:r}))}if(l){const r=new Date(l);isNaN(r.getTime())||v(s=>({...s,to:r}))}},[i,l]);const y=o==="enGB"?f.enGB:o==="enUS"?f.enUS:o==="fr"?f.fr:f.es;return e.jsxRuntimeExports.jsxs("div",{ref:z,className:b.cn("flex flex-col gap-3",d),...u,children:[n&&e.jsxRuntimeExports.jsx($.Label,{htmlFor:u.id,className:b.cn({"text-neutral-700":h}),children:n}),e.jsxRuntimeExports.jsxs(j.Popover,{children:[e.jsxRuntimeExports.jsx(j.PopoverTrigger,{children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:b.cn(L({size:m,rounded:g,state:t.from&&t.to||p&&!c?"selected":c&&p?"error":"default"}),{"text-neutral-800":!t.from&&!t.to}),disabled:h,children:[e.jsxRuntimeExports.jsx(N.IconComponent,{iconName:"IconCalendar",size:20,className:"pointer-events-none"}),t.from&&t.to?`${a.format(t.from,"PPP",{locale:y})} - ${a.format(t.to,"PPP",{locale:y})}`:x||"Select a date range",e.jsxRuntimeExports.jsx("input",{hidden:!0,onChange:()=>null,value:t.from&&t.to?`${a.format(t.from,"yyyy-MM-dd")} to ${a.format(t.to,"yyyy-MM-dd")}`:`${i||""} to ${l||""}`})]})}),e.jsxRuntimeExports.jsx(j.PopoverContent,{className:"w-auto overflow-hidden p-0",side:q,align:M,children:e.jsxRuntimeExports.jsx(T.DayPicker,{mode:"range",captionLayout:S?"dropdown":"label",selected:t,onSelect:D,locale:y,startMonth:k||new Date(1900,0,1),endMonth:_||new Date(2100,11,31),showOutsideDays:!0,disabled:E,className:"p-2",required:!0,classNames:{root:"w-fit text-sm text-center",weekday:"text-muted-foreground font-regular",month_grid:"border-separate",month_caption:"h-9 relative flex items-center w-full",dropdowns:"absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",button_next:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",button_previous:"rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",nav:"w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",selected:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",today:"bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",outside:"bg-white text-neutral-200 border-[0.5px] border-neutral-000",day_button:"text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",caption_label:"text-neutral-1000 text-base font-semibold leading-none self-center w-full",disabled:"bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",day:"h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",range_end:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_start:"bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",range_middle:"bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"},components:{Dropdown:B,Chevron:({orientation:r,size:s})=>e.jsxRuntimeExports.jsx(G,{orientation:r,size:s})}})})]}),c&&p?e.jsxRuntimeExports.jsx("span",{"aria-describedby":u.id,"aria-invalid":"true",className:"text-error-main text-label-md -mt-1",children:c}):e.jsxRuntimeExports.jsx("span",{className:b.clsx("text-muted-foreground -mt-1",{"text-neutral-700":h}),"aria-describedby":u.id,children:C})]})}),P=F;P.displayName="DateRangePicker";exports.DateRangePicker=P;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import { Matcher } from 'react-day-picker';
|
|
3
|
-
import 'react-day-picker/dist/style.css';
|
|
4
|
-
declare const dateRangePickerTriggerStyles: (props?: ({
|
|
5
|
-
size?: "lg" | "md" | "sm" | null | undefined;
|
|
6
|
-
rounded?: "default" | "full" | null | undefined;
|
|
7
|
-
state?: "selected" | "default" | "error" | null | undefined;
|
|
8
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
-
export interface IDateRangePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof dateRangePickerTriggerStyles> {
|
|
10
|
-
label?: string;
|
|
11
|
-
helperText?: string;
|
|
12
|
-
error?: string;
|
|
13
|
-
touched?: boolean;
|
|
14
|
-
size?: 'sm' | 'md' | 'lg';
|
|
15
|
-
rounded?: 'default' | 'full';
|
|
16
|
-
startDate: string;
|
|
17
|
-
endDate: string;
|
|
18
|
-
calendarDropdowns?: boolean;
|
|
19
|
-
disabledDates?: Matcher | Matcher[] | undefined;
|
|
20
|
-
locale?: 'enGB' | 'enUS' | 'es' | 'fr';
|
|
21
|
-
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
22
|
-
align?: 'start' | 'center' | 'end';
|
|
23
|
-
placeholder?: string;
|
|
24
|
-
minDate?: Date;
|
|
25
|
-
maxDate?: Date;
|
|
26
|
-
disabled?: boolean;
|
|
27
|
-
}
|
|
28
|
-
export declare const DateRangePicker: import("react").ForwardRefExoticComponent<IDateRangePickerProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
29
|
-
export {};
|
|
@@ -1,246 +0,0 @@
|
|
|
1
|
-
import { j as e } from "../../jsx-runtime-DywqP_6a.js";
|
|
2
|
-
import { L as z } from "../../label-_kG7WBoJ.js";
|
|
3
|
-
import { c, a as D } from "../../index-CRiPKpXj.js";
|
|
4
|
-
import { c as $ } from "../../index-BqtVL8d-.js";
|
|
5
|
-
import { format as a } from "date-fns";
|
|
6
|
-
import { forwardRef as I, useState as L, useEffect as T } from "react";
|
|
7
|
-
import { DayPicker as B } from "react-day-picker";
|
|
8
|
-
import { e as E, a as G, f as q, b as U } from "../../style-BNIXVvBA.js";
|
|
9
|
-
import { I as y } from "../../icon-component-CxQsODCa.js";
|
|
10
|
-
import { P as V, c as F, b as O } from "../../popover-CHAUhJda.js";
|
|
11
|
-
const A = $(
|
|
12
|
-
"border-neutral-050 focus-visible:ring-ring-default lg:hover:bg-neutral-000 flex w-full items-center gap-2 border-[0.5px] bg-white text-base whitespace-pre-wrap focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden disabled:border-neutral-100 disabled:bg-neutral-100 disabled:text-neutral-700 lg:disabled:hover:bg-neutral-100",
|
|
13
|
-
{
|
|
14
|
-
variants: {
|
|
15
|
-
size: {
|
|
16
|
-
sm: "text-label-md h-8 rounded-sm px-2 py-1",
|
|
17
|
-
md: "text-label-lg h-12 rounded-md px-3 py-1",
|
|
18
|
-
lg: "text-label-xl h-16 rounded-lg px-4 py-2"
|
|
19
|
-
},
|
|
20
|
-
rounded: {
|
|
21
|
-
default: "",
|
|
22
|
-
full: "rounded-full"
|
|
23
|
-
},
|
|
24
|
-
state: {
|
|
25
|
-
default: "",
|
|
26
|
-
selected: "bg-blue-050 focus:blue-800 border-blue-800 font-semibold text-blue-800 active:border-blue-800 lg:hover:bg-blue-100",
|
|
27
|
-
error: "border-error-main"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
defaultVariants: {
|
|
31
|
-
size: "md",
|
|
32
|
-
rounded: "default",
|
|
33
|
-
state: "default"
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
), H = ({ onChange: d, value: r, options: f }) => /* @__PURE__ */ e.jsx(
|
|
37
|
-
"select",
|
|
38
|
-
{
|
|
39
|
-
className: "text-md focus-visible:ring-ring-default h-fit w-fit! cursor-pointer appearance-none rounded-md border-none pr-9 pl-1 font-semibold transition-colors focus:border-0 focus:border-transparent focus:ring-0 focus:ring-transparent focus:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-hidden",
|
|
40
|
-
onChange: d,
|
|
41
|
-
value: r,
|
|
42
|
-
children: f?.map((n, m) => {
|
|
43
|
-
const g = n.value === r;
|
|
44
|
-
return /* @__PURE__ */ e.jsx(
|
|
45
|
-
"option",
|
|
46
|
-
{
|
|
47
|
-
value: n.value,
|
|
48
|
-
disabled: n.disabled,
|
|
49
|
-
className: c("disabled:hidden", {
|
|
50
|
-
"bg-blue-050 font-semibold text-blue-800": g
|
|
51
|
-
}),
|
|
52
|
-
children: n.label
|
|
53
|
-
},
|
|
54
|
-
m
|
|
55
|
-
);
|
|
56
|
-
})
|
|
57
|
-
}
|
|
58
|
-
), J = ({
|
|
59
|
-
orientation: d = "down",
|
|
60
|
-
size: r = 16
|
|
61
|
-
}) => /* @__PURE__ */ e.jsx(
|
|
62
|
-
y,
|
|
63
|
-
{
|
|
64
|
-
iconName: d === "left" ? "IconChevronLeft" : "IconChevronRight",
|
|
65
|
-
stroke: "1.5",
|
|
66
|
-
size: r
|
|
67
|
-
}
|
|
68
|
-
), K = I(
|
|
69
|
-
({
|
|
70
|
-
className: d,
|
|
71
|
-
locale: r = "enGB",
|
|
72
|
-
placeholder: f,
|
|
73
|
-
label: n,
|
|
74
|
-
size: m = "md",
|
|
75
|
-
rounded: g = "default",
|
|
76
|
-
disabledDates: j,
|
|
77
|
-
helperText: N,
|
|
78
|
-
side: P = "bottom",
|
|
79
|
-
align: C = "center",
|
|
80
|
-
error: b,
|
|
81
|
-
touched: x,
|
|
82
|
-
startDate: s,
|
|
83
|
-
endDate: i,
|
|
84
|
-
calendarDropdowns: M = !0,
|
|
85
|
-
onChange: w,
|
|
86
|
-
minDate: R,
|
|
87
|
-
maxDate: S,
|
|
88
|
-
disabled: p = !1,
|
|
89
|
-
...u
|
|
90
|
-
}, _) => {
|
|
91
|
-
const [t, h] = L({
|
|
92
|
-
from: s ? new Date(s) : void 0,
|
|
93
|
-
to: i ? new Date(i) : void 0
|
|
94
|
-
}), k = (o) => {
|
|
95
|
-
if (h(o), w) {
|
|
96
|
-
const l = {
|
|
97
|
-
from: o.from ? a(o.from, "yyyy-MM-dd") : "",
|
|
98
|
-
to: o.to ? a(o.to, "yyyy-MM-dd") : ""
|
|
99
|
-
};
|
|
100
|
-
w({
|
|
101
|
-
target: {
|
|
102
|
-
name: u.name,
|
|
103
|
-
value: l
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
T(() => {
|
|
109
|
-
if (s) {
|
|
110
|
-
const o = new Date(s);
|
|
111
|
-
isNaN(o.getTime()) || h((l) => ({ ...l, from: o }));
|
|
112
|
-
}
|
|
113
|
-
if (i) {
|
|
114
|
-
const o = new Date(i);
|
|
115
|
-
isNaN(o.getTime()) || h((l) => ({ ...l, to: o }));
|
|
116
|
-
}
|
|
117
|
-
}, [s, i]);
|
|
118
|
-
const v = r === "enGB" ? E : r === "enUS" ? G : r === "fr" ? q : U;
|
|
119
|
-
return /* @__PURE__ */ e.jsxs(
|
|
120
|
-
"div",
|
|
121
|
-
{
|
|
122
|
-
ref: _,
|
|
123
|
-
className: c("flex flex-col gap-3", d),
|
|
124
|
-
...u,
|
|
125
|
-
children: [
|
|
126
|
-
n && /* @__PURE__ */ e.jsx(
|
|
127
|
-
z,
|
|
128
|
-
{
|
|
129
|
-
htmlFor: u.id,
|
|
130
|
-
className: c({ "text-neutral-700": p }),
|
|
131
|
-
children: n
|
|
132
|
-
}
|
|
133
|
-
),
|
|
134
|
-
/* @__PURE__ */ e.jsxs(V, { children: [
|
|
135
|
-
/* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsxs(
|
|
136
|
-
"button",
|
|
137
|
-
{
|
|
138
|
-
type: "button",
|
|
139
|
-
className: c(
|
|
140
|
-
A({
|
|
141
|
-
size: m,
|
|
142
|
-
rounded: g,
|
|
143
|
-
state: t.from && t.to || x && !b ? "selected" : b && x ? "error" : "default"
|
|
144
|
-
}),
|
|
145
|
-
{
|
|
146
|
-
"text-neutral-800": !t.from && !t.to
|
|
147
|
-
}
|
|
148
|
-
),
|
|
149
|
-
disabled: p,
|
|
150
|
-
children: [
|
|
151
|
-
/* @__PURE__ */ e.jsx(
|
|
152
|
-
y,
|
|
153
|
-
{
|
|
154
|
-
iconName: "IconCalendar",
|
|
155
|
-
size: 20,
|
|
156
|
-
className: "pointer-events-none"
|
|
157
|
-
}
|
|
158
|
-
),
|
|
159
|
-
t.from && t.to ? `${a(t.from, "PPP", { locale: v })} - ${a(t.to, "PPP", { locale: v })}` : f || "Select a date range",
|
|
160
|
-
/* @__PURE__ */ e.jsx(
|
|
161
|
-
"input",
|
|
162
|
-
{
|
|
163
|
-
hidden: !0,
|
|
164
|
-
onChange: () => null,
|
|
165
|
-
value: t.from && t.to ? `${a(t.from, "yyyy-MM-dd")} to ${a(t.to, "yyyy-MM-dd")}` : `${s || ""} to ${i || ""}`
|
|
166
|
-
}
|
|
167
|
-
)
|
|
168
|
-
]
|
|
169
|
-
}
|
|
170
|
-
) }),
|
|
171
|
-
/* @__PURE__ */ e.jsx(
|
|
172
|
-
O,
|
|
173
|
-
{
|
|
174
|
-
className: "w-auto overflow-hidden p-0",
|
|
175
|
-
side: P,
|
|
176
|
-
align: C,
|
|
177
|
-
children: /* @__PURE__ */ e.jsx(
|
|
178
|
-
B,
|
|
179
|
-
{
|
|
180
|
-
mode: "range",
|
|
181
|
-
captionLayout: M ? "dropdown" : "label",
|
|
182
|
-
selected: t,
|
|
183
|
-
onSelect: k,
|
|
184
|
-
locale: v,
|
|
185
|
-
startMonth: R || new Date(1900, 0, 1),
|
|
186
|
-
endMonth: S || new Date(2100, 11, 31),
|
|
187
|
-
showOutsideDays: !0,
|
|
188
|
-
disabled: j,
|
|
189
|
-
className: "p-2",
|
|
190
|
-
required: !0,
|
|
191
|
-
classNames: {
|
|
192
|
-
root: "w-fit text-sm text-center",
|
|
193
|
-
weekday: "text-muted-foreground font-regular",
|
|
194
|
-
month_grid: "border-separate",
|
|
195
|
-
month_caption: "h-9 relative flex items-center w-full",
|
|
196
|
-
dropdowns: "absolute w-fit items-center justify-center z-10 left-1/2 flex -translate-x-1/2 top-1/2 -translate-y-1/2",
|
|
197
|
-
button_next: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
|
|
198
|
-
button_previous: "rounded-2xl border-none lg:hover:bg-neutral-050 transition-colors z-1 p-2 disabled:opacity-50 focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] focus-visible:ring-offset-1",
|
|
199
|
-
nav: "w-full h-9 top-0 left-0 absolute flex justify-between items-center gap-2",
|
|
200
|
-
selected: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
|
|
201
|
-
today: "bg-blue-050 border-[0.5px] text-blue-800 lg:hover:bg-blue-100",
|
|
202
|
-
outside: "bg-white text-neutral-200 border-[0.5px] border-neutral-000",
|
|
203
|
-
day_button: "text-sm h-9 w-9 whitespace-nowrap border-none focus-visible:ring-ring-default focus-visible:outline-hidden focus-visible:ring-[1.5px] rounded-2xl",
|
|
204
|
-
caption_label: "text-neutral-1000 text-base font-semibold leading-none self-center w-full",
|
|
205
|
-
disabled: "bg-white text-neutral-200 border-[0.5px] border-neutral-000 lg:hover:bg-white!",
|
|
206
|
-
day: "h-9 w-9 aspect-square text-sm rounded-2xl border-[0.5px] border-neutral-050 lg:hover:bg-blue-050 transition-colors p-0 whitespace-nowrap",
|
|
207
|
-
range_end: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
|
|
208
|
-
range_start: "bg-blue-800 text-white border-[0.5px] border-blue-800! lg:hover:bg-blue-900 transition-colors font-semibold",
|
|
209
|
-
range_middle: "bg-blue-050! border-[0.5px] border-blue-800! text-blue-800! lg:hover:bg-blue-100 transition-colors font-semibold"
|
|
210
|
-
},
|
|
211
|
-
components: {
|
|
212
|
-
Dropdown: H,
|
|
213
|
-
Chevron: ({ orientation: o, size: l }) => /* @__PURE__ */ e.jsx(J, { orientation: o, size: l })
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
)
|
|
217
|
-
}
|
|
218
|
-
)
|
|
219
|
-
] }),
|
|
220
|
-
b && x ? /* @__PURE__ */ e.jsx(
|
|
221
|
-
"span",
|
|
222
|
-
{
|
|
223
|
-
"aria-describedby": u.id,
|
|
224
|
-
"aria-invalid": "true",
|
|
225
|
-
className: "text-error-main text-label-md -mt-1",
|
|
226
|
-
children: b
|
|
227
|
-
}
|
|
228
|
-
) : /* @__PURE__ */ e.jsx(
|
|
229
|
-
"span",
|
|
230
|
-
{
|
|
231
|
-
className: D("text-muted-foreground -mt-1", {
|
|
232
|
-
"text-neutral-700": p
|
|
233
|
-
}),
|
|
234
|
-
"aria-describedby": u.id,
|
|
235
|
-
children: N
|
|
236
|
-
}
|
|
237
|
-
)
|
|
238
|
-
]
|
|
239
|
-
}
|
|
240
|
-
);
|
|
241
|
-
}
|
|
242
|
-
), Q = K;
|
|
243
|
-
Q.displayName = "DateRangePicker";
|
|
244
|
-
export {
|
|
245
|
-
Q as DateRangePicker
|
|
246
|
-
};
|