@wellingtonhlc/shared-ui 0.26.11 → 0.26.12
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/dist/components/EmptyState.d.ts.map +1 -1
- package/dist/components/EmptyState.js +7 -3
- package/dist/components/Modal.d.ts +1 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/Modal.js +27 -2
- package/dist/components/SelectField.d.ts +8 -0
- package/dist/components/SelectField.d.ts.map +1 -1
- package/dist/components/SelectField.js +4 -2
- package/dist/components/Workspace.d.ts +8 -3
- package/dist/components/Workspace.d.ts.map +1 -1
- package/dist/components/Workspace.js +10 -4
- package/dist/components/WorkspaceContext.d.ts +2 -0
- package/dist/components/WorkspaceContext.d.ts.map +1 -0
- package/dist/components/WorkspaceContext.js +2 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/styles.css +12 -5
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMzF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,eAAe,+BA8CjB"}
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cloneElement, isValidElement } from 'react';
|
|
3
3
|
import { cn } from '../utils/cn';
|
|
4
|
-
|
|
4
|
+
import { WorkspaceResultContext } from './WorkspaceContext';
|
|
5
|
+
import { useContext } from 'react';
|
|
6
|
+
export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', fill, className, style, children, }) {
|
|
5
7
|
const isCompact = variant === 'compact';
|
|
6
|
-
const
|
|
8
|
+
const workspaceFill = useContext(WorkspaceResultContext);
|
|
9
|
+
const resolvedFill = fill ?? workspaceFill;
|
|
10
|
+
const shouldFillWithMargin = resolvedFill;
|
|
7
11
|
const styledIcon = isValidElement(icon)
|
|
8
12
|
? cloneElement(icon, {
|
|
9
13
|
className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
|
|
10
14
|
})
|
|
11
15
|
: icon;
|
|
12
|
-
return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-surface text-center text-foreground-muted', !
|
|
16
|
+
return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-surface text-center text-foreground-muted', !resolvedFill
|
|
13
17
|
? 'h-auto w-fit flex-none px-5 py-10'
|
|
14
18
|
: isCompact
|
|
15
19
|
? 'px-4 py-6'
|
|
@@ -27,7 +27,7 @@ declare function createTrigger(trigger: React.ReactNode, options: {
|
|
|
27
27
|
open: boolean;
|
|
28
28
|
onOpen: () => void;
|
|
29
29
|
}): string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
|
|
30
|
-
declare function ModalRoot({ allowExternalFocus, centered, children, className, density, overlayClassName, offset, showCloseButton, size, variant, ...props }: ModalRootProps): React.JSX.Element;
|
|
30
|
+
declare function ModalRoot({ allowExternalFocus, centered, children, className, density, overlayClassName, offset, showCloseButton, size, variant, onOpenChange, ...props }: ModalRootProps): React.JSX.Element;
|
|
31
31
|
declare function ModalHeader({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;
|
|
32
32
|
declare function ModalBody({ className, density, overflowVisible, scrollable, ...props }: ModalBodyProps): React.JSX.Element;
|
|
33
33
|
declare function ModalFooter({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAkED,iBAAS,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,4UAW9F;AAED,iBAAS,SAAS,CAAC,EACjB,kBAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,gBAAgB,EAChB,MAAM,EACN,eAAsB,EACtB,IAAW,EACX,OAAmB,EACnB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,qBAsEhB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAetG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAc3H;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAcrG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAE9F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAE1G;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAC"}
|
package/dist/components/Modal.js
CHANGED
|
@@ -3,6 +3,19 @@ import React from 'react';
|
|
|
3
3
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
4
4
|
import { XIcon } from 'lucide-react';
|
|
5
5
|
import { cn } from '../utils/cn';
|
|
6
|
+
let nextModalLayer = 0;
|
|
7
|
+
function useModalLayer(open) {
|
|
8
|
+
const [layer, setLayer] = React.useState(0);
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
if (!open) {
|
|
11
|
+
setLayer(0);
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
nextModalLayer += 1;
|
|
15
|
+
setLayer(nextModalLayer);
|
|
16
|
+
}, [open]);
|
|
17
|
+
return layer;
|
|
18
|
+
}
|
|
6
19
|
const sizeVariants = {
|
|
7
20
|
xs: '',
|
|
8
21
|
sm: '',
|
|
@@ -47,9 +60,21 @@ function createTrigger(trigger, options) {
|
|
|
47
60
|
'data-state': options.open ? 'open' : 'closed',
|
|
48
61
|
});
|
|
49
62
|
}
|
|
50
|
-
function ModalRoot({ allowExternalFocus = false, centered = false, children, className, density = 'default', overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
|
|
63
|
+
function ModalRoot({ allowExternalFocus = false, centered = false, children, className, density = 'default', overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', onOpenChange, ...props }) {
|
|
64
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(props.defaultOpen ?? false);
|
|
65
|
+
const open = props.open ?? uncontrolledOpen;
|
|
66
|
+
const layer = useModalLayer(open);
|
|
67
|
+
const overlayZIndex = 100 + layer * 20;
|
|
68
|
+
const contentZIndex = 110 + layer * 20;
|
|
69
|
+
function handleOpenChange(nextOpen) {
|
|
70
|
+
if (props.open === undefined) {
|
|
71
|
+
setUncontrolledOpen(nextOpen);
|
|
72
|
+
}
|
|
73
|
+
onOpenChange?.(nextOpen);
|
|
74
|
+
}
|
|
51
75
|
const hasFooter = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ModalFooter);
|
|
52
|
-
return (_jsx(DialogPrimitive.Root, { ...props, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', overlayClassName) }), _jsxs(DialogPrimitive.Content, { onFocusOutside: allowExternalFocus ? (event) => event.preventDefault() : undefined, style: {
|
|
76
|
+
return (_jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: handleOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { style: { zIndex: overlayZIndex }, className: cn('fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', overlayClassName) }), _jsxs(DialogPrimitive.Content, { onFocusOutside: allowExternalFocus ? (event) => event.preventDefault() : undefined, style: {
|
|
77
|
+
zIndex: contentZIndex,
|
|
53
78
|
width: widthVariants[size],
|
|
54
79
|
...(!centered && offset ? { top: `${offset}px` } : {}),
|
|
55
80
|
}, className: cn('fixed z-[110] grid max-h-[95vh]', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl duration-200', density === 'default' && 'p-6', density === 'compact' && 'p-4', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border shadow-lg', variant === 'elevated' && 'border-app-border bg-surface text-foreground border shadow-2xl', centered ? 'left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2' : 'left-[50%] top-[2.5%] -translate-x-1/2', sizeVariants[size], minHeightVariants[size], 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: cn('absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md', 'text-foreground-muted hover:bg-background hover:text-foreground cursor-pointer transition-colors', 'focus:ring-brand/50 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'), children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Fechar" })] })) : null] })] }) }));
|
|
@@ -3,11 +3,19 @@ export interface ValidValues {
|
|
|
3
3
|
label: string;
|
|
4
4
|
value: string | number | null | undefined;
|
|
5
5
|
}
|
|
6
|
+
export interface SelectFieldAction {
|
|
7
|
+
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
8
|
+
icon: React.ReactNode;
|
|
9
|
+
ariaLabel: string;
|
|
10
|
+
tooltip?: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
6
13
|
export interface SelectFieldProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
7
14
|
isLoading?: boolean;
|
|
8
15
|
wrapperClassName?: string;
|
|
9
16
|
labelClassName?: string;
|
|
10
17
|
labelAction?: React.ReactNode;
|
|
18
|
+
action?: SelectFieldAction;
|
|
11
19
|
label?: string;
|
|
12
20
|
errorMessage?: string;
|
|
13
21
|
error?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../src/components/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACnG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,4FAuGvB,CAAC"}
|
|
@@ -4,7 +4,8 @@ import { cn } from '../utils/cn';
|
|
|
4
4
|
import { FieldSkeleton } from './FieldSkeleton';
|
|
5
5
|
import { controlClasses } from './form-control-helpers';
|
|
6
6
|
import { FieldControl } from './FieldControl';
|
|
7
|
-
|
|
7
|
+
import { Button } from './Button';
|
|
8
|
+
export const SelectField = React.forwardRef(({ isLoading, label, errorMessage, error, id, className, wrapperClassName = '', labelClassName = '', labelAction, action, labelPosition = 'top', options: validValues, roundedFull = false, size = 'sm', defaultValue, hideEmptyOption = false, disabled = false, children, ...props }, ref) => {
|
|
8
9
|
const componentId = id || props.name;
|
|
9
10
|
const resolvedError = errorMessage ?? error;
|
|
10
11
|
const sizeMap = {
|
|
@@ -15,7 +16,8 @@ export const SelectField = React.forwardRef(({ isLoading, label, errorMessage, e
|
|
|
15
16
|
};
|
|
16
17
|
const roundedClass = roundedFull ? 'rounded-full' : size === 'lg' ? 'rounded-lg' : 'rounded-md';
|
|
17
18
|
const sizeClass = `${sizeMap[size ?? 'sm']} ${roundedClass}`;
|
|
18
|
-
|
|
19
|
+
const resolvedLabelAction = action ? (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: "!h-4 !min-h-4 !w-4 !min-w-4 !p-0", onClick: action.onClick, "aria-label": action.ariaLabel, tooltip: action.tooltip, disabled: action.disabled, children: action.icon })) : labelAction;
|
|
20
|
+
return (_jsx(FieldSkeleton, { className: wrapperClassName, isLoading: isLoading ?? false, hasLabel: !!label, labelPosition: labelPosition, size: size, children: _jsx(FieldControl, { label: label, id: componentId, labelClassName: labelClassName, labelAction: resolvedLabelAction, labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: resolvedError, roundedFull: roundedFull, size: size, disabled: disabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled }) => (_jsxs("div", { className: cn('relative text-foreground-muted', controlDisabled && 'opacity-60'), children: [_jsxs("select", { ref: ref, ...props, id: controlId, disabled: controlDisabled, "aria-invalid": !!controlError, "aria-describedby": describedBy, className: controlClasses({
|
|
19
21
|
errorMessage: controlError,
|
|
20
22
|
disabled: controlDisabled,
|
|
21
23
|
extra: cn('field-select', className, 'appearance-none pr-10', roundedFull && 'min-h-[2rem] px-4 py-1.5', sizeClass),
|
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import { type ReactElement, type ReactNode } from 'react';
|
|
2
2
|
export interface WorkspaceRootProps {
|
|
3
3
|
/** Painel de filtros exibido a esquerda (ex.: `Filter.Root`). */
|
|
4
4
|
filters: ReactNode;
|
|
5
|
-
/**
|
|
6
|
-
children:
|
|
5
|
+
/** Resultado principal encapsulado por `Workspace.Table`. */
|
|
6
|
+
children: ReactElement<WorkspaceTableProps, typeof WorkspaceTable>;
|
|
7
7
|
className?: string;
|
|
8
8
|
appearance?: 'separated' | 'joined';
|
|
9
9
|
}
|
|
10
|
+
export interface WorkspaceTableProps {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare function WorkspaceTable({ children }: WorkspaceTableProps): import("react").JSX.Element;
|
|
10
14
|
declare function WorkspaceRoot({ filters, children, className, appearance }: WorkspaceRootProps): import("react").JSX.Element;
|
|
11
15
|
export declare const Workspace: {
|
|
12
16
|
Root: typeof WorkspaceRoot;
|
|
17
|
+
Table: typeof WorkspaceTable;
|
|
13
18
|
};
|
|
14
19
|
export {};
|
|
15
20
|
//# sourceMappingURL=Workspace.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Workspace.d.ts","sourceRoot":"","sources":["../../src/components/Workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Workspace.d.ts","sourceRoot":"","sources":["../../src/components/Workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUtE,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,EAAE,YAAY,CAAC,mBAAmB,EAAE,OAAO,cAAc,CAAC,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACrC;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,+BAExD;AAED,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAwB,EAAE,EAAE,kBAAkB,+BA8CpG;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useContext } from 'react';
|
|
3
3
|
import { cn } from '../utils/cn';
|
|
4
4
|
import { Card } from './Card';
|
|
@@ -6,14 +6,20 @@ import { EmptyState } from './EmptyState';
|
|
|
6
6
|
import { FilterVisibilityContext } from './Filter';
|
|
7
7
|
import { RenderCase } from './RenderCase';
|
|
8
8
|
import { RenderIf } from './RenderIf';
|
|
9
|
+
import { WorkspaceResultContext } from './WorkspaceContext';
|
|
10
|
+
function WorkspaceTable({ children }) {
|
|
11
|
+
return _jsx(_Fragment, { children: children });
|
|
12
|
+
}
|
|
9
13
|
function WorkspaceRoot({ filters, children, className, appearance = 'separated' }) {
|
|
10
14
|
const visibility = useContext(FilterVisibilityContext);
|
|
11
15
|
const isJoined = appearance === 'joined';
|
|
12
16
|
const isFilterOpen = visibility?.open ?? true;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
const result = children;
|
|
18
|
+
return (_jsxs("div", { className: cn('grid min-h-0 flex-1 xl:grid-rows-[minmax(0,1fr)]', isJoined
|
|
19
|
+
? 'gap-0 overflow-hidden rounded-[var(--radius)] border border-app-border bg-background-secondary [&_[data-slot=filter-root]]:rounded-none [&_[data-slot=filter-root]]:border-0 [&_[data-slot=filter-root]]:!border-r [&_[data-slot=filter-root]]:!border-app-border [&_[data-slot=table-root]]:rounded-none [&_[data-slot=table-root]]:border-0'
|
|
20
|
+
: 'gap-3', isFilterOpen ? 'xl:grid-cols-[280px_minmax(0,1fr)]' : 'xl:grid-cols-[minmax(0,1fr)]', className), children: [_jsx(RenderIf, { when: isFilterOpen, children: _jsx("aside", { className: "min-h-0 xl:self-stretch xl:[&>*]:h-full xl:[&>*]:min-h-0", children: filters }) }), _jsx("section", { className: cn('flex min-h-0 flex-1 flex-col', isJoined ? 'bg-background-secondary' : 'bg-transparent'), children: _jsx(WorkspaceResultContext.Provider, { value: true, children: _jsxs(RenderCase.Root, { children: [_jsx(RenderCase.If, { when: Boolean(result && (Array.isArray(result) ? result.length > 0 : true)), children: result }), _jsx(RenderCase.Else, { children: _jsx(Card.Root, { className: "flex flex-1 items-center justify-center bg-surface/60 p-8 shadow-sm", children: _jsx(EmptyState, { title: "Nenhum resultado", description: "Ajuste os filtros e pesquise novamente." }) }) })] }) }) })] }));
|
|
16
21
|
}
|
|
17
22
|
export const Workspace = {
|
|
18
23
|
Root: WorkspaceRoot,
|
|
24
|
+
Table: WorkspaceTable,
|
|
19
25
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WorkspaceContext.d.ts","sourceRoot":"","sources":["../../src/components/WorkspaceContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,kCAAuB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export { TextField, type TextFieldIconPosition, type TextFieldProps, type TextFi
|
|
|
16
16
|
export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps } from './components/RadioGroup';
|
|
17
17
|
export { RenderCase, type RenderCaseChildProps, type RenderCaseRootProps } from './components/RenderCase';
|
|
18
18
|
export { RenderIf, type RenderIfProps } from './components/RenderIf';
|
|
19
|
-
export { SelectField, type SelectFieldProps, type ValidValues } from './components/SelectField';
|
|
19
|
+
export { SelectField, type SelectFieldAction, type SelectFieldProps, type ValidValues } from './components/SelectField';
|
|
20
20
|
export { SearchField, type SearchFieldProps } from './components/SearchField';
|
|
21
21
|
export { SelectionField, type SelectionDisplayValue, type SelectionFieldProps, type SelectionFieldSize, type SelectionFieldVariant, } from './components/SelectionField';
|
|
22
22
|
export { Switch, type SwitchProps } from './components/Switch';
|
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,EACL,QAAQ,EACR,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,wBAAwB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,GACnC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpG,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,8BAA8B,GACpC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnK,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC3H,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC1G,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -1130,6 +1130,9 @@ h2.react-datepicker__current-month {
|
|
|
1130
1130
|
width: calc(var(--spacing) * 14);
|
|
1131
1131
|
height: calc(var(--spacing) * 14);
|
|
1132
1132
|
}
|
|
1133
|
+
.\!h-4 {
|
|
1134
|
+
height: calc(var(--spacing) * 4) !important;
|
|
1135
|
+
}
|
|
1133
1136
|
.\!h-7 {
|
|
1134
1137
|
height: calc(var(--spacing) * 7) !important;
|
|
1135
1138
|
}
|
|
@@ -1241,6 +1244,9 @@ h2.react-datepicker__current-month {
|
|
|
1241
1244
|
.max-h-\[calc\(100vh-12rem\)\] {
|
|
1242
1245
|
max-height: calc(100vh - 12rem);
|
|
1243
1246
|
}
|
|
1247
|
+
.\!min-h-4 {
|
|
1248
|
+
min-height: calc(var(--spacing) * 4) !important;
|
|
1249
|
+
}
|
|
1244
1250
|
.\!min-h-6 {
|
|
1245
1251
|
min-height: calc(var(--spacing) * 6) !important;
|
|
1246
1252
|
}
|
|
@@ -1310,6 +1316,9 @@ h2.react-datepicker__current-month {
|
|
|
1310
1316
|
.min-h-\[14rem\] {
|
|
1311
1317
|
min-height: 14rem;
|
|
1312
1318
|
}
|
|
1319
|
+
.\!w-4 {
|
|
1320
|
+
width: calc(var(--spacing) * 4) !important;
|
|
1321
|
+
}
|
|
1313
1322
|
.w-0 {
|
|
1314
1323
|
width: calc(var(--spacing) * 0);
|
|
1315
1324
|
}
|
|
@@ -1463,6 +1472,9 @@ h2.react-datepicker__current-month {
|
|
|
1463
1472
|
.max-w-xs {
|
|
1464
1473
|
max-width: var(--container-xs);
|
|
1465
1474
|
}
|
|
1475
|
+
.\!min-w-4 {
|
|
1476
|
+
min-width: calc(var(--spacing) * 4) !important;
|
|
1477
|
+
}
|
|
1466
1478
|
.\!min-w-6 {
|
|
1467
1479
|
min-width: calc(var(--spacing) * 6) !important;
|
|
1468
1480
|
}
|
|
@@ -4163,11 +4175,6 @@ h2.react-datepicker__current-month {
|
|
|
4163
4175
|
border-width: 0px;
|
|
4164
4176
|
}
|
|
4165
4177
|
}
|
|
4166
|
-
.\[\&_\[data-slot\=table-root\]\]\:\!bg-background-secondary {
|
|
4167
|
-
& [data-slot=table-root] {
|
|
4168
|
-
background-color: var(--color-background-secondary) !important;
|
|
4169
|
-
}
|
|
4170
|
-
}
|
|
4171
4178
|
.\[\&_svg\]\:size-3\.5 {
|
|
4172
4179
|
& svg {
|
|
4173
4180
|
width: calc(var(--spacing) * 3.5);
|