@aoctech/ui 0.1.1 → 0.1.3
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 +4 -0
- package/dist/components/error-state.d.ts +32 -0
- package/dist/components/error-state.js +16 -0
- package/dist/components/theme-provider.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/themes.css +8 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -102,6 +102,10 @@ so a badge renders what the server said rather than a client-side mapping of an
|
|
|
102
102
|
| `EmptyState` | Title, description, optional action. |
|
|
103
103
|
| `Skeleton` | Honours `prefers-reduced-motion`. |
|
|
104
104
|
| `Separator` | Horizontal and vertical. |
|
|
105
|
+
| `Checkbox` | Base UI `Checkbox`. |
|
|
106
|
+
| `Radio` + `RadioGroup` | Base UI `Radio`. |
|
|
107
|
+
| `Switch` | Base UI `Switch`. |
|
|
108
|
+
| `DatePicker` + `Calendar` | Built on `react-day-picker`. |
|
|
105
109
|
|
|
106
110
|
Deliberately small. Components arrive when a second app needs one, not in anticipation — the whole
|
|
107
111
|
point of extracting this was to stop maintaining four copies, and a component with one consumer is
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
declare const errorMessages: {
|
|
3
|
+
readonly 400: {
|
|
4
|
+
readonly title: "Não foi possível abrir este endereço";
|
|
5
|
+
readonly description: "Confira os parâmetros do link ou volte ao início para continuar.";
|
|
6
|
+
};
|
|
7
|
+
readonly 404: {
|
|
8
|
+
readonly title: "Não encontramos esta página";
|
|
9
|
+
readonly description: "O endereço pode ter mudado ou o conteúdo não está disponível.";
|
|
10
|
+
};
|
|
11
|
+
readonly 500: {
|
|
12
|
+
readonly title: "Não foi possível carregar a página";
|
|
13
|
+
readonly description: "Ocorreu um erro inesperado. Tente novamente em instantes.";
|
|
14
|
+
};
|
|
15
|
+
readonly 503: {
|
|
16
|
+
readonly title: "Serviço temporariamente indisponível";
|
|
17
|
+
readonly description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente.";
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
type ErrorStatus = keyof typeof errorMessages;
|
|
21
|
+
interface ErrorStateProps {
|
|
22
|
+
status: ErrorStatus;
|
|
23
|
+
title?: string;
|
|
24
|
+
description?: string;
|
|
25
|
+
action?: ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
/** Shared error presentation. Apps own routing, retries and availability checks.
|
|
29
|
+
* Never pass exception messages, stack traces, tokens or private data as copy.
|
|
30
|
+
*/
|
|
31
|
+
declare function ErrorState({ status, title, description, action, className }: ErrorStateProps): import("react").JSX.Element;
|
|
32
|
+
export { ErrorState, type ErrorStateProps, type ErrorStatus };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/cn";
|
|
3
|
+
const errorMessages = {
|
|
4
|
+
400: { title: "Não foi possível abrir este endereço", description: "Confira os parâmetros do link ou volte ao início para continuar." },
|
|
5
|
+
404: { title: "Não encontramos esta página", description: "O endereço pode ter mudado ou o conteúdo não está disponível." },
|
|
6
|
+
500: { title: "Não foi possível carregar a página", description: "Ocorreu um erro inesperado. Tente novamente em instantes." },
|
|
7
|
+
503: { title: "Serviço temporariamente indisponível", description: "Estamos sem conexão com o serviço. Verifique sua conexão e tente novamente." },
|
|
8
|
+
};
|
|
9
|
+
/** Shared error presentation. Apps own routing, retries and availability checks.
|
|
10
|
+
* Never pass exception messages, stack traces, tokens or private data as copy.
|
|
11
|
+
*/
|
|
12
|
+
function ErrorState({ status, title, description, action, className }) {
|
|
13
|
+
const message = errorMessages[status];
|
|
14
|
+
return (_jsxs("section", { "data-slot": "error-state", role: "alert", className: cn("mx-auto flex max-w-2xl flex-col items-center gap-5 px-5 py-16 text-center", className), children: [_jsx("p", { className: "font-mono text-sm tabular-nums text-muted-foreground", children: status }), _jsx("h1", { className: "text-2xl font-semibold text-foreground sm:text-3xl", children: title || message.title }), _jsx("p", { className: "max-w-[48ch] text-pretty text-base text-muted-foreground", children: description || message.description }), action && _jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-3", children: action })] }));
|
|
15
|
+
}
|
|
16
|
+
export { ErrorState };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
|
-
type CTechTheme = "account" | "dfe" | "wallet" | "poker" | "billing";
|
|
2
|
+
type CTechTheme = "account" | "dfe" | "wallet" | "poker" | "billing" | "auction";
|
|
3
3
|
type Density = "comfortable" | "compact";
|
|
4
4
|
interface ThemeProviderProps extends ComponentProps<"div"> {
|
|
5
5
|
theme: CTechTheme;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { Skeleton } from "./components/skeleton";
|
|
|
14
14
|
export { Radio, RadioGroup } from "./components/radio";
|
|
15
15
|
export { Switch } from "./components/switch";
|
|
16
16
|
export { ThemeProvider, type CTechTheme, type Density, type ThemeProviderProps } from "./components/theme-provider";
|
|
17
|
+
export { ErrorState, type ErrorStateProps, type ErrorStatus } from "./components/error-state";
|
package/dist/index.js
CHANGED
|
@@ -14,3 +14,4 @@ export { Skeleton } from "./components/skeleton";
|
|
|
14
14
|
export { Radio, RadioGroup } from "./components/radio";
|
|
15
15
|
export { Switch } from "./components/switch";
|
|
16
16
|
export { ThemeProvider } from "./components/theme-provider";
|
|
17
|
+
export { ErrorState } from "./components/error-state";
|
package/dist/themes.css
CHANGED
|
@@ -63,3 +63,11 @@
|
|
|
63
63
|
--color-ring: var(--brand-600);
|
|
64
64
|
--shadow-modal: 0 16px 48px -12px oklch(0.22 0.014 45 / 0.28);
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
/* Auction is additive: existing themes and default fallback are unchanged. */
|
|
68
|
+
:where([data-ctech-theme="auction"]) {
|
|
69
|
+
--brand-50: oklch(0.96 0.022 215);
|
|
70
|
+
--brand-600: oklch(0.47 0.08 215);
|
|
71
|
+
--brand-700: oklch(0.40 0.07 215);
|
|
72
|
+
--color-ring: var(--brand-600);
|
|
73
|
+
}
|
package/package.json
CHANGED