@saasflare/ui 3.0.2 → 3.1.1

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.
Files changed (51) hide show
  1. package/dist/button-0Bdl7Nqm.d.ts +87 -0
  2. package/dist/button-Brb4BhPO.d.mts +87 -0
  3. package/dist/{chunk-XXT4HKND.js → chunk-4BOMMZEY.js} +20 -13
  4. package/dist/{chunk-YAE5VBWJ.js → chunk-D5LKWKG7.js} +96 -152
  5. package/dist/chunk-DNLCSV5M.js +151 -0
  6. package/dist/{chunk-W53NTFPB.mjs → chunk-EJHYM2HP.mjs} +7 -16
  7. package/dist/chunk-FT66KYRN.js +30 -0
  8. package/dist/{chunk-2DNKXA5A.mjs → chunk-RW2S3KNB.mjs} +14 -7
  9. package/dist/chunk-WPOOC2FX.mjs +128 -0
  10. package/dist/{chunk-ORB66UYT.mjs → chunk-WRONFPRI.mjs} +66 -121
  11. package/dist/{dialog-CwyBJeNl.d.mts → dialog-BmY55WSX.d.ts} +4 -1
  12. package/dist/{dialog-CwyBJeNl.d.ts → dialog-CcaHMAsS.d.mts} +4 -1
  13. package/dist/entries/calendar.d.mts +5 -3
  14. package/dist/entries/calendar.d.ts +5 -3
  15. package/dist/entries/calendar.js +44 -36
  16. package/dist/entries/calendar.mjs +11 -3
  17. package/dist/entries/carousel.d.mts +4 -3
  18. package/dist/entries/carousel.d.ts +4 -3
  19. package/dist/entries/carousel.js +18 -11
  20. package/dist/entries/carousel.mjs +11 -4
  21. package/dist/entries/chart.d.mts +4 -2
  22. package/dist/entries/chart.d.ts +4 -2
  23. package/dist/entries/chart.js +17 -10
  24. package/dist/entries/chart.mjs +8 -1
  25. package/dist/entries/command.d.mts +5 -2
  26. package/dist/entries/command.d.ts +5 -2
  27. package/dist/entries/command.js +25 -18
  28. package/dist/entries/command.mjs +12 -5
  29. package/dist/entries/drawer.d.mts +4 -1
  30. package/dist/entries/drawer.d.ts +4 -1
  31. package/dist/entries/drawer.js +15 -8
  32. package/dist/entries/drawer.mjs +9 -2
  33. package/dist/entries/input-otp.d.mts +4 -2
  34. package/dist/entries/input-otp.d.ts +4 -2
  35. package/dist/entries/input-otp.js +13 -6
  36. package/dist/entries/input-otp.mjs +10 -3
  37. package/dist/entries/resizable.d.mts +3 -1
  38. package/dist/entries/resizable.d.ts +3 -1
  39. package/dist/entries/resizable.js +12 -5
  40. package/dist/entries/resizable.mjs +10 -3
  41. package/dist/index.d.mts +181 -79
  42. package/dist/index.d.ts +181 -79
  43. package/dist/index.js +807 -476
  44. package/dist/index.mjs +498 -171
  45. package/dist/{button-DUQJ0X7e.d.mts → use-saasflare-props-NrM2Glmp.d.mts} +1 -86
  46. package/dist/{button-DUQJ0X7e.d.ts → use-saasflare-props-NrM2Glmp.d.ts} +1 -86
  47. package/package.json +1 -1
  48. package/styles/theme.css +1 -1
  49. package/dist/chunk-BIU2MD4T.mjs +0 -56
  50. package/dist/chunk-CWW36RYE.js +0 -59
  51. package/dist/chunk-M3ICCPCU.js +0 -60
