@kuraykaraaslan/kui-react 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +17 -0
- package/README.md +168 -0
- package/dist/AdvancedDataTable-F3DNXDKX.mjs +11 -0
- package/dist/DataTable-2G27T4E6.mjs +11 -0
- package/dist/DateRangePicker-AL32QB6L.mjs +11 -0
- package/dist/DropdownMenu-f5yV9dzM.d.mts +22 -0
- package/dist/DropdownMenu-f5yV9dzM.d.ts +22 -0
- package/dist/MapView-FERKPCDB.mjs +10 -0
- package/dist/ServerDataTable-RZV3K6KQ.mjs +11 -0
- package/dist/Tooltip-Bof5GvOc.d.mts +248 -0
- package/dist/Tooltip-Bof5GvOc.d.ts +248 -0
- package/dist/VideoPlayer-P3I6ESXJ.mjs +9 -0
- package/dist/app.d.mts +620 -0
- package/dist/app.d.ts +620 -0
- package/dist/app.js +7061 -0
- package/dist/app.mjs +100 -0
- package/dist/chunk-24BCQSLI.mjs +1 -0
- package/dist/chunk-45I3EDB2.mjs +90 -0
- package/dist/chunk-4IWCD7ID.mjs +1450 -0
- package/dist/chunk-5E2HXWFI.mjs +105 -0
- package/dist/chunk-C7AYI4XM.mjs +402 -0
- package/dist/chunk-J4D44TUA.mjs +1267 -0
- package/dist/chunk-KTEWZKNE.mjs +1020 -0
- package/dist/chunk-LMUQHL4Z.mjs +3829 -0
- package/dist/chunk-MD5OQ4J2.mjs +527 -0
- package/dist/chunk-MPJRPYIZ.mjs +1 -0
- package/dist/chunk-MPWUEQ7J.mjs +2422 -0
- package/dist/chunk-MTT5TKAJ.mjs +93 -0
- package/dist/chunk-RBDK7MWQ.mjs +46 -0
- package/dist/chunk-SVFQZPNZ.mjs +3648 -0
- package/dist/chunk-TZWBBMSG.mjs +1 -0
- package/dist/chunk-XA7J6PVJ.mjs +1488 -0
- package/dist/chunk-ZLYBRYWQ.mjs +726 -0
- package/dist/common.d.mts +921 -0
- package/dist/common.d.ts +921 -0
- package/dist/common.js +4991 -0
- package/dist/common.mjs +172 -0
- package/dist/index.d.mts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +17563 -0
- package/dist/index.mjs +349 -0
- package/dist/ui.d.mts +937 -0
- package/dist/ui.d.ts +937 -0
- package/dist/ui.js +10095 -0
- package/dist/ui.mjs +163 -0
- package/package.json +114 -0
- package/styles/index.css +129 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Zero-Clause BSD (0BSD)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Kuray Karaaslan
|
|
4
|
+
|
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
6
|
+
purpose with or without fee is hereby granted.
|
|
7
|
+
|
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
9
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
10
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
11
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
12
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
+
|
|
16
|
+
Courtesy credit request (non-binding):
|
|
17
|
+
A visible mention of the project or author is appreciated, but not required.
|
package/README.md
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# kui-react
|
|
2
|
+
|
|
3
|
+
A modular Next.js 16 / React 19 component library organised by atomic design — atoms → molecules → organisms → app patterns → industry-vertical domains → full-page theme demos. Every component is **copy-paste-ready** from the live showcase; no npm install required.
|
|
4
|
+
|
|
5
|
+
> **AI assistants:** start at `/llms.txt` or fetch `/api/registry` for a machine-readable catalog of every component. See the [AI agent quick reference](#ai-agent-quick-reference) below.
|
|
6
|
+
|
|
7
|
+
## Stack
|
|
8
|
+
|
|
9
|
+
Next.js 16.2.4 · React 19.2.4 · TypeScript 5 · Tailwind CSS 4 · App Router · ESLint 9 · Zustand · Zod · Leaflet · Chart.js · Font Awesome
|
|
10
|
+
|
|
11
|
+
## Quick start
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install
|
|
15
|
+
npm run dev # http://localhost:3000
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Theme demos
|
|
19
|
+
|
|
20
|
+
Seventeen full-page demos — one per industry vertical — built entirely from the component library.
|
|
21
|
+
|
|
22
|
+
<table>
|
|
23
|
+
<tr>
|
|
24
|
+
<td align="center"><b>AI workspace</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-ai.png" alt="AI workspace" width="280"/></td>
|
|
25
|
+
<td align="center"><b>API docs</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-api-doc.png" alt="API docs" width="280"/></td>
|
|
26
|
+
<td align="center"><b>Blog</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-blog.png" alt="Blog" width="280"/></td>
|
|
27
|
+
</tr>
|
|
28
|
+
<tr>
|
|
29
|
+
<td align="center"><b>Commerce</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-commerce.png" alt="Commerce" width="280"/></td>
|
|
30
|
+
<td align="center"><b>Common (auth / account)</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-common.png" alt="Common" width="280"/></td>
|
|
31
|
+
<td align="center"><b>Event tickets</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-event.png" alt="Event tickets" width="280"/></td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td align="center"><b>Fintech dashboard</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-fintech.png" alt="Fintech dashboard" width="280"/></td>
|
|
35
|
+
<td align="center"><b>Food / restaurant</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-food.png" alt="Food / restaurant" width="280"/></td>
|
|
36
|
+
<td align="center"><b>Forum</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-forum.png" alt="Forum" width="280"/></td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<td align="center"><b>IoT platform</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-iot.png" alt="IoT platform" width="280"/></td>
|
|
40
|
+
<td align="center"><b>Jobs board</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-jobs.png" alt="Jobs board" width="280"/></td>
|
|
41
|
+
<td align="center"><b>Landing page</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-landing.png" alt="Landing page" width="280"/></td>
|
|
42
|
+
</tr>
|
|
43
|
+
<tr>
|
|
44
|
+
<td align="center"><b>Media (video)</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-media.png" alt="Media / video" width="280"/></td>
|
|
45
|
+
<td align="center"><b>NFT marketplace</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-nft.png" alt="NFT marketplace" width="280"/></td>
|
|
46
|
+
<td align="center"><b>Real estate</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-real-estate.png" alt="Real estate" width="280"/></td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td align="center"><b>Social feed</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-social.png" alt="Social feed" width="280"/></td>
|
|
50
|
+
<td align="center"><b>Travel</b><br/><img src="https://raw.githubusercontent.com/kuraykaraaslan/kui-react/main/public/assets/img/screenshot-travel.png" alt="Travel" width="280"/></td>
|
|
51
|
+
<td></td>
|
|
52
|
+
</tr>
|
|
53
|
+
</table>
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Module layers
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
modules/
|
|
61
|
+
├── ui/ ← 47 primitive components (atoms + molecules)
|
|
62
|
+
├── app/ ← 25 application patterns (shells, navigation, forms, states)
|
|
63
|
+
├── domains/ ← 16 industry verticals (ai, blog, commerce, event, …)
|
|
64
|
+
├── registry/ ← AI-discoverability layer — machine-readable catalog builder
|
|
65
|
+
└── showcase/ ← Live preview site + interactive playground
|
|
66
|
+
app/theme/ ← 16 full-page theme demos, one per domain vertical
|
|
67
|
+
libs/utils/ ← Shared utilities (e.g. cn)
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Every layer builds on the one above. Business logic stays in `domains/` / `app/`; `ui/` is pure presentation.
|
|
71
|
+
|
|
72
|
+
## Using a component (copy-paste path)
|
|
73
|
+
|
|
74
|
+
1. Browse the live showcase, pick a component.
|
|
75
|
+
2. Open the variant you want, copy its source from the **Source** tab.
|
|
76
|
+
3. Drop it into your project. If it imports `cn`, copy `libs/utils/cn.ts` too.
|
|
77
|
+
4. Read the component's `composes[]` field in the registry to know what other components it needs.
|
|
78
|
+
|
|
79
|
+
## Using a component (in-tree path)
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
import { Button, Card } from '@/modules/ui'; // top-level barrel
|
|
83
|
+
import { AppShell, AppSidebar } from '@/modules/app';
|
|
84
|
+
import { ProductCard, OrderCard } from '@/modules/domains/commerce';
|
|
85
|
+
import { Commerce, Blog } from '@/modules/domains'; // namespace barrel
|
|
86
|
+
import { cn } from '@/libs/utils/cn';
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## AI agent quick reference
|
|
90
|
+
|
|
91
|
+
This library ships a first-class machine-readable surface for AI tools — HTTP endpoints, static snapshots, an MCP server, and editor rule files for every major AI coding assistant.
|
|
92
|
+
|
|
93
|
+
### HTTP endpoints
|
|
94
|
+
|
|
95
|
+
| Resource | URL / Path | Purpose |
|
|
96
|
+
|---|---|---|
|
|
97
|
+
| Concise overview | [`/llms.txt`](public/llms.txt) | One-page TL;DR following the llms.txt convention |
|
|
98
|
+
| Full registry (JSON) | `GET /api/registry` | Every component with full source, variants, status, tokens |
|
|
99
|
+
| Index registry (JSON) | `GET /api/registry?index=1` | Same data minus `source` — ~5x smaller for search |
|
|
100
|
+
| Long-form markdown | `GET /llms-full.txt` | Flattened markdown of every component — paste into a context window |
|
|
101
|
+
| JSON Schema | [`/schemas/registry-v1.json`](public/schemas/registry-v1.json) | Validate registry payloads or generate typed clients |
|
|
102
|
+
| Offline JSON snapshot | [`/registry/components.json`](public/registry/components.json) | Pre-built static catalog — works without dev server (`npm run registry:snapshot`) |
|
|
103
|
+
| Per-component markdown | `/components/<id>.md` | One file per component — chunk-friendly retrieval |
|
|
104
|
+
| Component index | [`/components/_index.json`](public/components/_index.json) | id → filename map for the markdown chunks |
|
|
105
|
+
| Registry source | [`modules/registry/registry.ts`](modules/registry/registry.ts) | Derives the catalog from showcase data |
|
|
106
|
+
|
|
107
|
+
The registry includes for every component: id, layer, category, file path, description, status, since, full source, every variant, design tokens consumed, accessibility metadata, dependencies, and (where authored) when-to-use guidance.
|
|
108
|
+
|
|
109
|
+
### MCP server (Claude Desktop / Cursor / Cline / Windsurf / Zed)
|
|
110
|
+
|
|
111
|
+
Zero-dependency stdio MCP server defined in [`.mcp.json`](.mcp.json). Tools exposed:
|
|
112
|
+
|
|
113
|
+
- `list_components` · `get_component` · `search_components`
|
|
114
|
+
- `list_themes` · `get_conventions` · `list_design_tokens`
|
|
115
|
+
- `read_file` (sandboxed to the repository root)
|
|
116
|
+
|
|
117
|
+
The server reads `public/registry/components.json` so it works offline. Refresh with `npm run registry:snapshot`. Run standalone with `npm run mcp:server`.
|
|
118
|
+
|
|
119
|
+
### Editor rule files (canonical: [`AGENTS.md`](AGENTS.md))
|
|
120
|
+
|
|
121
|
+
| File | Tool |
|
|
122
|
+
|---|---|
|
|
123
|
+
| [`.cursor/rules/kui-react.mdc`](.cursor/rules/kui-react.mdc) | Cursor (modern) |
|
|
124
|
+
| [`.cursorrules`](.cursorrules) | Cursor (legacy) |
|
|
125
|
+
| [`.windsurfrules`](.windsurfrules) | Windsurf |
|
|
126
|
+
| [`.github/copilot-instructions.md`](.github/copilot-instructions.md) | GitHub Copilot |
|
|
127
|
+
| [`.clinerules`](.clinerules) | Cline / Continue.dev |
|
|
128
|
+
|
|
129
|
+
## Adding a component
|
|
130
|
+
|
|
131
|
+
1. Choose the right layer (`ui/`, `app/`, or `domains/<vertical>/`).
|
|
132
|
+
2. Author the file. Follow the rules in [`AGENTS.md`](AGENTS.md): `'use client'`, named export, `cn()` for classNames, design tokens not raw hex, ARIA + focus-visible ring.
|
|
133
|
+
3. Add a showcase entry under `modules/showcase/data/sections/` with at least 2 variants.
|
|
134
|
+
4. Wire the builder into `modules/showcase/data/showcase.data.tsx`.
|
|
135
|
+
5. Register in `modules/showcase/data/showcase.menu.ts`.
|
|
136
|
+
6. (If new domain vertical) update `modules/domains/<vertical>/index.ts` barrel and add to `modules/domains/index.ts` namespace export.
|
|
137
|
+
|
|
138
|
+
## Adding a theme
|
|
139
|
+
|
|
140
|
+
See the **Adding a new theme** section in [`AGENTS.md`](AGENTS.md) for the required step order.
|
|
141
|
+
|
|
142
|
+
## Scripts
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
npm run dev # development server
|
|
146
|
+
npm run build # production build
|
|
147
|
+
npm run start # production server
|
|
148
|
+
npm run lint # ESLint
|
|
149
|
+
npm run screenshots # Puppeteer-based visual capture
|
|
150
|
+
npm run registry:snapshot # write offline JSON + per-component markdown to public/
|
|
151
|
+
npm run mcp:server # start the stdio MCP server (used by .mcp.json)
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Layout conventions
|
|
155
|
+
|
|
156
|
+
- `modules/ui/*.tsx` and `modules/app/*.tsx` start with `'use client';`.
|
|
157
|
+
- Domain files in `modules/domains/<vertical>/...` are client components too.
|
|
158
|
+
- Theme `layout.tsx` is a Client Component; `page.tsx` is a Server Component unless it owns local state.
|
|
159
|
+
- `<main id="main-content">` lives in `layout.tsx` for the skip-link accessibility pattern.
|
|
160
|
+
- All icons come from Font Awesome — no inline SVG, no other icon libraries.
|
|
161
|
+
|
|
162
|
+
## Contributing
|
|
163
|
+
|
|
164
|
+
See [`CONTRIBUTING.md`](CONTRIBUTING.md) and the deeper authoring rules in [`AGENTS.md`](AGENTS.md). Pull requests should pass `npm run lint` and `tsc --noEmit`.
|
|
165
|
+
|
|
166
|
+
## License
|
|
167
|
+
|
|
168
|
+
0BSD — see [`LICENSE`](LICENSE).
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
|
|
4
|
+
type DropdownItem = {
|
|
5
|
+
type?: 'item';
|
|
6
|
+
label: string;
|
|
7
|
+
icon?: react__default.ReactNode;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
danger?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
} | {
|
|
12
|
+
type: 'separator';
|
|
13
|
+
};
|
|
14
|
+
declare function DropdownMenu({ trigger, items, header, align, className, }: {
|
|
15
|
+
trigger: react__default.ReactNode;
|
|
16
|
+
items: DropdownItem[];
|
|
17
|
+
header?: react__default.ReactNode;
|
|
18
|
+
align?: 'left' | 'right';
|
|
19
|
+
className?: string;
|
|
20
|
+
}): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { type DropdownItem as D, DropdownMenu as a };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
|
|
4
|
+
type DropdownItem = {
|
|
5
|
+
type?: 'item';
|
|
6
|
+
label: string;
|
|
7
|
+
icon?: react__default.ReactNode;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
danger?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
} | {
|
|
12
|
+
type: 'separator';
|
|
13
|
+
};
|
|
14
|
+
declare function DropdownMenu({ trigger, items, header, align, className, }: {
|
|
15
|
+
trigger: react__default.ReactNode;
|
|
16
|
+
items: DropdownItem[];
|
|
17
|
+
header?: react__default.ReactNode;
|
|
18
|
+
align?: 'left' | 'right';
|
|
19
|
+
className?: string;
|
|
20
|
+
}): react_jsx_runtime.JSX.Element;
|
|
21
|
+
|
|
22
|
+
export { type DropdownItem as D, DropdownMenu as a };
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
type DateValue = Date | null;
|
|
6
|
+
type DateRange = {
|
|
7
|
+
start: Date | null;
|
|
8
|
+
end: Date | null;
|
|
9
|
+
};
|
|
10
|
+
type LocaleCode = 'tr' | 'en';
|
|
11
|
+
type DisabledDates = Date[] | ((d: Date) => boolean);
|
|
12
|
+
type DatePickerMessages = {
|
|
13
|
+
/** Trigger placeholder when no date selected. */
|
|
14
|
+
placeholder: string;
|
|
15
|
+
/** Aria-label for the chevron-left (previous month) button. */
|
|
16
|
+
prevMonth: string;
|
|
17
|
+
/** Aria-label for the chevron-right (next month) button. */
|
|
18
|
+
nextMonth: string;
|
|
19
|
+
/** Button label that jumps to today. */
|
|
20
|
+
today: string;
|
|
21
|
+
/** Aria-label for the clear (×) button on the trigger. */
|
|
22
|
+
clear: string;
|
|
23
|
+
/** Aria-label for the calendar dialog. */
|
|
24
|
+
dialogLabel: string;
|
|
25
|
+
/** Visible label when the user reaches a disabled day via keyboard. */
|
|
26
|
+
disabledDate: string;
|
|
27
|
+
};
|
|
28
|
+
type CommonPickerProps = {
|
|
29
|
+
id?: string;
|
|
30
|
+
label?: string;
|
|
31
|
+
hint?: string;
|
|
32
|
+
error?: string;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
required?: boolean;
|
|
35
|
+
min?: Date;
|
|
36
|
+
max?: Date;
|
|
37
|
+
disabledDates?: DisabledDates;
|
|
38
|
+
/** Locale code — defaults to 'tr'. */
|
|
39
|
+
locale?: LocaleCode;
|
|
40
|
+
/** Override the locale-default display format. */
|
|
41
|
+
format?: string;
|
|
42
|
+
/** Override individual messages (placeholder, today, …). */
|
|
43
|
+
messages?: Partial<DatePickerMessages>;
|
|
44
|
+
/** Popover (default) is the only M1 variant. */
|
|
45
|
+
variant?: 'popover';
|
|
46
|
+
className?: string;
|
|
47
|
+
/** Pass-through name attribute for native form submission. */
|
|
48
|
+
name?: string;
|
|
49
|
+
};
|
|
50
|
+
type DatePickerProps = CommonPickerProps & {
|
|
51
|
+
value: DateValue;
|
|
52
|
+
onChange: (d: Date | null) => void;
|
|
53
|
+
};
|
|
54
|
+
type DateRangePickerProps = CommonPickerProps & {
|
|
55
|
+
value: DateRange | null;
|
|
56
|
+
onChange: (r: DateRange) => void;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
type SelectOption = {
|
|
60
|
+
value: string;
|
|
61
|
+
label: string;
|
|
62
|
+
icon?: React.ReactNode;
|
|
63
|
+
};
|
|
64
|
+
type BaseProps = {
|
|
65
|
+
id: string;
|
|
66
|
+
label: string;
|
|
67
|
+
options: SelectOption[];
|
|
68
|
+
placeholder?: string;
|
|
69
|
+
hint?: string;
|
|
70
|
+
error?: string;
|
|
71
|
+
disabled?: boolean;
|
|
72
|
+
required?: boolean;
|
|
73
|
+
searchable?: boolean;
|
|
74
|
+
className?: string;
|
|
75
|
+
};
|
|
76
|
+
declare const Select: react.ForwardRefExoticComponent<BaseProps & Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "id"> & react.RefAttributes<HTMLSelectElement>>;
|
|
77
|
+
|
|
78
|
+
declare function SkipLink({ href, label, className, }: {
|
|
79
|
+
href?: string;
|
|
80
|
+
label?: string;
|
|
81
|
+
className?: string;
|
|
82
|
+
}): react_jsx_runtime.JSX.Element;
|
|
83
|
+
declare function LiveRegion({ message, politeness, className, }: {
|
|
84
|
+
message?: string;
|
|
85
|
+
politeness?: 'polite' | 'assertive';
|
|
86
|
+
className?: string;
|
|
87
|
+
}): react_jsx_runtime.JSX.Element;
|
|
88
|
+
declare function Announcer({ message, politeness, }: {
|
|
89
|
+
message: string;
|
|
90
|
+
politeness?: 'polite' | 'assertive';
|
|
91
|
+
}): react_jsx_runtime.JSX.Element;
|
|
92
|
+
|
|
93
|
+
type BreadcrumbItem = {
|
|
94
|
+
label: string;
|
|
95
|
+
href?: string;
|
|
96
|
+
};
|
|
97
|
+
declare function Breadcrumb({ items, separator, maxItems, className, }: {
|
|
98
|
+
items: BreadcrumbItem[];
|
|
99
|
+
separator?: React.ReactNode;
|
|
100
|
+
maxItems?: number;
|
|
101
|
+
className?: string;
|
|
102
|
+
}): react_jsx_runtime.JSX.Element;
|
|
103
|
+
|
|
104
|
+
type ComboBoxOption = {
|
|
105
|
+
value: string;
|
|
106
|
+
label: string;
|
|
107
|
+
description?: string;
|
|
108
|
+
icon?: React.ReactNode;
|
|
109
|
+
disabled?: boolean;
|
|
110
|
+
};
|
|
111
|
+
type LoadMoreFn = () => Promise<ComboBoxOption[]>;
|
|
112
|
+
type ComboBoxProps = {
|
|
113
|
+
id: string;
|
|
114
|
+
label: string;
|
|
115
|
+
options: ComboBoxOption[];
|
|
116
|
+
value?: string;
|
|
117
|
+
onChange?: (value: string) => void;
|
|
118
|
+
onSearch?: (query: string, signal?: AbortSignal) => ComboBoxOption[] | Promise<ComboBoxOption[]>;
|
|
119
|
+
onLoadMore?: LoadMoreFn;
|
|
120
|
+
placeholder?: string;
|
|
121
|
+
hint?: string;
|
|
122
|
+
error?: string;
|
|
123
|
+
disabled?: boolean;
|
|
124
|
+
required?: boolean;
|
|
125
|
+
clearable?: boolean;
|
|
126
|
+
noResultsText?: string;
|
|
127
|
+
className?: string;
|
|
128
|
+
debounceMs?: number;
|
|
129
|
+
virtualize?: boolean | number;
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
type MultiSelectOption = ComboBoxOption;
|
|
133
|
+
type MultiSelectProps = {
|
|
134
|
+
id: string;
|
|
135
|
+
label: string;
|
|
136
|
+
options: MultiSelectOption[];
|
|
137
|
+
value?: string[];
|
|
138
|
+
onChange?: (values: string[]) => void;
|
|
139
|
+
placeholder?: string;
|
|
140
|
+
hint?: string;
|
|
141
|
+
error?: string;
|
|
142
|
+
disabled?: boolean;
|
|
143
|
+
searchable?: boolean;
|
|
144
|
+
className?: string;
|
|
145
|
+
onSearch?: (q: string, signal?: AbortSignal) => MultiSelectOption[] | Promise<MultiSelectOption[]>;
|
|
146
|
+
onLoadMore?: () => Promise<MultiSelectOption[]>;
|
|
147
|
+
debounceMs?: number;
|
|
148
|
+
};
|
|
149
|
+
declare function MultiSelect({ id, label, options, value, onChange, placeholder, hint, error, disabled, searchable, className, onSearch, onLoadMore, debounceMs, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
|
|
150
|
+
|
|
151
|
+
type ToastVariant = 'success' | 'warning' | 'error' | 'info' | 'loading';
|
|
152
|
+
type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
153
|
+
type ToastItemAction = {
|
|
154
|
+
label: string;
|
|
155
|
+
/** Receives a `dismiss` callback so actions can optionally close the toast. */
|
|
156
|
+
onClick: (dismiss: () => void) => void;
|
|
157
|
+
variant?: 'default' | 'danger';
|
|
158
|
+
};
|
|
159
|
+
type ToastItem = {
|
|
160
|
+
id: string;
|
|
161
|
+
variant: ToastVariant;
|
|
162
|
+
message: string;
|
|
163
|
+
title?: string;
|
|
164
|
+
icon?: ReactNode;
|
|
165
|
+
/** ms — undefined = variant default; 0 = persistent */
|
|
166
|
+
duration?: number;
|
|
167
|
+
actions?: ToastItemAction[];
|
|
168
|
+
/** Show the × close button (default: true) */
|
|
169
|
+
closeButton?: boolean;
|
|
170
|
+
/** Per-toast position override (M1) — falls back to <Toaster position>. */
|
|
171
|
+
position?: ToastPosition;
|
|
172
|
+
};
|
|
173
|
+
/** Options accepted by `toast(message, opts)` and `toast.success(...)` etc. */
|
|
174
|
+
type ToastOptions = Partial<Omit<ToastItem, 'id' | 'variant' | 'message'>>;
|
|
175
|
+
/** Customisable copy strings for built-in toaster UI (M2+ extends this). */
|
|
176
|
+
type ToastMessages = {
|
|
177
|
+
dismiss?: string;
|
|
178
|
+
};
|
|
179
|
+
/** Imperative API surface — keep in sync with `toast` object. */
|
|
180
|
+
type ToastApi = {
|
|
181
|
+
(message: string, opts?: ToastOptions): string;
|
|
182
|
+
success: (message: string, opts?: ToastOptions) => string;
|
|
183
|
+
error: (message: string, opts?: ToastOptions) => string;
|
|
184
|
+
warning: (message: string, opts?: ToastOptions) => string;
|
|
185
|
+
info: (message: string, opts?: ToastOptions) => string;
|
|
186
|
+
loading: (message: string, opts?: ToastOptions) => string;
|
|
187
|
+
promise: <T>(promise: Promise<T>, messages: {
|
|
188
|
+
loading: string;
|
|
189
|
+
success: string | ((data: T) => string);
|
|
190
|
+
error: string | ((err: unknown) => string);
|
|
191
|
+
}, opts?: ToastOptions) => string;
|
|
192
|
+
update: (id: string, patch: Partial<Omit<ToastItem, 'id'>>) => void;
|
|
193
|
+
dismiss: (id: string) => void;
|
|
194
|
+
clear: () => void;
|
|
195
|
+
};
|
|
196
|
+
/** @deprecated Pre-directory-split alias. Prefer ToastItemAction. */
|
|
197
|
+
type ToastAction = {
|
|
198
|
+
label: string;
|
|
199
|
+
onClick: () => void;
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
declare const toast: ToastApi;
|
|
203
|
+
type ToasterProps = {
|
|
204
|
+
/** Default position for toasts that don't specify their own. */
|
|
205
|
+
position?: ToastPosition;
|
|
206
|
+
/** Maximum concurrent toasts (default 5). Older toasts dismiss FIFO. */
|
|
207
|
+
max?: number;
|
|
208
|
+
/** Tailwind gap unit between stacked toasts (default 2 = 0.5rem). */
|
|
209
|
+
gap?: number;
|
|
210
|
+
/** Skip enter/exit animation. M3 will auto-detect `prefers-reduced-motion`. */
|
|
211
|
+
reducedMotion?: boolean;
|
|
212
|
+
/** Localisable copy. TODO M2: pipe into close button / action labels. */
|
|
213
|
+
messages?: ToastMessages;
|
|
214
|
+
};
|
|
215
|
+
declare function Toaster({ position, max, gap, reducedMotion, messages: _messages, }?: ToasterProps): react_jsx_runtime.JSX.Element;
|
|
216
|
+
/** @deprecated Use `<Toaster />` — kept for back-compat with the pre-split API. */
|
|
217
|
+
declare const ToastProvider: typeof Toaster;
|
|
218
|
+
/** @deprecated Use `<Toaster />` instead. Static region without store wiring. */
|
|
219
|
+
declare function ToastRegion({ children, position, className, }: {
|
|
220
|
+
children?: React.ReactNode;
|
|
221
|
+
position?: ToastPosition;
|
|
222
|
+
className?: string;
|
|
223
|
+
}): react_jsx_runtime.JSX.Element;
|
|
224
|
+
/** @deprecated Mount `<Toaster />` and call `toast.success(...)` instead. */
|
|
225
|
+
declare function Toast({ variant, message, duration, onDismiss, action, }: {
|
|
226
|
+
variant?: ToastItem['variant'];
|
|
227
|
+
message: string;
|
|
228
|
+
duration?: number;
|
|
229
|
+
onDismiss?: () => void;
|
|
230
|
+
action?: {
|
|
231
|
+
label: string;
|
|
232
|
+
onClick: () => void;
|
|
233
|
+
};
|
|
234
|
+
}): null;
|
|
235
|
+
|
|
236
|
+
type TooltipTheme = 'default' | 'dark' | 'light';
|
|
237
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
238
|
+
declare function Tooltip({ content, placement, theme, arrow, delay, children, className, }: {
|
|
239
|
+
content: React.ReactNode;
|
|
240
|
+
placement?: TooltipPlacement;
|
|
241
|
+
theme?: TooltipTheme;
|
|
242
|
+
arrow?: boolean;
|
|
243
|
+
delay?: number;
|
|
244
|
+
children: React.ReactNode;
|
|
245
|
+
className?: string;
|
|
246
|
+
}): react_jsx_runtime.JSX.Element;
|
|
247
|
+
|
|
248
|
+
export { Announcer as A, Breadcrumb as B, type ComboBoxOption as C, type DateRange as D, LiveRegion as L, MultiSelect as M, Select as S, Toast as T, type BreadcrumbItem as a, type MultiSelectOption as b, type SelectOption as c, SkipLink as d, type ToastAction as e, type ToastItem as f, type ToastItemAction as g, type ToastPosition as h, ToastProvider as i, ToastRegion as j, type ToastVariant as k, Tooltip as l, type DatePickerProps as m, type DateRangePickerProps as n, type ComboBoxProps as o, toast as t };
|