@lerianstudio/sindarian-ui 1.3.0 → 1.4.0-beta.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 +93 -12
- package/dist/components/card/account-card/index.d.ts.map +1 -1
- package/dist/components/card/account-card/index.js +2 -2
- package/dist/components/card/entity-card/index.d.ts.map +1 -1
- package/dist/components/card/entity-card/index.js +5 -1
- package/dist/components/dialog/confirmation-dialog/index.d.ts +10 -2
- package/dist/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/components/dialog/confirmation-dialog/index.js +72 -7
- package/dist/components/page-header/index.d.ts +14 -2
- package/dist/components/page-header/index.d.ts.map +1 -1
- package/dist/components/page-header/index.js +4 -4
- package/dist/components/ui/accordion/index.js +1 -1
- package/dist/components/ui/alert/index.d.ts +1 -1
- package/dist/components/ui/alert/styles.css +3 -3
- package/dist/components/ui/alert-dialog/index.d.ts +8 -2
- package/dist/components/ui/alert-dialog/index.d.ts.map +1 -1
- package/dist/components/ui/alert-dialog/index.js +4 -4
- package/dist/components/ui/autocomplete/index.d.ts +1 -1
- package/dist/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/components/ui/autocomplete/index.js +42 -6
- package/dist/components/ui/badge/index.d.ts +10 -2
- package/dist/components/ui/badge/index.d.ts.map +1 -1
- package/dist/components/ui/badge/index.js +24 -4
- package/dist/components/ui/breadcrumb/styles.css +1 -1
- package/dist/components/ui/button/index.d.ts +2 -2
- package/dist/components/ui/button/index.d.ts.map +1 -1
- package/dist/components/ui/button/index.js +2 -1
- package/dist/components/ui/button/styles.css +17 -4
- package/dist/components/ui/card/index.d.ts +10 -2
- package/dist/components/ui/card/index.d.ts.map +1 -1
- package/dist/components/ui/card/index.js +2 -2
- package/dist/components/ui/command/index.js +1 -1
- package/dist/components/ui/dialog/styles.css +3 -3
- package/dist/components/ui/dropdown-menu/index.js +2 -2
- package/dist/components/ui/hover-card/index.js +1 -1
- package/dist/components/ui/input/adornment.d.ts +1 -1
- package/dist/components/ui/loading-button/index.js +1 -1
- package/dist/components/ui/multiple-select/index.js +1 -1
- package/dist/components/ui/otp-input/index.js +1 -1
- package/dist/components/ui/paper-collapsible/index.js +1 -1
- package/dist/components/ui/popover/index.js +1 -1
- package/dist/components/ui/select/styles.css +1 -1
- package/dist/components/ui/sheet/index.d.ts +1 -1
- package/dist/components/ui/sheet/index.js +2 -2
- package/dist/components/ui/sidebar/sidebar-expand-button.d.ts +5 -0
- package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
- package/dist/components/ui/sidebar/sidebar-expand-button.js +1 -1
- package/dist/components/ui/sidebar/sidebar-item-collapsible.js +1 -1
- package/dist/components/ui/skeleton/index.js +1 -1
- package/dist/components/ui/toast/toaster.d.ts +5 -0
- package/dist/components/ui/toast/toaster.d.ts.map +1 -1
- package/dist/components/ui/toast/toaster.js +6 -2
- package/dist/components/ui/tooltip/index.js +1 -1
- package/dist/domain/blotter/index.d.ts +7 -1
- package/dist/domain/blotter/index.d.ts.map +1 -1
- package/dist/domain/blotter/index.js +7 -3
- package/dist/domain/delinquency-aging/aging-buckets.d.ts +4 -1
- package/dist/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/aging-buckets.js +7 -2
- package/dist/domain/delinquency-aging/index.d.ts +11 -1
- package/dist/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/index.js +7 -3
- package/dist/domain/figure/index.d.ts +13 -6
- package/dist/domain/figure/index.d.ts.map +1 -1
- package/dist/domain/figure/index.js +1 -0
- package/dist/domain/section-label/index.d.ts +7 -1
- package/dist/domain/section-label/index.d.ts.map +1 -1
- package/dist/domain/section-label/index.js +6 -2
- package/dist/enterprise/app-shell/index.d.ts +14 -0
- package/dist/enterprise/app-shell/index.d.ts.map +1 -1
- package/dist/enterprise/app-shell/index.js +2 -2
- package/dist/enterprise/data-table/index.d.ts +13 -1
- package/dist/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/enterprise/data-table/index.js +7 -3
- package/dist/enterprise/search-input/index.d.ts +7 -1
- package/dist/enterprise/search-input/index.d.ts.map +1 -1
- package/dist/enterprise/search-input/index.js +2 -2
- package/dist/esm/components/card/account-card/index.d.ts.map +1 -1
- package/dist/esm/components/card/account-card/index.js +2 -2
- package/dist/esm/components/card/entity-card/index.d.ts.map +1 -1
- package/dist/esm/components/card/entity-card/index.js +5 -1
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts +10 -2
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/esm/components/dialog/confirmation-dialog/index.js +39 -7
- package/dist/esm/components/page-header/index.d.ts +14 -2
- package/dist/esm/components/page-header/index.d.ts.map +1 -1
- package/dist/esm/components/page-header/index.js +4 -4
- package/dist/esm/components/ui/accordion/index.js +1 -1
- package/dist/esm/components/ui/alert/index.d.ts +1 -1
- package/dist/esm/components/ui/alert-dialog/index.d.ts +8 -2
- package/dist/esm/components/ui/alert-dialog/index.d.ts.map +1 -1
- package/dist/esm/components/ui/alert-dialog/index.js +4 -4
- package/dist/esm/components/ui/autocomplete/index.d.ts +1 -1
- package/dist/esm/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/esm/components/ui/autocomplete/index.js +42 -6
- package/dist/esm/components/ui/badge/index.d.ts +10 -2
- package/dist/esm/components/ui/badge/index.d.ts.map +1 -1
- package/dist/esm/components/ui/badge/index.js +24 -4
- package/dist/esm/components/ui/button/index.d.ts +2 -2
- package/dist/esm/components/ui/button/index.d.ts.map +1 -1
- package/dist/esm/components/ui/button/index.js +2 -1
- package/dist/esm/components/ui/card/index.d.ts +10 -2
- package/dist/esm/components/ui/card/index.d.ts.map +1 -1
- package/dist/esm/components/ui/card/index.js +2 -2
- package/dist/esm/components/ui/command/index.js +1 -1
- package/dist/esm/components/ui/dropdown-menu/index.js +2 -2
- package/dist/esm/components/ui/hover-card/index.js +1 -1
- package/dist/esm/components/ui/input/adornment.d.ts +1 -1
- package/dist/esm/components/ui/loading-button/index.js +1 -1
- package/dist/esm/components/ui/multiple-select/index.js +1 -1
- package/dist/esm/components/ui/otp-input/index.js +1 -1
- package/dist/esm/components/ui/paper-collapsible/index.js +1 -1
- package/dist/esm/components/ui/popover/index.js +1 -1
- package/dist/esm/components/ui/sheet/index.d.ts +1 -1
- package/dist/esm/components/ui/sheet/index.js +2 -2
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts +5 -0
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.js +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-item-collapsible.js +1 -1
- package/dist/esm/components/ui/skeleton/index.js +1 -1
- package/dist/esm/components/ui/toast/toaster.d.ts +5 -0
- package/dist/esm/components/ui/toast/toaster.d.ts.map +1 -1
- package/dist/esm/components/ui/toast/toaster.js +6 -2
- package/dist/esm/components/ui/tooltip/index.js +1 -1
- package/dist/esm/domain/blotter/index.d.ts +7 -1
- package/dist/esm/domain/blotter/index.d.ts.map +1 -1
- package/dist/esm/domain/blotter/index.js +7 -3
- package/dist/esm/domain/delinquency-aging/aging-buckets.d.ts +4 -1
- package/dist/esm/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/aging-buckets.js +7 -2
- package/dist/esm/domain/delinquency-aging/index.d.ts +11 -1
- package/dist/esm/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/index.js +7 -3
- package/dist/esm/domain/figure/index.d.ts +13 -6
- package/dist/esm/domain/figure/index.d.ts.map +1 -1
- package/dist/esm/domain/figure/index.js +1 -0
- package/dist/esm/domain/section-label/index.d.ts +7 -1
- package/dist/esm/domain/section-label/index.d.ts.map +1 -1
- package/dist/esm/domain/section-label/index.js +6 -2
- package/dist/esm/enterprise/app-shell/index.d.ts +14 -0
- package/dist/esm/enterprise/app-shell/index.d.ts.map +1 -1
- package/dist/esm/enterprise/app-shell/index.js +2 -2
- package/dist/esm/enterprise/data-table/index.d.ts +13 -1
- package/dist/esm/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/esm/enterprise/data-table/index.js +8 -4
- package/dist/esm/enterprise/search-input/index.d.ts +7 -1
- package/dist/esm/enterprise/search-input/index.d.ts.map +1 -1
- package/dist/esm/enterprise/search-input/index.js +2 -2
- package/dist/esm/lib/utils.d.ts.map +1 -1
- package/dist/esm/lib/utils.js +27 -1
- package/dist/esm/theme/theme-provider.d.ts +8 -0
- package/dist/esm/theme/theme-provider.d.ts.map +1 -1
- package/dist/esm/theme/theme-provider.js +10 -0
- package/dist/globals.css +85 -58
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +27 -1
- package/dist/theme/theme-provider.d.ts +8 -0
- package/dist/theme/theme-provider.d.ts.map +1 -1
- package/dist/theme/theme-provider.js +11 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,18 +41,34 @@ npm install react@>=19.0.0 react-dom@>=19.0.0 react-hook-form@>=7.60.0 lucide-re
|
|
|
41
41
|
|
|
42
42
|
### Tailwind CSS Setup
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
44
|
+
The library is built with Tailwind CSS v4, which is configured from CSS — there
|
|
45
|
+
is no `tailwind.config.js`. Your app needs `tailwindcss@^4` plus
|
|
46
|
+
`@tailwindcss/postcss` (Next.js) or `@tailwindcss/vite` (Vite).
|
|
47
|
+
|
|
48
|
+
Wire the library into your app's entry stylesheet in this order:
|
|
49
|
+
|
|
50
|
+
```css
|
|
51
|
+
/* Keep the Tailwind import in your app's entry stylesheet — source scanning
|
|
52
|
+
breaks when the only import lives inside node_modules. */
|
|
53
|
+
@import 'tailwindcss';
|
|
54
|
+
|
|
55
|
+
/* The dark variant, matched against a `.dark` class on an ancestor. */
|
|
56
|
+
@custom-variant dark (&:is(.dark *));
|
|
57
|
+
|
|
58
|
+
/* Design tokens, base layer and component styles. */
|
|
59
|
+
@import '@lerianstudio/sindarian-ui/dist/globals.css';
|
|
60
|
+
|
|
61
|
+
/* Scan the library's compiled output so its utility classes survive the
|
|
62
|
+
content purge. The path is relative to this file. */
|
|
63
|
+
@source '../node_modules/@lerianstudio/sindarian-ui/dist';
|
|
54
64
|
```
|
|
55
65
|
|
|
66
|
+
Adjust the `@source` depth to where your entry stylesheet sits: `../..` from
|
|
67
|
+
`src/app/globals.css` in a Next.js app, `..` from `src/index.css` in a Vite app.
|
|
68
|
+
|
|
69
|
+
Non-Next.js apps must also load Inter themselves — see "Migrating to 1.3+"
|
|
70
|
+
below.
|
|
71
|
+
|
|
56
72
|
## 🚀 Quick Start
|
|
57
73
|
|
|
58
74
|
```tsx
|
|
@@ -63,7 +79,7 @@ import {
|
|
|
63
79
|
CardContent,
|
|
64
80
|
CardHeader,
|
|
65
81
|
CardTitle
|
|
66
|
-
} from 'sindarian-ui'
|
|
82
|
+
} from '@lerianstudio/sindarian-ui'
|
|
67
83
|
|
|
68
84
|
function App() {
|
|
69
85
|
return (
|
|
@@ -80,6 +96,71 @@ function App() {
|
|
|
80
96
|
}
|
|
81
97
|
```
|
|
82
98
|
|
|
99
|
+
## ⬆️ Migrating to 1.3+
|
|
100
|
+
|
|
101
|
+
What every app upgrading from an earlier version has had to work out.
|
|
102
|
+
|
|
103
|
+
### Remove `tailwindcss-animate`
|
|
104
|
+
|
|
105
|
+
The library imports `tw-animate-css` in its own `globals.css`. An app that still
|
|
106
|
+
registers the v3-era `@plugin 'tailwindcss-animate'` wins the cascade with its
|
|
107
|
+
`.animate-in` rules and pins every library overlay to that plugin's fixed
|
|
108
|
+
duration, silently. Drop the plugin directive and the dependency.
|
|
109
|
+
|
|
110
|
+
### `CardTitle` accepts a heading level
|
|
111
|
+
|
|
112
|
+
New: `CardTitle` takes an `as` prop to pick the heading level. It has always
|
|
113
|
+
rendered an `<h3>`, so consumer wrappers that existed only to get a real
|
|
114
|
+
heading element can go — and where `h3` would skip a level under a page
|
|
115
|
+
`<h1>`, set the level directly:
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
<CardTitle as="h2">Accounts</CardTitle>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
The omitted case still renders `h3` with the same classes and `data-slot`.
|
|
122
|
+
|
|
123
|
+
The prop types now match the rendered elements: `CardTitle` is typed against
|
|
124
|
+
`h3` (heading), `CardDescription` against `p` — both were typed against `div`.
|
|
125
|
+
A `ref` typed `Ref<HTMLDivElement>` passed to either no longer compiles;
|
|
126
|
+
retype it to the real element (`HTMLHeadingElement` / `HTMLParagraphElement`).
|
|
127
|
+
|
|
128
|
+
### `Toaster` follows the app theme
|
|
129
|
+
|
|
130
|
+
An unset `<Toaster />` rendered inside the library's `ThemeProvider` now
|
|
131
|
+
follows the provider's resolved theme instead of the OS preference. Outside a
|
|
132
|
+
provider nothing changes (`system`). To keep OS-following inside a provider,
|
|
133
|
+
pass it explicitly:
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
<Toaster theme="system" />
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Non-Next.js apps must load Inter
|
|
140
|
+
|
|
141
|
+
`--font-sans` resolves to
|
|
142
|
+
`var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif`.
|
|
143
|
+
`--font-inter` is a `next/font` slot: Next.js apps fill it, Vite and other
|
|
144
|
+
bundlers do not. The fallback list keeps text readable, but nothing installs
|
|
145
|
+
Inter for you. Install it (`npm install @fontsource-variable/inter`), load it
|
|
146
|
+
and fill the slot:
|
|
147
|
+
|
|
148
|
+
```css
|
|
149
|
+
@import '@fontsource-variable/inter';
|
|
150
|
+
|
|
151
|
+
:root {
|
|
152
|
+
--font-inter: 'Inter Variable';
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### The preflight is emitted twice
|
|
157
|
+
|
|
158
|
+
The library's `globals.css` opens with `@import 'tailwindcss'`, so an app that
|
|
159
|
+
also imports Tailwind — as the setup above requires — gets the preflight layer
|
|
160
|
+
twice. The rules are identical and the duplication is harmless, costing roughly
|
|
161
|
+
8 KB pre-gzip. Keep the app's `@import 'tailwindcss'` first; do not drop it to
|
|
162
|
+
avoid the duplicate.
|
|
163
|
+
|
|
83
164
|
## 📚 Component Categories
|
|
84
165
|
|
|
85
166
|
### UI Primitives
|
|
@@ -219,7 +300,7 @@ Please ensure your code follows the project's coding standards and includes appr
|
|
|
219
300
|
|
|
220
301
|
## 📝 Changelog
|
|
221
302
|
|
|
222
|
-
See [CHANGELOG.md](
|
|
303
|
+
See [CHANGELOG.md](./CHANGELOG.md) for a detailed history of changes.
|
|
223
304
|
|
|
224
305
|
## 📄 License
|
|
225
306
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/account-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAgB,WAAW,EAA0B,MAAM,cAAc,CAAA;AAChF,OAAO,EACL,kBAAkB,EAEnB,MAAM,6BAA6B,CAAA;AAUpC,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,qBAc1C;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAS1E;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAarC;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,qBAWjD;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW3B;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACtE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,2BAA2B,qBAe7B;AAED,MAAM,MAAM,mCAAmC,GAAG,KAAK,CAAC,cAAc,CACpE,OAAO,MAAM,CACd,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,SAAS,EAAE,UAAU,EACrB,OAAO,EACP,SAAS,EACT,YAA4B,EAC5B,cAA6B,EAC7B,YAAwB,EACxB,SAAS,EACT,QAAQ,EAAE,SAAS,EACnB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mCAAmC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/account-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAgB,WAAW,EAA0B,MAAM,cAAc,CAAA;AAChF,OAAO,EACL,kBAAkB,EAEnB,MAAM,6BAA6B,CAAA;AAUpC,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,qBAc1C;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAS1E;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAarC;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,qBAWjD;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW3B;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACtE,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,2BAA2B,qBAe7B;AAED,MAAM,MAAM,mCAAmC,GAAG,KAAK,CAAC,cAAc,CACpE,OAAO,MAAM,CACd,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,SAAS,EAAE,UAAU,EACrB,OAAO,EACP,SAAS,EACT,YAA4B,EAC5B,cAA6B,EAC7B,YAAwB,EACxB,SAAS,EACT,QAAQ,EAAE,SAAS,EACnB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mCAAmC,qBAkCrC;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EAAE,SAAS,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,qBAeA"}
|
|
@@ -45,7 +45,7 @@ function AccountBalanceCardDeleteButton({ className, ...props }) {
|
|
|
45
45
|
return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { variant: "outline", size: "small", rounded: true, "data-slot": "account-balance-card-delete-button", className: (0, utils_1.cn)('absolute top-3 right-3', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash, { className: "text-muted-foreground h-4 w-4" }) }));
|
|
46
46
|
}
|
|
47
47
|
function AccountBalanceCardContent({ className, ...props }) {
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleContent, { "data-slot": "account-balance-card-content", className: (0, utils_1.cn)('data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden', className), ...props }));
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleContent, { "data-slot": "account-balance-card-content", className: (0, utils_1.cn)('motion-safe:data-[state=closed]:animate-accordion-up motion-safe:data-[state=open]:animate-accordion-down overflow-hidden', className), ...props }));
|
|
49
49
|
}
|
|
50
50
|
function AccountBalanceCardLoading({ className, ...props }) {
|
|
51
51
|
return ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { "data-slot": "account-balance-card-loading", className: (0, utils_1.cn)('bg-muted mt-3 h-3 w-full rounded-md', className), ...props }));
|
|
@@ -61,7 +61,7 @@ function AccountBalanceCardUpdateButton({ className: _className, loading, timest
|
|
|
61
61
|
const updated = react_1.default.useMemo(() => {
|
|
62
62
|
return !(0, dayjs_1.default)(timestamp).isBefore((0, dayjs_1.default)().subtract(1, 'minute'));
|
|
63
63
|
}, [_time, timestamp]);
|
|
64
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-shadcn-500 text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && ((0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "h-4 w-4
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-shadcn-500 text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && ((0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-system-success h-4 w-4" })), (!updated || loading) && ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: (0, utils_1.cn)('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
|
|
65
65
|
}
|
|
66
66
|
function AccountBalanceCardTrigger({ className, openLabel, closeLabel, children: _children, ...props }) {
|
|
67
67
|
const { open } = react_1.default.useContext(AccountBalanceCardContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/entity-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EACL,YAAY,EAEZ,gBAAgB,EAEjB,MAAM,+BAA+B,CAAA;AAOtC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/entity-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EACL,YAAY,EAEZ,gBAAgB,EAEjB,MAAM,+BAA+B,CAAA;AAOtC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAc7B;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,qBAoBjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,qBAW3C;AAED,eAAO,MAAM,oBAAoB,yBAAmB,CAAA;AAEpD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ5B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,qBAQpC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAgB7B"}
|
|
@@ -26,7 +26,11 @@ function EntityCardGrid({ className, ...props }) {
|
|
|
26
26
|
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3', className), "data-slot": "entity-card-grid", ...props }));
|
|
27
27
|
}
|
|
28
28
|
function EntityCardGridFooter({ className, ...props }) {
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(
|
|
30
|
+
// Semantic tokens, not raw palette steps: `bg-white`/`border-zinc-200`
|
|
31
|
+
// have no dark counterpart, so this footer stayed a white slab under
|
|
32
|
+
// cards that followed the theme.
|
|
33
|
+
'border-border bg-card flex items-center justify-between rounded-lg border px-6 py-4', className), "data-slot": "entity-card-grid-footer", ...props }));
|
|
30
34
|
}
|
|
31
35
|
function EntityCard({ className, value, progress = false, children, ...props }) {
|
|
32
36
|
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "entity-card-wrapper", className: "transition-shadow hover:shadow-xl", children: [(0, jsx_runtime_1.jsx)("div", { "data-slot": "entity-card", className: (0, utils_1.cn)('bg-card relative flex flex-col gap-4 rounded-lg px-5 py-4', { 'rounded-b-none': progress }, className), ...props, children: children }), progress && (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: "h-1.5 rounded-t-none", value: value })] }));
|
|
@@ -4,13 +4,21 @@ export type ConfirmationDialogProps = {
|
|
|
4
4
|
onOpenChange: (open: boolean) => void;
|
|
5
5
|
title?: string;
|
|
6
6
|
description?: string;
|
|
7
|
+
/** @deprecated dead prop, removed in the next major */
|
|
7
8
|
ledgerName?: string;
|
|
8
9
|
variant?: 'default' | 'warning' | 'destructive' | 'success';
|
|
9
10
|
loading?: boolean;
|
|
10
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Awaited. While it is in flight the dialog reports a pending status, both
|
|
13
|
+
* actions are disabled and dismissal is blocked; it closes on resolve. A
|
|
14
|
+
* rejection leaves the dialog open — error UX belongs to the caller.
|
|
15
|
+
*/
|
|
16
|
+
onConfirm?: () => void | Promise<void>;
|
|
11
17
|
onCancel?: () => void;
|
|
12
18
|
confirmLabel?: string;
|
|
13
19
|
cancelLabel?: string;
|
|
20
|
+
/** Announced to screen readers while a confirm is in flight. */
|
|
21
|
+
pendingLabel?: string;
|
|
14
22
|
};
|
|
15
|
-
export declare function ConfirmationDialog({ open, onOpenChange, title, description, variant, loading, onConfirm, onCancel, confirmLabel, cancelLabel }: ConfirmationDialogProps): React.JSX.Element;
|
|
23
|
+
export declare function ConfirmationDialog({ open, onOpenChange, title, description, variant, loading, onConfirm, onCancel, confirmLabel, cancelLabel, pendingLabel }: ConfirmationDialogProps): React.JSX.Element;
|
|
16
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,WAAgB,EAChB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAA4B,EAC7B,EAAE,uBAAuB,qBAiFzB"}
|
|
@@ -1,21 +1,59 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
3
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
37
|
exports.ConfirmationDialog = ConfirmationDialog;
|
|
5
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
+
const React = __importStar(require("react"));
|
|
6
40
|
const button_1 = require("../../../components/ui/button");
|
|
7
|
-
const
|
|
41
|
+
const alert_dialog_1 = require("../../../components/ui/alert-dialog");
|
|
8
42
|
const loading_button_1 = require("../../../components/ui/loading-button");
|
|
9
43
|
const lucide_react_1 = require("lucide-react");
|
|
10
44
|
const utils_1 = require("../../../lib/utils");
|
|
11
45
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
12
46
|
const confirmationDialogIconVariants = (0, class_variance_authority_1.cva)('flex size-10 shrink-0 items-center justify-center rounded-lg [&>svg]:size-6', {
|
|
13
47
|
variants: {
|
|
48
|
+
// System tokens, not raw palette steps: a raw 50-step surface has no dark
|
|
49
|
+
// counterpart, so on the dark canvas it rendered a near-white block.
|
|
50
|
+
// `default` is deliberately neutral so `destructive` reads as a distinct,
|
|
51
|
+
// heavier warning instead of an alias of it.
|
|
14
52
|
variant: {
|
|
15
|
-
default: 'bg-
|
|
16
|
-
warning: 'bg-
|
|
17
|
-
destructive: 'bg-
|
|
18
|
-
success: 'bg-
|
|
53
|
+
default: 'bg-muted text-foreground',
|
|
54
|
+
warning: 'bg-system-alert-surface text-system-alert-h1a',
|
|
55
|
+
destructive: 'bg-system-error-surface text-system-error-h1a',
|
|
56
|
+
success: 'bg-system-success-surface text-system-success-h1a'
|
|
19
57
|
}
|
|
20
58
|
},
|
|
21
59
|
defaultVariants: {
|
|
@@ -23,6 +61,33 @@ const confirmationDialogIconVariants = (0, class_variance_authority_1.cva)('flex
|
|
|
23
61
|
}
|
|
24
62
|
});
|
|
25
63
|
const ConfirmationDialogIcon = ({ className, variant, ...props }) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)(confirmationDialogIconVariants({ variant }), className), ...props, children: [variant === 'default' && (0, jsx_runtime_1.jsx)(lucide_react_1.Ban, {}), variant === 'warning' && (0, jsx_runtime_1.jsx)(lucide_react_1.TriangleAlert, {}), variant === 'destructive' && (0, jsx_runtime_1.jsx)(lucide_react_1.Ban, {}), variant === 'success' && (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, {})] }));
|
|
26
|
-
function ConfirmationDialog({ open, onOpenChange, title = '', description = '', variant = 'default', loading, onConfirm = () => { }, onCancel = () => { }, confirmLabel, cancelLabel }) {
|
|
27
|
-
|
|
64
|
+
function ConfirmationDialog({ open, onOpenChange, title = '', description = '', variant = 'default', loading, onConfirm = () => { }, onCancel = () => { }, confirmLabel, cancelLabel, pendingLabel = 'Processing…' }) {
|
|
65
|
+
const [pending, setPending] = React.useState(false);
|
|
66
|
+
const busy = Boolean(loading) || pending;
|
|
67
|
+
const handleConfirm = async () => {
|
|
68
|
+
if (busy) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
setPending(true);
|
|
72
|
+
try {
|
|
73
|
+
await onConfirm();
|
|
74
|
+
onOpenChange(false);
|
|
75
|
+
}
|
|
76
|
+
catch {
|
|
77
|
+
// Deliberately silent: the caller owns error UX. Catching only keeps a
|
|
78
|
+
// rejection from escaping the click handler as an unhandled rejection —
|
|
79
|
+
// the dialog stays open so the caller can render the failure in place.
|
|
80
|
+
}
|
|
81
|
+
finally {
|
|
82
|
+
setPending(false);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
return ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialog, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogContent, { "data-testid": "dialog",
|
|
86
|
+
// Radix already blocks outside interaction on an alert dialog, so
|
|
87
|
+
// Escape is the only remaining way to abandon a mutation mid-flight.
|
|
88
|
+
onEscapeKeyDown: (event) => {
|
|
89
|
+
if (busy) {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
}
|
|
92
|
+
}, children: [(0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogHeader, { className: "flex-row items-center", children: [(0, jsx_runtime_1.jsx)(ConfirmationDialogIcon, { variant: variant }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogDescription, { children: description })] })] }), (0, jsx_runtime_1.jsx)("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' }), (0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogFooter, { className: "gap-4", children: [(0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogCancel, { asChild: true, variant: "secondary", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), (0, jsx_runtime_1.jsx)(loading_button_1.LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
|
|
28
93
|
}
|
|
@@ -3,17 +3,29 @@ export declare function PageHeaderActionButtons({ className, ...props }: React.C
|
|
|
3
3
|
export declare function PageHeaderWrapper({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
|
|
4
4
|
type PageHeaderProps = {
|
|
5
5
|
children: ReactNode;
|
|
6
|
+
/** Routed to the inner Collapsible, as it always has been. */
|
|
6
7
|
className?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Seam for the root element's own margins. Merged AFTER the hard-coded
|
|
10
|
+
* `mt-12`/`mb-12` so a consumer utility (e.g. `mt-0`) wins via tailwind-merge.
|
|
11
|
+
*/
|
|
12
|
+
rootClassName?: string;
|
|
7
13
|
};
|
|
8
|
-
export declare function PageHeader({ children, className }: PageHeaderProps): import("react").JSX.Element;
|
|
14
|
+
export declare function PageHeader({ children, className, rootClassName }: PageHeaderProps): import("react").JSX.Element;
|
|
9
15
|
export type PageHeaderInfoTitleProps = {
|
|
10
16
|
title: string;
|
|
11
17
|
subtitle?: string;
|
|
12
18
|
subtitleCopyToClipboard?: boolean;
|
|
19
|
+
/** Routed to the `h1`, as it always has been. */
|
|
13
20
|
className?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Seam for the wrapper element's own margins. Merged AFTER the hard-coded
|
|
23
|
+
* `mb-12` so a consumer utility (e.g. `mb-0`) wins via tailwind-merge.
|
|
24
|
+
*/
|
|
25
|
+
containerClassName?: string;
|
|
14
26
|
children?: ReactNode;
|
|
15
27
|
};
|
|
16
|
-
export declare function PageHeaderInfoTitle({ title, subtitle, className, children }: PageHeaderInfoTitleProps): import("react").JSX.Element;
|
|
28
|
+
export declare function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children }: PageHeaderInfoTitleProps): import("react").JSX.Element;
|
|
17
29
|
export type PageHeaderInfoTooltipProps = {
|
|
18
30
|
subtitle: string;
|
|
19
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACT,EAAE,wBAAwB,+BAmB1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BA8B5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BAyChC"}
|
|
@@ -24,12 +24,12 @@ function PageHeaderWrapper({ className, ...props }) {
|
|
|
24
24
|
const { isOpen } = (0, react_1.useContext)(PageHeaderContext);
|
|
25
25
|
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-wrapper", className: (0, utils_1.cn)('flex items-start justify-between', isOpen && 'border-b', className), ...props }));
|
|
26
26
|
}
|
|
27
|
-
function PageHeader({ children, className }) {
|
|
27
|
+
function PageHeader({ children, className, rootClassName }) {
|
|
28
28
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(PageHeaderContext.Provider, { value: { isOpen }, children: (0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header", className: (0, utils_1.cn)('mt-12', isOpen && 'mb-12'), children: (0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: children }) }) }));
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(PageHeaderContext.Provider, { value: { isOpen }, children: (0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header", className: (0, utils_1.cn)('mt-12', isOpen && 'mb-12', rootClassName), children: (0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: children }) }) }));
|
|
30
30
|
}
|
|
31
|
-
function PageHeaderInfoTitle({ title, subtitle, className, children }) {
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title", className:
|
|
31
|
+
function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children }) {
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title", className: (0, utils_1.cn)('mb-12 flex flex-col gap-4', containerClassName), children: [(0, jsx_runtime_1.jsx)("h1", { className: (0, utils_1.cn)('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-shadcn-400 text-sm font-medium", children: subtitle }), children] })] }));
|
|
33
33
|
}
|
|
34
34
|
function PageHeaderInfoTooltip({ subtitle }) {
|
|
35
35
|
const { toast } = (0, use_toast_1.useToast)();
|
|
@@ -58,5 +58,5 @@ function AccordionTrigger({ className, children, ...props }) {
|
|
|
58
58
|
return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: (0, utils_1.cn)('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
|
|
59
59
|
}
|
|
60
60
|
function AccordionContent({ className, children, ...props }) {
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('pt-0 pb-4', className), children: children }) }));
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "motion-safe:data-[state=closed]:animate-accordion-up motion-safe:data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('pt-0 pb-4', className), children: children }) }));
|
|
62
62
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { IconButton } from '../icon-button';
|
|
4
4
|
declare const alertVariants: (props?: ({
|
|
5
|
-
variant?: "default" | "
|
|
5
|
+
variant?: "default" | "destructive" | "informative" | "warning" | "success" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export type AlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants>;
|
|
8
8
|
declare function Alert({ className, variant, ...props }: AlertProps): React.JSX.Element;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
@layer components {
|
|
24
24
|
.alert {
|
|
25
25
|
@apply p-alert-p text-alert-text bg-card relative w-full rounded-lg;
|
|
26
|
-
@apply [&>svg]:size-alert-icon-size [&>svg
|
|
26
|
+
@apply [&>svg]:size-alert-icon-size [&>svg]:text-alert-text [&>svg]:absolute [&>svg]:top-4.5 [&>svg]:left-4.5 [&>svg~*]:pl-9.5;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.alert-informative {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.alert-title {
|
|
50
|
-
@apply text-alert-title mb-2 font-medium
|
|
50
|
+
@apply text-alert-title mb-2 leading-none font-medium tracking-tight;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.alert-description {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.alert-top-action {
|
|
62
|
-
@apply absolute
|
|
62
|
+
@apply absolute top-2 right-2 flex gap-2 !pl-0;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.alert-close {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
3
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { buttonVariants } from '../../../components/ui/button';
|
|
3
5
|
declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
|
|
4
6
|
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
|
|
5
7
|
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
|
|
@@ -9,7 +11,11 @@ declare function AlertDialogHeader({ className, ...props }: React.ComponentProps
|
|
|
9
11
|
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
10
12
|
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
|
|
11
13
|
declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
|
|
12
|
-
declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>
|
|
13
|
-
|
|
14
|
+
declare function AlertDialogAction({ className, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
|
|
15
|
+
variant?: VariantProps<typeof buttonVariants>['variant'];
|
|
16
|
+
}): React.JSX.Element;
|
|
17
|
+
declare function AlertDialogCancel({ className, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & {
|
|
18
|
+
variant?: VariantProps<typeof buttonVariants>['variant'];
|
|
19
|
+
}): React.JSX.Element;
|
|
14
20
|
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel };
|
|
15
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGvD,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,qBAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAQ3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAI1D,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxD,WAAW,GAAG,YAAY,CAC3B,qBAiBF;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,qBAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,qBAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GAAG;IAI5D,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;CACzD,qBAQA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GAAG;IAK5D,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;CACzD,qBAQA;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EAClB,CAAA"}
|
|
@@ -76,9 +76,9 @@ function AlertDialogTitle({ className, ...props }) {
|
|
|
76
76
|
function AlertDialogDescription({ className, ...props }) {
|
|
77
77
|
return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: (0, utils_1.cn)('dialog-description', className), ...props }));
|
|
78
78
|
}
|
|
79
|
-
function AlertDialogAction({ className, ...props }) {
|
|
80
|
-
return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: (0, utils_1.cn)((0, button_1.buttonVariants)(), className), ...props }));
|
|
79
|
+
function AlertDialogAction({ className, variant = 'default', ...props }) {
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant }), className), ...props }));
|
|
81
81
|
}
|
|
82
|
-
function AlertDialogCancel({ className, ...props }) {
|
|
83
|
-
return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant
|
|
82
|
+
function AlertDialogCancel({ className, variant = 'outline', ...props }) {
|
|
83
|
+
return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant }), className), ...props }));
|
|
84
84
|
}
|
|
@@ -34,7 +34,7 @@ export type AutocompleteContentProps = React.ComponentProps<typeof CommandPrimit
|
|
|
34
34
|
side?: Side;
|
|
35
35
|
onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void;
|
|
36
36
|
};
|
|
37
|
-
export declare function AutocompleteContent({ className, position, side, ref, children, onMouseEnter, onMouseLeave, onPointerDownOutside, ...props }: AutocompleteContentProps): React.JSX.Element
|
|
37
|
+
export declare function AutocompleteContent({ className, position, side, ref, children, onMouseEnter, onMouseLeave, onPointerDownOutside, ...props }: AutocompleteContentProps): React.JSX.Element;
|
|
38
38
|
export declare function AutocompleteGroup({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>): React.JSX.Element;
|
|
39
39
|
export declare function AutocompleteItem({ className, value, onSelect, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>): React.JSX.Element;
|
|
40
40
|
export type AutocompleteProps = React.ComponentProps<typeof CommandPrimitive> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/autocomplete/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/autocomplete/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -157,7 +157,7 @@ function AutocompleteEmpty({ className, ...props }) {
|
|
|
157
157
|
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "autocomplete-empty", className: (0, utils_1.cn)('py-6 text-center text-sm', className), "cmdk-empty": "", role: "presentation", ...props }));
|
|
158
158
|
}
|
|
159
159
|
function AutocompleteLoading({ className, ref, ...props }) {
|
|
160
|
-
return ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Loading, { ref: ref, "data-slot": "autocomplete-loading", className: (0, utils_1.cn)('flex items-center justify-center py-6 text-center text-sm', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }) }));
|
|
160
|
+
return ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Loading, { ref: ref, "data-slot": "autocomplete-loading", className: (0, utils_1.cn)('flex items-center justify-center py-6 text-center text-sm', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-muted-foreground h-5 w-5 motion-safe:animate-spin" }) }));
|
|
161
161
|
}
|
|
162
162
|
exports.SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'];
|
|
163
163
|
function AutocompleteContent({ className, position = 'popper', side = 'bottom', ref, children, onMouseEnter, onMouseLeave, onPointerDownOutside, ...props }) {
|
|
@@ -165,6 +165,17 @@ function AutocompleteContent({ className, position = 'popper', side = 'bottom',
|
|
|
165
165
|
const { open, addOption, setOpen, onScrollbar, setOnScrollbar, inputRef } = useAutocomplete();
|
|
166
166
|
react_1.default.useImperativeHandle(ref, () => _ref.current);
|
|
167
167
|
(0, use_click_away_1.useClickAway)(_ref, (event) => {
|
|
168
|
+
/**
|
|
169
|
+
* ⛔ THE `open` GUARD IS LOAD-BEARING SINCE THIS LIST STOPPED UNMOUNTING.
|
|
170
|
+
* While the panel returned `null` this handler was inert by accident: its
|
|
171
|
+
* ref pointed at nothing. Now that the list stays in the DOM (see the return
|
|
172
|
+
* below), every click anywhere on the page reaches here — and without this
|
|
173
|
+
* line each one would call `setOpen(false)` and blur the input. A consumer
|
|
174
|
+
* form carrying ten of these would run ten handlers per click.
|
|
175
|
+
*/
|
|
176
|
+
if (!open) {
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
168
179
|
// Should not close when clicking on the scrollbar
|
|
169
180
|
if (onScrollbar) {
|
|
170
181
|
return;
|
|
@@ -207,17 +218,42 @@ function AutocompleteContent({ className, position = 'popper', side = 'bottom',
|
|
|
207
218
|
react_1.default.useEffect(() => {
|
|
208
219
|
_searchChildren(children);
|
|
209
220
|
}, [children]);
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
221
|
+
/**
|
|
222
|
+
* ⛔ THE LIST STAYS IN THE DOM, THE OPTIONS DO NOT — and the split is the whole
|
|
223
|
+
* fix (#150).
|
|
224
|
+
*
|
|
225
|
+
* cmdk puts `aria-controls={listId}` on the input it renders and `id={listId}`
|
|
226
|
+
* on this list. Returning `null` while closed therefore left the input naming
|
|
227
|
+
* an element that did not exist, which axe-core reports as a CRITICAL
|
|
228
|
+
* `aria-valid-attr-value` violation — measured as 10 failing cases across five
|
|
229
|
+
* forms in a consumer, in both the populated and the empty state. A screen
|
|
230
|
+
* reader following the reference resolved it to nothing.
|
|
231
|
+
*
|
|
232
|
+
* ⛔ AND NOT "KEEP EVERYTHING MOUNTED", which is the obvious reading of the
|
|
233
|
+
* fix and is too expensive. Only the LIST carries the id; the options carry
|
|
234
|
+
* the cost. One consumer form puts up to ten of these on screen, each holding
|
|
235
|
+
* a page of up to a hundred options — roughly a thousand permanently present
|
|
236
|
+
* nodes for an id that is one element. `{open ? children : null}` keeps the
|
|
237
|
+
* reference resolvable and the DOM the size it was.
|
|
238
|
+
*
|
|
239
|
+
* ⚠️ `hidden` AND NOT A CLASS. It removes the subtree from the accessibility
|
|
240
|
+
* tree as well as from view, so a closed panel is not an empty `listbox` that
|
|
241
|
+
* a screen reader can reach into.
|
|
242
|
+
*
|
|
243
|
+
* ⚠️ THE ENTRY ANIMATION IS NOT LOST, because there was none to lose: the
|
|
244
|
+
* className carries `animate-in` with no `fade-in-*` / `zoom-in-*` / `slide-in-*`
|
|
245
|
+
* companion, so every `--tw-enter-*` variable sits at its default and the
|
|
246
|
+
* keyframe is a no-op today. Should a real one be added later, it belongs on a
|
|
247
|
+
* wrapper INSIDE this list — that subtree still mounts with the children.
|
|
248
|
+
*/
|
|
249
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "relative", hidden: !open, children: (0, jsx_runtime_1.jsx)(cmdk_1.Command.List, { ref: _ref, className: (0, utils_1.cn)('bg-popover text-popover-foreground motion-safe:animate-in absolute top-1 z-50 max-h-96 w-full min-w-32 overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-hidden', position === 'popper' &&
|
|
214
250
|
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), "data-side": side, ...props, onMouseEnter: (e) => {
|
|
215
251
|
onMouseEnter?.(e);
|
|
216
252
|
setOnScrollbar(true);
|
|
217
253
|
}, onMouseLeave: (e) => {
|
|
218
254
|
onMouseLeave?.(e);
|
|
219
255
|
setOnScrollbar(false);
|
|
220
|
-
}, children: children }) }));
|
|
256
|
+
}, children: open ? children : null }) }));
|
|
221
257
|
}
|
|
222
258
|
function AutocompleteGroup({ className, ...props }) {
|
|
223
259
|
return ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Group, { "data-slot": "autocomplete-group", className: (0, utils_1.cn)('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className), ...props }));
|