@contractspec/lib.ui-kit-web 3.7.1 → 3.7.3

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.
@@ -5,289 +5,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
5
5
  return require.apply(this, arguments);
6
6
  throw Error('Dynamic require of "' + x + '" is not supported');
7
7
  });
8
-
9
- // ui/button.tsx
10
- import { Slot } from "@radix-ui/react-slot";
11
- import { cva } from "class-variance-authority";
12
- import { cn } from "@contractspec/lib.ui-kit-core/utils";
13
- import { jsxDEV } from "react/jsx-dev-runtime";
14
- var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
15
- variants: {
16
- variant: {
17
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
18
- destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
19
- outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
20
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
21
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22
- link: "text-primary underline-offset-4 hover:underline"
23
- },
24
- size: {
25
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
26
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28
- icon: "size-9"
29
- }
30
- },
31
- defaultVariants: {
32
- variant: "default",
33
- size: "default"
34
- }
35
- });
36
- function Button({
37
- className,
38
- variant,
39
- size,
40
- asChild = false,
41
- ref,
42
- ...props
43
- }) {
44
- if (asChild) {
45
- return /* @__PURE__ */ jsxDEV(Slot, {
46
- "data-slot": "button",
47
- className: cn(buttonVariants({ variant, size, className })),
48
- ...props
49
- }, undefined, false, undefined, this);
50
- }
51
- return /* @__PURE__ */ jsxDEV("button", {
52
- ref,
53
- "data-slot": "button",
54
- className: cn(buttonVariants({ variant, size, className })),
55
- ...props
56
- }, undefined, false, undefined, this);
57
- }
58
- // ui/stack.tsx
59
- import { cva as cva2 } from "class-variance-authority";
60
- import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
61
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
62
- var vStackVariants = cva2("flex flex-col", {
63
- variants: {
64
- gap: {
65
- none: "gap-0",
66
- xs: "gap-1",
67
- sm: "gap-2",
68
- md: "gap-3",
69
- lg: "gap-4",
70
- xl: "gap-6",
71
- "2xl": "gap-8"
72
- },
73
- align: {
74
- start: "items-start",
75
- center: "items-center",
76
- end: "items-end",
77
- stretch: "items-stretch"
78
- },
79
- justify: {
80
- start: "justify-start",
81
- center: "justify-center",
82
- end: "justify-end",
83
- between: "justify-between",
84
- around: "justify-around",
85
- evenly: "justify-evenly"
86
- }
87
- },
88
- defaultVariants: {
89
- gap: "md",
90
- align: "stretch",
91
- justify: "start"
92
- }
93
- });
94
- function VStack({
95
- className,
96
- gap,
97
- align,
98
- justify,
99
- as = "div",
100
- ref,
101
- ...props
102
- }) {
103
- const Comp = as;
104
- return /* @__PURE__ */ jsxDEV2(Comp, {
105
- ref,
106
- className: cn2(vStackVariants({ gap, align, justify }), className),
107
- ...props
108
- }, undefined, false, undefined, this);
109
- }
110
- var hStackVariants = cva2("flex flex-row", {
111
- variants: {
112
- gap: {
113
- none: "gap-0",
114
- xs: "gap-1",
115
- sm: "gap-2",
116
- md: "gap-3",
117
- lg: "gap-4",
118
- xl: "gap-6",
119
- "2xl": "gap-8"
120
- },
121
- align: {
122
- start: "items-start",
123
- center: "items-center",
124
- end: "items-end",
125
- stretch: "items-stretch",
126
- baseline: "items-baseline"
127
- },
128
- justify: {
129
- start: "justify-start",
130
- center: "justify-center",
131
- end: "justify-end",
132
- between: "justify-between",
133
- around: "justify-around",
134
- evenly: "justify-evenly"
135
- },
136
- wrap: {
137
- nowrap: "flex-nowrap",
138
- wrap: "flex-wrap",
139
- wrapReverse: "flex-wrap-reverse"
140
- }
141
- },
142
- defaultVariants: {
143
- gap: "md",
144
- align: "center",
145
- justify: "start",
146
- wrap: "wrap"
147
- }
148
- });
149
- function HStack({
150
- className,
151
- gap,
152
- align,
153
- justify,
154
- wrap,
155
- as = "div",
156
- ref,
157
- ...props
158
- }) {
159
- const Comp = as;
160
- return /* @__PURE__ */ jsxDEV2(Comp, {
161
- ref,
162
- className: cn2(hStackVariants({ gap, align, justify, wrap }), className),
163
- ...props
164
- }, undefined, false, undefined, this);
165
- }
166
- var boxVariants = cva2("flex flex-row", {
167
- variants: {
168
- gap: {
169
- none: "gap-0",
170
- xs: "gap-1",
171
- sm: "gap-2",
172
- md: "gap-3",
173
- lg: "gap-4",
174
- xl: "gap-6",
175
- "2xl": "gap-8"
176
- },
177
- align: {
178
- start: "items-start",
179
- center: "items-center",
180
- end: "items-end",
181
- stretch: "items-stretch",
182
- baseline: "items-baseline"
183
- },
184
- justify: {
185
- start: "justify-start",
186
- center: "justify-center",
187
- end: "justify-end",
188
- between: "justify-between",
189
- around: "justify-around",
190
- evenly: "justify-evenly"
191
- },
192
- wrap: {
193
- nowrap: "flex-nowrap",
194
- wrap: "flex-wrap",
195
- wrapReverse: "flex-wrap-reverse"
196
- }
197
- },
198
- defaultVariants: {
199
- gap: "md",
200
- align: "center",
201
- justify: "center",
202
- wrap: "nowrap"
203
- }
204
- });
205
- function Box({
206
- className,
207
- gap,
208
- align,
209
- justify,
210
- wrap,
211
- as = "div",
212
- ref,
213
- ...props
214
- }) {
215
- const Comp = as;
216
- return /* @__PURE__ */ jsxDEV2(Comp, {
217
- ref,
218
- className: cn2(boxVariants({ gap, align, justify, wrap }), className),
219
- ...props
220
- }, undefined, false, undefined, this);
221
- }
222
- // ui/usecases/UseCaseCard.tsx
223
- import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
224
- function UseCaseCard({
225
- title,
226
- summary,
227
- ctaHref,
228
- ctaLabel = "Learn more",
229
- onCtaClick
230
- }) {
231
- return /* @__PURE__ */ jsxDEV3(VStack, {
232
- className: "rounded-lg border p-4",
233
- gap: "sm",
234
- children: [
235
- /* @__PURE__ */ jsxDEV3("div", {
236
- className: "text-lg font-semibold",
237
- children: title
238
- }, undefined, false, undefined, this),
239
- summary && /* @__PURE__ */ jsxDEV3("div", {
240
- className: "text-muted-foreground text-base",
241
- children: summary
242
- }, undefined, false, undefined, this),
243
- ctaHref && /* @__PURE__ */ jsxDEV3(HStack, {
244
- children: /* @__PURE__ */ jsxDEV3("a", {
245
- href: ctaHref,
246
- onClick: onCtaClick,
247
- children: /* @__PURE__ */ jsxDEV3(Button, {
248
- size: "sm",
249
- variant: "outline",
250
- children: ctaLabel
251
- }, undefined, false, undefined, this)
252
- }, undefined, false, undefined, this)
253
- }, undefined, false, undefined, this)
254
- ]
255
- }, undefined, true, undefined, this);
256
- }
257
-
258
- // ui/usecases/UserStoryCard.tsx
259
- import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
260
- function UserStoryCard({
261
- title,
262
- body,
263
- outcome
264
- }) {
265
- return /* @__PURE__ */ jsxDEV4(VStack, {
266
- className: "rounded-lg border p-4",
267
- gap: "sm",
268
- children: [
269
- /* @__PURE__ */ jsxDEV4("div", {
270
- className: "text-lg font-semibold",
271
- children: title
272
- }, undefined, false, undefined, this),
273
- body && /* @__PURE__ */ jsxDEV4("div", {
274
- className: "text-muted-foreground text-base",
275
- children: body
276
- }, undefined, false, undefined, this),
277
- outcome && /* @__PURE__ */ jsxDEV4("div", {
278
- className: "text-base",
279
- children: [
280
- /* @__PURE__ */ jsxDEV4("span", {
281
- className: "font-medium",
282
- children: "Outcome:"
283
- }, undefined, false, undefined, this),
284
- " ",
285
- outcome
286
- ]
287
- }, undefined, true, undefined, this)
288
- ]
289
- }, undefined, true, undefined, this);
290
- }
291
8
  export {
292
9
  UserStoryCard,
293
10
  UseCaseCard
@@ -1,81 +1,5 @@
1
1
  // @bun
2
2
  var __require = import.meta.require;
3
-
4
- // ui/utils.ts
5
- import { clsx } from "clsx";
6
- import { twMerge } from "tailwind-merge";
7
- function cn(...inputs) {
8
- return twMerge(clsx(inputs));
9
- }
10
-
11
- // ui/atoms/LoadingSpinner/LoadingSpinner.tsx
12
- import { Loader2 } from "lucide-react";
13
- import { jsxDEV } from "react/jsx-dev-runtime";
14
- var sizeClasses = {
15
- sm: "h-4 w-4",
16
- md: "h-6 w-6",
17
- lg: "h-8 w-8",
18
- xl: "h-12 w-12"
19
- };
20
- var LoadingSpinner = ({
21
- size = "md",
22
- className,
23
- text,
24
- fullScreen = false
25
- }) => {
26
- const spinner = /* @__PURE__ */ jsxDEV("div", {
27
- className: cn("flex flex-col items-center justify-center gap-2", className),
28
- children: [
29
- /* @__PURE__ */ jsxDEV(Loader2, {
30
- className: cn("text-primary-600 animate-spin", sizeClasses[size])
31
- }, undefined, false, undefined, this),
32
- text && /* @__PURE__ */ jsxDEV("p", {
33
- className: "animate-pulse text-base text-gray-600",
34
- children: text
35
- }, undefined, false, undefined, this)
36
- ]
37
- }, undefined, true, undefined, this);
38
- if (fullScreen) {
39
- return /* @__PURE__ */ jsxDEV("div", {
40
- className: "fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-xs",
41
- children: spinner
42
- }, undefined, false, undefined, this);
43
- }
44
- return spinner;
45
- };
46
- var SkeletonLine = ({
47
- className
48
- }) => /* @__PURE__ */ jsxDEV("div", {
49
- className: cn("h-4 animate-pulse rounded-xs bg-gray-200", className)
50
- }, undefined, false, undefined, this);
51
- var SkeletonCard = ({
52
- className
53
- }) => /* @__PURE__ */ jsxDEV("div", {
54
- className: cn("animate-pulse space-y-3 rounded-lg bg-gray-200 p-4", className),
55
- children: [
56
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
57
- className: "h-6 w-3/4"
58
- }, undefined, false, undefined, this),
59
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
60
- className: "h-4 w-full"
61
- }, undefined, false, undefined, this),
62
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
63
- className: "h-4 w-2/3"
64
- }, undefined, false, undefined, this)
65
- ]
66
- }, undefined, true, undefined, this);
67
- var SkeletonTable = ({
68
- rows = 5,
69
- cols = 4
70
- }) => /* @__PURE__ */ jsxDEV("div", {
71
- className: "space-y-3",
72
- children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxDEV("div", {
73
- className: "flex space-x-4",
74
- children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsxDEV(SkeletonLine, {
75
- className: "flex-1"
76
- }, j, false, undefined, this))
77
- }, i, false, undefined, this))
78
- }, undefined, false, undefined, this);
79
3
  export {
80
4
  SkeletonTable,
81
5
  SkeletonLine,
@@ -1,215 +1,5 @@
1
1
  // @bun
2
2
  var __require = import.meta.require;
3
-
4
- // ui/button.tsx
5
- import { Slot } from "@radix-ui/react-slot";
6
- import { cva } from "class-variance-authority";
7
- import { cn } from "@contractspec/lib.ui-kit-core/utils";
8
- import { jsxDEV } from "react/jsx-dev-runtime";
9
- var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
10
- variants: {
11
- variant: {
12
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
13
- destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
14
- outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
15
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
16
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
17
- link: "text-primary underline-offset-4 hover:underline"
18
- },
19
- size: {
20
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
21
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
22
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
23
- icon: "size-9"
24
- }
25
- },
26
- defaultVariants: {
27
- variant: "default",
28
- size: "default"
29
- }
30
- });
31
- function Button({
32
- className,
33
- variant,
34
- size,
35
- asChild = false,
36
- ref,
37
- ...props
38
- }) {
39
- if (asChild) {
40
- return /* @__PURE__ */ jsxDEV(Slot, {
41
- "data-slot": "button",
42
- className: cn(buttonVariants({ variant, size, className })),
43
- ...props
44
- }, undefined, false, undefined, this);
45
- }
46
- return /* @__PURE__ */ jsxDEV("button", {
47
- ref,
48
- "data-slot": "button",
49
- className: cn(buttonVariants({ variant, size, className })),
50
- ...props
51
- }, undefined, false, undefined, this);
52
- }
53
- // ui/utils.ts
54
- import { clsx } from "clsx";
55
- import { twMerge } from "tailwind-merge";
56
- function cn2(...inputs) {
57
- return twMerge(clsx(inputs));
58
- }
59
-
60
- // ui/marketing/FeatureGrid.tsx
61
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
62
- function FeatureGrid({
63
- items,
64
- columns = 3,
65
- className
66
- }) {
67
- const gridCols = columns === 4 ? "md:grid-cols-4" : columns === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
68
- return /* @__PURE__ */ jsxDEV2("section", {
69
- className: cn2("mx-auto max-w-6xl py-12", className),
70
- children: /* @__PURE__ */ jsxDEV2("div", {
71
- className: cn2("grid grid-cols-1 gap-6", gridCols),
72
- children: items.map((it, idx) => /* @__PURE__ */ jsxDEV2("div", {
73
- className: "rounded-lg border p-6",
74
- children: [
75
- it.icon && /* @__PURE__ */ jsxDEV2("div", {
76
- className: "text-primary mb-3",
77
- children: it.icon
78
- }, undefined, false, undefined, this),
79
- /* @__PURE__ */ jsxDEV2("h3", {
80
- className: "text-lg font-semibold",
81
- children: it.title
82
- }, undefined, false, undefined, this),
83
- it.description && /* @__PURE__ */ jsxDEV2("p", {
84
- className: "text-muted-foreground mt-2 text-base",
85
- children: it.description
86
- }, undefined, false, undefined, this)
87
- ]
88
- }, idx, true, undefined, this))
89
- }, undefined, false, undefined, this)
90
- }, undefined, false, undefined, this);
91
- }
92
-
93
- // ui/marketing/Hero.tsx
94
- import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
95
- function Hero({
96
- title,
97
- subtitle,
98
- primaryCta,
99
- secondaryCta,
100
- className
101
- }) {
102
- return /* @__PURE__ */ jsxDEV3("section", {
103
- className: cn2("mx-auto max-w-4xl py-16 text-center", className),
104
- children: [
105
- /* @__PURE__ */ jsxDEV3("h1", {
106
- className: "text-4xl font-bold tracking-tight md:text-5xl",
107
- children: title
108
- }, undefined, false, undefined, this),
109
- subtitle && /* @__PURE__ */ jsxDEV3("p", {
110
- className: "text-muted-foreground mt-4 text-lg md:text-xl",
111
- children: subtitle
112
- }, undefined, false, undefined, this),
113
- (primaryCta || secondaryCta) && /* @__PURE__ */ jsxDEV3("div", {
114
- className: "mt-8 flex items-center justify-center gap-3",
115
- children: [
116
- primaryCta && (primaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
117
- asChild: true,
118
- size: "lg",
119
- children: /* @__PURE__ */ jsxDEV3("a", {
120
- href: primaryCta.href,
121
- children: primaryCta.label
122
- }, undefined, false, undefined, this)
123
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
124
- size: "lg",
125
- onClick: primaryCta.onClick,
126
- children: primaryCta.label
127
- }, undefined, false, undefined, this)),
128
- secondaryCta && (secondaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
129
- variant: "outline",
130
- asChild: true,
131
- size: "lg",
132
- children: /* @__PURE__ */ jsxDEV3("a", {
133
- href: secondaryCta.href,
134
- children: secondaryCta.label
135
- }, undefined, false, undefined, this)
136
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
137
- variant: "outline",
138
- size: "lg",
139
- onClick: secondaryCta.onClick,
140
- children: secondaryCta.label
141
- }, undefined, false, undefined, this))
142
- ]
143
- }, undefined, true, undefined, this)
144
- ]
145
- }, undefined, true, undefined, this);
146
- }
147
-
148
- // ui/marketing/PricingTable.tsx
149
- import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
150
- function PricingTable({
151
- tiers,
152
- className
153
- }) {
154
- return /* @__PURE__ */ jsxDEV4("section", {
155
- className: cn2("mx-auto max-w-6xl py-12", className),
156
- children: [
157
- /* @__PURE__ */ jsxDEV4("div", {
158
- className: "grid grid-cols-1 gap-6 md:grid-cols-3",
159
- children: tiers.map((t, idx) => /* @__PURE__ */ jsxDEV4("div", {
160
- className: cn2("flex flex-col rounded-lg border p-6", t.highlighted && "border-primary shadow-lg"),
161
- children: [
162
- /* @__PURE__ */ jsxDEV4("div", {
163
- className: "text-muted-foreground mb-2 text-base font-medium",
164
- children: t.name
165
- }, undefined, false, undefined, this),
166
- /* @__PURE__ */ jsxDEV4("div", {
167
- className: "text-3xl font-semibold",
168
- children: t.price
169
- }, undefined, false, undefined, this),
170
- t.tagline && /* @__PURE__ */ jsxDEV4("div", {
171
- className: "text-muted-foreground mt-1 text-base",
172
- children: t.tagline
173
- }, undefined, false, undefined, this),
174
- /* @__PURE__ */ jsxDEV4("ul", {
175
- className: "mt-4 space-y-2 text-base",
176
- children: t.features.map((f, i) => /* @__PURE__ */ jsxDEV4("li", {
177
- className: "flex items-start gap-2",
178
- children: [
179
- /* @__PURE__ */ jsxDEV4("span", {
180
- className: "bg-primary mt-1 h-1.5 w-1.5 rounded-full"
181
- }, undefined, false, undefined, this),
182
- /* @__PURE__ */ jsxDEV4("span", {
183
- children: f
184
- }, undefined, false, undefined, this)
185
- ]
186
- }, i, true, undefined, this))
187
- }, undefined, false, undefined, this),
188
- t.cta && /* @__PURE__ */ jsxDEV4("div", {
189
- className: "mt-6",
190
- children: t.cta.href ? /* @__PURE__ */ jsxDEV4(Button, {
191
- asChild: true,
192
- className: "w-full",
193
- children: /* @__PURE__ */ jsxDEV4("a", {
194
- href: t.cta.href,
195
- children: t.cta.label
196
- }, undefined, false, undefined, this)
197
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Button, {
198
- className: "w-full",
199
- onClick: t.cta.onClick,
200
- children: t.cta.label
201
- }, undefined, false, undefined, this)
202
- }, undefined, false, undefined, this)
203
- ]
204
- }, idx, true, undefined, this))
205
- }, undefined, false, undefined, this),
206
- /* @__PURE__ */ jsxDEV4("p", {
207
- className: "text-muted-foreground mt-6 text-center text-base",
208
- children: "Usage-based tiers inspired by generous free allowances and per-unit pricing."
209
- }, undefined, false, undefined, this)
210
- ]
211
- }, undefined, true, undefined, this);
212
- }
213
3
  export {
214
4
  PricingTable,
215
5
  Hero,