@wellingtonhlc/shared-ui 0.21.0 → 0.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -0
- package/dist/components/AppShell.d.ts +9 -2
- package/dist/components/AppShell.d.ts.map +1 -1
- package/dist/components/AppShell.js +8 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -111,6 +111,22 @@ Componentes disponiveis na API publica:
|
|
|
111
111
|
| Controle de renderizacao | `RenderIf`, `RenderCase` |
|
|
112
112
|
| Tema | `ThemePreferencesSelector` |
|
|
113
113
|
|
|
114
|
+
## AppShell.Topbar.Button
|
|
115
|
+
|
|
116
|
+
Use `AppShell.Topbar.Button` para acoes de icone na barra superior, como notificacoes,
|
|
117
|
+
configuracoes e atalhos globais. O componente reutiliza o mesmo contrato visual dos
|
|
118
|
+
primitivos de acao, mas aplica o tamanho esperado para a topbar.
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import { AppShell } from '@wellingtonhlc/shared-ui';
|
|
122
|
+
import { Bell, Settings } from 'lucide-react';
|
|
123
|
+
|
|
124
|
+
<AppShell.Actions>
|
|
125
|
+
<AppShell.Topbar.Button icon={<Bell />} tooltip="Notificacoes" />
|
|
126
|
+
<AppShell.Topbar.Button icon={<Settings />} tooltip="Configuracoes" />
|
|
127
|
+
</AppShell.Actions>
|
|
128
|
+
```
|
|
129
|
+
|
|
114
130
|
## ThemePreferencesSelector
|
|
115
131
|
|
|
116
132
|
`ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
|
-
import { AppShellActions, AppShellActionsSeparator } from './AppShellActions';
|
|
2
|
+
import { AppShellActions, AppShellActionsSeparator, type AppShellActionButtonProps } from './AppShellActions';
|
|
3
3
|
export type AppShellContentMode = 'default' | 'fluid' | 'fullscreen';
|
|
4
4
|
export type AppShellOverlayVariant = 'default' | 'soft' | 'strong';
|
|
5
5
|
export interface AppShellRootProps {
|
|
@@ -24,6 +24,8 @@ interface AppShellSlotProps {
|
|
|
24
24
|
children: ReactNode;
|
|
25
25
|
className?: string;
|
|
26
26
|
}
|
|
27
|
+
export interface AppShellTopbarButtonProps extends AppShellActionButtonProps {
|
|
28
|
+
}
|
|
27
29
|
export interface AppShellTopbarProps {
|
|
28
30
|
actions?: ReactNode;
|
|
29
31
|
actionsClassName?: string;
|
|
@@ -34,6 +36,9 @@ export interface AppShellTopbarProps {
|
|
|
34
36
|
pageTitle: ReactNode;
|
|
35
37
|
titleContainerClassName?: string;
|
|
36
38
|
}
|
|
39
|
+
export declare const Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement>> & {
|
|
40
|
+
Button: import("react").ForwardRefExoticComponent<AppShellTopbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
41
|
+
};
|
|
37
42
|
export interface AppShellMainProps {
|
|
38
43
|
children: ReactNode;
|
|
39
44
|
className?: string;
|
|
@@ -51,7 +56,9 @@ export declare const AppShell: {
|
|
|
51
56
|
ActionsSeparator: typeof AppShellActionsSeparator;
|
|
52
57
|
ContentColumn: import("react").ForwardRefExoticComponent<AppShellSlotProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
53
58
|
WorkArea: import("react").ForwardRefExoticComponent<AppShellSlotProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
54
|
-
Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement
|
|
59
|
+
Topbar: import("react").ForwardRefExoticComponent<AppShellTopbarProps & import("react").RefAttributes<HTMLElement>> & {
|
|
60
|
+
Button: import("react").ForwardRefExoticComponent<AppShellTopbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
61
|
+
};
|
|
55
62
|
Main: import("react").ForwardRefExoticComponent<AppShellMainProps & import("react").RefAttributes<HTMLElement>>;
|
|
56
63
|
};
|
|
57
64
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/components/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,eAAe,EACf,wBAAwB,EACxB,KAAK,yBAAyB,EAC/B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAUnE,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAcD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAeD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;CAClB;AAsBD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB;CAAG;AAa/E,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAqCD,eAAO,MAAM,MAAM;;CAEjB,CAAC;AAEH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAqCD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAWpB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, forwardRef, useContext, } from 'react';
|
|
3
3
|
import { cn } from '../utils/cn';
|
|
4
|
-
import { AppShellActionButton, AppShellActions, AppShellActionsSeparator } from './AppShellActions';
|
|
4
|
+
import { AppShellActionButton, AppShellActions, AppShellActionsSeparator, } from './AppShellActions';
|
|
5
5
|
const AppShellOverlayContext = createContext('default');
|
|
6
6
|
const overlayVariantClasses = {
|
|
7
7
|
default: 'bg-slate-900/28 backdrop-blur-[2px]',
|
|
@@ -24,8 +24,13 @@ const ContentColumn = forwardRef(({ children, className }, ref) => (_jsx("div",
|
|
|
24
24
|
ContentColumn.displayName = 'AppShell.ContentColumn';
|
|
25
25
|
const WorkArea = forwardRef(({ children, className }, ref) => (_jsx("div", { ref: ref, className: cn('flex min-h-0 min-w-0 flex-1 flex-col-reverse overflow-hidden md:flex-col', className), children: children })));
|
|
26
26
|
WorkArea.displayName = 'AppShell.WorkArea';
|
|
27
|
-
const
|
|
28
|
-
|
|
27
|
+
const TopbarButton = forwardRef(({ className, ...props }, ref) => (_jsx(AppShellActionButton, { ref: ref, className: cn('relative size-10 min-h-10 min-w-10 rounded-full', className), ...props })));
|
|
28
|
+
TopbarButton.displayName = 'AppShell.Topbar.Button';
|
|
29
|
+
const TopbarRoot = forwardRef(({ actions, actionsClassName, children, className, icon, mobileToggle, pageTitle, titleContainerClassName, }, ref) => (_jsxs("header", { ref: ref, className: cn('border-app-border bg-background-secondary flex min-h-16 items-center justify-between border-b px-4 pr-4 shadow-[0_2px_8px_-2px_color-mix(in_srgb,#000_6%,transparent)] max-md:pl-0', className), role: "banner", children: [_jsxs("div", { className: cn('flex min-w-0 items-center gap-2.5 max-md:gap-3', titleContainerClassName), children: [mobileToggle, icon && _jsx("span", { className: "shrink-0 text-foreground-muted", "aria-hidden": "true", children: icon }), _jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold leading-7 tracking-[-0.015em] text-foreground-muted", children: pageTitle })] }), (children || actions) && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-4', actionsClassName), children: [children, actions] }))] })));
|
|
30
|
+
TopbarRoot.displayName = 'AppShell.Topbar';
|
|
31
|
+
export const Topbar = Object.assign(TopbarRoot, {
|
|
32
|
+
Button: TopbarButton,
|
|
33
|
+
});
|
|
29
34
|
const Main = forwardRef(({ children, className, contentPaddingClassName, contentMode = 'default', disableContentPadding = false, scrollable = true, }, ref) => {
|
|
30
35
|
const isFullscreen = contentMode === 'fullscreen';
|
|
31
36
|
return (_jsx("main", { ref: ref, className: cn('flex h-full min-h-0 w-full flex-1 flex-col bg-background', !isFullscreen && 'overflow-x-hidden p-3', contentMode === 'default' && 'flex flex-col gap-3', contentMode === 'fluid' && 'flex flex-col gap-3 overflow-y-hidden', contentMode === 'fullscreen' && 'overflow-hidden p-0', !isFullscreen && !disableContentPadding && contentPaddingClassName, !isFullscreen && (scrollable ? 'overflow-y-auto' : 'overflow-y-hidden'), className), children: children }));
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { cn } from './utils/cn';
|
|
2
|
-
export { AppShell, type AppShellContentMode, type AppShellMainProps, type AppShellOverlayProps, type AppShellOverlayVariant } from './components/AppShell';
|
|
2
|
+
export { AppShell, type AppShellContentMode, type AppShellMainProps, type AppShellOverlayProps, type AppShellOverlayVariant, type AppShellTopbarButtonProps, type AppShellTopbarProps, } from './components/AppShell';
|
|
3
3
|
export { AppShellActionButton, AppShellActions, AppShellActionsSeparator, type AppShellActionButtonProps, type AppShellActionButtonVariant, type AppShellActionsAlign, type AppShellActionsProps, type AppShellActionsRegion, type AppShellActionsSeparatorProps, } from './components/AppShellActions';
|
|
4
4
|
export { Badge, type BadgeProps, type BadgeVariant } from './components/Badge';
|
|
5
5
|
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { cn } from './utils/cn';
|
|
2
|
-
export { AppShell } from './components/AppShell';
|
|
2
|
+
export { AppShell, } from './components/AppShell';
|
|
3
3
|
export { AppShellActionButton, AppShellActions, AppShellActionsSeparator, } from './components/AppShellActions';
|
|
4
4
|
export { Badge } from './components/Badge';
|
|
5
5
|
export { Button } from './components/Button';
|
package/dist/styles.css
CHANGED
|
@@ -1075,6 +1075,10 @@ h2.react-datepicker__current-month {
|
|
|
1075
1075
|
width: calc(var(--spacing) * 9);
|
|
1076
1076
|
height: calc(var(--spacing) * 9);
|
|
1077
1077
|
}
|
|
1078
|
+
.size-10 {
|
|
1079
|
+
width: calc(var(--spacing) * 10);
|
|
1080
|
+
height: calc(var(--spacing) * 10);
|
|
1081
|
+
}
|
|
1078
1082
|
.size-12 {
|
|
1079
1083
|
width: calc(var(--spacing) * 12);
|
|
1080
1084
|
height: calc(var(--spacing) * 12);
|