@saasflare/ui 3.0.0 → 3.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/README.md CHANGED
@@ -115,7 +115,11 @@ light/dark surface variables, and motion tokens.
115
115
  > content: ["./node_modules/@saasflare/ui/dist/**/*.{js,mjs}", /* ... */]
116
116
  > ```
117
117
 
118
- ### 2. Wrap your app in `SaasflareShell` *(mandatory)*
118
+ ### 2. Make `SaasflareShell` your document root *(mandatory)*
119
+
120
+ `SaasflareShell` **is the document** — it renders `<html>` and `<body>`
121
+ itself, plus the design-system context inside. Do **not** wrap it in your
122
+ own `<html>`/`<body>` tags; replace them entirely.
119
123
 
120
124
  ```tsx
121
125
  // app/layout.tsx
@@ -125,24 +129,39 @@ import "./globals.css";
125
129
 
126
130
  export default function RootLayout({ children }: { children: React.ReactNode }) {
127
131
  return (
128
- <html lang="en" className={fontVariables} data-palette="saasflare" suppressHydrationWarning>
129
- <body>
130
- <SaasflareShell>{children}</SaasflareShell>
131
- </body>
132
- </html>
132
+ <SaasflareShell
133
+ lang="en"
134
+ palette="saasflare"
135
+ theme="dark"
136
+ className={fontVariables}
137
+ >
138
+ {children}
139
+ </SaasflareShell>
133
140
  );
134
141
  }
