@seedgrid/fe-components 2026.3.11 → 2026.3.13
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 +21 -0
- package/README.md +181 -0
- package/dist/buttons/SgButton.d.ts +2 -0
- package/dist/buttons/SgButton.d.ts.map +1 -1
- package/dist/buttons/SgButton.js +4 -3
- package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts.map +1 -1
- package/dist/digits/roller3d-digit/SgRoller3DDigit.js +4 -2
- package/dist/digits/segment-digit/SgSegmentDigit.js +1 -1
- package/dist/gadgets/calendar/SgCalendar.js +1 -1
- package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
- package/dist/gadgets/clock/SgClock.js +10 -5
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.js +3 -3
- package/dist/gadgets/clock/themes/renderTheme.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/renderTheme.js +3 -1
- package/dist/gadgets/clock/themes/useDarkFlag.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/useDarkFlag.js +34 -3
- package/dist/inputs/SgAutocomplete.js +3 -3
- package/dist/inputs/SgCombobox.js +4 -4
- package/dist/inputs/SgDatatable.js +3 -3
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
- package/dist/inputs/SgInputCurrency.js +5 -3
- package/dist/inputs/SgInputDate.js +2 -2
- package/dist/inputs/SgInputNumber.d.ts.map +1 -1
- package/dist/inputs/SgInputNumber.js +8 -4
- package/dist/inputs/SgInputOTP.js +1 -1
- package/dist/inputs/SgInputSelect.js +3 -3
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +8 -4
- package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
- package/dist/inputs/SgInputTextArea.js +8 -4
- package/dist/inputs/SgOrderList.js +2 -2
- package/dist/inputs/SgPickList.js +3 -3
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +9 -4
- package/dist/inputs/SgToggleSwitch.js +1 -1
- package/dist/layout/SgCarousel.js +3 -3
- package/dist/layout/SgGroupBox.js +1 -1
- package/dist/layout/SgMenu.js +1 -1
- package/dist/menus/SgDockMenu.d.ts.map +1 -1
- package/dist/menus/SgDockMenu.js +20 -10
- package/dist/others/SgPlayground.d.ts.map +1 -1
- package/dist/others/SgPlayground.js +24 -1
- package/dist/overlay/SgDialog.d.ts.map +1 -1
- package/dist/overlay/SgDialog.js +203 -1
- package/dist/sandbox.cjs +80 -80
- package/dist/wizard/SgWizard.js +4 -4
- package/package.json +5 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 SeedGrid
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
# @seedgrid/fe-components
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@seedgrid/fe-components)
|
|
4
|
+
[](https://www.npmjs.com/package/@seedgrid/fe-components)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
Biblioteca de componentes React da SeedGrid, com foco em produtividade de formularios, consistencia visual e integracao com React Hook Form.
|
|
8
|
+
|
|
9
|
+
## Sumario
|
|
10
|
+
|
|
11
|
+
- [Instalacao](#instalacao)
|
|
12
|
+
- [Uso rapido](#uso-rapido)
|
|
13
|
+
- [Componentes por categoria](#componentes-por-categoria)
|
|
14
|
+
- [Creditos e licencas de terceiros](#creditos-e-licencas-de-terceiros)
|
|
15
|
+
- [Checklist para publicar no npm](#checklist-para-publicar-no-npm)
|
|
16
|
+
- [Suporte](#suporte)
|
|
17
|
+
- [Licenca do pacote](#licenca-do-pacote)
|
|
18
|
+
|
|
19
|
+
## Instalacao
|
|
20
|
+
|
|
21
|
+
Instalacao recomendada (uso geral):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm add @seedgrid/fe-components @seedgrid/fe-theme react-hook-form lucide-react
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Se voce for usar `SgTextEditor`, instale tambem os peers do TipTap:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm add @tiptap/core @tiptap/pm @tiptap/react @tiptap/starter-kit \
|
|
31
|
+
@tiptap/extension-underline @tiptap/extension-link @tiptap/extension-image \
|
|
32
|
+
@tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-color \
|
|
33
|
+
@tiptap/extension-highlight @tiptap/extension-subscript @tiptap/extension-superscript \
|
|
34
|
+
@tiptap/extension-font-family
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Alternativas:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm i @seedgrid/fe-components @seedgrid/fe-theme react-hook-form lucide-react
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
yarn add @seedgrid/fe-components @seedgrid/fe-theme react-hook-form lucide-react
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Uso rapido
|
|
48
|
+
|
|
49
|
+
### 1) Theme provider (recomendado)
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { SeedThemeProvider } from "@seedgrid/fe-theme";
|
|
53
|
+
|
|
54
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
55
|
+
return (
|
|
56
|
+
<html lang="pt-BR">
|
|
57
|
+
<body>
|
|
58
|
+
<SeedThemeProvider
|
|
59
|
+
initialTheme={{
|
|
60
|
+
seed: "#16803D",
|
|
61
|
+
mode: "auto",
|
|
62
|
+
radius: 12
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
{children}
|
|
66
|
+
</SeedThemeProvider>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### 2) Formulario com React Hook Form
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
"use client";
|
|
77
|
+
|
|
78
|
+
import React from "react";
|
|
79
|
+
import { useForm } from "react-hook-form";
|
|
80
|
+
import { SgButton, SgInputEmail, SgInputText, SgStack } from "@seedgrid/fe-components";
|
|
81
|
+
|
|
82
|
+
type FormValues = {
|
|
83
|
+
nome: string;
|
|
84
|
+
email: string;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default function ExampleForm() {
|
|
88
|
+
const { register, handleSubmit } = useForm<FormValues>({
|
|
89
|
+
defaultValues: { nome: "", email: "" }
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const onSubmit = (data: FormValues) => {
|
|
93
|
+
console.log(data);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
98
|
+
<SgStack gap={12}>
|
|
99
|
+
<SgInputText
|
|
100
|
+
id="nome"
|
|
101
|
+
name="nome"
|
|
102
|
+
register={register}
|
|
103
|
+
label="Nome"
|
|
104
|
+
required
|
|
105
|
+
requiredMessage="Informe o nome."
|
|
106
|
+
/>
|
|
107
|
+
<SgInputEmail
|
|
108
|
+
id="email"
|
|
109
|
+
name="email"
|
|
110
|
+
register={register}
|
|
111
|
+
label="Email"
|
|
112
|
+
required
|
|
113
|
+
/>
|
|
114
|
+
<SgButton label="Salvar" type="submit" />
|
|
115
|
+
</SgStack>
|
|
116
|
+
</form>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Componentes por categoria
|
|
122
|
+
|
|
123
|
+
- Inputs: `SgInputText`, `SgInputEmail`, `SgInputPassword`, `SgInputDate`, `SgInputPhone`, `SgInputCPF`, `SgInputCNPJ`, `SgInputCPFCNPJ`, `SgTextEditor`, `SgDatatable`, entre outros.
|
|
124
|
+
- Buttons: `SgButton`, `SgSplitButton`, `SgFloatActionButton`.
|
|
125
|
+
- Layout: `SgGrid`, `SgStack`, `SgCard`, `SgPanel`, `SgDockLayout`, `SgDockScreen`, `SgScreen`.
|
|
126
|
+
- Menus: `SgMenu`, `SgDockMenu`, `SgBreadcrumb`.
|
|
127
|
+
- Digits: `SgFlipDigit`, `SgFadeDigit`, `SgMatrixDigit`, `SgNeonDigit`, `SgSevenSegmentDigit`.
|
|
128
|
+
- Gadgets: `SgClock`, `SgCalendar`, `SgQRCode`, `SgLinearGauge`, `SgRadialGauge`, `SgStringAnimator`.
|
|
129
|
+
- Providers/Hooks: `SgEnvironmentProvider`, `SgTimeProvider`, `useSgPersistentState`, `useSgTime`, `useSgPersistence`.
|
|
130
|
+
|
|
131
|
+
Para exemplos completos e props de cada componente, use o showcase local em `apps/showcase`.
|
|
132
|
+
|
|
133
|
+
## Creditos e licencas de terceiros
|
|
134
|
+
|
|
135
|
+
Principais bibliotecas usadas pelo pacote:
|
|
136
|
+
|
|
137
|
+
| Biblioteca | Licenca | Uso principal |
|
|
138
|
+
| --- | --- | --- |
|
|
139
|
+
| [`@pqina/flip`](https://pqina.nl/flip/) | MIT | Animacao do `SgFlipDigit` |
|
|
140
|
+
| [`@codesandbox/sandpack-react`](https://sandpack.codesandbox.io/) | Apache-2.0 | `SgPlayground` (editor e preview) |
|
|
141
|
+
| [`qrcode.react`](https://github.com/zpao/qrcode.react) | ISC | Renderizacao de QR Code |
|
|
142
|
+
| [`@tiptap/react`](https://tiptap.dev/) | MIT | Base do `SgTextEditor` |
|
|
143
|
+
| [`lucide-react`](https://lucide.dev/) | ISC | Iconografia em varios componentes |
|
|
144
|
+
| [`@dnd-kit/core`](https://dndkit.com/) | MIT | Interacoes de drag and drop |
|
|
145
|
+
|
|
146
|
+
Lista de creditos em formato de pagina: `apps/showcase/src/app/credits/page.tsx`.
|
|
147
|
+
|
|
148
|
+
## Checklist para publicar no npm
|
|
149
|
+
|
|
150
|
+
1. Atualizar este `README.md`.
|
|
151
|
+
2. Garantir `version` correta no `package.json`.
|
|
152
|
+
3. Rodar build e typecheck do pacote:
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
pnpm -C packages/seedgrid-fe-components typecheck
|
|
156
|
+
pnpm -C packages/seedgrid-fe-components build
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
4. Validar pacote antes de publicar:
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
npm publish --dry-run
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
5. Publicar:
|
|
166
|
+
|
|
167
|
+
```bash
|
|
168
|
+
npm publish --access public
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## Suporte
|
|
172
|
+
|
|
173
|
+
- Issues: https://github.com/SeedGrid/seedgrid-fe-components/issues
|
|
174
|
+
- Repositorio: https://github.com/SeedGrid/seedgrid-fe-components
|
|
175
|
+
- Home do pacote: https://github.com/SeedGrid/seedgrid-fe-components/tree/main/packages/seedgrid-fe-components
|
|
176
|
+
|
|
177
|
+
## Licenca do pacote
|
|
178
|
+
|
|
179
|
+
MIT
|
|
180
|
+
|
|
181
|
+
Consulte o arquivo `LICENSE` deste pacote para o texto completo.
|
|
@@ -20,6 +20,7 @@ export type SgButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
20
20
|
size?: Size;
|
|
21
21
|
shape?: Shape;
|
|
22
22
|
elevation?: Elevation;
|
|
23
|
+
label?: React.ReactNode;
|
|
23
24
|
iconOnly?: boolean;
|
|
24
25
|
leftIcon?: React.ReactNode;
|
|
25
26
|
rightIcon?: React.ReactNode;
|
|
@@ -33,6 +34,7 @@ export declare const SgButton: React.ForwardRefExoticComponent<Omit<React.Button
|
|
|
33
34
|
size?: Size;
|
|
34
35
|
shape?: Shape;
|
|
35
36
|
elevation?: Elevation;
|
|
37
|
+
label?: React.ReactNode;
|
|
36
38
|
iconOnly?: boolean;
|
|
37
39
|
leftIcon?: React.ReactNode;
|
|
38
40
|
rightIcon?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;
|
|
1
|
+
{"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;eApJR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;YACb,KAAK,CAAC,SAAS;eACZ,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAmNpC,CAAC"}
|
package/dist/buttons/SgButton.js
CHANGED
|
@@ -108,15 +108,16 @@ function elevationClass(elevation) {
|
|
|
108
108
|
return "";
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", iconOnly, leftIcon, rightIcon, loading = false, disabled, className, children, style, customColors, type = "button", ...rest }, ref) => {
|
|
111
|
+
export const SgButton = React.forwardRef(({ severity = "primary", appearance = "solid", size, shape, elevation = "none", label, iconOnly, leftIcon, rightIcon, loading = false, disabled, className, children, style, customColors, type = "button", ...rest }, ref) => {
|
|
112
|
+
const resolvedChildren = children ?? label;
|
|
112
113
|
const isDisabled = Boolean(disabled || loading);
|
|
113
|
-
const inferredIconOnly = !
|
|
114
|
+
const inferredIconOnly = !resolvedChildren && (leftIcon || rightIcon);
|
|
114
115
|
const isIconOnly = iconOnly ?? inferredIconOnly;
|
|
115
116
|
const resolvedSize = size ?? (isIconOnly ? "sm" : "md");
|
|
116
117
|
const resolvedShape = shape ?? (isIconOnly ? "circle" : "default");
|
|
117
118
|
const s = SIZE[resolvedSize];
|
|
118
119
|
const contentClass = cn("inline-flex min-w-0 items-center justify-center", !isIconOnly ? "w-full" : undefined, s.gap);
|
|
119
|
-
return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }),
|
|
120
|
+
return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, resolvedChildren ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: resolvedChildren }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
|
|
120
121
|
});
|
|
121
122
|
SgButton.displayName = "SgButton";
|
|
122
123
|
function Spinner({ className }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,YAAkB,EAClB,SAAS,GACV,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,YAAkB,EAClB,SAAS,GACV,EAAE,oBAAoB,2CAsDtB"}
|
|
@@ -34,7 +34,7 @@ export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, t
|
|
|
34
34
|
const w = Math.round(fontSize * (0.7 * charCount + 0.7));
|
|
35
35
|
const h = Math.round(fontSize * 2.7);
|
|
36
36
|
const translateY = -idx * itemH + h / 2 - itemH / 2;
|
|
37
|
-
return (_jsxs("div", { className: cn("relative overflow-hidden rounded-2xl", "bg-
|
|
37
|
+
return (_jsxs("div", { className: cn("relative overflow-hidden rounded-2xl", "bg-[rgb(var(--sg-surface,var(--sg-bg)))]", "ring-1 ring-[rgb(var(--sg-border))]/70", "shadow-[inset_0_0_28px_rgba(0,0,0,0.08),0_8px_28px_rgba(0,0,0,0.12)]",
|
|
38
38
|
// top fade
|
|
39
39
|
"before:absolute before:inset-0 before:z-10 before:bg-gradient-to-b before:from-black/[0.06] before:to-transparent before:content-['']",
|
|
40
40
|
// bottom fade
|
|
@@ -42,6 +42,8 @@ export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, t
|
|
|
42
42
|
height: itemH,
|
|
43
43
|
fontSize,
|
|
44
44
|
lineHeight: 1,
|
|
45
|
-
color: i === idx
|
|
45
|
+
color: i === idx
|
|
46
|
+
? "rgb(var(--sg-text,var(--sg-fg)))"
|
|
47
|
+
: "rgb(var(--sg-muted,var(--sg-fg)))",
|
|
46
48
|
}, children: item }, `${item}-${i}`))) })] }));
|
|
47
49
|
}
|
|
@@ -92,5 +92,5 @@ export function SgSegmentDigit({ value, size = 16, color, className, style }) {
|
|
|
92
92
|
const scale = Math.max(0.2, size / viewHeight);
|
|
93
93
|
const width = round(viewWidth * scale);
|
|
94
94
|
const height = round(viewHeight * scale);
|
|
95
|
-
return (_jsx("svg", { role: "img", "aria-label": value, width: width, height: height, viewBox: `0 0 ${viewWidth} ${viewHeight}`, className: cn("inline-block align-middle text-
|
|
95
|
+
return (_jsx("svg", { role: "img", "aria-label": value, width: width, height: height, viewBox: `0 0 ${viewWidth} ${viewHeight}`, className: cn("inline-block align-middle text-[rgb(var(--sg-text,var(--sg-fg)))]", className), style: { color, ...style }, children: glyph.map((segment, idx) => (_jsx("rect", { x: segment.x, y: segment.y, width: segment.w, height: segment.h, rx: 0.3, fill: "currentColor" }, `${normalized}-${idx}`))) }));
|
|
96
96
|
}
|
|
@@ -224,7 +224,7 @@ export function SgCalendar(props) {
|
|
|
224
224
|
maxWidth: "100%",
|
|
225
225
|
...(cardProps?.style ?? {})
|
|
226
226
|
};
|
|
227
|
-
return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "
|
|
227
|
+
return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "rgb(var(--sg-surface,var(--sg-bg)))", bgColorTitle: "rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))", cardStyle: "outlined", ...cardProps, className: mergedCardClassName, bodyClassName: mergedCardBodyClassName, style: mergedCardStyle, children: _jsxs("div", { className: cn("inline-flex max-w-full select-none flex-col gap-3", className), style: style, ...rest, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-background px-4 py-3", children: [_jsx("div", { className: "min-h-6 text-sm font-medium text-foreground", children: selectedLabel }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setMonthViewDate(addMonths(monthViewDate, -1)), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.previousMonth, title: uiLabels.previousMonth, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "m12.5 5.8-4.2 4.2 4.2 4.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", onClick: () => setMonthViewDate(addMonths(monthViewDate, 1)), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.nextMonth, title: uiLabels.nextMonth, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 5.8 4.2 4.2-4.2 4.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), showTodayShortcut ? (_jsx("button", { type: "button", onClick: handleGoToday, className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border/70 bg-muted/40 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": uiLabels.goToday, title: uiLabels.goToday, children: _jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", "aria-hidden": "true", children: _jsx("path", { d: "M5.6 7.6 10 12l4.4-4.4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null] })] }), _jsx("div", { className: "max-h-full max-w-full overflow-auto", children: _jsx("div", { className: "grid gap-4", style: monthGridStyle, children: monthDates.map((monthDate) => {
|
|
228
228
|
const firstDayOfMonth = startOfMonth(monthDate);
|
|
229
229
|
const firstDayOffset = (firstDayOfMonth.getDay() - safeWeekStartsOn + 7) % 7;
|
|
230
230
|
const gridStart = addDays(firstDayOfMonth, -firstDayOffset);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgClock.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAUnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA2C/D,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SgClock.d.ts","sourceRoot":"","sources":["../../../src/gadgets/clock/SgClock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAUnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA2C/D,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAigBd,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsG1C"}
|
|
@@ -107,7 +107,7 @@ function AnalogClock({ size = 280, initialServerTime, timezone, locale = "pt-BR"
|
|
|
107
107
|
const hourDeg = (((h % 12) + m / 60 + sec / 3600) / 12) * 360;
|
|
108
108
|
const themeObj = theme ??
|
|
109
109
|
(resolver ? resolveTheme(resolver, themeId, "classic") : getTheme(themeId) ?? getTheme("classic"));
|
|
110
|
-
return (_jsx("div", { className: className, style: style, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: "block", "aria-label": "Analog clock", children: [_jsx("g", { id: "theme", children: themeObj ? _jsx(ThemeLayer, { theme: themeObj, args: { size, dark } }) : null }), _jsxs("g", { id: "hands", children: [_jsx("g", { transform: `rotate(${hourDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "28", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "2.6", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${minDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "18", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "1.7", strokeLinecap: "round" }) }), showSeconds && (_jsx("g", { transform: `rotate(${secDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "54", x2: "50", y2: "14", className: "stroke-rose-500", strokeWidth: "0.9", strokeLinecap: "round" }) }))] }), _jsx("circle", { cx: "50", cy: "50", r: "2.2", className: "fill-neutral-800 dark:fill-neutral-200" }), showSeconds ? _jsx("circle", { cx: "50", cy: "50", r: "1.1", className: "fill-rose-500" }) : null, centerOverlay ? (_jsx("foreignObject", { x: "35", y: "35", width: "30", height: "30", children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: centerOverlay }) })) : null] }) }));
|
|
110
|
+
return (_jsx("div", { className: className, style: style, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", className: cn("block", dark ? "dark" : undefined), "aria-label": "Analog clock", children: [_jsx("g", { id: "theme", children: themeObj ? _jsx(ThemeLayer, { theme: themeObj, args: { size, dark } }) : null }), _jsxs("g", { id: "hands", children: [_jsx("g", { transform: `rotate(${hourDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "28", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "2.6", strokeLinecap: "round" }) }), _jsx("g", { transform: `rotate(${minDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "50", x2: "50", y2: "18", className: "stroke-neutral-800 dark:stroke-neutral-200", strokeWidth: "1.7", strokeLinecap: "round" }) }), showSeconds && (_jsx("g", { transform: `rotate(${secDeg} 50 50)`, children: _jsx("line", { x1: "50", y1: "54", x2: "50", y2: "14", className: "stroke-rose-500", strokeWidth: "0.9", strokeLinecap: "round" }) }))] }), _jsx("circle", { cx: "50", cy: "50", r: "2.2", className: "fill-neutral-800 dark:fill-neutral-200" }), showSeconds ? _jsx("circle", { cx: "50", cy: "50", r: "1.1", className: "fill-rose-500" }) : null, centerOverlay ? (_jsx("foreignObject", { x: "35", y: "35", width: "30", height: "30", children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: centerOverlay }) })) : null] }) }));
|
|
111
111
|
}
|
|
112
112
|
function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format = "24h", showSeconds = true, size = "md", digitalStyle = "default", className, style }) {
|
|
113
113
|
const { nowMs, hasProvider, providerTick } = useClockNowMs(initialServerTime);
|
|
@@ -147,12 +147,17 @@ function DigitalClock({ initialServerTime, timezone, locale = "pt-BR", format =
|
|
|
147
147
|
const digitFont = Math.round(sizePx * 1.4);
|
|
148
148
|
// Approx card height: fontSize * line-height(1.4) from the library CSS
|
|
149
149
|
const cardH = Math.round(digitFont * 1.4);
|
|
150
|
-
const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", style: { height: cardH }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-[
|
|
151
|
-
const PeriodCell = ({ value }) => (_jsx("div", { className: "flex items-center justify-center rounded bg-[
|
|
150
|
+
const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2", style: { height: cardH }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-[rgb(var(--sg-muted,var(--sg-fg)))]/80" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-[rgb(var(--sg-muted,var(--sg-fg)))]/80" })] }));
|
|
151
|
+
const PeriodCell = ({ value }) => (_jsx("div", { className: "flex items-center justify-center rounded border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))]", style: {
|
|
152
152
|
height: cardH,
|
|
153
153
|
padding: `0 ${Math.round(sizePx * 0.4)}px`,
|
|
154
154
|
boxShadow: "0 .125em .3125em rgba(0,0,0,.25)",
|
|
155
|
-
}, children: _jsx("span", { style: {
|
|
155
|
+
}, children: _jsx("span", { style: {
|
|
156
|
+
fontSize: Math.round(sizePx * 0.9),
|
|
157
|
+
color: "rgb(var(--sg-text,var(--sg-fg)))",
|
|
158
|
+
fontWeight: 700,
|
|
159
|
+
lineHeight: 1
|
|
160
|
+
}, children: value }) }));
|
|
156
161
|
return (_jsxs("div", { className: cn("flex items-center gap-2", className), style: style, "aria-label": "Digital clock", children: [_jsx(SgFlipDigit, { value: hh.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: hh.charAt(1), fontSize: digitFont }), _jsx(Colon, {}), _jsx(SgFlipDigit, { value: mm.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: mm.charAt(1), fontSize: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(SgFlipDigit, { value: ss.charAt(0), fontSize: digitFont }), _jsx(SgFlipDigit, { value: ss.charAt(1), fontSize: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
|
|
157
162
|
}
|
|
158
163
|
if (digitalStyle === "roller3d") {
|
|
@@ -293,5 +298,5 @@ export function SgClock(props) {
|
|
|
293
298
|
const analogSize = typeof size === "number" ? size : size === "sm" ? 140 : size === "lg" ? 320 : 240;
|
|
294
299
|
return (_jsx(AnalogClock, { size: analogSize, initialServerTime: initialServerTime, themeId: themeId, theme: theme, timezone: timezone, locale: locale, showSeconds: showSeconds, secondHandMode: secondHandMode, className: className, style: style, centerOverlay: centerOverlay }));
|
|
295
300
|
})()) : (_jsx(DigitalClock, { timezone: timezone, initialServerTime: initialServerTime, locale: locale, format: format, showSeconds: showSeconds, size: size, digitalStyle: digitalStyle, className: className, style: style }));
|
|
296
|
-
return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "
|
|
301
|
+
return (_jsx(SgCard, { title: resolvedCardTitle, collapsible: true, defaultOpen: true, collapseToggleAlign: "right", collapseIconSize: 20, draggable: true, bgColor: "rgb(var(--sg-surface,var(--sg-bg)))", bgColorTitle: "rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))", cardStyle: "outlined", ...cardProps, className: mergedCardClassName, bodyClassName: mergedCardBodyClassName, style: mergedCardStyle, dragPersistKey: resolvedDragPersistKey, children: clockNode }));
|
|
297
302
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgClockThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/SgClockThemePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAe,EACf,WAAiC,EACjC,SAAS,EACT,MAAM,EACN,WAAgB,EAChB,UAAiB,EACjB,eAA2B,EAC5B,EAAE,uBAAuB,
|
|
1
|
+
{"version":3,"file":"SgClockThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/SgClockThemePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAS5C,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,KAAe,EACf,WAAiC,EACjC,SAAS,EACT,MAAM,EACN,WAAgB,EAChB,UAAiB,EACjB,eAA2B,EAC5B,EAAE,uBAAuB,2CAoJzB"}
|
|
@@ -44,7 +44,7 @@ export function SgClockThemePicker({ value, onChange, label = "Theme", placehold
|
|
|
44
44
|
document.addEventListener("mousedown", onDoc);
|
|
45
45
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
46
46
|
}, [open]);
|
|
47
|
-
return (_jsxs("div", { ref: rootRef, className: cn("relative", className), children: [label ? _jsx("div", { className: "mb-1 text-xs font-medium opacity-70", children: label }) : null, _jsx("button", { type: "button", onClick: () => setOpen((v) => !v), className: cn("w-full rounded-lg border border-
|
|
47
|
+
return (_jsxs("div", { ref: rootRef, className: cn("relative", className), children: [label ? _jsx("div", { className: "mb-1 text-xs font-medium opacity-70", children: label }) : null, _jsx("button", { type: "button", onClick: () => setOpen((v) => !v), className: cn("w-full rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2 text-left text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-sm", "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [currentTheme ? (_jsx("div", { className: "text-[rgb(var(--sg-text,var(--sg-fg)))]", children: _jsx(SgClockThemePreview, { theme: currentTheme, size: previewSize }) })) : (_jsx("div", { className: "h-[56px] w-[56px] rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: currentTheme?.label ?? currentTheme?.id ?? placeholder }), _jsx("div", { className: "truncate text-xs opacity-60", children: currentTheme?.id ?? "" })] }), _jsx("div", { className: "text-xs opacity-60", children: open ? "^" : "v" })] }) }), open && (_jsxs("div", { className: cn("absolute z-50 mt-2 w-full overflow-hidden rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg"), children: [searchable && (_jsx("div", { className: "p-2", children: _jsx(SgAutocomplete, { id: "sg-clock-theme-search", label: "Search theme", placeholder: "Search theme...", openOnFocus: true, showDropDownButton: true, clearOnSelect: true, minLengthForSearch: 0, source: (query) => {
|
|
48
48
|
const s = (query ?? "").trim().toLowerCase();
|
|
49
49
|
const items = all.map((t) => ({
|
|
50
50
|
id: t.id,
|
|
@@ -65,7 +65,7 @@ export function SgClockThemePicker({ value, onChange, label = "Theme", placehold
|
|
|
65
65
|
onChange(t.id);
|
|
66
66
|
setOpen(false);
|
|
67
67
|
}, className: cn("w-full rounded-lg p-2 text-left transition", active
|
|
68
|
-
? "bg-
|
|
69
|
-
: "hover:bg-
|
|
68
|
+
? "bg-[rgb(var(--sg-primary))] text-[rgb(var(--sg-primary-contrast,var(--sg-bg)))]"
|
|
69
|
+
: "hover:bg-[rgb(var(--sg-surface-2,var(--sg-surface,var(--sg-bg))))]"), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn(active ? "text-[rgb(var(--sg-primary-contrast,var(--sg-bg)))]" : "text-[rgb(var(--sg-text,var(--sg-fg)))]"), children: _jsx(SgClockThemePreview, { theme: t, size: 44 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: t.label ?? t.id }), _jsx("div", { className: cn("truncate text-xs", active ? "opacity-80" : "opacity-60"), children: t.id })] }), active ? _jsx("div", { className: "text-xs opacity-80", children: "OK" }) : null] }) }, t.id));
|
|
70
70
|
}) })) })] }))] }));
|
|
71
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderTheme.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/renderTheme.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAQ1F,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACL,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,sBAAsB,CAAC;CAC9B,
|
|
1
|
+
{"version":3,"file":"renderTheme.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/renderTheme.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAQ1F,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACL,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,sBAAsB,CAAC;CAC9B,2CAiCA;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EACrC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,MAAM,GACtB,YAAY,GAAG,IAAI,CAKrB"}
|
|
@@ -9,6 +9,8 @@ function extractInnerSvg(svgText) {
|
|
|
9
9
|
export function ThemeLayer({ theme, args }) {
|
|
10
10
|
const [inner, setInner] = React.useState(null);
|
|
11
11
|
const url = theme.url;
|
|
12
|
+
const darkClassName = args.dark ? "dark" : undefined;
|
|
13
|
+
const renderedTheme = theme.render?.(args) ?? null;
|
|
12
14
|
React.useEffect(() => {
|
|
13
15
|
let alive = true;
|
|
14
16
|
setInner(null);
|
|
@@ -29,7 +31,7 @@ export function ThemeLayer({ theme, args }) {
|
|
|
29
31
|
alive = false;
|
|
30
32
|
};
|
|
31
33
|
}, [url]);
|
|
32
|
-
return (_jsxs(_Fragment, { children: [
|
|
34
|
+
return (_jsxs(_Fragment, { children: [renderedTheme ? _jsx("g", { className: darkClassName, children: renderedTheme }) : null, url && inner ? _jsx("g", { className: darkClassName, dangerouslySetInnerHTML: { __html: inner } }) : null] }));
|
|
33
35
|
}
|
|
34
36
|
export function resolveTheme(resolver, themeId, fallbackThemeId) {
|
|
35
37
|
const t = resolver?.resolve(themeId) ?? null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDarkFlag.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/useDarkFlag.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,
|
|
1
|
+
{"version":3,"file":"useDarkFlag.d.ts","sourceRoot":"","sources":["../../../../src/gadgets/clock/themes/useDarkFlag.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YA8C1B"}
|
|
@@ -4,11 +4,42 @@ export function useDarkFlag() {
|
|
|
4
4
|
const [dark, setDark] = React.useState(false);
|
|
5
5
|
React.useEffect(() => {
|
|
6
6
|
const root = document.documentElement;
|
|
7
|
-
const compute = () =>
|
|
7
|
+
const compute = () => {
|
|
8
|
+
const mode = getComputedStyle(root).getPropertyValue("--sg-mode").trim().toLowerCase();
|
|
9
|
+
if (mode === "dark") {
|
|
10
|
+
setDark(true);
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (mode === "light") {
|
|
14
|
+
setDark(false);
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (root.classList.contains("dark")) {
|
|
18
|
+
setDark(true);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
setDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
22
|
+
};
|
|
8
23
|
compute();
|
|
9
24
|
const obs = new MutationObserver(() => compute());
|
|
10
|
-
obs.observe(root, { attributes: true, attributeFilter: ["class"] });
|
|
11
|
-
|
|
25
|
+
obs.observe(root, { attributes: true, attributeFilter: ["class", "style"] });
|
|
26
|
+
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
27
|
+
const onMediaChange = () => compute();
|
|
28
|
+
if (media.addEventListener) {
|
|
29
|
+
media.addEventListener("change", onMediaChange);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
media.addListener(onMediaChange);
|
|
33
|
+
}
|
|
34
|
+
return () => {
|
|
35
|
+
obs.disconnect();
|
|
36
|
+
if (media.removeEventListener) {
|
|
37
|
+
media.removeEventListener("change", onMediaChange);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
media.removeListener(onMediaChange);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
12
43
|
}, []);
|
|
13
44
|
return dark;
|
|
14
45
|
}
|
|
@@ -222,7 +222,7 @@ function SgAutocompleteBase(props) {
|
|
|
222
222
|
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(flatIndex), onMouseDown: (event) => {
|
|
223
223
|
event.preventDefault();
|
|
224
224
|
ignoreBlurRef.current = true;
|
|
225
|
-
}, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-
|
|
225
|
+
}, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(item) })) : null] }, item.id));
|
|
226
226
|
})] }, group || "default")));
|
|
227
227
|
}
|
|
228
228
|
return items.map((item, index) => {
|
|
@@ -230,7 +230,7 @@ function SgAutocompleteBase(props) {
|
|
|
230
230
|
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
|
|
231
231
|
event.preventDefault();
|
|
232
232
|
ignoreBlurRef.current = true;
|
|
233
|
-
}, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-
|
|
233
|
+
}, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(item) })) : null] }, item.id));
|
|
234
234
|
});
|
|
235
235
|
};
|
|
236
236
|
return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, readOnly: readOnly, borderRadius: borderRadius, iconButtons: mergedIconButtons, inputProps: {
|
|
@@ -253,5 +253,5 @@ function SgAutocompleteBase(props) {
|
|
|
253
253
|
inputProps?.onKeyDown?.(event);
|
|
254
254
|
handleKeyDown(event);
|
|
255
255
|
}
|
|
256
|
-
} }), open && !(enabled === false || readOnly) ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-
|
|
256
|
+
} }), open && !(enabled === false || readOnly) ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: resolvedBorderRadius ? { borderRadius: resolvedBorderRadius } : undefined, children: [_jsx("div", { className: "max-h-64 overflow-auto", children: listContent() }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2", children: renderFooter(inputValue, items.length > 0) })) : null] })) : null] }));
|
|
257
257
|
}
|
|
@@ -338,17 +338,17 @@ export function SgCombobox(props) {
|
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
340
|
}
|
|
341
|
-
} }), open && !isDisabled ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-
|
|
341
|
+
} }), open && !isDisabled ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: resolvedBorderRadius ? { borderRadius: resolvedBorderRadius } : undefined, children: [_jsx("div", { className: "max-h-64 overflow-auto", children: loading ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText })) : entries.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText })) : groupedEntries ? (groupedEntries.map(({ group, list }) => (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground", children: renderGroupHeader ? renderGroupHeader(group) : group || " " }), list.map(({ entry, index }) => {
|
|
342
342
|
const isActive = activeIndex === index;
|
|
343
343
|
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
|
|
344
344
|
event.preventDefault();
|
|
345
345
|
ignoreBlurRef.current = true;
|
|
346
|
-
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-
|
|
346
|
+
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
|
|
347
347
|
})] }, group || "default")))) : (entries.map((entry, index) => {
|
|
348
348
|
const isActive = activeIndex === index;
|
|
349
349
|
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
|
|
350
350
|
event.preventDefault();
|
|
351
351
|
ignoreBlurRef.current = true;
|
|
352
|
-
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-
|
|
353
|
-
})) }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-
|
|
352
|
+
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
|
|
353
|
+
})) }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2", children: renderFooter("", entries.length > 0) })) : null] })) : null] }));
|
|
354
354
|
}
|
|
@@ -380,7 +380,7 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
380
380
|
commitSelection(next);
|
|
381
381
|
}, [selectionMode, currentSelection, dataKey, commitSelection]);
|
|
382
382
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
383
|
-
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-
|
|
383
|
+
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsx("div", { className: "relative", children: _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
|
|
384
384
|
const sortCandidate = column.sortField ?? column.field;
|
|
385
385
|
const isSorted = Boolean(sortCandidate) && sortCandidate === currentSortField;
|
|
386
386
|
const sortIcon = !column.sortable
|
|
@@ -403,7 +403,7 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
403
403
|
};
|
|
404
404
|
const normalized = normalizeFilters(nextFilters);
|
|
405
405
|
commitFilters(normalized, currentGlobalFilter);
|
|
406
|
-
}, placeholder: column.filterPlaceholder ?? `Filter ${String(column.header ?? "")}`, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-
|
|
406
|
+
}, placeholder: column.filterPlaceholder ?? `Filter ${String(column.header ?? "")}`, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null }, `filter-${column.field ?? columnIndex}`));
|
|
407
407
|
}) })) : null] }), _jsx("tbody", { children: loading ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: loadingLabel }) })) : pagedRows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, visibleColumns.length), className: "px-4 py-6 text-center text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel }) })) : (pagedRows.map((rowData, rowIndex) => {
|
|
408
408
|
const absoluteRowIndex = safeFirst + rowIndex;
|
|
409
409
|
const selected = isRowSelected(rowData);
|
|
@@ -436,6 +436,6 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
436
436
|
}) }) })) : null] }) }) }), paginator ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), children: prevLabel }), pageWindow.map((pageNumber) => (_jsx(SgButton, { size: "sm", appearance: pageNumber === currentPage ? "solid" : "outline", onClick: () => goToPage(pageNumber), children: String(pageNumber) }, `page-${pageNumber}`))), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: currentPage >= pageCount, onClick: () => goToPage(currentPage + 1), children: nextLabel }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
|
|
437
437
|
const nextRows = Number(event.target.value) || currentRows;
|
|
438
438
|
commitPage(0, nextRows);
|
|
439
|
-
}, className: "rounded-md border border-[rgb(var(--sg-border))] bg-
|
|
439
|
+
}, className: "rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null] })) : null] }) }) }));
|
|
440
440
|
}
|
|
441
441
|
export const SgDatatable = React.forwardRef(SgDatatableBase);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputCurrency.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputCurrency.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"SgInputCurrency.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputCurrency.tsx"],"names":[],"mappings":"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"}
|