@@ -0,0 +1,151 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkFT66KYRN_js = require('./chunk-FT66KYRN.js');
5
+ var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
6
+ var lucideReact = require('lucide-react');
7
+ var react = require('motion/react');
8
+ var classVarianceAuthority = require('class-variance-authority');
9
+ var Slot = require('@radix-ui/react-slot');
10
+ var jsxRuntime = require('react/jsx-runtime');
11
+
12
+ function _interopNamespace(e) {
13
+ if (e && e.__esModule) return e;
14
+ var n = Object.create(null);
15
+ if (e) {
16
+ Object.keys(e).forEach(function (k) {
17
+ if (k !== 'default') {
18
+ var d = Object.getOwnPropertyDescriptor(e, k);
19
+ Object.defineProperty(n, k, d.get ? d : {
20
+ enumerable: true,
21
+ get: function () { return e[k]; }
22
+ });
23
+ }
24
+ });
25
+ }
26
+ n.default = e;
27
+ return Object.freeze(n);
28
+ }
29
+
30
+ var Slot__namespace = /*#__PURE__*/_interopNamespace(Slot);
31
+
32
+ var MotionSlot = react.m.create(Slot__namespace.Root);
33
+ var LEGACY_VARIANT_MAP = {
34
+ default: { variant: "solid", intent: "primary" },
35
+ destructive: { variant: "solid", intent: "danger" },
36
+ secondary: { variant: "soft", intent: "neutral" }
37
+ };
38
+ var buttonVariants = classVarianceAuthority.cva(
39
+ "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
40
+ {
41
+ variants: {
42
+ variant: {
43
+ solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
44
+ soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
45
+ outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
46
+ ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
47
+ link: "text-[var(--intent)] underline-offset-4 hover:underline",
48
+ glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
49
+ shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
50
+ },
51
+ size: {
52
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
53
+ sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
54
+ md: "h-9 px-4 py-2 has-[>svg]:px-3",
55
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
56
+ xl: "h-12 rounded-lg px-8 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5",
57
+ icon: "size-9",
58
+ "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
59
+ "icon-sm": "size-8",
60
+ "icon-lg": "size-10"
61
+ }
62
+ },
63
+ defaultVariants: {
64
+ variant: "solid",
65
+ size: "md"
66
+ }
67
+ }
68
+ );
69
+ function Button({
70
+ className,
71
+ variant: variantProp,
72
+ size = "md",
73
+ intent: intentProp = "primary",
74
+ asChild = false,
75
+ loading = false,
76
+ fullWidth = false,
77
+ surface,
78
+ radius,
79
+ animated,
80
+ disabled,
81
+ children,
82
+ ...props
83
+ }) {
84
+ const sf = chunkD5LKWKG7_js.useSaasflareProps({ surface, radius, animated });
85
+ const motion = chunkFT66KYRN_js.useSaasflareMotion(sf.animated, chunkFT66KYRN_js.spring, disabled ?? false, loading);
86
+ const effectiveVariant = variantProp ?? (sf.surface === "glass" ? "glass" : "solid");
87
+ let resolvedVariant = effectiveVariant;
88
+ let resolvedIntent = intentProp;
89
+ const legacy = LEGACY_VARIANT_MAP[effectiveVariant];
90
+ if (legacy) {
91
+ resolvedVariant = legacy.variant;
92
+ if (legacy.intent) {
93
+ resolvedIntent = legacy.intent;
94
+ }
95
+ }
96
+ if (asChild) {
97
+ return /* @__PURE__ */ jsxRuntime.jsx(
98
+ MotionSlot,
99
+ {
100
+ ...props,
101
+ "data-slot": "button",
102
+ "data-variant": resolvedVariant,
103
+ "data-intent": resolvedIntent,
104
+ "data-size": size,
105
+ "data-surface": sf.surface,
106
+ "data-radius": sf.radius,
107
+ "data-animated": String(sf.animated),
108
+ whileHover: motion.disabled ? void 0 : { scale: 1.02 },
109
+ whileTap: motion.disabled ? void 0 : { scale: 0.97 },
110
+ transition: motion.transition,
111
+ className: chunkD5LKWKG7_js.cn(
112
+ buttonVariants({ variant: resolvedVariant, size }),
113
+ fullWidth && "w-full",
114
+ className
115
+ ),
116
+ children
117
+ }
118
+ );
119
+ }
120
+ return /* @__PURE__ */ jsxRuntime.jsxs(
121
+ react.m.button,
122
+ {
123
+ "data-slot": "button",
124
+ "data-variant": resolvedVariant,
125
+ "data-intent": resolvedIntent,
126
+ "data-size": size,
127
+ "data-surface": sf.surface,
128
+ "data-radius": sf.radius,
129
+ "data-animated": String(sf.animated),
130
+ whileHover: motion.disabled ? void 0 : { scale: 1.02 },
131
+ whileTap: motion.disabled ? void 0 : { scale: 0.97 },
132
+ transition: motion.transition,
133
+ className: chunkD5LKWKG7_js.cn(
134
+ buttonVariants({ variant: resolvedVariant, size }),
135
+ fullWidth && "w-full",
136
+ className
137
+ ),
138
+ disabled,
139
+ "aria-busy": loading || void 0,
140
+ "aria-disabled": disabled || void 0,
141
+ ...props,
142
+ children: [
143
+ loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "animate-spin", "aria-hidden": "true" }),
144
+ children
145
+ ]
146
+ }
147
+ );
148
+ }
149
+
150
+ exports.Button = Button;
151
+ exports.buttonVariants = buttonVariants;
@@ -1,18 +1,4 @@
1
- "use client";
2
- import * as React from 'react';
3
-
4
- // src/hooks/use-reduced-motion.ts
5
- var QUERY = "(prefers-reduced-motion: reduce)";
6
- var subscribe = (cb) => {
7
- const mql = window.matchMedia(QUERY);
8
- mql.addEventListener("change", cb);
9
- return () => mql.removeEventListener("change", cb);
10
- };
11
- var getSnapshot = () => window.matchMedia(QUERY).matches;
12
- var getServerSnapshot = () => false;
13
- function useReducedMotion() {
14
- return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
15
- }
1
+ import { useReducedMotion } from './chunk-WRONFPRI.mjs';
16
2
 
