@sito/dashboard 0.0.64 → 0.0.66
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 +69 -120
- package/dist/Badge-CIeYthEy.js +9 -0
- package/dist/Badge-Z78MlGoQ.cjs +1 -0
- package/dist/Badge.cjs +1 -0
- package/dist/Badge.css +1 -0
- package/dist/Badge.d.ts +2 -0
- package/dist/Badge.js +4 -0
- package/dist/Button-BlYa3uPc.cjs +1 -0
- package/dist/Button-D73-swfo.js +24 -0
- package/dist/Button.cjs +1 -0
- package/dist/Button.css +1 -0
- package/dist/Button.d.ts +2 -0
- package/dist/Button.js +4 -0
- package/dist/Chip-JDQqzO9I.js +37 -0
- package/dist/Chip-a2z-338_.cjs +1 -0
- package/dist/Chip.cjs +1 -0
- package/dist/Chip.css +1 -0
- package/dist/Chip.d.ts +2 -0
- package/dist/Chip.js +4 -0
- package/dist/Close-O9P7wJGf.cjs +1 -0
- package/dist/Close-rKC9AcNX.js +17 -0
- package/dist/Dropdown-CAxauIXt.cjs +1 -0
- package/dist/Dropdown-CbaxuMbk.js +63 -0
- package/dist/Dropdown.cjs +1 -0
- package/dist/Dropdown.css +1 -0
- package/dist/Dropdown.d.ts +2 -0
- package/dist/Dropdown.js +4 -0
- package/dist/File-BuJndWMv.js +17 -0
- package/dist/File-_Hjw2d3F.cjs +1 -0
- package/dist/FileInput-5tMOO7mb.cjs +1 -0
- package/dist/FileInput-B--eBQVa.js +91 -0
- package/dist/FileInput.css +1 -0
- package/dist/Filters-BivtNVS3.js +64 -0
- package/dist/Filters-C5XEbF3V.cjs +1 -0
- package/dist/FiltersProvider-CY2fsw_F.js +57 -0
- package/dist/FiltersProvider-CYqLFEI9.cjs +1 -0
- package/dist/FiltersProvider.cjs +1 -0
- package/dist/FiltersProvider.d.ts +2 -0
- package/dist/FiltersProvider.js +8 -0
- package/dist/Form.cjs +1 -0
- package/dist/Form.d.ts +2 -0
- package/dist/Form.js +13 -0
- package/dist/IconButton-BpsTEj0z.js +29 -0
- package/dist/IconButton-CVnmT2E9.cjs +1 -0
- package/dist/IconButton.cjs +1 -0
- package/dist/IconButton.css +1 -0
- package/dist/IconButton.d.ts +2 -0
- package/dist/IconButton.js +4 -0
- package/dist/Loading-B_c_4XLr.js +26 -0
- package/dist/Loading-CNECRan-.cjs +1 -0
- package/dist/Loading.cjs +1 -0
- package/dist/Loading.css +1 -0
- package/dist/Loading.d.ts +2 -0
- package/dist/Loading.js +4 -0
- package/dist/SvgIcons.cjs +1 -0
- package/dist/SvgIcons.d.ts +2 -0
- package/dist/SvgIcons.js +12 -0
- package/dist/Table-CH9HYQ2I.js +946 -0
- package/dist/Table-CWss4TW5.cjs +1 -0
- package/dist/Table.cjs +1 -0
- package/dist/Table.css +1 -0
- package/dist/Table.d.ts +2 -0
- package/dist/Table.js +18 -0
- package/dist/TableOptions.cjs +1 -0
- package/dist/TableOptions.d.ts +2 -0
- package/dist/TableOptions.js +5 -0
- package/dist/TableOptionsProvider-BchUDA3B.cjs +1 -0
- package/dist/TableOptionsProvider-BfQS8l1N.js +50 -0
- package/dist/TextInput-BLfTozZ9.js +320 -0
- package/dist/TextInput-Bn8zsDnU.cjs +1 -0
- package/dist/TextInput.css +1 -0
- package/dist/Tooltip-B4E-FRwY.js +37 -0
- package/dist/Tooltip-BSKAgRkc.cjs +1 -0
- package/dist/Tooltip.cjs +1 -0
- package/dist/Tooltip.css +1 -0
- package/dist/Tooltip.d.ts +2 -0
- package/dist/Tooltip.js +4 -0
- package/dist/Translation.cjs +1 -0
- package/dist/Translation.d.ts +2 -0
- package/dist/Translation.js +5 -0
- package/dist/TranslationProvider-51Pc9Xrr.cjs +1 -0
- package/dist/TranslationProvider-COebIyxr.js +19 -0
- package/dist/components/Button/Button.stories.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.stories.d.ts +1 -0
- package/dist/components/Dropdown/types.d.ts +1 -0
- package/dist/components/Form/AutocompleteInput/AutocompleteInput.d.ts +3 -3
- package/dist/components/Form/FileInput/FileInput.test.d.ts +1 -0
- package/dist/components/Form/TextInput/TextInput.test.d.ts +1 -0
- package/dist/components/IconButton/IconButton.stories.d.ts +1 -0
- package/dist/components/Table/components/Rows.d.ts +0 -1
- package/dist/components/Table/components/TableSelectionBar.d.ts +18 -0
- package/dist/components/Table/components/TableSelectionBar.test.d.ts +1 -0
- package/dist/components/Table/components/index.d.ts +1 -0
- package/dist/components/Table/hooks/index.d.ts +3 -0
- package/dist/components/Table/hooks/useExpandedRows.d.ts +28 -0
- package/dist/components/Table/hooks/useTableMultiActions.d.ts +20 -0
- package/dist/components/Table/hooks/useTableRowSelection.d.ts +26 -0
- package/dist/components/Table/utils.d.ts +8 -0
- package/dist/components/Table/utils.test.d.ts +1 -0
- package/dist/index.cjs +1 -0
- package/dist/index.css +1 -0
- package/dist/index.js +70 -0
- package/dist/lib.cjs +1 -0
- package/dist/lib.d.ts +2 -0
- package/dist/lib.js +6 -0
- package/dist/query-81BrXp3i.cjs +1 -0
- package/dist/query-CwuehjY1.js +4 -0
- package/package.json +92 -12
- package/dist/dashboard.cjs +0 -1
- package/dist/dashboard.js +0 -2511
- package/dist/main.css +0 -1
package/README.md
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
# @sito/dashboard
|
|
2
2
|
|
|
3
|
-
`@sito/dashboard` is a React + TypeScript UI library
|
|
3
|
+
`@sito/dashboard` is a React + TypeScript UI library for dashboard and admin interfaces.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Highlights
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
- Built-in providers for translations and table state management.
|
|
7
|
+
- `Table` component with sorting, filtering, pagination, row selection, bulk actions, and expandable rows.
|
|
8
|
+
- Reusable UI pieces: `Badge`, `Button`, `Chip`, `Dropdown`, `IconButton`, `Loading`, `Tooltip`, and `SvgIcons`.
|
|
9
|
+
- Form controls: `TextInput`, `SelectInput`, `AutocompleteInput`, `CheckInput`, and `FileInput`.
|
|
10
|
+
- Built-in providers for translations and table state (`TranslationProvider`, `TableOptionsProvider`).
|
|
12
11
|
|
|
13
12
|
## Installation
|
|
14
13
|
|
|
@@ -18,22 +17,18 @@ npm install @sito/dashboard
|
|
|
18
17
|
|
|
19
18
|
# yarn
|
|
20
19
|
yarn add @sito/dashboard
|
|
21
|
-
```
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add @sito/dashboard
|
|
23
|
+
```
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
### Peer dependency
|
|
26
26
|
|
|
27
27
|
- `react` (`>=18.2 <20`)
|
|
28
|
-
- `@emotion/css` (`11.13.5`)
|
|
29
|
-
|
|
30
|
-
## Usage
|
|
31
28
|
|
|
32
|
-
|
|
29
|
+
## Quick Usage
|
|
33
30
|
|
|
34
|
-
|
|
35
|
-
- `Table` should be wrapped by `TranslationProvider` and `TableOptionsProvider`.
|
|
36
|
-
- `actions` is a callback per row: `(row) => ActionType[]`.
|
|
31
|
+
Import directly from `@sito/dashboard` (do not import from internal paths).
|
|
37
32
|
|
|
38
33
|
```tsx
|
|
39
34
|
import {
|
|
@@ -54,48 +49,7 @@ const rows: UserRow[] = [
|
|
|
54
49
|
{ id: 2, deletedAt: null, name: "Jane Smith", age: 25 },
|
|
55
50
|
];
|
|
56
51
|
|
|
57
|
-
const
|
|
58
|
-
{
|
|
59
|
-
id: "view",
|
|
60
|
-
tooltip: `View ${row.name}`,
|
|
61
|
-
icon: <span>View</span>,
|
|
62
|
-
onClick: () => console.log("View", row),
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
id: "delete",
|
|
66
|
-
tooltip: "Delete selected",
|
|
67
|
-
icon: <span>Delete</span>,
|
|
68
|
-
multiple: true,
|
|
69
|
-
onClick: () => console.log("Delete", row),
|
|
70
|
-
onMultipleClick: (selectedRows: UserRow[]) =>
|
|
71
|
-
console.log("Bulk delete", selectedRows.map(({ name }) => name)),
|
|
72
|
-
},
|
|
73
|
-
];
|
|
74
|
-
|
|
75
|
-
const translations: Record<string, string> = {
|
|
76
|
-
"_accessibility:components.table.selectedCount": "Selected {{count}} items",
|
|
77
|
-
"_accessibility:labels.actions": "Actions",
|
|
78
|
-
"_accessibility:buttons.filters": "Filters",
|
|
79
|
-
"_accessibility:buttons.previous": "Previous page",
|
|
80
|
-
"_accessibility:buttons.next": "Next page",
|
|
81
|
-
"_accessibility:buttons.clear": "Clear",
|
|
82
|
-
"_accessibility:buttons.applyFilters": "Apply filters",
|
|
83
|
-
"_accessibility:components.table.pageSizes": "Rows per page",
|
|
84
|
-
"_accessibility:components.table.jumpToPage": "Jump to page",
|
|
85
|
-
"_accessibility:components.table.of": "of",
|
|
86
|
-
"_accessibility:components.table.empty": "No data available",
|
|
87
|
-
"_accessibility:components.table.selectRow": "Select row",
|
|
88
|
-
"_accessibility:components.table.selectAllRows": "Select all visible rows",
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
const t = (key: string, options?: Record<string, unknown>) => {
|
|
92
|
-
if (key === "_accessibility:components.table.selectedCount") {
|
|
93
|
-
const count = typeof options?.count === "number" ? options.count : 0;
|
|
94
|
-
return translations[key].replace("{{count}}", String(count));
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
return translations[key] ?? key;
|
|
98
|
-
};
|
|
52
|
+
const t = (key: string) => key;
|
|
99
53
|
|
|
100
54
|
export function UsersTable() {
|
|
101
55
|
return (
|
|
@@ -117,11 +71,14 @@ export function UsersTable() {
|
|
|
117
71
|
},
|
|
118
72
|
{ key: "age", label: "Age", sortable: true },
|
|
119
73
|
]}
|
|
120
|
-
actions={
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
74
|
+
actions={(row) => [
|
|
75
|
+
{
|
|
76
|
+
id: "view",
|
|
77
|
+
tooltip: `View ${row.name}`,
|
|
78
|
+
icon: <span>View</span>,
|
|
79
|
+
onClick: () => console.log("View", row),
|
|
80
|
+
},
|
|
81
|
+
]}
|
|
125
82
|
/>
|
|
126
83
|
</TableOptionsProvider>
|
|
127
84
|
</TranslationProvider>
|
|
@@ -129,24 +86,38 @@ export function UsersTable() {
|
|
|
129
86
|
}
|
|
130
87
|
```
|
|
131
88
|
|
|
132
|
-
## Core Table Props
|
|
133
|
-
|
|
134
|
-
| Prop
|
|
135
|
-
|
|
136
|
-
| `entity`
|
|
137
|
-
| `data`
|
|
138
|
-
| `columns`
|
|
139
|
-
| `actions`
|
|
140
|
-
| `title`
|
|
141
|
-
| `toolbar`
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
148
|
-
|
|
149
|
-
|
|
89
|
+
## Core `Table` Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Required | Description |
|
|
92
|
+
| --------------------------- | ----------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- |
|
|
93
|
+
| `entity` | `string` | Yes | Entity name used by internal table state. |
|
|
94
|
+
| `data` | `TRow[]` | Yes | Rows to render. `TRow` must extend `BaseDto` and include `id`. |
|
|
95
|
+
| `columns` | `ColumnType<TRow>[]` | No | Column definitions. |
|
|
96
|
+
| `actions` | `(row: TRow) => ActionType<TRow>[]` | No | Per-row action factory. |
|
|
97
|
+
| `title` | `string` | No | Header title. |
|
|
98
|
+
| `toolbar` | `ReactNode` | No | Extra content rendered in the table header. |
|
|
99
|
+
| `isLoading` | `boolean` | No | Loading state for table UI. |
|
|
100
|
+
| `filterOptions` | `FilterOptions` | No | Extra options passed to filter behavior/components. |
|
|
101
|
+
| `onSort` | `(prop: string, sortOrder: SortOrder) => void` | No | Sort callback when a sortable column is toggled. |
|
|
102
|
+
| `onRowSelect` | `(row: TRow, selected: boolean) => void` | No | Row selection callback. |
|
|
103
|
+
| `onSelectedRowsChange` | `(rows: TRow[]) => void` | No | Callback with selected rows. |
|
|
104
|
+
| `softDeleteProperty` | `keyof TRow` | No | Property name used to determine soft-deleted rows. Defaults to `deletedAt`. |
|
|
105
|
+
| `allowMultipleExpandedRows` | `boolean` | No | Enables multiple expanded rows (uncontrolled mode). |
|
|
106
|
+
| `expandedRowId` | `TRow["id"] \| null` | No | Controlled expanded row id. |
|
|
107
|
+
| `onExpandedRowChange` | `(expandedRow: TRow \| null, collapsedRow: TRow \| null) => void` | No | Called when expanded row changes. |
|
|
108
|
+
| `onRowExpand` | `(expandedRow: TRow, collapsedRow: TRow \| null) => ReactNode` | No | Returns content rendered inside expanded row area. |
|
|
109
|
+
| `className` | `string` | No | Wrapper class name. |
|
|
110
|
+
| `contentClassName` | `string` | No | Content container class name. |
|
|
111
|
+
|
|
112
|
+
## Exported API
|
|
113
|
+
|
|
114
|
+
Main package exports include:
|
|
115
|
+
|
|
116
|
+
- Components: `Badge`, `Button`, `Chip`, `Dropdown`, `Form`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`.
|
|
117
|
+
- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types.
|
|
118
|
+
- Utilities and models: `FilterTypes`, `SortOrder`, `BaseDto`, and query/filter helpers from `lib`.
|
|
119
|
+
|
|
120
|
+
## Development Setup
|
|
150
121
|
|
|
151
122
|
1. Clone the repository.
|
|
152
123
|
|
|
@@ -158,67 +129,45 @@ cd -- -sito-dashboard
|
|
|
158
129
|
2. Use the expected Node version.
|
|
159
130
|
|
|
160
131
|
```bash
|
|
161
|
-
nvm install
|
|
162
|
-
nvm use
|
|
132
|
+
nvm install
|
|
133
|
+
nvm use
|
|
163
134
|
```
|
|
164
135
|
|
|
136
|
+
Current `.nvmrc`: `20.19.0`
|
|
137
|
+
|
|
165
138
|
3. Install dependencies.
|
|
166
139
|
|
|
167
140
|
```bash
|
|
168
141
|
npm install
|
|
169
142
|
```
|
|
170
143
|
|
|
171
|
-
4. Start
|
|
144
|
+
4. Start development.
|
|
172
145
|
|
|
173
146
|
```bash
|
|
174
147
|
# Vite dev server
|
|
175
148
|
npm run dev
|
|
176
149
|
|
|
177
|
-
#
|
|
150
|
+
# Storybook (recommended for component work)
|
|
178
151
|
npm run storybook
|
|
179
152
|
```
|
|
180
153
|
|
|
181
|
-
|
|
154
|
+
## Scripts
|
|
182
155
|
|
|
183
156
|
```bash
|
|
184
|
-
npm run build
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
npm run test
|
|
192
|
-
|
|
193
|
-
# run a specific test file
|
|
194
|
-
npm run test -- src/components/Table/Table.expandable.test.tsx
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
## How To Run Linters
|
|
198
|
-
|
|
199
|
-
```bash
|
|
200
|
-
# runs ESLint with auto-fix enabled in this project
|
|
201
|
-
npm run lint
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
## Additional Useful Scripts
|
|
205
|
-
|
|
206
|
-
```bash
|
|
207
|
-
# format source files
|
|
208
|
-
npm run format
|
|
209
|
-
|
|
210
|
-
# build static Storybook
|
|
211
|
-
npm run build-storybook
|
|
212
|
-
|
|
213
|
-
# preview production build
|
|
214
|
-
npm run preview
|
|
157
|
+
npm run build # Build library (types + bundles)
|
|
158
|
+
npm run test # Run tests once with Vitest
|
|
159
|
+
npm run lint # ESLint + Prettier + depcheck
|
|
160
|
+
npm run format # Prettier on src files
|
|
161
|
+
npm run build-storybook # Build static Storybook
|
|
162
|
+
npm run preview # Preview Vite build
|
|
163
|
+
npm run full # lint + build + test
|
|
215
164
|
```
|
|
216
165
|
|
|
217
166
|
## Contributing
|
|
218
167
|
|
|
219
168
|
1. Create a branch from `main`.
|
|
220
|
-
2. Add
|
|
221
|
-
3. Run
|
|
169
|
+
2. Add or update tests for your changes.
|
|
170
|
+
3. Run `npm run full`.
|
|
222
171
|
4. Open a pull request with a clear summary.
|
|
223
172
|
|
|
224
173
|
## License
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var c=require("./Badge.css");const n=require("react/jsx-runtime"),t=s=>{const{count:e,className:a=""}=s;return n.jsx("span",{className:`${a} badge-main`,children:e})};exports.Badge=t;
|
package/dist/Badge.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Badge-Z78MlGoQ.cjs");exports.Badge=e.Badge;
|
package/dist/Badge.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.badge-main{top:calc(var(--spacing,.25rem) * 1);right:calc(var(--spacing,.25rem) * 1);min-height:calc(var(--spacing,.25rem) * 4);min-width:calc(var(--spacing,.25rem) * 4);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:.3s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:3.40282e38px;justify-content:center;align-items:center;font-size:9px;line-height:0;display:flex;position:absolute}.badge-main.show{--tw-scale-x:100%!important;--tw-scale-y:100%!important;--tw-scale-z:100%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}.badge-main.hide{--tw-scale-x:0%!important;--tw-scale-y:0%!important;--tw-scale-z:0%!important;scale:var(--tw-scale-x) var(--tw-scale-y)!important}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
|
package/dist/Badge.d.ts
ADDED
package/dist/Badge.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var i=require("./Button.css");const c=require("react/jsx-runtime"),a=t=>{const{children:e,type:n="button",variant:s="text",color:o="default",className:r="",...u}=t;return c.jsx("button",{type:n,className:`button ${s} ${o} ${r}`,...u,children:e})};exports.Button=a;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import "./Button.css";
|
|
2
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
3
|
+
const m = (t) => {
|
|
4
|
+
const {
|
|
5
|
+
children: o,
|
|
6
|
+
type: r = "button",
|
|
7
|
+
variant: e = "text",
|
|
8
|
+
color: n = "default",
|
|
9
|
+
className: s = "",
|
|
10
|
+
...a
|
|
11
|
+
} = t;
|
|
12
|
+
return /* @__PURE__ */ c(
|
|
13
|
+
"button",
|
|
14
|
+
{
|
|
15
|
+
type: r,
|
|
16
|
+
className: `button ${e} ${n} ${s}`,
|
|
17
|
+
...a,
|
|
18
|
+
children: o
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
export {
|
|
23
|
+
m as B
|
|
24
|
+
};
|
package/dist/Button.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Button-BlYa3uPc.cjs");exports.Button=t.Button;
|
package/dist/Button.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-duration:initial;--tw-border-style:solid}}}.button{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-text,#0d0d0d);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;border-radius:3.40282e38px;transition-duration:.3s;display:flex}.button:enabled{cursor:pointer}.button:disabled{cursor:not-allowed;opacity:.5}@media(hover:hover){.button.close:enabled:hover{background-color:var(--color-secondary,#cd212a)}}.button.text{background-color:#0000}@media(hover:hover){.button.text:enabled:hover{background-color:var(--color-base,#f2f2f2)}}.button.text.primary{color:var(--color-primary,#041e42)}@media(hover:hover){.button.text.primary:enabled:hover{background-color:#041e421a}@supports (color:color-mix(in lab,red,red)){.button.text.primary:enabled:hover{background-color:color-mix(in oklab,var(--color-primary,#041e42) 10%,transparent)}}}.button.text.secondary{color:var(--color-secondary,#cd212a)}@media(hover:hover){.button.text.secondary:enabled:hover{background-color:#cd212a1a}@supports (color:color-mix(in lab,red,red)){.button.text.secondary:enabled:hover{background-color:color-mix(in oklab,var(--color-secondary,#cd212a) 10%,transparent)}}}.button.text.error{color:var(--color-bg-error,#c14444)}@media(hover:hover){.button.text.error:enabled:hover{background-color:#c144441a}@supports (color:color-mix(in lab,red,red)){.button.text.error:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-error,#c14444) 10%,transparent)}}}.button.text.warning{color:var(--color-bg-warning,orange)}@media(hover:hover){.button.text.warning:enabled:hover{background-color:#ffa5001a}@supports (color:color-mix(in lab,red,red)){.button.text.warning:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-warning,orange) 10%,transparent)}}}.button.text.success{color:var(--color-bg-success,#1d9a5b)}@media(hover:hover){.button.text.success:enabled:hover{background-color:#1d9a5b1a}@supports (color:color-mix(in lab,red,red)){.button.text.success:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-success,#1d9a5b) 10%,transparent)}}}.button.text.info{color:var(--color-bg-info,#0070ba)}@media(hover:hover){.button.text.info:enabled:hover{background-color:#0070ba1a}@supports (color:color-mix(in lab,red,red)){.button.text.info:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-info,#0070ba) 10%,transparent)}}}.button.outlined{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border,#ccc)}@media(hover:hover){.button.outlined:enabled:hover{background-color:var(--color-base-dark,#e6e6e6)}}.button.outlined.primary{border-color:var(--color-primary,#041e42)}@media(hover:hover){.button.outlined.primary:enabled:hover{border-color:var(--color-hover-primary,#0a2f66);background-color:var(--color-hover-primary,#0a2f66);color:var(--color-base-light,#fff)}}.button.outlined.secondary{border-color:var(--color-secondary,#cd212a);color:var(--color-secondary,#cd212a)}@media(hover:hover){.button.outlined.secondary:enabled:hover{border-color:var(--color-hover-secondary,#e03a42);background-color:var(--color-hover-secondary,#e03a42);color:var(--color-base-light,#fff)}}.button.outlined.error{border-color:var(--color-bg-error,#c14444);color:var(--color-bg-error,#c14444)}@media(hover:hover){.button.outlined.error:enabled:hover{background-color:var(--color-bg-error,#c14444);color:var(--color-error,#fbfbfb)}}.button.outlined.warning{border-color:var(--color-bg-warning,orange);color:var(--color-bg-warning,orange)}@media(hover:hover){.button.outlined.warning:enabled:hover{background-color:var(--color-bg-warning,orange);color:var(--color-warning,#000)}}.button.outlined.success{border-color:var(--color-bg-success,#1d9a5b);color:var(--color-bg-success,#1d9a5b)}@media(hover:hover){.button.outlined.success:enabled:hover{background-color:var(--color-bg-success,#1d9a5b);color:var(--color-success,#fbfbfb)}}.button.outlined.info{border-color:var(--color-bg-info,#0070ba);color:var(--color-bg-info,#0070ba)}@media(hover:hover){.button.outlined.info:enabled:hover{background-color:var(--color-bg-info,#0070ba);color:var(--color-info,#fbfbfb)}}.button.submit{background-color:var(--color-base,#f2f2f2)}@media(hover:hover){.button.submit:enabled:hover{background-color:var(--color-base-light,#fff)}}.button.submit.primary{background-color:var(--color-bg-primary,#021327);color:var(--color-base-light,#fff)}@media(hover:hover){.button.submit.primary:enabled:hover{background-color:var(--color-hover-primary,#0a2f66)}}.button.submit.secondary{background-color:var(--color-bg-secondary,#8f151b);color:var(--color-base-light,#fff)}@media(hover:hover){.button.submit.secondary:enabled:hover{background-color:var(--color-hover-secondary,#e03a42)}}.button.submit.error{background-color:var(--color-bg-error,#c14444);color:var(--color-error,#fbfbfb)}@media(hover:hover){.button.submit.error:enabled:hover{background-color:#c14444cc}@supports (color:color-mix(in lab,red,red)){.button.submit.error:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-error,#c14444) 80%,transparent)}}}.button.submit.warning{background-color:var(--color-bg-warning,orange);color:var(--color-warning,#000)}@media(hover:hover){.button.submit.warning:enabled:hover{background-color:#ffa500cc}@supports (color:color-mix(in lab,red,red)){.button.submit.warning:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-warning,orange) 80%,transparent)}}}.button.submit.success{background-color:var(--color-bg-success,#1d9a5b);color:var(--color-success,#fbfbfb)}@media(hover:hover){.button.submit.success:enabled:hover{background-color:#1d9a5bcc}@supports (color:color-mix(in lab,red,red)){.button.submit.success:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-success,#1d9a5b) 80%,transparent)}}}.button.submit.info{background-color:var(--color-bg-info,#0070ba);color:var(--color-info,#fbfbfb)}@media(hover:hover){.button.submit.info:enabled:hover{background-color:#0070bacc}@supports (color:color-mix(in lab,red,red)){.button.submit.info:enabled:hover{background-color:color-mix(in oklab,var(--color-bg-info,#0070ba) 80%,transparent)}}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
package/dist/Button.d.ts
ADDED
package/dist/Button.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import "./Chip.css";
|
|
2
|
+
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { I as p } from "./IconButton-BpsTEj0z.js";
|
|
4
|
+
import { C as d } from "./Close-rKC9AcNX.js";
|
|
5
|
+
function N(a) {
|
|
6
|
+
const {
|
|
7
|
+
text: s,
|
|
8
|
+
onDelete: e,
|
|
9
|
+
children: i,
|
|
10
|
+
icon: n,
|
|
11
|
+
variant: o = "default",
|
|
12
|
+
iconClassName: l = "",
|
|
13
|
+
className: c = "",
|
|
14
|
+
textClassName: m = ""
|
|
15
|
+
} = a;
|
|
16
|
+
return /* @__PURE__ */ r(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
className: `chip-main ${o} ${e ? "deletable" : ""} ${c}`,
|
|
20
|
+
children: [
|
|
21
|
+
/* @__PURE__ */ t("span", { className: `chip-main-text ${m}`, children: s }),
|
|
22
|
+
i,
|
|
23
|
+
e ? /* @__PURE__ */ t(
|
|
24
|
+
p,
|
|
25
|
+
{
|
|
26
|
+
icon: n ?? /* @__PURE__ */ t(d, {}),
|
|
27
|
+
className: `chip-delete-button ${l}`,
|
|
28
|
+
onClick: e
|
|
29
|
+
}
|
|
30
|
+
) : null
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
export {
|
|
36
|
+
N as C
|
|
37
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var x=require("./Chip.css");const e=require("react/jsx-runtime"),u=require("./IconButton-CVnmT2E9.cjs"),m=require("./Close-O9P7wJGf.cjs");function h(t){const{text:n,onDelete:s,children:i,icon:c,variant:a="default",iconClassName:l="",className:o="",textClassName:r=""}=t;return e.jsxs("div",{className:`chip-main ${a} ${s?"deletable":""} ${o}`,children:[e.jsx("span",{className:`chip-main-text ${r}`,children:n}),i,s?e.jsx(u.IconButton,{icon:c??e.jsx(m.Close,{}),className:`chip-delete-button ${l}`,onClick:s}):null]})}exports.Chip=h;
|
package/dist/Chip.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Chip-a2z-338_.cjs");exports.Chip=e.Chip;
|
package/dist/Chip.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chip-main{border-radius:var(--radius-3xl,1.5rem);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:flex-start;align-items:center;display:flex}.chip-main.deletable{padding-right:calc(var(--spacing,.25rem) * 2)}.chip-delete-button{margin-left:calc(var(--spacing,.25rem) * 2);cursor:pointer}.chip-delete-button svg{height:calc(var(--spacing,.25rem) * 3);width:calc(var(--spacing,.25rem) * 3)}
|
package/dist/Chip.d.ts
ADDED
package/dist/Chip.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime");function t(c){const{className:e=""}=c;return s.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",children:s.jsx("path",{d:"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"})})}exports.Close=t;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
function t(o) {
|
|
3
|
+
const { className: r = "" } = o;
|
|
4
|
+
return /* @__PURE__ */ s(
|
|
5
|
+
"svg",
|
|
6
|
+
{
|
|
7
|
+
className: r,
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
9
|
+
viewBox: "0 0 384 512",
|
|
10
|
+
fill: "currentColor",
|
|
11
|
+
children: /* @__PURE__ */ s("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
t as C
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var E=require("./Dropdown.css");const h=require("react/jsx-runtime"),u=require("react"),g=require("react-dom"),d=8;function w(s,l){const e=l.getBoundingClientRect(),c=window.innerWidth,o=window.innerHeight;let n=s.bottom+4,r=s.left;return r+e.width>c-d&&(r=s.right-e.width),r<d&&(r=d),n+e.height>o-d&&(n=s.top-e.height-4),n<d&&(n=d),{top:n,left:r}}const v=s=>{const{children:l,open:e,onClose:c,anchorEl:o}=s,n=u.useRef(null);u.useLayoutEffect(()=>{const t=n.current;if(!e||!o||!t)return;const i=o.getBoundingClientRect(),{top:a,left:p}=w(i,t);t.style.top=`${a}px`,t.style.left=`${p}px`},[e,o]),u.useEffect(()=>{if(!e||!o)return;const t=n.current;if(!t)return;const i=()=>{const a=o.getBoundingClientRect(),{top:p,left:m}=w(a,t);t.style.top=`${p}px`,t.style.left=`${m}px`};return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[e,o]);const r=u.useCallback(t=>{const i=n.current;!e||!i||o?.contains(t.target)||i.contains(t.target)||c()},[e,c,o]),f=u.useCallback(t=>{e&&t.key==="Escape"&&c()},[e,c]);return u.useEffect(()=>{if(e)return setTimeout(()=>n.current?.focus(),0),document.addEventListener("mousedown",r),document.addEventListener("keydown",f),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",f)}},[e,r,f]),g.createPortal(h.jsx("div",{ref:n,role:"menu","aria-hidden":!e,tabIndex:-1,className:`dropdown-main ${e?"opened":"closed"}`,onClick:t=>t.stopPropagation(),children:l}),document.body)};exports.Dropdown=v;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import "./Dropdown.css";
|
|
2
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
3
|
+
import { useRef as v, useLayoutEffect as y, useEffect as m, useCallback as p } from "react";
|
|
4
|
+
import { createPortal as E } from "react-dom";
|
|
5
|
+
const d = 8;
|
|
6
|
+
function w(s, u) {
|
|
7
|
+
const e = u.getBoundingClientRect(), c = window.innerWidth, o = window.innerHeight;
|
|
8
|
+
let n = s.bottom + 4, r = s.left;
|
|
9
|
+
return r + e.width > c - d && (r = s.right - e.width), r < d && (r = d), n + e.height > o - d && (n = s.top - e.height - 4), n < d && (n = d), { top: n, left: r };
|
|
10
|
+
}
|
|
11
|
+
const k = (s) => {
|
|
12
|
+
const { children: u, open: e, onClose: c, anchorEl: o } = s, n = v(null);
|
|
13
|
+
y(() => {
|
|
14
|
+
const t = n.current;
|
|
15
|
+
if (!e || !o || !t) return;
|
|
16
|
+
const i = o.getBoundingClientRect(), { top: f, left: a } = w(i, t);
|
|
17
|
+
t.style.top = `${f}px`, t.style.left = `${a}px`;
|
|
18
|
+
}, [e, o]), m(() => {
|
|
19
|
+
if (!e || !o) return;
|
|
20
|
+
const t = n.current;
|
|
21
|
+
if (!t) return;
|
|
22
|
+
const i = () => {
|
|
23
|
+
const f = o.getBoundingClientRect(), { top: a, left: h } = w(f, t);
|
|
24
|
+
t.style.top = `${a}px`, t.style.left = `${h}px`;
|
|
25
|
+
};
|
|
26
|
+
return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
|
|
27
|
+
}, [e, o]);
|
|
28
|
+
const r = p(
|
|
29
|
+
(t) => {
|
|
30
|
+
const i = n.current;
|
|
31
|
+
!e || !i || o?.contains(t.target) || i.contains(t.target) || c();
|
|
32
|
+
},
|
|
33
|
+
[e, c, o]
|
|
34
|
+
), l = p(
|
|
35
|
+
(t) => {
|
|
36
|
+
e && t.key === "Escape" && c();
|
|
37
|
+
},
|
|
38
|
+
[e, c]
|
|
39
|
+
);
|
|
40
|
+
return m(() => {
|
|
41
|
+
if (e)
|
|
42
|
+
return setTimeout(() => n.current?.focus(), 0), document.addEventListener("mousedown", r), document.addEventListener("keydown", l), () => {
|
|
43
|
+
document.removeEventListener("mousedown", r), document.removeEventListener("keydown", l);
|
|
44
|
+
};
|
|
45
|
+
}, [e, r, l]), E(
|
|
46
|
+
/* @__PURE__ */ g(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
ref: n,
|
|
50
|
+
role: "menu",
|
|
51
|
+
"aria-hidden": !e,
|
|
52
|
+
tabIndex: -1,
|
|
53
|
+
className: `dropdown-main ${e ? "opened" : "closed"}`,
|
|
54
|
+
onClick: (t) => t.stopPropagation(),
|
|
55
|
+
children: u
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
document.body
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
export {
|
|
62
|
+
k as D
|
|
63
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dropdown-CAxauIXt.cjs");exports.Dropdown=o.Dropdown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.dropdown-main{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border,#ccc);background-color:var(--color-base-light,#fff);padding:calc(var(--spacing,.25rem) * 2);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition:opacity .3s ease-in-out;position:fixed}.dropdown-main.opened{z-index:50;opacity:1}.dropdown-main.closed{pointer-events:none;z-index:-10;opacity:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
|
package/dist/Dropdown.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
function L(o) {
|
|
3
|
+
const { className: t = "" } = o;
|
|
4
|
+
return /* @__PURE__ */ r(
|
|
5
|
+
"svg",
|
|
6
|
+
{
|
|
7
|
+
className: t,
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
9
|
+
viewBox: "0 0 640 640",
|
|
10
|
+
fill: "currentColor",
|
|
11
|
+
children: /* @__PURE__ */ r("path", { d: "M192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 234.5C512 217.5 505.3 201.2 493.3 189.2L386.7 82.7C374.7 70.7 358.5 64 341.5 64L192 64zM453.5 240L360 240C346.7 240 336 229.3 336 216L336 122.5L453.5 240z" })
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
L as F
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime");function r(e){const{className:t=""}=e;return s.jsx("svg",{className:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 640 640",fill:"currentColor",children:s.jsx("path",{d:"M192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 234.5C512 217.5 505.3 201.2 493.3 189.2L386.7 82.7C374.7 70.7 358.5 64 341.5 64L192 64zM453.5 240L360 240C346.7 240 336 229.3 336 216L336 122.5L453.5 240z"})})}exports.File=r;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var D=require("./FileInput.css");const e=require("react/jsx-runtime"),n=require("react"),C=require("./Tooltip-BSKAgRkc.cjs"),T=require("./File-_Hjw2d3F.cjs"),w=require("./Chip-a2z-338_.cjs"),y=require("./IconButton-CVnmT2E9.cjs"),R=require("./Close-O9P7wJGf.cjs");function j(s,i=25){if(s.length<=i)return s;const a=s.lastIndexOf(".");if(a===-1)return s.slice(0,i-3)+"...";const h=s.slice(0,a),r=s.slice(a),p=i-r.length-3;return h.slice(0,p)+"..."+r}const B=n.forwardRef(function(s,i){const{children:a,label:h,containerClassName:r="",inputClassName:p="",labelClassName:N="",helperText:m="",helperTextClassName:g="",iconClassName:b="",multiple:q=!1,onChange:x,onClear:o,...d}=s,[t,f]=n.useState([]),k=n.useCallback(l=>{if(l.target.files){const c=Array.from(l.target.files);f(u=>[...u,...c])}x?.(l)},[x]),v=n.useCallback(l=>{f(c=>{const u=c.filter((A,$)=>$!==l);return u.length===0&&o?.(),u})},[o]),F=n.useCallback(()=>{f([]),o?.()},[o]),I=n.useCallback(l=>{l.currentTarget.value=""},[]);return e.jsxs("div",{className:`file-input-container ${r}`,children:[t.length===0&&e.jsxs("label",{htmlFor:d.name,className:`${N}`,children:[h,e.jsx("input",{type:"file",ref:i,multiple:q,onClick:I,onChange:k,className:`file-input ${p}`,...d}),d.required?" *":""]}),t.length>1&&e.jsx("ul",{className:"file-preview-list",children:t.map((l,c)=>e.jsx("li",{children:e.jsx(C.Tooltip,{content:l.name,children:e.jsx(w.Chip,{text:j(l.name,25),onDelete:()=>v(c)})})},`${l.name}-${l.lastModified}`))}),t.length===1&&e.jsxs("div",{className:"file-preview",children:[e.jsx(T.File,{className:`file-icon ${b}`}),e.jsx(C.Tooltip,{content:t[0]?.name??"",children:e.jsx("span",{className:"file-preview-name",children:j(t[0]?.name??"",25)})}),e.jsx(y.IconButton,{icon:e.jsx(R.Close,{}),onClick:F,type:"button"})]}),a,!!m&&e.jsx("p",{className:`file-input-helper-text ${g}`,children:m})]})});exports.FileInput=B;
|