@moneymap/ui 0.0.4 → 0.0.5
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/README.md +1 -40
- package/dist/index.esm.js +20 -20
- package/dist/src/components/calendar/index.d.ts +1 -1
- package/dist/src/components/calendar/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/alert/index.tsx +1 -1
- package/src/components/calendar/index.tsx +211 -218
- package/src/index.ts +9 -9
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @moneymap/ui
|
|
2
2
|
|
|
3
|
-
> **⚠️ Tailwind CSS Required:** This library requires Tailwind CSS to be configured in your project. See [Setup](#setup-required) below.
|
|
3
|
+
> **⚠️ Tailwind CSS v3 Required:** This library requires Tailwind CSS to be configured in your project. See [Setup](#setup-required) below.
|
|
4
4
|
|
|
5
5
|
## Setup Required
|
|
6
6
|
|
|
@@ -113,45 +113,6 @@ module.exports = {
|
|
|
113
113
|
}
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
### Tailwind CSS v4 Setup (Beta)
|
|
117
|
-
|
|
118
|
-
1. **Install Tailwind CSS v4:**
|
|
119
|
-
|
|
120
|
-
```bash
|
|
121
|
-
npm install tailwindcss@next @tailwindcss/postcss@next
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
2. **Configure PostCSS** (`postcss.config.js`):
|
|
125
|
-
|
|
126
|
-
```javascript
|
|
127
|
-
module.exports = {
|
|
128
|
-
plugins: {
|
|
129
|
-
'@tailwindcss/postcss': {},
|
|
130
|
-
},
|
|
131
|
-
};
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
3. **Import Tailwind in your CSS:**
|
|
135
|
-
|
|
136
|
-
```css
|
|
137
|
-
@import 'tailwindcss';
|
|
138
|
-
|
|
139
|
-
@theme {
|
|
140
|
-
--color-border: oklch(0.9 0 0);
|
|
141
|
-
--color-input: oklch(0.9 0 0);
|
|
142
|
-
--color-ring: oklch(0.2 0 0);
|
|
143
|
-
--color-background: oklch(1 0 0);
|
|
144
|
-
--color-foreground: oklch(0.15 0 0);
|
|
145
|
-
/* Add other custom colors */
|
|
146
|
-
}
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
4. **Scan the library** - Tailwind v4 auto-detects imports, but you can configure it in your CSS:
|
|
150
|
-
|
|
151
|
-
```css
|
|
152
|
-
@source "../../node_modules/@moneymap/ui/**/*.{js,jsx,ts,tsx}";
|
|
153
|
-
```
|
|
154
|
-
|
|
155
116
|
---
|
|
156
117
|
|
|
157
118
|
# Maintainers
|
package/dist/index.esm.js
CHANGED
|
@@ -70,7 +70,7 @@ function _object_without_properties_loose$j(source, excluded) {
|
|
|
70
70
|
}
|
|
71
71
|
return target;
|
|
72
72
|
}
|
|
73
|
-
var alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm
|
|
73
|
+
var alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7', {
|
|
74
74
|
variants: {
|
|
75
75
|
variant: {
|
|
76
76
|
default: 'bg-card text-card-foreground',
|
|
@@ -11555,7 +11555,7 @@ function Calendar(_param) {
|
|
|
11555
11555
|
var defaultClassNames = getDefaultClassNames();
|
|
11556
11556
|
return jsx(DayPicker, _object_spread$2({
|
|
11557
11557
|
showOutsideDays: showOutsideDays,
|
|
11558
|
-
className: cn('bg-background group/calendar p-3 [--cell-size
|
|
11558
|
+
className: cn('bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw(_templateObject()), String.raw(_templateObject1()), className),
|
|
11559
11559
|
captionLayout: captionLayout,
|
|
11560
11560
|
formatters: _object_spread$2({
|
|
11561
11561
|
formatMonthDropdown: function(date) {
|
|
@@ -11566,30 +11566,30 @@ function Calendar(_param) {
|
|
|
11566
11566
|
}, formatters),
|
|
11567
11567
|
classNames: _object_spread$2({
|
|
11568
11568
|
root: cn('w-fit', defaultClassNames.root),
|
|
11569
|
-
months: cn('flex gap-4
|
|
11570
|
-
month: cn('flex flex-col
|
|
11571
|
-
nav: cn('
|
|
11569
|
+
months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
|
|
11570
|
+
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
|
|
11571
|
+
nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
|
|
11572
11572
|
button_previous: cn(buttonVariants({
|
|
11573
11573
|
variant: buttonVariant
|
|
11574
|
-
}), 'size-
|
|
11574
|
+
}), 'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50', defaultClassNames.button_previous),
|
|
11575
11575
|
button_next: cn(buttonVariants({
|
|
11576
11576
|
variant: buttonVariant
|
|
11577
|
-
}), 'size-
|
|
11578
|
-
month_caption: cn('flex
|
|
11579
|
-
dropdowns: cn('w-full
|
|
11580
|
-
dropdown_root: cn('
|
|
11581
|
-
dropdown: cn('absolute
|
|
11582
|
-
caption_label: cn('select-none font-medium', captionLayout === 'label' ? 'text-sm' : '
|
|
11577
|
+
}), 'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50', defaultClassNames.button_next),
|
|
11578
|
+
month_caption: cn('flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]', defaultClassNames.month_caption),
|
|
11579
|
+
dropdowns: cn('flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),
|
|
11580
|
+
dropdown_root: cn('has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border', defaultClassNames.dropdown_root),
|
|
11581
|
+
dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
|
|
11582
|
+
caption_label: cn('select-none font-medium', captionLayout === 'label' ? 'text-sm' : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5', defaultClassNames.caption_label),
|
|
11583
11583
|
table: 'w-full border-collapse',
|
|
11584
11584
|
weekdays: cn('flex', defaultClassNames.weekdays),
|
|
11585
|
-
weekday: cn('text-muted-foreground
|
|
11586
|
-
week: cn('flex w-full
|
|
11587
|
-
week_number_header: cn('
|
|
11588
|
-
week_number: cn('text-
|
|
11585
|
+
weekday: cn('text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal', defaultClassNames.weekday),
|
|
11586
|
+
week: cn('mt-2 flex w-full', defaultClassNames.week),
|
|
11587
|
+
week_number_header: cn('w-[--cell-size] select-none', defaultClassNames.week_number_header),
|
|
11588
|
+
week_number: cn('text-muted-foreground select-none text-[0.8rem]', defaultClassNames.week_number),
|
|
11589
11589
|
day: cn('relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', props.showWeekNumber ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md' : '[&:first-child[data-selected=true]_button]:rounded-l-md', defaultClassNames.day),
|
|
11590
|
-
range_start: cn('rounded-l-md
|
|
11590
|
+
range_start: cn('bg-accent rounded-l-md', defaultClassNames.range_start),
|
|
11591
11591
|
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
11592
|
-
range_end: cn('rounded-r-md
|
|
11592
|
+
range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),
|
|
11593
11593
|
today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
|
|
11594
11594
|
outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
|
|
11595
11595
|
disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
|
|
@@ -11633,7 +11633,7 @@ function Calendar(_param) {
|
|
|
11633
11633
|
]);
|
|
11634
11634
|
return jsx("td", _object_spread_props(_object_spread$2({}, props), {
|
|
11635
11635
|
children: jsx("div", {
|
|
11636
|
-
className: "flex size-
|
|
11636
|
+
className: "flex size-[--cell-size] items-center justify-center text-center",
|
|
11637
11637
|
children: children
|
|
11638
11638
|
})
|
|
11639
11639
|
}));
|
|
@@ -11664,7 +11664,7 @@ function CalendarDayButton(_param) {
|
|
|
11664
11664
|
"data-range-start": modifiers.range_start,
|
|
11665
11665
|
"data-range-end": modifiers.range_end,
|
|
11666
11666
|
"data-range-middle": modifiers.range_middle,
|
|
11667
|
-
className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50
|
|
11667
|
+
className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className)
|
|
11668
11668
|
}, props));
|
|
11669
11669
|
}
|
|
11670
11670
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DayButton, DayPicker } from 'react-day-picker';
|
|
3
3
|
import { Button } from '../button';
|
|
4
4
|
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
|
|
5
5
|
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAwB,MAAM,kBAAkB,CAAC;AAG9E,OAAO,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAEnD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAChE,2CAoJA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA+BxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
|
|
4
4
|
import { cn } from '../../lib/cn';
|
|
5
5
|
|
|
6
6
|
const alertVariants = cva(
|
|
7
|
-
'relative w-full rounded-lg border px-4 py-3 text-sm
|
|
7
|
+
'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
@@ -1,218 +1,211 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
ChevronDownIcon,
|
|
4
|
-
ChevronLeftIcon,
|
|
5
|
-
ChevronRightIcon,
|
|
6
|
-
} from 'lucide-react';
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
'
|
|
64
|
-
defaultClassNames.
|
|
65
|
-
),
|
|
66
|
-
|
|
67
|
-
'flex items-center justify-center
|
|
68
|
-
defaultClassNames.
|
|
69
|
-
),
|
|
70
|
-
|
|
71
|
-
'
|
|
72
|
-
defaultClassNames.
|
|
73
|
-
),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
defaultClassNames.
|
|
81
|
-
),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
defaultClassNames.
|
|
103
|
-
),
|
|
104
|
-
|
|
105
|
-
'
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
{...props}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
data-
|
|
199
|
-
data-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
)}
|
|
213
|
-
{...props}
|
|
214
|
-
/>
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
export { Calendar, CalendarDayButton };
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
ChevronDownIcon,
|
|
4
|
+
ChevronLeftIcon,
|
|
5
|
+
ChevronRightIcon,
|
|
6
|
+
} from 'lucide-react';
|
|
7
|
+
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
|
|
8
|
+
|
|
9
|
+
import { cn } from '../../lib/cn';
|
|
10
|
+
import { Button, buttonVariants } from '../button';
|
|
11
|
+
|
|
12
|
+
function Calendar({
|
|
13
|
+
className,
|
|
14
|
+
classNames,
|
|
15
|
+
showOutsideDays = true,
|
|
16
|
+
captionLayout = 'label',
|
|
17
|
+
buttonVariant = 'ghost',
|
|
18
|
+
formatters,
|
|
19
|
+
components,
|
|
20
|
+
...props
|
|
21
|
+
}: React.ComponentProps<typeof DayPicker> & {
|
|
22
|
+
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
|
23
|
+
}) {
|
|
24
|
+
const defaultClassNames = getDefaultClassNames();
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<DayPicker
|
|
28
|
+
showOutsideDays={showOutsideDays}
|
|
29
|
+
className={cn(
|
|
30
|
+
'bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
|
|
31
|
+
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
32
|
+
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
33
|
+
className,
|
|
34
|
+
)}
|
|
35
|
+
captionLayout={captionLayout}
|
|
36
|
+
formatters={{
|
|
37
|
+
formatMonthDropdown: (date) =>
|
|
38
|
+
date.toLocaleString('default', { month: 'short' }),
|
|
39
|
+
...formatters,
|
|
40
|
+
}}
|
|
41
|
+
classNames={{
|
|
42
|
+
root: cn('w-fit', defaultClassNames.root),
|
|
43
|
+
months: cn(
|
|
44
|
+
'relative flex flex-col gap-4 md:flex-row',
|
|
45
|
+
defaultClassNames.months,
|
|
46
|
+
),
|
|
47
|
+
month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
|
|
48
|
+
nav: cn(
|
|
49
|
+
'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
|
|
50
|
+
defaultClassNames.nav,
|
|
51
|
+
),
|
|
52
|
+
button_previous: cn(
|
|
53
|
+
buttonVariants({ variant: buttonVariant }),
|
|
54
|
+
'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
|
|
55
|
+
defaultClassNames.button_previous,
|
|
56
|
+
),
|
|
57
|
+
button_next: cn(
|
|
58
|
+
buttonVariants({ variant: buttonVariant }),
|
|
59
|
+
'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
|
|
60
|
+
defaultClassNames.button_next,
|
|
61
|
+
),
|
|
62
|
+
month_caption: cn(
|
|
63
|
+
'flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]',
|
|
64
|
+
defaultClassNames.month_caption,
|
|
65
|
+
),
|
|
66
|
+
dropdowns: cn(
|
|
67
|
+
'flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium',
|
|
68
|
+
defaultClassNames.dropdowns,
|
|
69
|
+
),
|
|
70
|
+
dropdown_root: cn(
|
|
71
|
+
'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border',
|
|
72
|
+
defaultClassNames.dropdown_root,
|
|
73
|
+
),
|
|
74
|
+
dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
|
|
75
|
+
caption_label: cn(
|
|
76
|
+
'select-none font-medium',
|
|
77
|
+
captionLayout === 'label'
|
|
78
|
+
? 'text-sm'
|
|
79
|
+
: '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5',
|
|
80
|
+
defaultClassNames.caption_label,
|
|
81
|
+
),
|
|
82
|
+
table: 'w-full border-collapse',
|
|
83
|
+
weekdays: cn('flex', defaultClassNames.weekdays),
|
|
84
|
+
weekday: cn(
|
|
85
|
+
'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
|
|
86
|
+
defaultClassNames.weekday,
|
|
87
|
+
),
|
|
88
|
+
week: cn('mt-2 flex w-full', defaultClassNames.week),
|
|
89
|
+
week_number_header: cn(
|
|
90
|
+
'w-[--cell-size] select-none',
|
|
91
|
+
defaultClassNames.week_number_header,
|
|
92
|
+
),
|
|
93
|
+
week_number: cn(
|
|
94
|
+
'text-muted-foreground select-none text-[0.8rem]',
|
|
95
|
+
defaultClassNames.week_number,
|
|
96
|
+
),
|
|
97
|
+
day: cn(
|
|
98
|
+
'relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
|
|
99
|
+
props.showWeekNumber
|
|
100
|
+
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
|
|
101
|
+
: '[&:first-child[data-selected=true]_button]:rounded-l-md',
|
|
102
|
+
defaultClassNames.day,
|
|
103
|
+
),
|
|
104
|
+
range_start: cn(
|
|
105
|
+
'bg-accent rounded-l-md',
|
|
106
|
+
defaultClassNames.range_start,
|
|
107
|
+
),
|
|
108
|
+
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
|
109
|
+
range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),
|
|
110
|
+
today: cn(
|
|
111
|
+
'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
|
|
112
|
+
defaultClassNames.today,
|
|
113
|
+
),
|
|
114
|
+
outside: cn(
|
|
115
|
+
'text-muted-foreground aria-selected:text-muted-foreground',
|
|
116
|
+
defaultClassNames.outside,
|
|
117
|
+
),
|
|
118
|
+
disabled: cn(
|
|
119
|
+
'text-muted-foreground opacity-50',
|
|
120
|
+
defaultClassNames.disabled,
|
|
121
|
+
),
|
|
122
|
+
hidden: cn('invisible', defaultClassNames.hidden),
|
|
123
|
+
...classNames,
|
|
124
|
+
}}
|
|
125
|
+
components={{
|
|
126
|
+
Root: ({ className, rootRef, ...props }) => {
|
|
127
|
+
return (
|
|
128
|
+
<div
|
|
129
|
+
data-slot="calendar"
|
|
130
|
+
ref={rootRef}
|
|
131
|
+
className={cn(className)}
|
|
132
|
+
{...props}
|
|
133
|
+
/>
|
|
134
|
+
);
|
|
135
|
+
},
|
|
136
|
+
Chevron: ({ className, orientation, ...props }) => {
|
|
137
|
+
if (orientation === 'left') {
|
|
138
|
+
return (
|
|
139
|
+
<ChevronLeftIcon className={cn('size-4', className)} {...props} />
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
if (orientation === 'right') {
|
|
144
|
+
return (
|
|
145
|
+
<ChevronRightIcon
|
|
146
|
+
className={cn('size-4', className)}
|
|
147
|
+
{...props}
|
|
148
|
+
/>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
return (
|
|
153
|
+
<ChevronDownIcon className={cn('size-4', className)} {...props} />
|
|
154
|
+
);
|
|
155
|
+
},
|
|
156
|
+
DayButton: CalendarDayButton,
|
|
157
|
+
WeekNumber: ({ children, ...props }) => {
|
|
158
|
+
return (
|
|
159
|
+
<td {...props}>
|
|
160
|
+
<div className="flex size-[--cell-size] items-center justify-center text-center">
|
|
161
|
+
{children}
|
|
162
|
+
</div>
|
|
163
|
+
</td>
|
|
164
|
+
);
|
|
165
|
+
},
|
|
166
|
+
...components,
|
|
167
|
+
}}
|
|
168
|
+
{...props}
|
|
169
|
+
/>
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
function CalendarDayButton({
|
|
174
|
+
className,
|
|
175
|
+
day,
|
|
176
|
+
modifiers,
|
|
177
|
+
...props
|
|
178
|
+
}: React.ComponentProps<typeof DayButton>) {
|
|
179
|
+
const defaultClassNames = getDefaultClassNames();
|
|
180
|
+
|
|
181
|
+
const ref = React.useRef<HTMLButtonElement>(null);
|
|
182
|
+
React.useEffect(() => {
|
|
183
|
+
if (modifiers.focused) ref.current?.focus();
|
|
184
|
+
}, [modifiers.focused]);
|
|
185
|
+
|
|
186
|
+
return (
|
|
187
|
+
<Button
|
|
188
|
+
ref={ref}
|
|
189
|
+
variant="ghost"
|
|
190
|
+
size="icon"
|
|
191
|
+
data-day={day.date.toLocaleDateString()}
|
|
192
|
+
data-selected-single={
|
|
193
|
+
modifiers.selected &&
|
|
194
|
+
!modifiers.range_start &&
|
|
195
|
+
!modifiers.range_end &&
|
|
196
|
+
!modifiers.range_middle
|
|
197
|
+
}
|
|
198
|
+
data-range-start={modifiers.range_start}
|
|
199
|
+
data-range-end={modifiers.range_end}
|
|
200
|
+
data-range-middle={modifiers.range_middle}
|
|
201
|
+
className={cn(
|
|
202
|
+
'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70',
|
|
203
|
+
defaultClassNames.day,
|
|
204
|
+
className,
|
|
205
|
+
)}
|
|
206
|
+
{...props}
|
|
207
|
+
/>
|
|
208
|
+
);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
export { Calendar, CalendarDayButton };
|
package/src/index.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export * from './components/alert';
|
|
2
|
-
export * from './components/alert-dialog';
|
|
3
|
-
export * from './components/badge';
|
|
4
|
-
export * from './components/button';
|
|
5
|
-
export * from './components/button-group';
|
|
6
|
-
export * from './components/calendar';
|
|
7
|
-
export * from './components/input';
|
|
8
|
-
export * from './components/separator';
|
|
9
|
-
export * from './components/textarea';
|
|
1
|
+
export * from './components/alert';
|
|
2
|
+
export * from './components/alert-dialog';
|
|
3
|
+
export * from './components/badge';
|
|
4
|
+
export * from './components/button';
|
|
5
|
+
export * from './components/button-group';
|
|
6
|
+
export * from './components/calendar';
|
|
7
|
+
export * from './components/input';
|
|
8
|
+
export * from './components/separator';
|
|
9
|
+
export * from './components/textarea';
|