17
3
  // src/components/ui/motion-config.ts
18
4
  var spring = { type: "spring", stiffness: 400, damping: 25 };
@@ -24,5 +10,10 @@ var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
24
10
  var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
25
11
  var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
26
12
  var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
13
+ function useSaasflareMotion(animated, base = spring, ...extraDisablers) {
14
+ const reduced = useReducedMotion();
15
+ const disabled = !animated || reduced || extraDisablers.some(Boolean);
16
+ return { transition: disabled ? noMotion : base, disabled };
17
+ }
27
18
 
28
- export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useReducedMotion };
19
+ export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useSaasflareMotion };
@@ -0,0 +1,30 @@
1
+ 'use strict';
2
+
3
+ var chunkD5LKWKG7_js = require('./chunk-D5LKWKG7.js');
4
+
5
+ // src/components/ui/motion-config.ts
6
+ var spring = { type: "spring", stiffness: 400, damping: 25 };
7
+ var springBouncy = { type: "spring", stiffness: 300, damping: 15 };
8
+ var springGentle = { type: "spring", stiffness: 200, damping: 20 };
9
+ var springStiff = { type: "spring", stiffness: 500, damping: 30 };
10
+ var noMotion = { duration: 0 };
11
+ var fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 } };
12
+ var scaleIn = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } };
13
+ var slideUp = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 } };
14
+ var slideDown = { initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 } };
15
+ function useSaasflareMotion(animated, base = spring, ...extraDisablers) {
16
+ const reduced = chunkD5LKWKG7_js.useReducedMotion();
17
+ const disabled = !animated || reduced || extraDisablers.some(Boolean);
18
+ return { transition: disabled ? noMotion : base, disabled };
19
+ }
20
+
21
+ exports.fadeIn = fadeIn;
22
+ exports.noMotion = noMotion;
23
+ exports.scaleIn = scaleIn;
24
+ exports.slideDown = slideDown;
25
+ exports.slideUp = slideUp;
26
+ exports.spring = spring;
27
+ exports.springBouncy = springBouncy;
28
+ exports.springGentle = springGentle;
29
+ exports.springStiff = springStiff;
30
+ exports.useSaasflareMotion = useSaasflareMotion;
@@ -1,6 +1,6 @@
1
1
  "use client";
