@contractspec/lib.ui-kit-web 3.3.0 → 3.4.0

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,82 +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/utils.ts
10
- import { clsx } from "clsx";
11
- import { twMerge } from "tailwind-merge";
12
- function cn(...inputs) {
13
- return twMerge(clsx(inputs));
14
- }
15
-
16
- // ui/atoms/LoadingSpinner/LoadingSpinner.tsx
17
- import { Loader2 } from "lucide-react";
18
- import { jsxDEV } from "react/jsx-dev-runtime";
19
- var sizeClasses = {
20
- sm: "h-4 w-4",
21
- md: "h-6 w-6",
22
- lg: "h-8 w-8",
23
- xl: "h-12 w-12"
24
- };
25
- var LoadingSpinner = ({
26
- size = "md",
27
- className,
28
- text,
29
- fullScreen = false
30
- }) => {
31
- const spinner = /* @__PURE__ */ jsxDEV("div", {
32
- className: cn("flex flex-col items-center justify-center gap-2", className),
33
- children: [
34
- /* @__PURE__ */ jsxDEV(Loader2, {
35
- className: cn("text-primary-600 animate-spin", sizeClasses[size])
36
- }, undefined, false, undefined, this),
37
- text && /* @__PURE__ */ jsxDEV("p", {
38
- className: "animate-pulse text-base text-gray-600",
39
- children: text
40
- }, undefined, false, undefined, this)
41
- ]
42
- }, undefined, true, undefined, this);
43
- if (fullScreen) {
44
- return /* @__PURE__ */ jsxDEV("div", {
45
- className: "fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-xs",
46
- children: spinner
47
- }, undefined, false, undefined, this);
48
- }
49
- return spinner;
50
- };
51
- var SkeletonLine = ({
52
- className
53
- }) => /* @__PURE__ */ jsxDEV("div", {
54
- className: cn("h-4 animate-pulse rounded-xs bg-gray-200", className)
55
- }, undefined, false, undefined, this);
56
- var SkeletonCard = ({
57
- className
58
- }) => /* @__PURE__ */ jsxDEV("div", {
59
- className: cn("animate-pulse space-y-3 rounded-lg bg-gray-200 p-4", className),
60
- children: [
61
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
62
- className: "h-6 w-3/4"
63
- }, undefined, false, undefined, this),
64
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
65
- className: "h-4 w-full"
66
- }, undefined, false, undefined, this),
67
- /* @__PURE__ */ jsxDEV(SkeletonLine, {
68
- className: "h-4 w-2/3"
69
- }, undefined, false, undefined, this)
70
- ]
71
- }, undefined, true, undefined, this);
72
- var SkeletonTable = ({
73
- rows = 5,
74
- cols = 4
75
- }) => /* @__PURE__ */ jsxDEV("div", {
76
- className: "space-y-3",
77
- children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxDEV("div", {
78
- className: "flex space-x-4",
79
- children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsxDEV(SkeletonLine, {
80
- className: "flex-1"
81
- }, j, false, undefined, this))
82
- }, i, false, undefined, this))
83
- }, undefined, false, undefined, this);
84
8
  export {
85
9
  SkeletonTable,
86
10
  SkeletonLine,
@@ -5,216 +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/utils.ts
59
- import { clsx } from "clsx";
60
- import { twMerge } from "tailwind-merge";
61
- function cn2(...inputs) {
62
- return twMerge(clsx(inputs));
63
- }
64
-
65
- // ui/marketing/FeatureGrid.tsx
66
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
67
- function FeatureGrid({
68
- items,
69
- columns = 3,
70
- className
71
- }) {
72
- const gridCols = columns === 4 ? "md:grid-cols-4" : columns === 2 ? "md:grid-cols-2" : "md:grid-cols-3";
73
- return /* @__PURE__ */ jsxDEV2("section", {
74
- className: cn2("mx-auto max-w-6xl py-12", className),
75
- children: /* @__PURE__ */ jsxDEV2("div", {
76
- className: cn2("grid grid-cols-1 gap-6", gridCols),
77
- children: items.map((it, idx) => /* @__PURE__ */ jsxDEV2("div", {
78
- className: "rounded-lg border p-6",
79
- children: [
80
- it.icon && /* @__PURE__ */ jsxDEV2("div", {
81
- className: "text-primary mb-3",
82
- children: it.icon
83
- }, undefined, false, undefined, this),
84
- /* @__PURE__ */ jsxDEV2("h3", {
85
- className: "text-lg font-semibold",
86
- children: it.title
87
- }, undefined, false, undefined, this),
88
- it.description && /* @__PURE__ */ jsxDEV2("p", {
89
- className: "text-muted-foreground mt-2 text-base",
90
- children: it.description
91
- }, undefined, false, undefined, this)
92
- ]
93
- }, idx, true, undefined, this))
94
- }, undefined, false, undefined, this)
95
- }, undefined, false, undefined, this);
96
- }
97
-
98
- // ui/marketing/Hero.tsx
99
- import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
100
- function Hero({
101
- title,
102
- subtitle,
103
- primaryCta,
104
- secondaryCta,
105
- className
106
- }) {
107
- return /* @__PURE__ */ jsxDEV3("section", {
108
- className: cn2("mx-auto max-w-4xl py-16 text-center", className),
109
- children: [
110
- /* @__PURE__ */ jsxDEV3("h1", {
111
- className: "text-4xl font-bold tracking-tight md:text-5xl",
112
- children: title
113
- }, undefined, false, undefined, this),
114
- subtitle && /* @__PURE__ */ jsxDEV3("p", {
115
- className: "text-muted-foreground mt-4 text-lg md:text-xl",
116
- children: subtitle
117
- }, undefined, false, undefined, this),
118
- (primaryCta || secondaryCta) && /* @__PURE__ */ jsxDEV3("div", {
119
- className: "mt-8 flex items-center justify-center gap-3",
120
- children: [
121
- primaryCta && (primaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
122
- asChild: true,
123
- size: "lg",
124
- children: /* @__PURE__ */ jsxDEV3("a", {
125
- href: primaryCta.href,
126
- children: primaryCta.label
127
- }, undefined, false, undefined, this)
128
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
129
- size: "lg",
130
- onClick: primaryCta.onClick,
131
- children: primaryCta.label
132
- }, undefined, false, undefined, this)),
133
- secondaryCta && (secondaryCta.href ? /* @__PURE__ */ jsxDEV3(Button, {
134
- variant: "outline",
135
- asChild: true,
136
- size: "lg",
137
- children: /* @__PURE__ */ jsxDEV3("a", {
138
- href: secondaryCta.href,
139
- children: secondaryCta.label
140
- }, undefined, false, undefined, this)
141
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Button, {
142
- variant: "outline",
143
- size: "lg",
144
- onClick: secondaryCta.onClick,
145
- children: secondaryCta.label
146
- }, undefined, false, undefined, this))
147
- ]
148
- }, undefined, true, undefined, this)
149
- ]
150
- }, undefined, true, undefined, this);
151
- }
152
-
153
- // ui/marketing/PricingTable.tsx
154
- import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
155
- function PricingTable({
156
- tiers,
157
- className
158
- }) {
159
- return /* @__PURE__ */ jsxDEV4("section", {
160
- className: cn2("mx-auto max-w-6xl py-12", className),
161
- children: [
162
- /* @__PURE__ */ jsxDEV4("div", {
163
- className: "grid grid-cols-1 gap-6 md:grid-cols-3",
164
- children: tiers.map((t, idx) => /* @__PURE__ */ jsxDEV4("div", {
165
- className: cn2("flex flex-col rounded-lg border p-6", t.highlighted && "border-primary shadow-lg"),
166
- children: [
167
- /* @__PURE__ */ jsxDEV4("div", {
168
- className: "text-muted-foreground mb-2 text-base font-medium",
169
- children: t.name
170
- }, undefined, false, undefined, this),
171
- /* @__PURE__ */ jsxDEV4("div", {
172
- className: "text-3xl font-semibold",
173
- children: t.price
174
- }, undefined, false, undefined, this),
175
- t.tagline && /* @__PURE__ */ jsxDEV4("div", {
176
- className: "text-muted-foreground mt-1 text-base",
177
- children: t.tagline
178
- }, undefined, false, undefined, this),
179
- /* @__PURE__ */ jsxDEV4("ul", {
180
- className: "mt-4 space-y-2 text-base",
181
- children: t.features.map((f, i) => /* @__PURE__ */ jsxDEV4("li", {
182
- className: "flex items-start gap-2",
183
- children: [
184
- /* @__PURE__ */ jsxDEV4("span", {
185
- className: "bg-primary mt-1 h-1.5 w-1.5 rounded-full"
186
- }, undefined, false, undefined, this),
187
- /* @__PURE__ */ jsxDEV4("span", {
188
- children: f
189
- }, undefined, false, undefined, this)
190
- ]
191
- }, i, true, undefined, this))
192
- }, undefined, false, undefined, this),
193
- t.cta && /* @__PURE__ */ jsxDEV4("div", {
194
- className: "mt-6",
195
- children: t.cta.href ? /* @__PURE__ */ jsxDEV4(Button, {
196
- asChild: true,
197
- className: "w-full",
198
- children: /* @__PURE__ */ jsxDEV4("a", {
199
- href: t.cta.href,
200
- children: t.cta.label
201
- }, undefined, false, undefined, this)
202
- }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Button, {
203
- className: "w-full",
204
- onClick: t.cta.onClick,
205
- children: t.cta.label
206
- }, undefined, false, undefined, this)
207
- }, undefined, false, undefined, this)
208
- ]
209
- }, idx, true, undefined, this))
210
- }, undefined, false, undefined, this),
211
- /* @__PURE__ */ jsxDEV4("p", {
212
- className: "text-muted-foreground mt-6 text-center text-base",
213
- children: "Usage-based tiers inspired by generous free allowances and per-unit pricing."
214
- }, undefined, false, undefined, this)
215
- ]
216
- }, undefined, true, undefined, this);
217
- }
218
8
  export {
219
9
  PricingTable,
220
10
  Hero,
@@ -5,191 +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/organisms/ErrorBoundary/ErrorBoundary.tsx
59
- import React from "react";
60
- import { AlertTriangle, RefreshCw, Home } from "lucide-react";
61
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
62
- "use client";
63
- var DefaultErrorFallback = ({
64
- error,
65
- errorId,
66
- resetError
67
- }) => {
68
- const isDevelopment = true;
69
- return /* @__PURE__ */ jsxDEV2("div", {
70
- className: "flex min-h-screen items-center justify-center bg-gray-50 px-4",
71
- children: /* @__PURE__ */ jsxDEV2("div", {
72
- className: "w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg",
73
- children: [
74
- /* @__PURE__ */ jsxDEV2("div", {
75
- className: "mb-4 flex justify-center",
76
- children: /* @__PURE__ */ jsxDEV2(AlertTriangle, {
77
- className: "h-12 w-12 text-red-500"
78
- }, undefined, false, undefined, this)
79
- }, undefined, false, undefined, this),
80
- /* @__PURE__ */ jsxDEV2("h1", {
81
- className: "mb-2 text-2xl font-semibold text-gray-900",
82
- children: "Une erreur s'est produite"
83
- }, undefined, false, undefined, this),
84
- /* @__PURE__ */ jsxDEV2("p", {
85
- className: "mb-6 text-gray-600",
86
- children: "Nous nous excusons pour ce désagrément. Notre équipe a été notifiée et travaille à résoudre le problème."
87
- }, undefined, false, undefined, this),
88
- isDevelopment && /* @__PURE__ */ jsxDEV2("div", {
89
- className: "mb-6 rounded-md bg-red-50 p-4 text-left",
90
- children: [
91
- /* @__PURE__ */ jsxDEV2("p", {
92
- className: "mb-2 text-base font-medium text-red-800",
93
- children: "Erreur de développement:"
94
- }, undefined, false, undefined, this),
95
- /* @__PURE__ */ jsxDEV2("p", {
96
- className: "font-mono text-sm break-all text-red-700",
97
- children: error.message
98
- }, undefined, false, undefined, this),
99
- errorId && /* @__PURE__ */ jsxDEV2("p", {
100
- className: "mt-2 text-sm text-red-600",
101
- children: [
102
- "ID: ",
103
- errorId
104
- ]
105
- }, undefined, true, undefined, this)
106
- ]
107
- }, undefined, true, undefined, this),
108
- /* @__PURE__ */ jsxDEV2("div", {
109
- className: "flex flex-col justify-center gap-3 sm:flex-row",
110
- children: [
111
- /* @__PURE__ */ jsxDEV2(Button, {
112
- onClick: resetError,
113
- className: "flex items-center gap-2",
114
- children: [
115
- /* @__PURE__ */ jsxDEV2(RefreshCw, {
116
- className: "h-4 w-4"
117
- }, undefined, false, undefined, this),
118
- "Réessayer"
119
- ]
120
- }, undefined, true, undefined, this),
121
- /* @__PURE__ */ jsxDEV2(Button, {
122
- onClick: () => window.location.href = "/",
123
- variant: "secondary",
124
- className: "flex items-center gap-2",
125
- children: [
126
- /* @__PURE__ */ jsxDEV2(Home, {
127
- className: "h-4 w-4"
128
- }, undefined, false, undefined, this),
129
- "Accueil"
130
- ]
131
- }, undefined, true, undefined, this)
132
- ]
133
- }, undefined, true, undefined, this),
134
- !isDevelopment && errorId && /* @__PURE__ */ jsxDEV2("p", {
135
- className: "mt-4 text-sm text-gray-500",
136
- children: [
137
- "Code d'erreur: ",
138
- errorId
139
- ]
140
- }, undefined, true, undefined, this)
141
- ]
142
- }, undefined, true, undefined, this)
143
- }, undefined, false, undefined, this);
144
- };
145
-
146
- class ErrorBoundary extends React.Component {
147
- constructor(props) {
148
- super(props);
149
- this.state = {
150
- hasError: false,
151
- error: null,
152
- errorId: null
153
- };
154
- }
155
- static getDerivedStateFromError(error) {
156
- return {
157
- hasError: true,
158
- error
159
- };
160
- }
161
- componentDidCatch(error, errorInfo) {
162
- const errorId = `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
163
- this.setState({ errorId });
164
- this.props.onError?.(error, errorInfo);
165
- if (true) {
166
- console.error("ErrorBoundary caught an error:", error, errorInfo);
167
- }
168
- }
169
- resetError = () => {
170
- this.setState({
171
- hasError: false,
172
- error: null,
173
- errorId: null
174
- });
175
- };
176
- render() {
177
- if (this.state.hasError && this.state.error) {
178
- const FallbackComponent = this.props.fallback || DefaultErrorFallback;
179
- return /* @__PURE__ */ jsxDEV2(FallbackComponent, {
180
- error: this.state.error,
181
- errorId: this.state.errorId,
182
- resetError: this.resetError
183
- }, undefined, false, undefined, this);
184
- }
185
- return this.props.children;
186
- }
187
- }
188
- var useErrorHandler = () => {
189
- return React.useCallback((error) => {
190
- throw error;
191
- }, []);
192
- };
193
8
  export {
194
9
  useErrorHandler,
195
10
  ErrorBoundary