135
142
  ```
136
143
 
137
- > **⚠️ The wrapper is required, not optional.** `@saasflare/ui` uses
138
- > `LazyMotion features={domAnimation} strict` to keep the framer-motion bundle
139
- > tight. Animated components use the `m.*` API (e.g. `m.button`) which throws
140
- > at runtime if the `LazyMotion` provider is missing. `SaasflareShell` (or
141
- > `SaasflareProvider` directly) provides it. Without one, every `Button`,
142
- > `Card`, `Dialog`, etc. will error on mount.
143
-
144
- `SaasflareShell` also owns the theme class, smooth-scroll context, and the
145
- animation kill-switch context.
144
+ `SaasflareShell` accepts `palette`, `theme`, `surface`, `radius`,
145
+ `animated`, `smoothScrolling`, `storageKey`, plus a `lang`, `className`
146
+ (applied to `<html>`), `bodyClassName`, and a `head` slot for `<head>`
147
+ content. The chosen `palette`/`surface`/`radius`/`animated` props are
148
+ baked into the SSR HTML as `data-*` attributes, so there is **zero FOUT**
149
+ and the pre-hydration script is disabled by default.
150
+
151
+ > **⚠️ Required, not optional.** `@saasflare/ui` uses `LazyMotion
152
+ > features={domAnimation} strict` to keep the motion bundle tight.
153
+ > Animated components use the `m.*` API (e.g. `m.button`) which throws at
154
+ > runtime if `LazyMotion` is missing. `SaasflareShell` (or
155
+ > `SaasflareProvider` directly, when you need to own `<html>`/`<body>`
156
+ > yourself) provides it. Without one, every `Button`, `Card`, `Dialog`,
157
+ > etc. will error on mount.
158
+
159
+ **When to use `SaasflareProvider` instead:** if you need a runtime palette
160
+ switcher (user picks a palette via a toggle, persisted in localStorage),
161
+ keep your own `<html>`/`<body>` and wrap children in `SaasflareProvider`.
162
+ The provider's pre-hydration script reads localStorage before paint.
163
+ `SaasflareShell` is for brand-locked apps where the palette is decided at
164
+ SSR time.
146
165
 
147
166
  ### 3. Use components
148
167
 
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { useReducedMotion, noMotion, springBouncy } from './chunk-W53NTFPB.mjs';
3
- import { cn } from './chunk-S26666D6.mjs';
3
+ import { cn } from './chunk-BIU2MD4T.mjs';
4
4
  import { m } from 'motion/react';
5
5
  import * as DialogPrimitive from '@radix-ui/react-dialog';
6
6
  import { XIcon } from 'lucide-react';
@@ -0,0 +1,56 @@
1
+ import { clsx } from 'clsx';
2
+ import { twMerge } from 'tailwind-merge';
3
+ import 'react';
4
+ import 'class-variance-authority';
5
+
6
+ // src/lib/utils.ts
7
+ function cn(...inputs) {
8
+ return twMerge(clsx(inputs));
9
+ }
10
+
11
+ // src/lib/color.ts
12
+ function hexToOklch(hex) {
13
+ const normalized = normalizeHex(hex);
14
+ if (!normalized) return null;
15
+ const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
16
+ const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
17
+ const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
18
+ const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
19
+ const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
20
+ const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
21
+ const lc = Math.cbrt(l_);
22
+ const mc = Math.cbrt(m_);
23
+ const sc = Math.cbrt(s_);
24
+ const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
25
+ const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
26
+ const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
27
+ const c = Math.sqrt(a * a + b2 * b2);
28
+ let h = Math.atan2(b2, a) * 180 / Math.PI;
29
+ if (h < 0) h += 360;
30
+ return { l: L, c, h };
31
+ }
32
+ function normalizeHex(input) {
33
+ if (typeof input !== "string") return null;
34
+ const s = input.trim().replace(/^#/, "").toLowerCase();
35
+ if (/^[0-9a-f]{3}$/.test(s)) {
36
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
37
+ }
38
+ if (/^[0-9a-f]{4}$/.test(s)) {
39
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
40
+ }
41
+ if (/^[0-9a-f]{6}$/.test(s)) {
42
+ return s;
43
+ }
44
+ if (/^[0-9a-f]{8}$/.test(s)) {
45
+ return s.slice(0, 6);
46
+ }
47
+ return null;
48
+ }
49
+ function srgbToLinear(c) {
50
+ return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
51
+ }
52
+ function isHex(input) {
53
+ return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
54
+ }
55
+
56
+ export { cn, hexToOklch, isHex };
@@ -0,0 +1,60 @@
1
+ 'use strict';
2
+
3
+ var clsx = require('clsx');
4
+ var tailwindMerge = require('tailwind-merge');
5
+ require('react');
6
+ require('class-variance-authority');
7
+
8
+ // src/lib/utils.ts
9
+ function cn(...inputs) {
10
+ return tailwindMerge.twMerge(clsx.clsx(inputs));
11
+ }
12
+
13
+ // src/lib/color.ts
14
+ function hexToOklch(hex) {
15
+ const normalized = normalizeHex(hex);
16
+ if (!normalized) return null;
17
+ const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
18
+ const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
19
+ const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
20
+ const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
21
+ const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
22
+ const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
23
+ const lc = Math.cbrt(l_);
24
+ const mc = Math.cbrt(m_);
25
+ const sc = Math.cbrt(s_);
26
+ const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
27
+ const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
28
+ const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
29
+ const c = Math.sqrt(a * a + b2 * b2);
30
+ let h = Math.atan2(b2, a) * 180 / Math.PI;
31
+ if (h < 0) h += 360;
32
+ return { l: L, c, h };
33
+ }
34
+ function normalizeHex(input) {
35
+ if (typeof input !== "string") return null;
36
+ const s = input.trim().replace(/^#/, "").toLowerCase();
37
+ if (/^[0-9a-f]{3}$/.test(s)) {
38
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
39
+ }
40
+ if (/^[0-9a-f]{4}$/.test(s)) {
41
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
42
+ }
43
+ if (/^[0-9a-f]{6}$/.test(s)) {
44
+ return s;
45
+ }
46
+ if (/^[0-9a-f]{8}$/.test(s)) {
47
+ return s.slice(0, 6);
48
+ }
49
+ return null;
50
+ }
51
+ function srgbToLinear(c) {
52
+ return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
53
+ }
54
+ function isHex(input) {
55
+ return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
56
+ }
57
+
58
+ exports.cn = cn;
59
+ exports.hexToOklch = hexToOklch;
60
+ exports.isHex = isHex;
@@ -1,58 +1,14 @@
1
1
  "use client";
2
2
  import { useReducedMotion, noMotion, spring } from './chunk-W53NTFPB.mjs';
3
- import { cn } from './chunk-S26666D6.mjs';
4
- import { cva } from 'class-variance-authority';
3
+ import { cn, isHex, hexToOklch } from './chunk-BIU2MD4T.mjs';
5
4
  import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
6
5
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
7
6
  import { ThemeProvider, useTheme } from 'next-themes';
8
7
  import { m, LazyMotion, domAnimation } from 'motion/react';
9
8
  import { Loader2Icon } from 'lucide-react';
9
+ import { cva } from 'class-variance-authority';
10
10
  import * as Slot from '@radix-ui/react-slot';
11
11
 
12
- // src/lib/color.ts
13
- function hexToOklch(hex) {
14
- const normalized = normalizeHex(hex);
15
- if (!normalized) return null;
16
- const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
17
- const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
18
- const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
19
- const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
20
- const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
21
- const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
22
- const lc = Math.cbrt(l_);
23
- const mc = Math.cbrt(m_);
24
- const sc = Math.cbrt(s_);
25
- const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
26
- const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
27
- const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
28
- const c = Math.sqrt(a * a + b2 * b2);
29
- let h = Math.atan2(b2, a) * 180 / Math.PI;
30
- if (h < 0) h += 360;
31
- return { l: L, c, h };
32
- }
33
- function normalizeHex(input) {
34
- if (typeof input !== "string") return null;
35
- const s = input.trim().replace(/^#/, "").toLowerCase();
36
- if (/^[0-9a-f]{3}$/.test(s)) {
37
- return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
38
- }
39
- if (/^[0-9a-f]{4}$/.test(s)) {
40
- return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
41
- }
42
- if (/^[0-9a-f]{6}$/.test(s)) {
43
- return s;
44
- }
45
- if (/^[0-9a-f]{8}$/.test(s)) {
46
- return s.slice(0, 6);
47
- }
48
- return null;
49
- }
50
- function srgbToLinear(c) {
51
- return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
52
- }
53
- function isHex(input) {
54
- return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
55
- }
56
12
  var AnimationContext = createContext(
57
13
  void 0
58
14
  );
@@ -2,7 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
5
- var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
5
+ var chunkM3ICCPCU_js = require('./chunk-M3ICCPCU.js');
6
6
  var react = require('motion/react');
7
7
  var DialogPrimitive = require('@radix-ui/react-dialog');
8
8
  var lucideReact = require('lucide-react');
@@ -56,7 +56,7 @@ function DialogOverlay({
56
56
  DialogPrimitive__namespace.Overlay,
57
57
  {
58
58
  "data-slot": "dialog-overlay",
59
- className: chunkJOVJRQO3_js.cn(
59
+ className: chunkM3ICCPCU_js.cn(
60
60
  "fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
61
61
  className
62
62
  ),
@@ -85,7 +85,7 @@ function DialogContent({
85
85
  animate: { opacity: 1, scale: 1, y: 0 },
86
86
  exit: reduced ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
87
87
  transition: reduced ? chunkCWW36RYE_js.noMotion : chunkCWW36RYE_js.springBouncy,
88
- className: chunkJOVJRQO3_js.cn(
88
+ className: chunkM3ICCPCU_js.cn(
89
89
  "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg",
90
90
  className
91
91
  ),
@@ -107,7 +107,7 @@ function DialogHeader({ className, ...props }) {
107
107
  "div",
108
108
  {
109
109
  "data-slot": "dialog-header",
110
- className: chunkJOVJRQO3_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
110
+ className: chunkM3ICCPCU_js.cn("flex flex-col gap-2 text-center sm:text-left", className),
111
111
  ...props
112
112
  }
113
113
  );
@@ -117,7 +117,7 @@ function DialogFooter({ className, ...props }) {
117
117
  "div",
118
118
  {
119
119
  "data-slot": "dialog-footer",
120
- className: chunkJOVJRQO3_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
120
+ className: chunkM3ICCPCU_js.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
121
121
  ...props
122
122
  }
123
123
  );
@@ -130,7 +130,7 @@ function DialogTitle({
130
130
  DialogPrimitive__namespace.Title,
131
131
  {
132
132
  "data-slot": "dialog-title",
133
- className: chunkJOVJRQO3_js.cn("text-lg leading-none font-semibold", className),
133
+ className: chunkM3ICCPCU_js.cn("text-lg leading-none font-semibold", className),
134
134
  ...props
135
135
  }
136
136
  );
@@ -143,7 +143,7 @@ function DialogDescription({
143
143
  DialogPrimitive__namespace.Description,
144
144
  {
145
145
  "data-slot": "dialog-description",
146
- className: chunkJOVJRQO3_js.cn("text-sm text-muted-foreground", className),
146
+ className: chunkM3ICCPCU_js.cn("text-sm text-muted-foreground", className),
147
147
  ...props
148
148
  }
149
149
  );
@@ -2,13 +2,13 @@
2
2
  'use strict';
3
3
 
4
4
  var chunkCWW36RYE_js = require('./chunk-CWW36RYE.js');
5
- var chunkJOVJRQO3_js = require('./chunk-JOVJRQO3.js');
6
- var classVarianceAuthority = require('class-variance-authority');
5
+ var chunkM3ICCPCU_js = require('./chunk-M3ICCPCU.js');
7
6
  var react = require('react');
8
7
  var jsxRuntime = require('react/jsx-runtime');
9
8
  var nextThemes = require('next-themes');
10
9
  var react$1 = require('motion/react');
11
10
  var lucideReact = require('lucide-react');
11
+ var classVarianceAuthority = require('class-variance-authority');
12
12
  var Slot = require('@radix-ui/react-slot');
13
13
 
14
14
  function _interopNamespace(e) {
@@ -31,50 +31,6 @@ function _interopNamespace(e) {
31
31
 
32
32
  var Slot__namespace = /*#__PURE__*/_interopNamespace(Slot);
33
33
 
34
- // src/lib/color.ts
35
- function hexToOklch(hex) {
36
- const normalized = normalizeHex(hex);
37
- if (!normalized) return null;
38
- const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
39
- const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
40
- const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
41
- const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
42
- const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
43
- const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
44
- const lc = Math.cbrt(l_);
45
- const mc = Math.cbrt(m_);
46
- const sc = Math.cbrt(s_);
47
- const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
48
- const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
49
- const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
50
- const c = Math.sqrt(a * a + b2 * b2);
51
- let h = Math.atan2(b2, a) * 180 / Math.PI;
52
- if (h < 0) h += 360;
53
- return { l: L, c, h };
54
- }
55
- function normalizeHex(input) {
56
- if (typeof input !== "string") return null;
57
- const s = input.trim().replace(/^#/, "").toLowerCase();
58
- if (/^[0-9a-f]{3}$/.test(s)) {
59
- return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
60
- }
61
- if (/^[0-9a-f]{4}$/.test(s)) {
62
- return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
63
- }
64
- if (/^[0-9a-f]{6}$/.test(s)) {
65
- return s;
66
- }
67
- if (/^[0-9a-f]{8}$/.test(s)) {
68
- return s.slice(0, 6);
69
- }
70
- return null;
71
- }
72
- function srgbToLinear(c) {
73
- return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
74
- }
75
- function isHex(input) {
76
- return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
77
- }
78
34
  var AnimationContext = react.createContext(
79
35
  void 0
80
36
  );
@@ -233,8 +189,8 @@ function useSaasflareTheme() {
233
189
  return react.useContext(SaasflareThemeContext);
234
190
  }
235
191
  function applyColorAxis(root, prefix, value, injected) {
236
- if (isHex(value)) {
237
- const oklch = hexToOklch(value);
192
+ if (chunkM3ICCPCU_js.isHex(value)) {
193
+ const oklch = chunkM3ICCPCU_js.hexToOklch(value);
238
194
  if (oklch) {
239
195
  const hKey = `--${prefix}-h`;
240
196
  const cKey = `--${prefix}-c`;
@@ -509,7 +465,7 @@ function Button({
509
465
  whileHover: motionDisabled ? void 0 : { scale: 1.02 },
510
466
  whileTap: motionDisabled ? void 0 : { scale: 0.97 },
511
467
  transition,
512
- className: chunkJOVJRQO3_js.cn(
468
+ className: chunkM3ICCPCU_js.cn(
513
469
  buttonVariants({ variant: resolvedVariant, size }),
514
470
  fullWidth && "w-full",
515
471
  className
@@ -530,7 +486,7 @@ function Button({
530
486
  whileHover: motionDisabled ? void 0 : { scale: 1.02 },
531
487
  whileTap: motionDisabled ? void 0 : { scale: 0.97 },
532
488
  transition,
533
- className: chunkJOVJRQO3_js.cn(
489
+ className: chunkM3ICCPCU_js.cn(
534
490
  buttonVariants({ variant: resolvedVariant, size }),
535
491
  fullWidth && "w-full",
536
492
  className
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
- var chunkOYH6LQWR_js = require('../chunk-OYH6LQWR.js');
4
+ var chunkYAE5VBWJ_js = require('../chunk-YAE5VBWJ.js');
5
5
  require('../chunk-CWW36RYE.js');
6
- var chunkJOVJRQO3_js = require('../chunk-JOVJRQO3.js');
6
+ var chunkM3ICCPCU_js = require('../chunk-M3ICCPCU.js');
7
7
  var React = require('react');
8
8
  var lucideReact = require('lucide-react');
9
9
  var reactDayPicker = require('react-day-picker');
@@ -44,7 +44,7 @@ function Calendar({
44
44
  reactDayPicker.DayPicker,
45
45
  {
46
46
  showOutsideDays,
47
- className: chunkJOVJRQO3_js.cn(
47
+ className: chunkM3ICCPCU_js.cn(
48
48
  "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
49
49
  String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
50
50
  String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
@@ -56,86 +56,86 @@ function Calendar({
56
56
  ...formatters
57
57
  },
58
58
  classNames: {
59
- root: chunkJOVJRQO3_js.cn("w-fit", defaultClassNames.root),
60
- months: chunkJOVJRQO3_js.cn(
59
+ root: chunkM3ICCPCU_js.cn("w-fit", defaultClassNames.root),
60
+ months: chunkM3ICCPCU_js.cn(
61
61
  "relative flex flex-col gap-4 md:flex-row",
62
62
  defaultClassNames.months
63
63
  ),
64
- month: chunkJOVJRQO3_js.cn("flex w-full flex-col gap-4", defaultClassNames.month),
65
- nav: chunkJOVJRQO3_js.cn(
64
+ month: chunkM3ICCPCU_js.cn("flex w-full flex-col gap-4", defaultClassNames.month),
65
+ nav: chunkM3ICCPCU_js.cn(
66
66
  "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
67
67
  defaultClassNames.nav
68
68
  ),
69
- button_previous: chunkJOVJRQO3_js.cn(
70
- chunkOYH6LQWR_js.buttonVariants({ variant: buttonVariant }),
69
+ button_previous: chunkM3ICCPCU_js.cn(
70
+ chunkYAE5VBWJ_js.buttonVariants({ variant: buttonVariant }),
71
71
  "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
72
72
  defaultClassNames.button_previous
73
73
  ),
74
- button_next: chunkJOVJRQO3_js.cn(
75
- chunkOYH6LQWR_js.buttonVariants({ variant: buttonVariant }),
74
+ button_next: chunkM3ICCPCU_js.cn(
75
+ chunkYAE5VBWJ_js.buttonVariants({ variant: buttonVariant }),
76
76
  "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
77
77
  defaultClassNames.button_next
78
78
  ),
79
- month_caption: chunkJOVJRQO3_js.cn(
79
+ month_caption: chunkM3ICCPCU_js.cn(
80
80
  "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
81
81
  defaultClassNames.month_caption
82
82
  ),
83
- dropdowns: chunkJOVJRQO3_js.cn(
83
+ dropdowns: chunkM3ICCPCU_js.cn(
84
84
  "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
85
85
  defaultClassNames.dropdowns
86
86
  ),
87
- dropdown_root: chunkJOVJRQO3_js.cn(
87
+ dropdown_root: chunkM3ICCPCU_js.cn(
88
88
  "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
89
89
  defaultClassNames.dropdown_root
90
90
  ),
91
- dropdown: chunkJOVJRQO3_js.cn(
91
+ dropdown: chunkM3ICCPCU_js.cn(
92
92
  "absolute inset-0 bg-popover opacity-0",
93
93
  defaultClassNames.dropdown
94
94
  ),
95
- caption_label: chunkJOVJRQO3_js.cn(
95
+ caption_label: chunkM3ICCPCU_js.cn(
96
96
  "font-medium select-none",
97
97
  captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
98
98
  defaultClassNames.caption_label
99
99
  ),
100
100
  table: "w-full border-collapse",
101
- weekdays: chunkJOVJRQO3_js.cn("flex", defaultClassNames.weekdays),
102
- weekday: chunkJOVJRQO3_js.cn(
101
+ weekdays: chunkM3ICCPCU_js.cn("flex", defaultClassNames.weekdays),
102
+ weekday: chunkM3ICCPCU_js.cn(
103
103
  "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
104
104
  defaultClassNames.weekday
105
105
  ),
106
- week: chunkJOVJRQO3_js.cn("mt-2 flex w-full", defaultClassNames.week),
107
- week_number_header: chunkJOVJRQO3_js.cn(
106
+ week: chunkM3ICCPCU_js.cn("mt-2 flex w-full", defaultClassNames.week),
107
+ week_number_header: chunkM3ICCPCU_js.cn(
108
108
  "w-(--cell-size) select-none",
109
109
  defaultClassNames.week_number_header
110
110
  ),
111
- week_number: chunkJOVJRQO3_js.cn(
111
+ week_number: chunkM3ICCPCU_js.cn(
112
112
  "text-[0.8rem] text-muted-foreground select-none",
113
113
  defaultClassNames.week_number
114
114
  ),
115
- day: chunkJOVJRQO3_js.cn(
115
+ day: chunkM3ICCPCU_js.cn(
116
116
  "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
117
117
  props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
118
118
  defaultClassNames.day
119
119
  ),
120
- range_start: chunkJOVJRQO3_js.cn(
120
+ range_start: chunkM3ICCPCU_js.cn(
121
121
  "rounded-l-md bg-accent",
122
122
  defaultClassNames.range_start
123
123
  ),
124
- range_middle: chunkJOVJRQO3_js.cn("rounded-none", defaultClassNames.range_middle),
125
- range_end: chunkJOVJRQO3_js.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
126
- today: chunkJOVJRQO3_js.cn(
124
+ range_middle: chunkM3ICCPCU_js.cn("rounded-none", defaultClassNames.range_middle),
125
+ range_end: chunkM3ICCPCU_js.cn("rounded-r-md bg-accent", defaultClassNames.range_end),
126
+ today: chunkM3ICCPCU_js.cn(
127
127
  "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
128
128
  defaultClassNames.today
129
129
  ),
130
- outside: chunkJOVJRQO3_js.cn(
130
+ outside: chunkM3ICCPCU_js.cn(
131
131
  "text-muted-foreground aria-selected:text-muted-foreground",
132
132
  defaultClassNames.outside
133
133
  ),
134
- disabled: chunkJOVJRQO3_js.cn(
134
+ disabled: chunkM3ICCPCU_js.cn(
135
135
  "text-muted-foreground opacity-50",
136
136
  defaultClassNames.disabled
137
137
  ),
138
- hidden: chunkJOVJRQO3_js.cn("invisible", defaultClassNames.hidden),
138
+ hidden: chunkM3ICCPCU_js.cn("invisible", defaultClassNames.hidden),
139
139
  ...classNames
140
140
  },
141
141
  components: {
@@ -145,25 +145,25 @@ function Calendar({
145
145
  {
146
146
  "data-slot": "calendar",
147
147
  ref: rootRef,
148
- className: chunkJOVJRQO3_js.cn(className2),
148
+ className: chunkM3ICCPCU_js.cn(className2),
149
149
  ...props2
150
150
  }
151
151
  );
152
152
  },
153
153
  Chevron: ({ className: className2, orientation, ...props2 }) => {
154
154
  if (orientation === "left") {
155
- return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: chunkJOVJRQO3_js.cn("size-4", className2), ...props2 });
155
+ return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: chunkM3ICCPCU_js.cn("size-4", className2), ...props2 });
156
156
  }
157
157
  if (orientation === "right") {
158
158
  return /* @__PURE__ */ jsxRuntime.jsx(
159
159
  lucideReact.ChevronRightIcon,
160
160
  {
161
- className: chunkJOVJRQO3_js.cn("size-4", className2),
161
+ className: chunkM3ICCPCU_js.cn("size-4", className2),
162
162
  ...props2
163
163
  }
164
164
  );
165
165
  }
166
- return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: chunkJOVJRQO3_js.cn("size-4", className2), ...props2 });
166
+ return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: chunkM3ICCPCU_js.cn("size-4", className2), ...props2 });
167
167
  },
168
168
  DayButton: CalendarDayButton,
169
169
  WeekNumber: ({ children, ...props2 }) => {
@@ -187,7 +187,7 @@ function CalendarDayButton({
187
187
  if (modifiers.focused) ref.current?.focus();
188
188
  }, [modifiers.focused]);
189
189
  return /* @__PURE__ */ jsxRuntime.jsx(
190
- chunkOYH6LQWR_js.Button,
190
+ chunkYAE5VBWJ_js.Button,
191
191
  {
192
192
  ref,
193
193
  variant: "ghost",
@@ -197,7 +197,7 @@ function CalendarDayButton({
197
197
  "data-range-start": modifiers.range_start,
198
198
  "data-range-end": modifiers.range_end,
199
199
  "data-range-middle": modifiers.range_middle,
200
- className: chunkJOVJRQO3_js.cn(
200
+ className: chunkM3ICCPCU_js.cn(
201
201
  "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
202
202
  defaultClassNames.day,
203
203
  className
@@ -1,7 +1,7 @@
1
1
  "use client";
2
- import { buttonVariants, Button } from '../chunk-QWLQV6FS.mjs';
2
+ import { buttonVariants, Button } from '../chunk-ORB66UYT.mjs';
3
3
  import '../chunk-W53NTFPB.mjs';
4
- import { cn } from '../chunk-S26666D6.mjs';
4
+ import { cn } from '../chunk-BIU2MD4T.mjs';
5
5
  import * as React from 'react';
6
6
  import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
7
7
  import { getDefaultClassNames, DayPicker } from 'react-day-picker';