2
- import { useReducedMotion, noMotion, springBouncy } from './chunk-W53NTFPB.mjs';
3
- import { cn } from './chunk-BIU2MD4T.mjs';
2
+ import { useSaasflareMotion, springBouncy } from './chunk-EJHYM2HP.mjs';
3
+ import { cn, useSaasflareProps } from './chunk-WRONFPRI.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';
@@ -45,24 +45,31 @@ function DialogOverlay({
45
45
  function DialogContent({
46
46
  className,
47
47
  children,
48
+ surface,
49
+ radius,
50
+ animated,
48
51
  ...props
49
52
  }) {
50
- const reduced = useReducedMotion();
53
+ const sf = useSaasflareProps({ surface, radius, animated });
54
+ const motion = useSaasflareMotion(sf.animated, springBouncy);
51
55
  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
52
56
  /* @__PURE__ */ jsx(DialogOverlay, {}),
53
57
  /* @__PURE__ */ jsx(
54
58
  DialogPrimitive.Content,
55
59
  {
60
+ ...props,
56
61
  "data-slot": "dialog-content",
57
62
  asChild: true,
58
- ...props,
59
63
  children: /* @__PURE__ */ jsxs(
60
64
  m.div,
61
65
  {
62
- initial: reduced ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
66
+ "data-surface": sf.surface,
67
+ "data-radius": sf.radius,
68
+ "data-animated": String(sf.animated),
69
+ initial: motion.disabled ? { opacity: 1 } : { opacity: 0, scale: 0.95, y: 10 },
63
70
  animate: { opacity: 1, scale: 1, y: 0 },
64
- exit: reduced ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
65
- transition: reduced ? noMotion : springBouncy,
71
+ exit: motion.disabled ? { opacity: 0 } : { opacity: 0, scale: 0.95, y: 10 },
72
+ transition: motion.transition,
66
73
  className: cn(
67
74
  "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",
68
75
  className
@@ -0,0 +1,128 @@
1
+ "use client";
2
+ import { useSaasflareMotion, spring } from './chunk-EJHYM2HP.mjs';
3
+ import { useSaasflareProps, cn } from './chunk-WRONFPRI.mjs';
4
+ import { Loader2Icon } from 'lucide-react';
5
+ import { m } from 'motion/react';
6
+ import { cva } from 'class-variance-authority';
7
+ import * as Slot from '@radix-ui/react-slot';
8
+ import { jsx, jsxs } from 'react/jsx-runtime';
9
+
10
+ var MotionSlot = m.create(Slot.Root);
11
+ var LEGACY_VARIANT_MAP = {
12
+ default: { variant: "solid", intent: "primary" },
13
+ destructive: { variant: "solid", intent: "danger" },
14
+ secondary: { variant: "soft", intent: "neutral" }
15
+ };
16
+ var buttonVariants = cva(
17
+ "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
18
+ {
19
+ variants: {
20
+ variant: {
21
+ solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
22
+ soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
23
+ outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
24
+ ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
25
+ link: "text-[var(--intent)] underline-offset-4 hover:underline",
26
+ glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
27
+ shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
28
+ },
29
+ size: {
30
+ xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
31
+ sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
32
+ md: "h-9 px-4 py-2 has-[>svg]:px-3",
33
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
34
+ xl: "h-12 rounded-lg px-8 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5",
35
+ icon: "size-9",
36
+ "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
37
+ "icon-sm": "size-8",
38
+ "icon-lg": "size-10"
39
+ }
40
+ },
41
+ defaultVariants: {
42
+ variant: "solid",
43
+ size: "md"
44
+ }
45
+ }
46
+ );
47
+ function Button({
48
+ className,
49
+ variant: variantProp,
50
+ size = "md",
51
+ intent: intentProp = "primary",
52
+ asChild = false,
53
+ loading = false,
54
+ fullWidth = false,
55
+ surface,
56
+ radius,
57
+ animated,
58
+ disabled,
59
+ children,
60
+ ...props
61
+ }) {
62
+ const sf = useSaasflareProps({ surface, radius, animated });
63
+ const motion = useSaasflareMotion(sf.animated, spring, disabled ?? false, loading);
64
+ const effectiveVariant = variantProp ?? (sf.surface === "glass" ? "glass" : "solid");
65
+ let resolvedVariant = effectiveVariant;
66
+ let resolvedIntent = intentProp;
67
+ const legacy = LEGACY_VARIANT_MAP[effectiveVariant];
68
+ if (legacy) {
69
+ resolvedVariant = legacy.variant;
70
+ if (legacy.intent) {
71
+ resolvedIntent = legacy.intent;
72
+ }
73
+ }
74
+ if (asChild) {
75
+ return /* @__PURE__ */ jsx(
76
+ MotionSlot,
77
+ {
78
+ ...props,
79
+ "data-slot": "button",
80
+ "data-variant": resolvedVariant,
81
+ "data-intent": resolvedIntent,
82
+ "data-size": size,
83
+ "data-surface": sf.surface,
84
+ "data-radius": sf.radius,
85
+ "data-animated": String(sf.animated),
86
+ whileHover: motion.disabled ? void 0 : { scale: 1.02 },
87
+ whileTap: motion.disabled ? void 0 : { scale: 0.97 },
88
+ transition: motion.transition,
89
+ className: cn(
90
+ buttonVariants({ variant: resolvedVariant, size }),
91
+ fullWidth && "w-full",
92
+ className
93
+ ),
94
+ children
95
+ }
96
+ );
97
+ }
98
+ return /* @__PURE__ */ jsxs(
99
+ m.button,
100
+ {
101
+ "data-slot": "button",
102
+ "data-variant": resolvedVariant,
103
+ "data-intent": resolvedIntent,
104
+ "data-size": size,
105
+ "data-surface": sf.surface,
106
+ "data-radius": sf.radius,
107
+ "data-animated": String(sf.animated),
108
+ whileHover: motion.disabled ? void 0 : { scale: 1.02 },
109
+ whileTap: motion.disabled ? void 0 : { scale: 0.97 },
110
+ transition: motion.transition,
111
+ className: cn(
112
+ buttonVariants({ variant: resolvedVariant, size }),
113
+ fullWidth && "w-full",
114
+ className
115
+ ),
116
+ disabled,
117
+ "aria-busy": loading || void 0,
118
+ "aria-disabled": disabled || void 0,
119
+ ...props,
120
+ children: [
121
+ loading && /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin", "aria-hidden": "true" }),
122
+ children
123
+ ]
124
+ }
125
+ );
126
+ }
127
+
128
+ export { Button, buttonVariants };
@@ -1,14 +1,73 @@
1
1
  "use client";
2
- import { useReducedMotion, noMotion, spring } from './chunk-W53NTFPB.mjs';
3
- import { cn, isHex, hexToOklch } from './chunk-BIU2MD4T.mjs';
2
+ import { clsx } from 'clsx';
3
+ import { twMerge } from 'tailwind-merge';
4
+ import * as React2 from 'react';
4
5
  import { createContext, useContext, useEffect, useCallback, useRef, useState } from 'react';
6
+ import 'class-variance-authority';
5
7
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
6
8
  import { ThemeProvider, useTheme } from 'next-themes';
7
- import { m, LazyMotion, domAnimation } from 'motion/react';
8
- import { Loader2Icon } from 'lucide-react';
9
- import { cva } from 'class-variance-authority';
10
- import * as Slot from '@radix-ui/react-slot';
9
+ import { LazyMotion, domAnimation } from 'motion/react';
11
10
 
11
+ // src/lib/utils.ts
12
+ function cn(...inputs) {
13
+ return twMerge(clsx(inputs));
14
+ }
15
+
16
+ // src/lib/color.ts
17
+ function hexToOklch(hex) {
18
+ const normalized = normalizeHex(hex);
19
+ if (!normalized) return null;
20
+ const r = srgbToLinear(parseInt(normalized.slice(0, 2), 16) / 255);
21
+ const g = srgbToLinear(parseInt(normalized.slice(2, 4), 16) / 255);
22
+ const b = srgbToLinear(parseInt(normalized.slice(4, 6), 16) / 255);
23
+ const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
24
+ const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
25
+ const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
26
+ const lc = Math.cbrt(l_);
27
+ const mc = Math.cbrt(m_);
28
+ const sc = Math.cbrt(s_);
29
+ const L = 0.2104542553 * lc + 0.793617785 * mc - 0.0040720468 * sc;
30
+ const a = 1.9779984951 * lc - 2.428592205 * mc + 0.4505937099 * sc;
31
+ const b2 = 0.0259040371 * lc + 0.7827717662 * mc - 0.808675766 * sc;
32
+ const c = Math.sqrt(a * a + b2 * b2);
33
+ let h = Math.atan2(b2, a) * 180 / Math.PI;
34
+ if (h < 0) h += 360;
35
+ return { l: L, c, h };
36
+ }
37
+ function normalizeHex(input) {
38
+ if (typeof input !== "string") return null;
39
+ const s = input.trim().replace(/^#/, "").toLowerCase();
40
+ if (/^[0-9a-f]{3}$/.test(s)) {
41
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
42
+ }
43
+ if (/^[0-9a-f]{4}$/.test(s)) {
44
+ return s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
45
+ }
46
+ if (/^[0-9a-f]{6}$/.test(s)) {
47
+ return s;
48
+ }
49
+ if (/^[0-9a-f]{8}$/.test(s)) {
50
+ return s.slice(0, 6);
51
+ }
52
+ return null;
53
+ }
54
+ function srgbToLinear(c) {
55
+ return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
56
+ }
57
+ function isHex(input) {
58
+ return typeof input === "string" && /^#?[0-9a-f]{3,8}$/i.test(input.trim());
59
+ }
60
+ var QUERY = "(prefers-reduced-motion: reduce)";
61
+ var subscribe = (cb) => {
62
+ const mql = window.matchMedia(QUERY);
63
+ mql.addEventListener("change", cb);
64
+ return () => mql.removeEventListener("change", cb);
65
+ };
66
+ var getSnapshot = () => window.matchMedia(QUERY).matches;
67
+ var getServerSnapshot = () => false;
68
+ function useReducedMotion() {
69
+ return React2.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
70
+ }
12
71
  var AnimationContext = createContext(
13
72
  void 0
14
73
  );
@@ -366,119 +425,5 @@ function useSaasflareProps(props = {}) {
366
425
  palette: ctx.palette
367
426
  };
368
427
  }
369
- var MotionSlot = m.create(Slot.Root);
370
- var LEGACY_VARIANT_MAP = {
371
- default: { variant: "solid", intent: "primary" },
372
- destructive: { variant: "solid", intent: "danger" },
373
- secondary: { variant: "soft", intent: "neutral" }
374
- };
375
- var buttonVariants = cva(
376
- "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
377
- {
378
- variants: {
379
- variant: {
380
- solid: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-xs hover:brightness-110 dark:hover:brightness-125",
381
- soft: "bg-[var(--intent)]/15 text-[var(--intent)] hover:bg-[var(--intent)]/25 dark:bg-[var(--intent)]/20 dark:hover:bg-[var(--intent)]/30",
382
- outline: "border border-[var(--intent)]/30 text-[var(--intent)] shadow-xs hover:bg-[var(--intent)]/10 dark:border-[var(--intent)]/40 dark:hover:bg-[var(--intent)]/15",
383
- ghost: "text-[var(--intent)] hover:bg-[var(--intent)]/10 dark:hover:bg-[var(--intent)]/15",
384
- link: "text-[var(--intent)] underline-offset-4 hover:underline",
385
- glass: "bg-[var(--glass-bg)] text-[var(--intent)] border border-[var(--glass-border)] backdrop-blur-lg shadow-[var(--glass-shadow)] hover:bg-[var(--glass-bg-hover)] hover:border-[var(--glass-border-hover)]",
386
- shadow: "bg-[var(--intent)] text-[var(--intent-fg)] shadow-[var(--btn-shadow)] hover:shadow-[var(--btn-shadow-hover)] hover:brightness-110 dark:hover:brightness-125"
387
- },
388
- size: {
389
- xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
390
- sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
391
- md: "h-9 px-4 py-2 has-[>svg]:px-3",
392
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
393
- xl: "h-12 rounded-lg px-8 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5",
394
- icon: "size-9",
395
- "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
396
- "icon-sm": "size-8",
397
- "icon-lg": "size-10"
398
- }
399
- },
400
- defaultVariants: {
401
- variant: "solid",
402
- size: "md"
403
- }
404
- }
405
- );
406
- function Button({
407
- className,
408
- variant: variantProp,
409
- size = "md",
410
- intent: intentProp = "primary",
411
- asChild = false,
412
- loading = false,
413
- fullWidth = false,
414
- surface,
415
- animated,
416
- disabled,
417
- children,
418
- ...props
419
- }) {
420
- const sfProps = useSaasflareProps({ surface, animated });
421
- const reduced = useReducedMotion();
422
- const effectiveVariant = variantProp ?? (sfProps.surface === "glass" ? "glass" : "solid");
423
- let resolvedVariant = effectiveVariant;
424
- let resolvedIntent = intentProp;
425
- const legacy = LEGACY_VARIANT_MAP[effectiveVariant];
426
- if (legacy) {
427
- resolvedVariant = legacy.variant;
428
- if (legacy.intent) {
429
- resolvedIntent = legacy.intent;
430
- }
431
- }
432
- const motionDisabled = !sfProps.animated || reduced || disabled || loading;
433
- const transition = !sfProps.animated || reduced ? noMotion : spring;
434
- if (asChild) {
435
- return /* @__PURE__ */ jsx(
436
- MotionSlot,
437
- {
438
- "data-slot": "button",
439
- "data-variant": resolvedVariant,
440
- "data-intent": resolvedIntent,
441
- "data-size": size,
442
- "data-surface": sfProps.surface,
443
- whileHover: motionDisabled ? void 0 : { scale: 1.02 },
444
- whileTap: motionDisabled ? void 0 : { scale: 0.97 },
445
- transition,
446
- className: cn(
447
- buttonVariants({ variant: resolvedVariant, size }),
448
- fullWidth && "w-full",
449
- className
450
- ),
451
- ...props,
452
- children
453
- }
454
- );
455
- }
456
- return /* @__PURE__ */ jsxs(
457
- m.button,
458
- {
459
- "data-slot": "button",
460
- "data-variant": resolvedVariant,
461
- "data-intent": resolvedIntent,
462
- "data-size": size,
463
- "data-surface": sfProps.surface,
464
- whileHover: motionDisabled ? void 0 : { scale: 1.02 },
465
- whileTap: motionDisabled ? void 0 : { scale: 0.97 },
466
- transition,
467
- className: cn(
468
- buttonVariants({ variant: resolvedVariant, size }),
469
- fullWidth && "w-full",
470
- className
471
- ),
472
- disabled,
473
- "aria-busy": loading || void 0,
474
- "aria-disabled": disabled || void 0,
475
- ...props,
476
- children: [
477
- loading && /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin", "aria-hidden": "true" }),
478
- children
479
- ]
480
- }
481
- );
482
- }
483
428
 
484
- export { Button, SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, buttonVariants, useAnimation, useSaasflareProps, useSaasflareTheme };
429
+ export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useReducedMotion, useSaasflareProps, useSaasflareTheme };
@@ -1,19 +1,22 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import * as DialogPrimitive from '@radix-ui/react-dialog';
4
+ import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.js';
4
5
 
5
6
  declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
6
7
  declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
7
8
  declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
8
9
  declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
9
10
  declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
11
+ interface DialogContentProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
12
+ }
10
13
  /**
11
14
  * Dialog content panel with spring entry animation.
12
15
  *
13
16
  * @component
14
17
  * @layer core
15
18
  */
16
- declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
19
+ declare function DialogContent({ className, children, surface, radius, animated, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
17
20
  declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
18
21
  declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
19
22
  declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
@@ -1,19 +1,22 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import * as DialogPrimitive from '@radix-ui/react-dialog';
4
+ import { c as SaasflareComponentProps } from './use-saasflare-props-NrM2Glmp.mjs';
4
5
 
5
6
  declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
6
7
  declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
7
8
  declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
8
9
  declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
9
10
  declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
11
+ interface DialogContentProps extends Omit<React.ComponentProps<typeof DialogPrimitive.Content>, keyof SaasflareComponentProps>, SaasflareComponentProps {
12
+ }
10
13
  /**
11
14
  * Dialog content panel with spring entry animation.
12
15
  *
13
16
  * @component
14
17
  * @layer core
15
18
  */
16
- declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
19
+ declare function DialogContent({ className, children, surface, radius, animated, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
17
20
  declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
18
21
  declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
19
22
  declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
@@ -1,13 +1,15 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { DayPicker, DayButton } from 'react-day-picker';
4
- import { B as Button } from '../button-DUQJ0X7e.mjs';
4
+ import { c as SaasflareComponentProps } from '../use-saasflare-props-NrM2Glmp.mjs';
5
+ import { B as Button } from '../button-Brb4BhPO.mjs';
5
6
  import 'class-variance-authority/types';
6
7
  import 'class-variance-authority';
7
8
 
8
- declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
9
+ type CalendarProps = React.ComponentProps<typeof DayPicker> & SaasflareComponentProps & {
9
10
  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
10
- }): react_jsx_runtime.JSX.Element;
11
+ };
12
+ declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, surface, radius, animated, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
11
13
  declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
12
14
 
13
15
  export { Calendar, CalendarDayButton };