@gouno/ui 0.3.2
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/CHANGELOG.md +120 -0
- package/LICENSE +21 -0
- package/README.md +144 -0
- package/dist/base.css +239 -0
- package/dist/bootstrap.js +22 -0
- package/dist/components/primitives/alert-dialog.d.ts +18 -0
- package/dist/components/primitives/alert-dialog.js +43 -0
- package/dist/components/primitives/alert.d.ts +9 -0
- package/dist/components/primitives/alert.js +25 -0
- package/dist/components/primitives/avatar.d.ts +14 -0
- package/dist/components/primitives/avatar.js +42 -0
- package/dist/components/primitives/badge.d.ts +9 -0
- package/dist/components/primitives/badge.js +25 -0
- package/dist/components/primitives/button.d.ts +10 -0
- package/dist/components/primitives/button.js +36 -0
- package/dist/components/primitives/checkbox.d.ts +4 -0
- package/dist/components/primitives/checkbox.js +10 -0
- package/dist/components/primitives/dialog.d.ts +20 -0
- package/dist/components/primitives/dialog.js +37 -0
- package/dist/components/primitives/dropdown-menu.d.ts +25 -0
- package/dist/components/primitives/dropdown-menu.js +51 -0
- package/dist/components/primitives/empty.d.ts +11 -0
- package/dist/components/primitives/empty.js +33 -0
- package/dist/components/primitives/field.d.ts +24 -0
- package/dist/components/primitives/field.js +75 -0
- package/dist/components/primitives/input.d.ts +3 -0
- package/dist/components/primitives/input.js +7 -0
- package/dist/components/primitives/label.d.ts +4 -0
- package/dist/components/primitives/label.js +8 -0
- package/dist/components/primitives/popover.d.ts +16 -0
- package/dist/components/primitives/popover.js +31 -0
- package/dist/components/primitives/radio-group.d.ts +5 -0
- package/dist/components/primitives/radio-group.js +13 -0
- package/dist/components/primitives/select.d.ts +15 -0
- package/dist/components/primitives/select.js +38 -0
- package/dist/components/primitives/separator.d.ts +4 -0
- package/dist/components/primitives/separator.js +8 -0
- package/dist/components/primitives/sheet.d.ts +17 -0
- package/dist/components/primitives/sheet.js +41 -0
- package/dist/components/primitives/skeleton.d.ts +2 -0
- package/dist/components/primitives/skeleton.js +6 -0
- package/dist/components/primitives/switch.d.ts +6 -0
- package/dist/components/primitives/switch.js +8 -0
- package/dist/components/primitives/table.d.ts +28 -0
- package/dist/components/primitives/table.js +44 -0
- package/dist/components/primitives/tabs.d.ts +11 -0
- package/dist/components/primitives/tabs.js +30 -0
- package/dist/components/primitives/textarea.d.ts +3 -0
- package/dist/components/primitives/textarea.js +7 -0
- package/dist/components/primitives/tooltip.d.ts +13 -0
- package/dist/components/primitives/tooltip.js +24 -0
- package/dist/core/affix.d.ts +14 -0
- package/dist/core/affix.js +29 -0
- package/dist/core/alert.d.ts +54 -0
- package/dist/core/alert.js +56 -0
- package/dist/core/anchor.d.ts +16 -0
- package/dist/core/anchor.js +31 -0
- package/dist/core/app.d.ts +5 -0
- package/dist/core/app.js +5 -0
- package/dist/core/aspect-ratio.d.ts +6 -0
- package/dist/core/aspect-ratio.js +6 -0
- package/dist/core/autocomplete.d.ts +24 -0
- package/dist/core/autocomplete.js +139 -0
- package/dist/core/avatar.d.ts +26 -0
- package/dist/core/avatar.js +20 -0
- package/dist/core/badge.d.ts +16 -0
- package/dist/core/badge.js +22 -0
- package/dist/core/breadcrumb.d.ts +55 -0
- package/dist/core/breadcrumb.js +69 -0
- package/dist/core/button.d.ts +49 -0
- package/dist/core/button.js +66 -0
- package/dist/core/calendar.d.ts +48 -0
- package/dist/core/calendar.js +179 -0
- package/dist/core/card.d.ts +30 -0
- package/dist/core/card.js +12 -0
- package/dist/core/carousel.d.ts +49 -0
- package/dist/core/carousel.js +166 -0
- package/dist/core/cascader.d.ts +19 -0
- package/dist/core/cascader.js +45 -0
- package/dist/core/code-block.d.ts +16 -0
- package/dist/core/code-block.js +47 -0
- package/dist/core/collapse.d.ts +49 -0
- package/dist/core/collapse.js +96 -0
- package/dist/core/color-picker.d.ts +9 -0
- package/dist/core/color-picker.js +8 -0
- package/dist/core/config-provider.d.ts +10 -0
- package/dist/core/config-provider.js +14 -0
- package/dist/core/control-types.d.ts +2 -0
- package/dist/core/control-types.js +7 -0
- package/dist/core/date-picker.d.ts +13 -0
- package/dist/core/date-picker.js +14 -0
- package/dist/core/date-range-picker.d.ts +26 -0
- package/dist/core/date-range-picker.js +10 -0
- package/dist/core/descriptions.d.ts +41 -0
- package/dist/core/descriptions.js +133 -0
- package/dist/core/drawer.d.ts +9 -0
- package/dist/core/drawer.js +58 -0
- package/dist/core/empty.d.ts +8 -0
- package/dist/core/empty.js +5 -0
- package/dist/core/feedback.d.ts +5 -0
- package/dist/core/feedback.js +5 -0
- package/dist/core/field.d.ts +15 -0
- package/dist/core/field.js +19 -0
- package/dist/core/float-button.d.ts +13 -0
- package/dist/core/float-button.js +22 -0
- package/dist/core/form.d.ts +19 -0
- package/dist/core/form.js +56 -0
- package/dist/core/icon-button.d.ts +7 -0
- package/dist/core/icon-button.js +4 -0
- package/dist/core/icon.d.ts +17 -0
- package/dist/core/icon.js +35 -0
- package/dist/core/image.d.ts +76 -0
- package/dist/core/image.js +189 -0
- package/dist/core/index.d.ts +79 -0
- package/dist/core/index.js +77 -0
- package/dist/core/input-number.d.ts +24 -0
- package/dist/core/input-number.js +70 -0
- package/dist/core/input-otp.d.ts +14 -0
- package/dist/core/input-otp.js +76 -0
- package/dist/core/input.d.ts +14 -0
- package/dist/core/input.js +51 -0
- package/dist/core/kbd.d.ts +8 -0
- package/dist/core/kbd.js +11 -0
- package/dist/core/layout-primitives.d.ts +11 -0
- package/dist/core/layout-primitives.js +8 -0
- package/dist/core/layout.d.ts +71 -0
- package/dist/core/layout.js +119 -0
- package/dist/core/list.d.ts +37 -0
- package/dist/core/list.js +35 -0
- package/dist/core/locale.d.ts +48 -0
- package/dist/core/locale.js +32 -0
- package/dist/core/mentions.d.ts +10 -0
- package/dist/core/mentions.js +112 -0
- package/dist/core/menu.d.ts +79 -0
- package/dist/core/menu.js +265 -0
- package/dist/core/message.d.ts +16 -0
- package/dist/core/message.js +36 -0
- package/dist/core/modal.d.ts +40 -0
- package/dist/core/modal.js +67 -0
- package/dist/core/notification.d.ts +15 -0
- package/dist/core/notification.js +39 -0
- package/dist/core/page-layout.d.ts +6 -0
- package/dist/core/page-layout.js +7 -0
- package/dist/core/pagination.d.ts +28 -0
- package/dist/core/pagination.js +69 -0
- package/dist/core/popconfirm.d.ts +13 -0
- package/dist/core/popconfirm.js +42 -0
- package/dist/core/progress.d.ts +6 -0
- package/dist/core/progress.js +8 -0
- package/dist/core/public-props.d.ts +82 -0
- package/dist/core/public-props.js +1 -0
- package/dist/core/qrcode.d.ts +14 -0
- package/dist/core/qrcode.js +17 -0
- package/dist/core/rate.d.ts +11 -0
- package/dist/core/rate.js +48 -0
- package/dist/core/result.d.ts +12 -0
- package/dist/core/result.js +19 -0
- package/dist/core/segmented.d.ts +29 -0
- package/dist/core/segmented.js +38 -0
- package/dist/core/select.d.ts +27 -0
- package/dist/core/select.js +143 -0
- package/dist/core/selection-controls.d.ts +12 -0
- package/dist/core/selection-controls.js +23 -0
- package/dist/core/separator.d.ts +24 -0
- package/dist/core/separator.js +17 -0
- package/dist/core/slider.d.ts +2 -0
- package/dist/core/slider.js +6 -0
- package/dist/core/spin.d.ts +7 -0
- package/dist/core/spin.js +7 -0
- package/dist/core/spinner.d.ts +3 -0
- package/dist/core/spinner.js +6 -0
- package/dist/core/splitter.d.ts +44 -0
- package/dist/core/splitter.js +208 -0
- package/dist/core/statistic.d.ts +12 -0
- package/dist/core/statistic.js +6 -0
- package/dist/core/steps.d.ts +54 -0
- package/dist/core/steps.js +106 -0
- package/dist/core/tabs.d.ts +40 -0
- package/dist/core/tabs.js +80 -0
- package/dist/core/tag.d.ts +19 -0
- package/dist/core/tag.js +29 -0
- package/dist/core/textarea.d.ts +8 -0
- package/dist/core/textarea.js +14 -0
- package/dist/core/time-picker.d.ts +9 -0
- package/dist/core/time-picker.js +8 -0
- package/dist/core/timeline.d.ts +37 -0
- package/dist/core/timeline.js +48 -0
- package/dist/core/tour.d.ts +18 -0
- package/dist/core/tour.js +51 -0
- package/dist/core/transfer.d.ts +16 -0
- package/dist/core/transfer.js +46 -0
- package/dist/core/tree-select.d.ts +19 -0
- package/dist/core/tree-select.js +19 -0
- package/dist/core/tree.d.ts +89 -0
- package/dist/core/tree.js +386 -0
- package/dist/core/typography.d.ts +20 -0
- package/dist/core/typography.js +12 -0
- package/dist/core/upload.d.ts +20 -0
- package/dist/core/upload.js +72 -0
- package/dist/core/watermark.d.ts +10 -0
- package/dist/core/watermark.js +21 -0
- package/dist/fonts/inter-LICENSE +93 -0
- package/dist/fonts/inter-latin-wght-normal.woff2 +0 -0
- package/dist/fonts/jetbrains-mono-LICENSE +93 -0
- package/dist/fonts/jetbrains-mono-latin-400-normal.woff2 +0 -0
- package/dist/gouno/app-shell.d.ts +22 -0
- package/dist/gouno/app-shell.js +27 -0
- package/dist/gouno/index.d.ts +4 -0
- package/dist/gouno/index.js +4 -0
- package/dist/gouno/page-container.d.ts +4 -0
- package/dist/gouno/page-container.js +6 -0
- package/dist/gouno/page-header.d.ts +8 -0
- package/dist/gouno/page-header.js +6 -0
- package/dist/hooks/use-overlay-body.d.ts +6 -0
- package/dist/hooks/use-overlay-body.js +18 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +5 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +5 -0
- package/dist/patterns/bulk-action-bar.d.ts +8 -0
- package/dist/patterns/bulk-action-bar.js +7 -0
- package/dist/patterns/index.d.ts +5 -0
- package/dist/patterns/index.js +5 -0
- package/dist/theme/index.d.ts +2 -0
- package/dist/theme/index.js +2 -0
- package/dist/theme/provider.d.ts +22 -0
- package/dist/theme/provider.js +76 -0
- package/dist/theme/theme-toggle.d.ts +6 -0
- package/dist/theme/theme-toggle.js +10 -0
- package/dist/tokens.css +164 -0
- package/package.json +111 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import {} from "react";
|
|
3
|
+
import { FieldGroup } from "../components/primitives/field.js";
|
|
4
|
+
import { cn } from "../lib/utils.js";
|
|
5
|
+
export function Form({ layout = "vertical", disabled = false, loading = false, onFinish, onFinishFailed, onSubmit, className, children, validateMessages, ...props }) {
|
|
6
|
+
return (_jsx("form", { ...props, noValidate: true, className: cn("flex min-w-0 flex-col gap-6", layout === "horizontal" && "form-layout--horizontal", layout === "inline" && "flex-row flex-wrap items-end gap-4", className), "aria-busy": loading || undefined, onSubmit: (event) => {
|
|
7
|
+
onSubmit?.(event);
|
|
8
|
+
if (event.defaultPrevented)
|
|
9
|
+
return;
|
|
10
|
+
if (disabled || loading) {
|
|
11
|
+
event.preventDefault();
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
if (!props.noValidate && !event.currentTarget.checkValidity()) {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
const invalid = event.currentTarget.querySelector("input:invalid, textarea:invalid, select:invalid");
|
|
17
|
+
if (invalid && validateMessages) {
|
|
18
|
+
const input = invalid;
|
|
19
|
+
const message = input.validity.valueMissing
|
|
20
|
+
? validateMessages.required
|
|
21
|
+
: input.validity.typeMismatch
|
|
22
|
+
? validateMessages.type
|
|
23
|
+
: validateMessages.required;
|
|
24
|
+
if (message) {
|
|
25
|
+
input.setCustomValidity(message);
|
|
26
|
+
window.setTimeout(() => input.setCustomValidity(""), 0);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
event.currentTarget.reportValidity();
|
|
30
|
+
invalid?.focus();
|
|
31
|
+
onFinishFailed?.(event);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
const formData = new FormData(event.currentTarget);
|
|
36
|
+
onFinish?.(formData, Object.fromEntries(formData.entries()));
|
|
37
|
+
}, children: _jsx("fieldset", { disabled: disabled || loading, className: "contents", children: children }) }));
|
|
38
|
+
}
|
|
39
|
+
export function FormLayout({ className, ...props }) {
|
|
40
|
+
return (_jsx("form", { ...props, className: cn("flex min-w-0 flex-col gap-6", className) }));
|
|
41
|
+
}
|
|
42
|
+
export function FormGrid({ columns = 2, className, ...props }) {
|
|
43
|
+
return (_jsx(FieldGroup, { ...props, className: cn("grid gap-5", {
|
|
44
|
+
1: "grid-cols-1",
|
|
45
|
+
2: "md:grid-cols-2",
|
|
46
|
+
3: "md:grid-cols-3",
|
|
47
|
+
4: "md:grid-cols-2 xl:grid-cols-4",
|
|
48
|
+
5: "md:grid-cols-3 xl:grid-cols-5",
|
|
49
|
+
}[columns], className) }));
|
|
50
|
+
}
|
|
51
|
+
export function FormActions({ className, ...props }) {
|
|
52
|
+
return (_jsx("div", { ...props, className: cn("flex flex-wrap items-center justify-end gap-3 border-t pt-5", className) }));
|
|
53
|
+
}
|
|
54
|
+
export function OverlayForm({ actions, actionClassName, children, ...props }) {
|
|
55
|
+
return (_jsxs(FormLayout, { ...props, children: [children, _jsx(FormActions, { className: actionClassName, children: actions })] }));
|
|
56
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import { type ButtonProps } from "./button.js";
|
|
3
|
+
export interface IconButtonProps extends Omit<ButtonProps, "children" | "icon"> {
|
|
4
|
+
label: string;
|
|
5
|
+
icon: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare function IconButton({ label, icon, className, ...props }: IconButtonProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "./button.js";
|
|
3
|
+
import { cn } from "../lib/utils.js";
|
|
4
|
+
export function IconButton({ label, icon, className, ...props }) { return _jsx(Button, { ...props, icon: icon, size: "small", shape: "circle", "aria-label": label, title: label, className: cn("icon-button", className) }); }
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type ComponentPropsWithRef, type ReactElement } from "react";
|
|
2
|
+
export type IconSize = "small" | "middle" | "large" | number;
|
|
3
|
+
type IconSvgProps = ComponentPropsWithRef<"svg"> & {
|
|
4
|
+
"data-slot"?: string;
|
|
5
|
+
};
|
|
6
|
+
export interface IconProps extends Omit<IconSvgProps, "children"> {
|
|
7
|
+
/** SVG icon element to render. */
|
|
8
|
+
icon: ReactElement<IconSvgProps>;
|
|
9
|
+
/** Apply the canonical loading rotation animation. */
|
|
10
|
+
spin?: boolean;
|
|
11
|
+
/** Clockwise rotation in degrees. */
|
|
12
|
+
rotate?: number;
|
|
13
|
+
/** Semantic icon size or an explicit pixel size. */
|
|
14
|
+
size?: IconSize;
|
|
15
|
+
}
|
|
16
|
+
export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { cloneElement, forwardRef, } from "react";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
const sizeClass = {
|
|
4
|
+
small: "size-3.5",
|
|
5
|
+
middle: "size-4",
|
|
6
|
+
large: "size-5",
|
|
7
|
+
};
|
|
8
|
+
export const Icon = forwardRef(function Icon({ icon, spin = false, rotate, size = "middle", className, style, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-hidden": ariaHidden, ...props }, ref) {
|
|
9
|
+
const labelled = Boolean(ariaLabel || ariaLabelledBy);
|
|
10
|
+
const numericSize = typeof size === "number" ? Math.max(0, size) : undefined;
|
|
11
|
+
const transforms = [
|
|
12
|
+
icon.props.style?.transform,
|
|
13
|
+
rotate !== undefined ? `rotate(${rotate}deg)` : undefined,
|
|
14
|
+
style?.transform,
|
|
15
|
+
].filter(Boolean);
|
|
16
|
+
const mergedStyle = {
|
|
17
|
+
...icon.props.style,
|
|
18
|
+
...style,
|
|
19
|
+
...(numericSize !== undefined
|
|
20
|
+
? { width: numericSize, height: numericSize }
|
|
21
|
+
: undefined),
|
|
22
|
+
...(transforms.length > 0 ? { transform: transforms.join(" ") } : undefined),
|
|
23
|
+
};
|
|
24
|
+
return cloneElement(icon, {
|
|
25
|
+
...props,
|
|
26
|
+
ref,
|
|
27
|
+
"data-slot": "icon",
|
|
28
|
+
className: cn("inline-block shrink-0", typeof size === "number" ? undefined : sizeClass[size], spin && "animate-spin", icon.props.className, className),
|
|
29
|
+
style: mergedStyle,
|
|
30
|
+
role: role ?? icon.props.role ?? (labelled ? "img" : undefined),
|
|
31
|
+
"aria-label": ariaLabel,
|
|
32
|
+
"aria-labelledby": ariaLabelledBy,
|
|
33
|
+
"aria-hidden": ariaHidden ?? (labelled ? undefined : true),
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { type CSSProperties, type ImgHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
|
|
2
|
+
export type ImageSemantic = "root" | "image" | "placeholder" | "cover" | "preview" | "previewImage" | "toolbar";
|
|
3
|
+
export type ImageTransformAction = "flipX" | "flipY" | "rotateLeft" | "rotateRight" | "zoomIn" | "zoomOut" | "wheel" | "doubleClick" | "move" | "reset" | "close";
|
|
4
|
+
export interface ImageTransform {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
rotate: number;
|
|
8
|
+
scale: number;
|
|
9
|
+
flipX: boolean;
|
|
10
|
+
flipY: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface ImageCoverConfig {
|
|
13
|
+
coverNode?: ReactNode;
|
|
14
|
+
placement?: "top" | "bottom" | "center";
|
|
15
|
+
}
|
|
16
|
+
export interface ImagePreviewMaskConfig {
|
|
17
|
+
enabled?: boolean;
|
|
18
|
+
blur?: boolean;
|
|
19
|
+
closable?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export interface ImageToolbarInfo {
|
|
22
|
+
transform: ImageTransform;
|
|
23
|
+
actions: {
|
|
24
|
+
onFlipX: () => void;
|
|
25
|
+
onFlipY: () => void;
|
|
26
|
+
onRotateLeft: () => void;
|
|
27
|
+
onRotateRight: () => void;
|
|
28
|
+
onZoomOut: () => void;
|
|
29
|
+
onZoomIn: () => void;
|
|
30
|
+
onReset: () => void;
|
|
31
|
+
onClose: () => void;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
export interface ImagePreviewConfig {
|
|
35
|
+
open?: boolean;
|
|
36
|
+
defaultOpen?: boolean;
|
|
37
|
+
src?: string;
|
|
38
|
+
cover?: ReactNode | ImageCoverConfig;
|
|
39
|
+
mask?: boolean | ImagePreviewMaskConfig;
|
|
40
|
+
minScale?: number;
|
|
41
|
+
maxScale?: number;
|
|
42
|
+
scaleStep?: number;
|
|
43
|
+
movable?: boolean;
|
|
44
|
+
wheel?: boolean;
|
|
45
|
+
onOpenChange?: (open: boolean) => void;
|
|
46
|
+
onTransform?: (info: {
|
|
47
|
+
transform: ImageTransform;
|
|
48
|
+
action: ImageTransformAction;
|
|
49
|
+
}) => void;
|
|
50
|
+
actionsRender?: (originalNode: ReactElement, info: ImageToolbarInfo) => ReactNode;
|
|
51
|
+
imageRender?: (originalNode: ReactElement, info: {
|
|
52
|
+
transform: ImageTransform;
|
|
53
|
+
src: string;
|
|
54
|
+
alt: string;
|
|
55
|
+
}) => ReactNode;
|
|
56
|
+
classNames?: Partial<Record<"root" | "image" | "toolbar", string>>;
|
|
57
|
+
styles?: Partial<Record<"root" | "image" | "toolbar" | "mask", CSSProperties>>;
|
|
58
|
+
}
|
|
59
|
+
export interface ImageSemanticInfo {
|
|
60
|
+
props: Readonly<{
|
|
61
|
+
preview: boolean;
|
|
62
|
+
loading: boolean;
|
|
63
|
+
failed: boolean;
|
|
64
|
+
}>;
|
|
65
|
+
}
|
|
66
|
+
export type ImageClassNames = Partial<Record<ImageSemantic, string>> | ((info: ImageSemanticInfo) => Partial<Record<ImageSemantic, string>>);
|
|
67
|
+
export type ImageStyles = Partial<Record<ImageSemantic, CSSProperties>> | ((info: ImageSemanticInfo) => Partial<Record<ImageSemantic, CSSProperties>>);
|
|
68
|
+
export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "placeholder"> {
|
|
69
|
+
fallback?: string;
|
|
70
|
+
placeholder?: ReactNode;
|
|
71
|
+
preview?: boolean | ImagePreviewConfig;
|
|
72
|
+
classNames?: ImageClassNames;
|
|
73
|
+
styles?: ImageStyles;
|
|
74
|
+
ref?: Ref<HTMLImageElement>;
|
|
75
|
+
}
|
|
76
|
+
export declare function Image({ src, alt, fallback, placeholder, preview, classNames, styles, className, style, onLoad, onError, onClick, ref, ...props }: ImageProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState, } from "react";
|
|
3
|
+
import { Eye, FlipHorizontal, FlipVertical, ImageOff, RefreshCcw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut, } from "lucide-react";
|
|
4
|
+
import { Dialog, DialogContent, DialogTitle, } from "../components/primitives/dialog.js";
|
|
5
|
+
import { cn } from "../lib/utils.js";
|
|
6
|
+
import { IconButton } from "./icon-button.js";
|
|
7
|
+
const initialTransform = {
|
|
8
|
+
x: 0,
|
|
9
|
+
y: 0,
|
|
10
|
+
rotate: 0,
|
|
11
|
+
scale: 1,
|
|
12
|
+
flipX: false,
|
|
13
|
+
flipY: false,
|
|
14
|
+
};
|
|
15
|
+
function localizedLabel(en, zh) {
|
|
16
|
+
return typeof document !== "undefined" &&
|
|
17
|
+
document.documentElement.lang.startsWith("en")
|
|
18
|
+
? en
|
|
19
|
+
: zh;
|
|
20
|
+
}
|
|
21
|
+
function clampScale(value, minScale, maxScale) {
|
|
22
|
+
return Math.min(maxScale, Math.max(minScale, value));
|
|
23
|
+
}
|
|
24
|
+
function isImageCoverConfig(value) {
|
|
25
|
+
if (typeof value !== "object" || value === null || Array.isArray(value)) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
return "coverNode" in value || "placement" in value;
|
|
29
|
+
}
|
|
30
|
+
export function Image({ src, alt = "", fallback, placeholder, preview = true, classNames, styles, className, style, onLoad, onError, onClick, ref, ...props }) {
|
|
31
|
+
const previewEnabled = preview !== false;
|
|
32
|
+
const previewConfig = typeof preview === "object" ? preview : {};
|
|
33
|
+
const controlledOpen = previewConfig.open !== undefined;
|
|
34
|
+
const [internalOpen, setInternalOpen] = useState(previewConfig.defaultOpen ?? false);
|
|
35
|
+
const open = controlledOpen ? Boolean(previewConfig.open) : internalOpen;
|
|
36
|
+
const [activeSrc, setActiveSrc] = useState(src);
|
|
37
|
+
const [loaded, setLoaded] = useState(false);
|
|
38
|
+
const [failed, setFailed] = useState(false);
|
|
39
|
+
const [transform, setTransform] = useState(initialTransform);
|
|
40
|
+
const dragRef = useRef(null);
|
|
41
|
+
const minScale = Math.max(0.1, previewConfig.minScale ?? 1);
|
|
42
|
+
const maxScale = Math.max(minScale, previewConfig.maxScale ?? 50);
|
|
43
|
+
const scaleStep = Math.max(0.05, previewConfig.scaleStep ?? 0.5);
|
|
44
|
+
const movable = previewConfig.movable ?? true;
|
|
45
|
+
const wheel = previewConfig.wheel ?? true;
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
setActiveSrc(src);
|
|
48
|
+
setLoaded(false);
|
|
49
|
+
setFailed(false);
|
|
50
|
+
}, [src]);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
if (!open) {
|
|
53
|
+
setTransform(initialTransform);
|
|
54
|
+
dragRef.current = null;
|
|
55
|
+
}
|
|
56
|
+
}, [open]);
|
|
57
|
+
const semanticInfo = {
|
|
58
|
+
props: { preview: previewEnabled, loading: !loaded && !failed, failed },
|
|
59
|
+
};
|
|
60
|
+
const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
|
|
61
|
+
const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
|
|
62
|
+
const setPreviewOpen = (next) => {
|
|
63
|
+
if (!controlledOpen)
|
|
64
|
+
setInternalOpen(next);
|
|
65
|
+
previewConfig.onOpenChange?.(next);
|
|
66
|
+
if (!next)
|
|
67
|
+
previewConfig.onTransform?.({ transform, action: "close" });
|
|
68
|
+
};
|
|
69
|
+
const applyTransform = (action, next) => {
|
|
70
|
+
setTransform(next);
|
|
71
|
+
previewConfig.onTransform?.({ transform: next, action });
|
|
72
|
+
};
|
|
73
|
+
const zoomBy = (direction, action) => {
|
|
74
|
+
const factor = 1 + scaleStep;
|
|
75
|
+
const scale = clampScale(direction > 0 ? transform.scale * factor : transform.scale / factor, minScale, maxScale);
|
|
76
|
+
applyTransform(action, { ...transform, scale });
|
|
77
|
+
};
|
|
78
|
+
const actions = {
|
|
79
|
+
onFlipX: () => applyTransform("flipX", { ...transform, flipX: !transform.flipX }),
|
|
80
|
+
onFlipY: () => applyTransform("flipY", { ...transform, flipY: !transform.flipY }),
|
|
81
|
+
onRotateLeft: () => applyTransform("rotateLeft", {
|
|
82
|
+
...transform,
|
|
83
|
+
rotate: transform.rotate - 90,
|
|
84
|
+
}),
|
|
85
|
+
onRotateRight: () => applyTransform("rotateRight", {
|
|
86
|
+
...transform,
|
|
87
|
+
rotate: transform.rotate + 90,
|
|
88
|
+
}),
|
|
89
|
+
onZoomOut: () => zoomBy(-1, "zoomOut"),
|
|
90
|
+
onZoomIn: () => zoomBy(1, "zoomIn"),
|
|
91
|
+
onReset: () => applyTransform("reset", initialTransform),
|
|
92
|
+
onClose: () => setPreviewOpen(false),
|
|
93
|
+
};
|
|
94
|
+
const toolbar = (_jsxs("div", { "data-slot": "image-toolbar", className: cn("flex items-center gap-1 rounded-full border bg-popover/95 p-1 shadow-overlay backdrop-blur", semanticClassNames.toolbar, previewConfig.classNames?.toolbar), style: { ...semanticStyles.toolbar, ...previewConfig.styles?.toolbar }, children: [_jsx(IconButton, { variant: "text", label: localizedLabel("Flip horizontal", "水平翻转"), icon: _jsx(FlipHorizontal, { "aria-hidden": "true" }), onClick: actions.onFlipX }), _jsx(IconButton, { variant: "text", label: localizedLabel("Flip vertical", "垂直翻转"), icon: _jsx(FlipVertical, { "aria-hidden": "true" }), onClick: actions.onFlipY }), _jsx(IconButton, { variant: "text", label: localizedLabel("Rotate left", "向左旋转"), icon: _jsx(RotateCcw, { "aria-hidden": "true" }), onClick: actions.onRotateLeft }), _jsx(IconButton, { variant: "text", label: localizedLabel("Rotate right", "向右旋转"), icon: _jsx(RotateCw, { "aria-hidden": "true" }), onClick: actions.onRotateRight }), _jsx(IconButton, { variant: "text", label: localizedLabel("Zoom out", "缩小"), icon: _jsx(ZoomOut, { "aria-hidden": "true" }), onClick: actions.onZoomOut, disabled: transform.scale <= minScale }), _jsx(IconButton, { variant: "text", label: localizedLabel("Zoom in", "放大"), icon: _jsx(ZoomIn, { "aria-hidden": "true" }), onClick: actions.onZoomIn, disabled: transform.scale >= maxScale }), _jsx(IconButton, { variant: "text", label: localizedLabel("Reset", "重置"), icon: _jsx(RefreshCcw, { "aria-hidden": "true" }), onClick: actions.onReset })] }));
|
|
95
|
+
const previewSource = previewConfig.src ?? activeSrc ?? src ?? "";
|
|
96
|
+
const previewImage = (_jsx("img", { "data-slot": "image-preview-image", src: previewSource, alt: alt, draggable: false, className: cn("max-h-[calc(100dvh-9rem)] max-w-[calc(100vw-4rem)] select-none object-contain transition-transform duration-150", movable && transform.scale > 1 && "cursor-grab active:cursor-grabbing", semanticClassNames.previewImage, previewConfig.classNames?.image), style: {
|
|
97
|
+
transform: `translate3d(${transform.x}px, ${transform.y}px, 0) rotate(${transform.rotate}deg) scale(${transform.scale * (transform.flipX ? -1 : 1)}, ${transform.scale * (transform.flipY ? -1 : 1)})`,
|
|
98
|
+
...semanticStyles.previewImage,
|
|
99
|
+
...previewConfig.styles?.image,
|
|
100
|
+
}, onDoubleClick: () => {
|
|
101
|
+
const nextScale = transform.scale === minScale
|
|
102
|
+
? clampScale(minScale * (1 + scaleStep), minScale, maxScale)
|
|
103
|
+
: minScale;
|
|
104
|
+
applyTransform("doubleClick", {
|
|
105
|
+
...transform,
|
|
106
|
+
x: nextScale === minScale ? 0 : transform.x,
|
|
107
|
+
y: nextScale === minScale ? 0 : transform.y,
|
|
108
|
+
scale: nextScale,
|
|
109
|
+
});
|
|
110
|
+
}, onPointerDown: (event) => {
|
|
111
|
+
if (!movable || transform.scale <= 1)
|
|
112
|
+
return;
|
|
113
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
114
|
+
dragRef.current = {
|
|
115
|
+
pointerId: event.pointerId,
|
|
116
|
+
x: event.clientX,
|
|
117
|
+
y: event.clientY,
|
|
118
|
+
originX: transform.x,
|
|
119
|
+
originY: transform.y,
|
|
120
|
+
};
|
|
121
|
+
}, onPointerMove: (event) => {
|
|
122
|
+
const drag = dragRef.current;
|
|
123
|
+
if (!drag || drag.pointerId !== event.pointerId)
|
|
124
|
+
return;
|
|
125
|
+
applyTransform("move", {
|
|
126
|
+
...transform,
|
|
127
|
+
x: drag.originX + event.clientX - drag.x,
|
|
128
|
+
y: drag.originY + event.clientY - drag.y,
|
|
129
|
+
});
|
|
130
|
+
}, onPointerUp: (event) => {
|
|
131
|
+
if (dragRef.current?.pointerId === event.pointerId) {
|
|
132
|
+
dragRef.current = null;
|
|
133
|
+
}
|
|
134
|
+
}, onPointerCancel: () => {
|
|
135
|
+
dragRef.current = null;
|
|
136
|
+
} }));
|
|
137
|
+
const renderedPreviewImage = previewConfig.imageRender
|
|
138
|
+
? previewConfig.imageRender(previewImage, {
|
|
139
|
+
transform,
|
|
140
|
+
src: previewSource,
|
|
141
|
+
alt,
|
|
142
|
+
})
|
|
143
|
+
: previewImage;
|
|
144
|
+
const renderedToolbar = previewConfig.actionsRender
|
|
145
|
+
? previewConfig.actionsRender(toolbar, { transform, actions })
|
|
146
|
+
: toolbar;
|
|
147
|
+
const maskConfig = typeof previewConfig.mask === "object" ? previewConfig.mask : undefined;
|
|
148
|
+
const maskEnabled = previewConfig.mask !== false && maskConfig?.enabled !== false;
|
|
149
|
+
const maskClosable = maskConfig?.closable ?? true;
|
|
150
|
+
const rawCover = previewConfig.cover;
|
|
151
|
+
let coverNode = _jsx(Eye, { "aria-hidden": "true" });
|
|
152
|
+
let coverPlacement = "center";
|
|
153
|
+
if (isImageCoverConfig(rawCover)) {
|
|
154
|
+
coverNode = rawCover.coverNode ?? coverNode;
|
|
155
|
+
coverPlacement = rawCover.placement ?? coverPlacement;
|
|
156
|
+
}
|
|
157
|
+
else if (rawCover !== undefined) {
|
|
158
|
+
coverNode = rawCover;
|
|
159
|
+
}
|
|
160
|
+
const imageNode = failed ? (_jsx("span", { "data-slot": "image-fallback", role: "img", "aria-label": alt || localizedLabel("Image unavailable", "图片不可用"), className: cn("flex min-h-24 min-w-24 items-center justify-center rounded-md bg-muted text-muted-foreground", semanticClassNames.image, className), style: { ...semanticStyles.image, ...style }, children: _jsx(ImageOff, { "aria-hidden": "true" }) })) : (_jsx("img", { ...props, ref: ref, src: activeSrc, alt: alt, "data-slot": "image-element", className: cn("block max-w-full", semanticClassNames.image, className), style: { ...semanticStyles.image, ...style }, onClick: onClick, onLoad: (event) => {
|
|
161
|
+
setLoaded(true);
|
|
162
|
+
setFailed(false);
|
|
163
|
+
onLoad?.(event);
|
|
164
|
+
}, onError: (event) => {
|
|
165
|
+
onError?.(event);
|
|
166
|
+
if (fallback && activeSrc !== fallback) {
|
|
167
|
+
setLoaded(false);
|
|
168
|
+
setActiveSrc(fallback);
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
setFailed(true);
|
|
172
|
+
setLoaded(false);
|
|
173
|
+
} }));
|
|
174
|
+
const thumbnail = (_jsxs("span", { "data-slot": "image-root", className: cn("group relative inline-flex max-w-full overflow-hidden align-middle", semanticClassNames.root), style: semanticStyles.root, children: [imageNode, !loaded && !failed && placeholder !== undefined && placeholder !== null ? (_jsx("span", { "data-slot": "image-placeholder", className: cn("absolute inset-0 flex items-center justify-center bg-muted/70", semanticClassNames.placeholder), style: semanticStyles.placeholder, children: placeholder })) : null, previewEnabled && !failed ? (_jsx("span", { "data-slot": "image-cover", className: cn("pointer-events-none absolute inset-x-0 flex justify-center bg-overlay/55 p-2 text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", coverPlacement === "top" && "top-0", coverPlacement === "bottom" && "bottom-0", coverPlacement === "center" && "inset-y-0 items-center", semanticClassNames.cover), style: semanticStyles.cover, children: coverNode })) : null] }));
|
|
175
|
+
return (_jsxs(_Fragment, { children: [previewEnabled && !failed ? (_jsx("button", { type: "button", className: "inline-flex max-w-full cursor-zoom-in rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "aria-label": alt
|
|
176
|
+
? `${localizedLabel("Preview", "预览")} ${alt}`
|
|
177
|
+
: localizedLabel("Preview image", "预览图片"), onClick: () => setPreviewOpen(true), children: thumbnail })) : (thumbnail), previewEnabled ? (_jsx(Dialog, { open: open, onOpenChange: setPreviewOpen, children: _jsxs(DialogContent, { showCloseButton: false, mask: maskEnabled, maskStyle: {
|
|
178
|
+
backdropFilter: maskConfig?.blur ? "blur(4px)" : undefined,
|
|
179
|
+
...previewConfig.styles?.mask,
|
|
180
|
+
}, className: cn("flex max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] flex-col items-center justify-center gap-4 overflow-hidden border-0 bg-transparent p-4 shadow-none sm:max-w-[calc(100vw-2rem)]", semanticClassNames.preview, previewConfig.classNames?.root), style: { ...semanticStyles.preview, ...previewConfig.styles?.root }, onPointerDownOutside: (event) => {
|
|
181
|
+
if (!maskClosable)
|
|
182
|
+
event.preventDefault();
|
|
183
|
+
}, children: [_jsx(DialogTitle, { className: "sr-only", children: alt || localizedLabel("Image preview", "图片预览") }), _jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center", onWheel: (event) => {
|
|
184
|
+
if (!wheel)
|
|
185
|
+
return;
|
|
186
|
+
event.preventDefault();
|
|
187
|
+
zoomBy(event.deltaY < 0 ? 1 : -1, "wheel");
|
|
188
|
+
}, children: renderedPreviewImage }), _jsxs("div", { className: "flex items-center gap-2", children: [renderedToolbar, _jsx(IconButton, { variant: "text", label: localizedLabel("Close", "关闭"), icon: _jsx(X, { "aria-hidden": "true" }), onClick: actions.onClose })] })] }) })) : null] }));
|
|
189
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/** Pure, product-agnostic component API. */
|
|
2
|
+
export { Button, ButtonLink, IconButtonLink, ChoiceButton, NavigationProvider, type ButtonProps, type ButtonVariant, type ButtonColor, type ButtonSize, type ButtonShape, type ButtonIconPlacement, type ButtonLinkProps, type LinkAdapterProps } from "./button.js";
|
|
3
|
+
export { IconButton, type IconButtonProps } from "./icon-button.js";
|
|
4
|
+
export { Icon, type IconSize } from "./icon.js";
|
|
5
|
+
export { Badge, type BadgeProps, type BadgeStatus, type BadgeSize } from "./badge.js";
|
|
6
|
+
export { Tag, CheckableTag, type TagProps, type CheckableTagProps, type TagColor } from "./tag.js";
|
|
7
|
+
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type CardVariant, type CardPadding } from "./card.js";
|
|
8
|
+
export { Spinner, type SpinnerProps } from "./spinner.js";
|
|
9
|
+
export { Progress, type ProgressProps } from "./progress.js";
|
|
10
|
+
export { AspectRatio, type AspectRatioProps } from "./aspect-ratio.js";
|
|
11
|
+
export { Kbd, type KbdProps } from "./kbd.js";
|
|
12
|
+
export { Heading, Text, Typography, type HeadingProps, type TextProps, type TypographyProps, type HeadingLevel, type TextSize, type TextTone } from "./typography.js";
|
|
13
|
+
export { CodeBlock, type CodeBlockProps } from "./code-block.js";
|
|
14
|
+
export { Input, SearchField, type InputProps } from "./input.js";
|
|
15
|
+
export { Textarea, type TextareaProps } from "./textarea.js";
|
|
16
|
+
export { Select, type SelectProps, type SelectMode, type SelectOption } from "./select.js";
|
|
17
|
+
export { Field, FormField, FieldGroup, FieldSet, FieldLegend, FieldLabel, type FieldProps } from "./field.js";
|
|
18
|
+
export { Checkbox, Radio, Switch, CheckboxField, CheckboxGroup, type CheckProps } from "./selection-controls.js";
|
|
19
|
+
export { FormLayout, Form, FormGrid, FormActions, OverlayForm, type FormProps } from "./form.js";
|
|
20
|
+
export type { ControlSize } from "./control-types.js";
|
|
21
|
+
export { Tabs, TabList, Tab, TabPanel, type TabsProps, type TabItem, type TabsType, type TabsPosition } from "./tabs.js";
|
|
22
|
+
export { Modal, type ModalProps } from "./modal.js";
|
|
23
|
+
export { Drawer, type DrawerProps, type DrawerPlacement } from "./drawer.js";
|
|
24
|
+
export { Alert, type AlertProps, type AlertType, type AlertVariant, type AlertClosableConfig, type AlertSemantic, type AlertClassNames, type AlertStyles, type AlertErrorBoundaryProps } from "./alert.js";
|
|
25
|
+
export { Skeleton } from "./feedback.js";
|
|
26
|
+
export { Statistic, type StatisticProps } from "./statistic.js";
|
|
27
|
+
export { Timeline, type TimelineProps, type TimelineItem, type TimelineMode, type TimelineOrientation, type TimelineVariant, type TimelinePlacement, type TimelineSemantic, type TimelineSemanticInfo, type TimelineClassNames, type TimelineStyles, } from "./timeline.js";
|
|
28
|
+
export { Container, Stack, type StackProps } from "./layout-primitives.js";
|
|
29
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, type CaptionSide, type TableDensity, type TableProps, type TableHeaderProps, type TableBodyProps, type TableFooterProps, type TableRowProps, type TableHeadProps, type TableCellProps, type TableCaptionProps } from "../components/primitives/table.js";
|
|
30
|
+
export { Separator, type SeparatorProps, type SeparatorOrientation, type SeparatorVariant, type SeparatorTitlePlacement, type SeparatorSemantic, type SeparatorClassNames, type SeparatorStyles, } from "./separator.js";
|
|
31
|
+
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, type AvatarBadgeProps, type AvatarGroupProps, type AvatarGroupCountProps, type AvatarSize, type AvatarShape, type AvatarLegacySize } from "./avatar.js";
|
|
32
|
+
export { Divider, Space, Flex, Grid, Row, Col, type SpaceProps, type SpaceAlign, type FlexProps, type FlexDirection, type FlexAlign, type FlexJustify, type FlexGap, type FlexWrap, type GridSpan, type GridBreakpoint, type RowProps, type RowAlign, type RowJustify, type RowGutter, type ColProps, type ColSize, type ColBreakpointValue, } from "./layout.js";
|
|
33
|
+
export { InputNumber, type InputNumberProps } from "./input-number.js";
|
|
34
|
+
export { DatePicker, type DatePickerProps } from "./date-picker.js";
|
|
35
|
+
export { DateRangePicker, type DateRangePickerProps } from "./date-range-picker.js";
|
|
36
|
+
export { TimePicker, type TimePickerProps } from "./time-picker.js";
|
|
37
|
+
export { ColorPicker, type ColorPickerProps } from "./color-picker.js";
|
|
38
|
+
export { Upload, type UploadProps } from "./upload.js";
|
|
39
|
+
export { Breadcrumb, type BreadcrumbItem, type BreadcrumbRouteItem, type BreadcrumbSeparatorItem, type BreadcrumbMenu, type BreadcrumbMenuItem, type BreadcrumbItemRenderInfo, type BreadcrumbSemantic, type BreadcrumbSemanticInfo, type BreadcrumbClassNames, type BreadcrumbStyles, } from "./breadcrumb.js";
|
|
40
|
+
export { Pagination, type PaginationProps } from "./pagination.js";
|
|
41
|
+
export { Steps, type StepsProps, type StepItem, type StepsStatus, type StepsOrientation, type StepsTitlePlacement, type StepsType, type StepsVariant, type StepsSize, type StepsIconRenderInfo, type StepsSemantic, type StepsSemanticInfo, type StepsClassNames, type StepsStyles, } from "./steps.js";
|
|
42
|
+
export { Empty, type EmptyProps } from "./empty.js";
|
|
43
|
+
export { Result, type ResultProps, type ResultStatus } from "./result.js";
|
|
44
|
+
export { List, type ListProps, type ListSize, type ListItemLayout, type ListLocale, type ListSemantic, type ListSemanticInfo, type ListClassNames, type ListStyles, } from "./list.js";
|
|
45
|
+
export { Descriptions, type DescriptionsProps, type DescriptionsItem, type DescriptionsSize, type DescriptionsLayout, type DescriptionsBreakpoint, type DescriptionsColumnCount, type DescriptionsColumn, type DescriptionsSpanValue, type DescriptionsSpan, type DescriptionsSemantic, type DescriptionsSemanticInfo, type DescriptionsClassNames, type DescriptionsStyles, } from "./descriptions.js";
|
|
46
|
+
export { Image, type ImageProps, type ImagePreviewConfig, type ImageCoverConfig, type ImageTransform, type ImageTransformAction, type ImageToolbarInfo, type ImageSemantic, type ImageSemanticInfo, type ImageClassNames, type ImageStyles, } from "./image.js";
|
|
47
|
+
export { Calendar, type CalendarProps, type CalendarMode, type CalendarSelectSource, type CalendarCellInfo, type CalendarHeaderRenderProps, type CalendarSemantic, type CalendarSemanticInfo, type CalendarClassNames, type CalendarStyles, } from "./calendar.js";
|
|
48
|
+
export { App, type AppProps } from "./app.js";
|
|
49
|
+
export { FloatButton, type FloatButtonProps } from "./float-button.js";
|
|
50
|
+
export { Anchor, type AnchorProps, type AnchorItem } from "./anchor.js";
|
|
51
|
+
export { Spin, type SpinProps } from "./spin.js";
|
|
52
|
+
export { Carousel, type CarouselProps, type CarouselRef, type CarouselEffect, type CarouselDotPlacement, type CarouselAutoplayConfig, type CarouselSemantic, type CarouselSemanticInfo, type CarouselClassNames, type CarouselStyles, } from "./carousel.js";
|
|
53
|
+
export { Slider } from "./slider.js";
|
|
54
|
+
export { Rate } from "./rate.js";
|
|
55
|
+
export { Segmented } from "./segmented.js";
|
|
56
|
+
export { AutoComplete, type AutoCompleteProps } from "./autocomplete.js";
|
|
57
|
+
export { Collapse, type CollapseSize, type CollapseCollapsible, type CollapseExpandIconPlacement, type CollapseActiveKey, type CollapseItem, type CollapseExpandIconInfo, type CollapseSemantic, type CollapseSemanticInfo, type CollapseClassNames, type CollapseStyles, } from "./collapse.js";
|
|
58
|
+
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, type OverlayPlacement, type PopoverContentProps } from "../components/primitives/popover.js";
|
|
59
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipContentProps } from "../components/primitives/tooltip.js";
|
|
60
|
+
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from "../components/primitives/dropdown-menu.js";
|
|
61
|
+
export { Cascader, type CascaderOption, type CascaderProps } from "./cascader.js";
|
|
62
|
+
export { TreeSelect, type TreeSelectProps, type TreeSelectNode } from "./tree-select.js";
|
|
63
|
+
export { Transfer, type TransferItem, type TransferProps } from "./transfer.js";
|
|
64
|
+
export { Mentions, type MentionsProps } from "./mentions.js";
|
|
65
|
+
export { Tree, type TreeNode, type TreeNodeRenderInfo, type TreeExpandInfo, type TreeSelectInfo, type TreeCheckInfo, type TreeCheckedKeys, type TreeSemantic, type TreeSemanticInfo, type TreeClassNames, type TreeStyles, } from "./tree.js";
|
|
66
|
+
export { Menu, type MenuProps, type MenuItem, type MenuSubMenuItem, type MenuItemGroup, type MenuDividerItem, type MenuNode, type MenuMode, type MenuTriggerSubMenuAction, type MenuClickInfo, type MenuSelectInfo, type MenuExpandIconInfo, type MenuSemantic, type MenuSemanticInfo, type MenuClassNames, type MenuStyles, } from "./menu.js";
|
|
67
|
+
export { QRCode, type QRCodeProps, type QRCodeErrorLevel } from "./qrcode.js";
|
|
68
|
+
export { Watermark, type WatermarkProps } from "./watermark.js";
|
|
69
|
+
export { Affix, BackTop, type AffixProps, type BackTopProps } from "./affix.js";
|
|
70
|
+
export { Splitter, type SplitterProps } from "./splitter.js";
|
|
71
|
+
export { Layout, LayoutHeader, LayoutSider, LayoutContent, LayoutFooter } from "./page-layout.js";
|
|
72
|
+
export { InputOTP } from "./input-otp.js";
|
|
73
|
+
export { Popconfirm, type PopconfirmProps } from "./popconfirm.js";
|
|
74
|
+
export { MessageProvider, useMessage, type MessageProviderProps } from "./message.js";
|
|
75
|
+
export { NotificationProvider, useNotification, type NotificationProviderProps, type NotificationNotice } from "./notification.js";
|
|
76
|
+
export { Tour, type TourProps, type TourStep } from "./tour.js";
|
|
77
|
+
export type { BreadcrumbProps, CheckboxFieldProps, CheckboxGroupProps, CheckboxProps, ChoiceButtonProps, CollapseProps, ContainerProps, DividerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps, FieldGroupProps, FieldLabelProps, FieldLegendProps, FieldSetProps, FormActionsProps, FormFieldProps, FormGridProps, FormLayoutProps, GridProps, IconButtonLinkProps, IconProps, InputOTPProps, LayoutContentProps, LayoutFooterProps, LayoutHeaderProps, LayoutProps, LayoutSiderProps, NavigationProviderProps, OverlayFormProps, PopoverAnchorProps, PopoverProps, PopoverTriggerProps, RadioProps, RateProps, SearchFieldProps, SegmentedProps, SkeletonProps, SliderProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps, TreeProps, } from "./public-props.js";
|
|
78
|
+
export { ConfigProvider, type ConfigProviderProps } from "./config-provider.js";
|
|
79
|
+
export { enUS, zhCN, type ComponentLocale, type InputLocale, type DatePickerLocale, type InputNumberLocale, type SelectLocale, type UploadLocale, type PaginationLocale } from "./locale.js";
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/** Pure, product-agnostic component API. */
|
|
2
|
+
export { Button, ButtonLink, IconButtonLink, ChoiceButton, NavigationProvider } from "./button.js";
|
|
3
|
+
export { IconButton } from "./icon-button.js";
|
|
4
|
+
export { Icon } from "./icon.js";
|
|
5
|
+
export { Badge } from "./badge.js";
|
|
6
|
+
export { Tag, CheckableTag } from "./tag.js";
|
|
7
|
+
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card.js";
|
|
8
|
+
export { Spinner } from "./spinner.js";
|
|
9
|
+
export { Progress } from "./progress.js";
|
|
10
|
+
export { AspectRatio } from "./aspect-ratio.js";
|
|
11
|
+
export { Kbd } from "./kbd.js";
|
|
12
|
+
export { Heading, Text, Typography } from "./typography.js";
|
|
13
|
+
export { CodeBlock } from "./code-block.js";
|
|
14
|
+
export { Input, SearchField } from "./input.js";
|
|
15
|
+
export { Textarea } from "./textarea.js";
|
|
16
|
+
export { Select } from "./select.js";
|
|
17
|
+
export { Field, FormField, FieldGroup, FieldSet, FieldLegend, FieldLabel } from "./field.js";
|
|
18
|
+
export { Checkbox, Radio, Switch, CheckboxField, CheckboxGroup } from "./selection-controls.js";
|
|
19
|
+
export { FormLayout, Form, FormGrid, FormActions, OverlayForm } from "./form.js";
|
|
20
|
+
export { Tabs, TabList, Tab, TabPanel } from "./tabs.js";
|
|
21
|
+
export { Modal } from "./modal.js";
|
|
22
|
+
export { Drawer } from "./drawer.js";
|
|
23
|
+
export { Alert } from "./alert.js";
|
|
24
|
+
export { Skeleton } from "./feedback.js";
|
|
25
|
+
export { Statistic } from "./statistic.js";
|
|
26
|
+
export { Timeline, } from "./timeline.js";
|
|
27
|
+
export { Container, Stack } from "./layout-primitives.js";
|
|
28
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "../components/primitives/table.js";
|
|
29
|
+
export { Separator, } from "./separator.js";
|
|
30
|
+
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount } from "./avatar.js";
|
|
31
|
+
export { Divider, Space, Flex, Grid, Row, Col, } from "./layout.js";
|
|
32
|
+
export { InputNumber } from "./input-number.js";
|
|
33
|
+
export { DatePicker } from "./date-picker.js";
|
|
34
|
+
export { DateRangePicker } from "./date-range-picker.js";
|
|
35
|
+
export { TimePicker } from "./time-picker.js";
|
|
36
|
+
export { ColorPicker } from "./color-picker.js";
|
|
37
|
+
export { Upload } from "./upload.js";
|
|
38
|
+
export { Breadcrumb, } from "./breadcrumb.js";
|
|
39
|
+
export { Pagination } from "./pagination.js";
|
|
40
|
+
export { Steps, } from "./steps.js";
|
|
41
|
+
export { Empty } from "./empty.js";
|
|
42
|
+
export { Result } from "./result.js";
|
|
43
|
+
export { List, } from "./list.js";
|
|
44
|
+
export { Descriptions, } from "./descriptions.js";
|
|
45
|
+
export { Image, } from "./image.js";
|
|
46
|
+
export { Calendar, } from "./calendar.js";
|
|
47
|
+
export { App } from "./app.js";
|
|
48
|
+
export { FloatButton } from "./float-button.js";
|
|
49
|
+
export { Anchor } from "./anchor.js";
|
|
50
|
+
export { Spin } from "./spin.js";
|
|
51
|
+
export { Carousel, } from "./carousel.js";
|
|
52
|
+
export { Slider } from "./slider.js";
|
|
53
|
+
export { Rate } from "./rate.js";
|
|
54
|
+
export { Segmented } from "./segmented.js";
|
|
55
|
+
export { AutoComplete } from "./autocomplete.js";
|
|
56
|
+
export { Collapse, } from "./collapse.js";
|
|
57
|
+
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "../components/primitives/popover.js";
|
|
58
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../components/primitives/tooltip.js";
|
|
59
|
+
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from "../components/primitives/dropdown-menu.js";
|
|
60
|
+
export { Cascader } from "./cascader.js";
|
|
61
|
+
export { TreeSelect } from "./tree-select.js";
|
|
62
|
+
export { Transfer } from "./transfer.js";
|
|
63
|
+
export { Mentions } from "./mentions.js";
|
|
64
|
+
export { Tree, } from "./tree.js";
|
|
65
|
+
export { Menu, } from "./menu.js";
|
|
66
|
+
export { QRCode } from "./qrcode.js";
|
|
67
|
+
export { Watermark } from "./watermark.js";
|
|
68
|
+
export { Affix, BackTop } from "./affix.js";
|
|
69
|
+
export { Splitter } from "./splitter.js";
|
|
70
|
+
export { Layout, LayoutHeader, LayoutSider, LayoutContent, LayoutFooter } from "./page-layout.js";
|
|
71
|
+
export { InputOTP } from "./input-otp.js";
|
|
72
|
+
export { Popconfirm } from "./popconfirm.js";
|
|
73
|
+
export { MessageProvider, useMessage } from "./message.js";
|
|
74
|
+
export { NotificationProvider, useNotification } from "./notification.js";
|
|
75
|
+
export { Tour } from "./tour.js";
|
|
76
|
+
export { ConfigProvider } from "./config-provider.js";
|
|
77
|
+
export { enUS, zhCN } from "./locale.js";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { InputNumberLocale } from "./locale.js";
|
|
2
|
+
import { type InputHTMLAttributes } from "react";
|
|
3
|
+
import { type ControlSize } from "./control-types.js";
|
|
4
|
+
export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type"> {
|
|
5
|
+
locale?: Partial<InputNumberLocale>;
|
|
6
|
+
value?: number | null;
|
|
7
|
+
defaultValue?: number | null;
|
|
8
|
+
min?: number;
|
|
9
|
+
max?: number;
|
|
10
|
+
step?: number;
|
|
11
|
+
precision?: number;
|
|
12
|
+
size?: ControlSize;
|
|
13
|
+
status?: "error" | "warning";
|
|
14
|
+
controls?: boolean;
|
|
15
|
+
keyboard?: boolean;
|
|
16
|
+
formatter?: (value: number | null) => string;
|
|
17
|
+
parser?: (displayValue: string) => number | null;
|
|
18
|
+
onChange?: (value: number | null) => void;
|
|
19
|
+
onStep?: (value: number, info: {
|
|
20
|
+
offset: number;
|
|
21
|
+
type: "up" | "down";
|
|
22
|
+
}) => void;
|
|
23
|
+
}
|
|
24
|
+
export declare const InputNumber: import("react").ForwardRefExoticComponent<InputNumberProps & import("react").RefAttributes<HTMLInputElement>>;
|