neatkit 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +373 -674
- package/README.md +9 -32
- package/dist/components/Alert/Alert.d.ts +29 -0
- package/dist/components/Alert/index.d.ts +2 -0
- package/dist/components/Avatar/Avatar.d.ts +28 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Badge/Badge.d.ts +32 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +58 -8
- package/dist/components/Button/index.d.ts +2 -3
- package/dist/components/Card/Card.d.ts +40 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +35 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +62 -0
- package/dist/components/CheckboxGroup/contexts/CheckboxGroupContext.d.ts +22 -0
- package/dist/components/CheckboxGroup/hooks/useCheckboxGroup.d.ts +7 -0
- package/dist/components/CheckboxGroup/index.d.ts +2 -0
- package/dist/components/Content/Content.d.ts +58 -0
- package/dist/components/Content/hooks/useContentLayout.d.ts +18 -0
- package/dist/components/Content/index.d.ts +2 -0
- package/dist/components/Content/utils/layout.d.ts +11 -0
- package/dist/components/Divider/Divider.d.ts +30 -0
- package/dist/components/Divider/index.d.ts +2 -0
- package/dist/components/Field/Field.d.ts +61 -0
- package/dist/components/Field/index.d.ts +2 -0
- package/dist/components/Field/utils/field-control.d.ts +23 -0
- package/dist/components/Icon/Icon.d.ts +21 -0
- package/dist/components/Icon/icons/ArrowLeftIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ArrowRightIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ArticlesIcon.d.ts +11 -0
- package/dist/components/Icon/icons/AudioIcon.d.ts +11 -0
- package/dist/components/Icon/icons/BranchIcon.d.ts +11 -0
- package/dist/components/Icon/icons/BurgerIcon.d.ts +11 -0
- package/dist/components/Icon/icons/CameraIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ChatIcon.d.ts +11 -0
- package/dist/components/Icon/icons/CheckmarkIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ChevronDownIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ChevronLeftIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ChevronRightIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ChevronUpIcon.d.ts +11 -0
- package/dist/components/Icon/icons/CommitIcon.d.ts +11 -0
- package/dist/components/Icon/icons/CrossIcon.d.ts +11 -0
- package/dist/components/Icon/icons/DownloadIcon.d.ts +11 -0
- package/dist/components/Icon/icons/DuplicateIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ExitIcon.d.ts +11 -0
- package/dist/components/Icon/icons/EyeIcon.d.ts +11 -0
- package/dist/components/Icon/icons/EyeOffIcon.d.ts +11 -0
- package/dist/components/Icon/icons/FileIcon.d.ts +11 -0
- package/dist/components/Icon/icons/FolderIcon.d.ts +11 -0
- package/dist/components/Icon/icons/GitIcon.d.ts +11 -0
- package/dist/components/Icon/icons/GithubIcon.d.ts +11 -0
- package/dist/components/Icon/icons/GlobeIcon.d.ts +11 -0
- package/dist/components/Icon/icons/HardwareIcon.d.ts +11 -0
- package/dist/components/Icon/icons/HomeIcon.d.ts +11 -0
- package/dist/components/Icon/icons/InfoIcon.d.ts +11 -0
- package/dist/components/Icon/icons/KeyIcon.d.ts +11 -0
- package/dist/components/Icon/icons/LinkedInIcon.d.ts +11 -0
- package/dist/components/Icon/icons/MailIcon.d.ts +11 -0
- package/dist/components/Icon/icons/MinusIcon.d.ts +11 -0
- package/dist/components/Icon/icons/PencilIcon.d.ts +11 -0
- package/dist/components/Icon/icons/PlusIcon.d.ts +11 -0
- package/dist/components/Icon/icons/ProjectsIcon.d.ts +11 -0
- package/dist/components/Icon/icons/QRCodeIcon.d.ts +11 -0
- package/dist/components/Icon/icons/RedditIcon.d.ts +11 -0
- package/dist/components/Icon/icons/RepositoryIcon.d.ts +11 -0
- package/dist/components/Icon/icons/SaveIcon.d.ts +11 -0
- package/dist/components/Icon/icons/SignalIcon.d.ts +11 -0
- package/dist/components/Icon/icons/TagIcon.d.ts +11 -0
- package/dist/components/Icon/icons/UserIcon.d.ts +11 -0
- package/dist/components/Icon/icons/WarningIcon.d.ts +11 -0
- package/dist/components/Icon/icons/WindowIcon.d.ts +11 -0
- package/dist/components/Icon/icons/types.d.ts +3 -0
- package/dist/components/Icon/index.d.ts +36 -0
- package/dist/components/Icon/utils/registry.d.ts +49 -0
- package/dist/components/Input/Input.d.ts +50 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Modal/Modal.d.ts +62 -0
- package/dist/components/Modal/index.d.ts +2 -0
- package/dist/components/PinInput/PinInput.d.ts +76 -0
- package/dist/components/PinInput/hooks/usePinInput.d.ts +65 -0
- package/dist/components/PinInput/index.d.ts +2 -0
- package/dist/components/Popover/Popover.d.ts +93 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Portal/Portal.d.ts +19 -0
- package/dist/components/Portal/contexts/FocusScopeContext.d.ts +7 -0
- package/dist/components/Portal/hooks/useDismissableLayer.d.ts +31 -0
- package/dist/components/Portal/hooks/useFloatingPosition.d.ts +12 -0
- package/dist/components/Portal/hooks/useFocusTrap.d.ts +24 -0
- package/dist/components/Portal/hooks/usePresence.d.ts +19 -0
- package/dist/components/Portal/hooks/useScrollLock.d.ts +7 -0
- package/dist/components/Portal/utils/floating-position.d.ts +26 -0
- package/dist/components/Portal/utils/overlay-stack.d.ts +45 -0
- package/dist/components/Radio/Radio.d.ts +32 -0
- package/dist/components/Radio/index.d.ts +2 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +54 -0
- package/dist/components/RadioGroup/contexts/RadioGroupContext.d.ts +18 -0
- package/dist/components/RadioGroup/hooks/useRadioGroup.d.ts +7 -0
- package/dist/components/RadioGroup/index.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +97 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Skeleton/Skeleton.d.ts +30 -0
- package/dist/components/Skeleton/index.d.ts +2 -0
- package/dist/components/Spinner/Spinner.d.ts +24 -0
- package/dist/components/Spinner/index.d.ts +2 -0
- package/dist/components/Surface/Surface.d.ts +15 -0
- package/dist/components/Switch/Switch.d.ts +27 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Text/Text.d.ts +41 -0
- package/dist/components/Text/index.d.ts +2 -0
- package/dist/components/TextArea/TextArea.d.ts +40 -0
- package/dist/components/TextArea/index.d.ts +2 -0
- package/dist/components/Tooltip/Tooltip.d.ts +54 -0
- package/dist/components/Tooltip/TooltipProvider.d.ts +24 -0
- package/dist/components/Tooltip/index.d.ts +4 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +27 -3
- package/dist/index.js +3920 -12
- package/dist/style.css +1 -1
- package/dist/tokens.d.ts +84 -0
- package/dist/utils/aria.d.ts +18 -0
- package/dist/utils/reference.d.ts +16 -0
- package/dist/utils/units.d.ts +33 -0
- package/package.json +20 -4
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/index.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/** A type representing an active overlay layer registration. */
|
|
2
|
+
export type OverlayLayer = {
|
|
3
|
+
/** The stable identifier used to query the layer's stack position. */
|
|
4
|
+
id: symbol;
|
|
5
|
+
/** The deterministic z-index assigned to the layer. */
|
|
6
|
+
zIndex: number;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Registers an active layer in its owning document's overlay stack.
|
|
10
|
+
*
|
|
11
|
+
* @param active - Whether the layer currently participates in the stack.
|
|
12
|
+
* @param ownerDocument - The document owning the layer.
|
|
13
|
+
*
|
|
14
|
+
* @returns The stable layer identifier and its current z-index.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useOverlayLayer(active: boolean, ownerDocument: Document | null): OverlayLayer;
|
|
17
|
+
/**
|
|
18
|
+
* Determines whether a layer is uppermost in its document.
|
|
19
|
+
*
|
|
20
|
+
* @param ownerDocument - The document owning the overlay layer.
|
|
21
|
+
* @param layerIdentifier - The layer identifier being inspected.
|
|
22
|
+
*
|
|
23
|
+
* @returns Whether the layer is the last active stack entry.
|
|
24
|
+
*/
|
|
25
|
+
export declare function isTopmostOverlayLayer(ownerDocument: Document, layerIdentifier: symbol): boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Registers whether an overlay layer currently owns focus containment.
|
|
28
|
+
*
|
|
29
|
+
* Focus ownership is tracked independently from visual and dismissal order so
|
|
30
|
+
* a non-trapping child layer cannot suspend its enclosing focus trap.
|
|
31
|
+
*
|
|
32
|
+
* @param active - Whether the layer currently contains focus.
|
|
33
|
+
* @param ownerDocument - The document owning the layer.
|
|
34
|
+
* @param layerIdentifier - The layer identifier registered in the stack.
|
|
35
|
+
*/
|
|
36
|
+
export declare function useOverlayFocusLayer(active: boolean, ownerDocument: Document | null, layerIdentifier: symbol): void;
|
|
37
|
+
/**
|
|
38
|
+
* Determines whether a layer is the uppermost focus-containing overlay.
|
|
39
|
+
*
|
|
40
|
+
* @param ownerDocument - The document owning the overlay layer.
|
|
41
|
+
* @param layerIdentifier - The layer identifier being inspected.
|
|
42
|
+
*
|
|
43
|
+
* @returns Whether no later visual layer also owns focus containment.
|
|
44
|
+
*/
|
|
45
|
+
export declare function isTopmostFocusLayer(ownerDocument: Document, layerIdentifier: symbol): boolean;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import "./styles/radio.css";
|
|
3
|
+
/** A type representing properties for the Radio component. */
|
|
4
|
+
export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "children" | "className" | "defaultChecked" | "name" | "onChange" | "required" | "style" | "type" | "value"> & {
|
|
5
|
+
/** The clickable and accessible label for the Radio option. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** The additional class name applied to the Radio label root. */
|
|
8
|
+
className?: string;
|
|
9
|
+
/** The inline styles applied to the Radio label root. */
|
|
10
|
+
style?: CSSProperties;
|
|
11
|
+
/** The string submitted when the Radio option is selected. */
|
|
12
|
+
value: string;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Renders a labelled native option owned by a RadioGroup.
|
|
16
|
+
*
|
|
17
|
+
* @param props - The properties that configure the Radio option.
|
|
18
|
+
* @param forwardedReference - The reference assigned to the native input.
|
|
19
|
+
*
|
|
20
|
+
* @returns The rendered Radio option.
|
|
21
|
+
*/
|
|
22
|
+
declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "className" | "style" | "children" | "onChange" | "name" | "type" | "value" | "required" | "checked"> & {
|
|
23
|
+
/** The clickable and accessible label for the Radio option. */
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
/** The additional class name applied to the Radio label root. */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** The inline styles applied to the Radio label root. */
|
|
28
|
+
style?: CSSProperties;
|
|
29
|
+
/** The string submitted when the Radio option is selected. */
|
|
30
|
+
value: string;
|
|
31
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
32
|
+
export default Radio;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import "./styles/radio-group.css";
|
|
3
|
+
/** A type representing the visual direction of Radio options. */
|
|
4
|
+
export type RadioGroupOrientation = "horizontal" | "vertical";
|
|
5
|
+
/** A type representing properties for the RadioGroup component. */
|
|
6
|
+
export type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
|
|
7
|
+
/** The Radio options belonging to the group. */
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
/** The initially selected value for uncontrolled usage. */
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
/** Whether every Radio in the group is disabled. */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Whether the group exposes an invalid semantic and visual state. */
|
|
14
|
+
invalid?: boolean;
|
|
15
|
+
/** The native form name shared by every Radio in the group. */
|
|
16
|
+
name: string;
|
|
17
|
+
/** The native change callback invoked by Radio selection. */
|
|
18
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
19
|
+
/** The direction in which Radio options are arranged. */
|
|
20
|
+
orientation?: RadioGroupOrientation;
|
|
21
|
+
/** Whether the group requires a selected value. */
|
|
22
|
+
required?: boolean;
|
|
23
|
+
/** The selected value for controlled usage. */
|
|
24
|
+
value?: string;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Renders a native radio group with shared form and validation state.
|
|
28
|
+
*
|
|
29
|
+
* @param props - The properties that configure the RadioGroup.
|
|
30
|
+
* @param forwardedReference - The reference assigned to the group root.
|
|
31
|
+
*
|
|
32
|
+
* @returns The rendered RadioGroup.
|
|
33
|
+
*/
|
|
34
|
+
declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "children" | "onChange"> & {
|
|
35
|
+
/** The Radio options belonging to the group. */
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
/** The initially selected value for uncontrolled usage. */
|
|
38
|
+
defaultValue?: string;
|
|
39
|
+
/** Whether every Radio in the group is disabled. */
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
/** Whether the group exposes an invalid semantic and visual state. */
|
|
42
|
+
invalid?: boolean;
|
|
43
|
+
/** The native form name shared by every Radio in the group. */
|
|
44
|
+
name: string;
|
|
45
|
+
/** The native change callback invoked by Radio selection. */
|
|
46
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
47
|
+
/** The direction in which Radio options are arranged. */
|
|
48
|
+
orientation?: RadioGroupOrientation;
|
|
49
|
+
/** Whether the group requires a selected value. */
|
|
50
|
+
required?: boolean;
|
|
51
|
+
/** The selected value for controlled usage. */
|
|
52
|
+
value?: string;
|
|
53
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
54
|
+
export default RadioGroup;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type ChangeEventHandler } from "react";
|
|
2
|
+
/** A type representing state shared by RadioGroup with each Radio. */
|
|
3
|
+
export type RadioGroupContextValue = {
|
|
4
|
+
/** The initial selected value for an uncontrolled group. */
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
/** Whether every Radio in the group is disabled. */
|
|
7
|
+
disabled: boolean;
|
|
8
|
+
/** The native form name shared by every Radio. */
|
|
9
|
+
name: string;
|
|
10
|
+
/** The native change callback owned by the group. */
|
|
11
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
12
|
+
/** Whether the group requires a selected value. */
|
|
13
|
+
required: boolean;
|
|
14
|
+
/** The selected value for a controlled group. */
|
|
15
|
+
value?: string;
|
|
16
|
+
};
|
|
17
|
+
/** The internal React context connecting RadioGroup and Radio. */
|
|
18
|
+
export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { type ButtonHTMLAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes, type SelectHTMLAttributes } from "react";
|
|
2
|
+
import { type IconType } from "../Icon";
|
|
3
|
+
import "./styles/select.css";
|
|
4
|
+
/** A type representing one option in a custom Select. */
|
|
5
|
+
export type SelectOption = {
|
|
6
|
+
/** Whether the option is unavailable for selection. */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** The optional icon displayed beside the option label. */
|
|
9
|
+
icon?: IconType;
|
|
10
|
+
/** The visible and accessible option label. */
|
|
11
|
+
label: string;
|
|
12
|
+
/** The form value represented by the option. */
|
|
13
|
+
value: string;
|
|
14
|
+
};
|
|
15
|
+
/** A type representing custom trigger content independent of selection. */
|
|
16
|
+
export type SelectDisplayOverride = {
|
|
17
|
+
/** The optional icon displayed beside the trigger label. */
|
|
18
|
+
icon?: IconType;
|
|
19
|
+
/** The label displayed by the trigger. */
|
|
20
|
+
label: string;
|
|
21
|
+
};
|
|
22
|
+
/** A type representing the existing native Select mode properties. */
|
|
23
|
+
export type NativeSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "className" | "multiple" | "size" | "style"> & {
|
|
24
|
+
/** The native option and optgroup content displayed by the Select. */
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
/** The additional class name applied to the composite Select root. */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Whether the Select exposes an invalid semantic and visual state. */
|
|
29
|
+
invalid?: boolean;
|
|
30
|
+
/** The disabled empty-value guidance displayed before selection. */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** The inline styles applied to the composite Select root. */
|
|
33
|
+
style?: CSSProperties;
|
|
34
|
+
/** Custom options select portal mode and cannot accompany children. */
|
|
35
|
+
options?: never;
|
|
36
|
+
};
|
|
37
|
+
/** A type representing the portal-backed custom Select mode properties. */
|
|
38
|
+
export type CustomSelectProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "defaultValue" | "onChange" | "style" | "value"> & {
|
|
39
|
+
/** Whether an outside pointer interaction closes the listbox. */
|
|
40
|
+
closeOnOutsideInteraction?: boolean;
|
|
41
|
+
/** Whether the Escape key closes the listbox. */
|
|
42
|
+
closeOnEscape?: boolean;
|
|
43
|
+
/** The additional class name applied to the composite Select root. */
|
|
44
|
+
className?: string;
|
|
45
|
+
/** The initially selected value for uncontrolled usage. */
|
|
46
|
+
defaultValue?: string;
|
|
47
|
+
/** The optional content displayed independently from the selected option. */
|
|
48
|
+
displayOverride?: SelectDisplayOverride;
|
|
49
|
+
/** Whether the Select exposes an invalid semantic and visual state. */
|
|
50
|
+
invalid?: boolean;
|
|
51
|
+
/** The native form name submitted through the custom Select. */
|
|
52
|
+
name?: string;
|
|
53
|
+
/** The callback invoked with a newly selected option value. */
|
|
54
|
+
onChange?: (value: string) => void;
|
|
55
|
+
/** The callback invoked whenever the listbox opens or closes. */
|
|
56
|
+
onOpenChange?: (open: boolean) => void;
|
|
57
|
+
/** The callback receiving Escape before its default closing behavior. */
|
|
58
|
+
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
59
|
+
/** The callback receiving an outside press before default behavior. */
|
|
60
|
+
onPointerDownOutside?: (event: PointerEvent) => void;
|
|
61
|
+
/** The options rendered by the portal-backed listbox. */
|
|
62
|
+
options: readonly SelectOption[];
|
|
63
|
+
/** The guidance displayed when no option is selected. */
|
|
64
|
+
placeholder?: string;
|
|
65
|
+
/** The optional element receiving the listbox portal. */
|
|
66
|
+
portalContainer?: Element | null;
|
|
67
|
+
/** The inline styles applied to the composite Select root. */
|
|
68
|
+
style?: CSSProperties;
|
|
69
|
+
/** Whether the custom Select communicates that a value is required. */
|
|
70
|
+
required?: boolean;
|
|
71
|
+
/** The selected value for controlled usage. */
|
|
72
|
+
value?: string;
|
|
73
|
+
/** The width applied to the composite Select root. */
|
|
74
|
+
width?: CSSProperties["width"];
|
|
75
|
+
/** Native children belong to native mode and cannot accompany options. */
|
|
76
|
+
children?: never;
|
|
77
|
+
};
|
|
78
|
+
/** A type representing properties accepted by either Select mode. */
|
|
79
|
+
export type SelectProps = NativeSelectProps | CustomSelectProps;
|
|
80
|
+
/** A type representing the public Select component overloads. */
|
|
81
|
+
type SelectComponent = {
|
|
82
|
+
/** Renders the native children-driven Select mode. */
|
|
83
|
+
(props: NativeSelectProps & RefAttributes<HTMLSelectElement>): ReactElement | null;
|
|
84
|
+
/** Renders the custom options-driven Select mode. */
|
|
85
|
+
(props: CustomSelectProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
|
|
86
|
+
};
|
|
87
|
+
/**
|
|
88
|
+
* Renders either a native Select or an options-driven custom listbox.
|
|
89
|
+
*
|
|
90
|
+
* @param props - The properties selecting and configuring one Select mode.
|
|
91
|
+
* @param forwardedReference - The reference assigned to the interactive
|
|
92
|
+
* control.
|
|
93
|
+
*
|
|
94
|
+
* @returns The rendered native or portal-backed Select control.
|
|
95
|
+
*/
|
|
96
|
+
declare const Select: SelectComponent;
|
|
97
|
+
export default Select;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type HTMLAttributes } from "react";
|
|
2
|
+
import "./styles/skeleton.css";
|
|
3
|
+
/** A type representing the silhouette drawn by Skeleton. */
|
|
4
|
+
export type SkeletonShape = "rectangle" | "circle";
|
|
5
|
+
/** A type representing properties for the Skeleton component. */
|
|
6
|
+
export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
7
|
+
/** The silhouette drawn by the loading placeholder. */
|
|
8
|
+
shape?: SkeletonShape;
|
|
9
|
+
/** The CSS-compatible width of the loading placeholder. */
|
|
10
|
+
width?: number | string;
|
|
11
|
+
/** The CSS-compatible height of the loading placeholder. */
|
|
12
|
+
height?: number | string;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Renders a decorative loading placeholder with reduced-motion support.
|
|
16
|
+
*
|
|
17
|
+
* @param props - The properties that configure the Skeleton.
|
|
18
|
+
* @param forwardedReference - The reference assigned to the rendered element.
|
|
19
|
+
*
|
|
20
|
+
* @returns The rendered Skeleton.
|
|
21
|
+
*/
|
|
22
|
+
declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
23
|
+
/** The silhouette drawn by the loading placeholder. */
|
|
24
|
+
shape?: SkeletonShape;
|
|
25
|
+
/** The CSS-compatible width of the loading placeholder. */
|
|
26
|
+
width?: number | string;
|
|
27
|
+
/** The CSS-compatible height of the loading placeholder. */
|
|
28
|
+
height?: number | string;
|
|
29
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
30
|
+
export default Skeleton;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type CSSProperties, type HTMLAttributes } from "react";
|
|
2
|
+
import "./styles/spinner.css";
|
|
3
|
+
/** A type representing properties for the Spinner component. */
|
|
4
|
+
export type SpinnerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
5
|
+
/** The diameter of the Spinner. The stroke scales with this value. */
|
|
6
|
+
size?: number | string;
|
|
7
|
+
/** The color applied to the Spinner's active arc. */
|
|
8
|
+
color?: CSSProperties["color"];
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Renders a circular loading indicator.
|
|
12
|
+
*
|
|
13
|
+
* @param props - The properties that configure the Spinner.
|
|
14
|
+
* @param forwardedReference - The reference assigned to the rendered element.
|
|
15
|
+
*
|
|
16
|
+
* @returns The rendered Spinner.
|
|
17
|
+
*/
|
|
18
|
+
declare const Spinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
19
|
+
/** The diameter of the Spinner. The stroke scales with this value. */
|
|
20
|
+
size?: number | string;
|
|
21
|
+
/** The color applied to the Spinner's active arc. */
|
|
22
|
+
color?: CSSProperties["color"];
|
|
23
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export default Spinner;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import "./styles/surface.css";
|
|
3
|
+
/**
|
|
4
|
+
* Renders the shared visual foundation for bordered component surfaces.
|
|
5
|
+
*
|
|
6
|
+
* @param props - The native properties that configure the Surface.
|
|
7
|
+
* @param forwardedReference - The reference assigned to the Surface element.
|
|
8
|
+
*
|
|
9
|
+
* @returns The rendered Surface element.
|
|
10
|
+
*/
|
|
11
|
+
declare const Surface: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
12
|
+
/** The content displayed inside the Surface. */
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export default Surface;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type CSSProperties, type InputHTMLAttributes } from "react";
|
|
2
|
+
import "./styles/switch.css";
|
|
3
|
+
/** A type representing properties for the Switch component. */
|
|
4
|
+
export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "role" | "style" | "type"> & {
|
|
5
|
+
/** The additional class name applied to the composite Switch root. */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** The inline styles applied to the composite Switch root. */
|
|
8
|
+
style?: CSSProperties;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Renders a native binary control for settings applied immediately.
|
|
12
|
+
*
|
|
13
|
+
* Checkbox represents a form choice, while Switch represents an immediate
|
|
14
|
+
* change between two settings.
|
|
15
|
+
*
|
|
16
|
+
* @param props - The properties that configure the Switch.
|
|
17
|
+
* @param forwardedReference - The reference assigned to the native input.
|
|
18
|
+
*
|
|
19
|
+
* @returns The rendered Switch control.
|
|
20
|
+
*/
|
|
21
|
+
declare const Switch: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "role" | "children" | "type"> & {
|
|
22
|
+
/** The additional class name applied to the composite Switch root. */
|
|
23
|
+
className?: string;
|
|
24
|
+
/** The inline styles applied to the composite Switch root. */
|
|
25
|
+
style?: CSSProperties;
|
|
26
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
27
|
+
export default Switch;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type ReactElement } from "react";
|
|
2
|
+
import "./styles/text.css";
|
|
3
|
+
/** A type representing the visual size applied to Text. */
|
|
4
|
+
export type TextSize = "caption" | "body" | "subtitle" | "title" | "heading";
|
|
5
|
+
/** A type representing the visual weight applied to Text. */
|
|
6
|
+
export type TextWeight = "regular" | "medium" | "semibold";
|
|
7
|
+
/** A type representing the semantic color treatment applied to Text. */
|
|
8
|
+
export type TextTone = "default" | "muted" | "accent" | "info" | "success" | "warning" | "danger";
|
|
9
|
+
/** A type representing the horizontal alignment applied to Text. */
|
|
10
|
+
export type TextAlignment = "left" | "center" | "right";
|
|
11
|
+
/** A type representing the reference accepted by a polymorphic element. */
|
|
12
|
+
type TextReference<Component extends ElementType> = ComponentPropsWithRef<Component>["ref"];
|
|
13
|
+
/** A type representing properties owned by the Text component. */
|
|
14
|
+
type TextOwnProps = {
|
|
15
|
+
/** The visual size applied independently from the semantic element. */
|
|
16
|
+
size?: TextSize;
|
|
17
|
+
/** The visual weight, or native element weight when omitted. */
|
|
18
|
+
weight?: TextWeight;
|
|
19
|
+
/** The semantic color treatment applied to the text. */
|
|
20
|
+
tone?: TextTone;
|
|
21
|
+
/** The horizontal alignment applied to the text. */
|
|
22
|
+
align?: TextAlignment;
|
|
23
|
+
};
|
|
24
|
+
/** A type representing properties for a polymorphic Text element. */
|
|
25
|
+
export type TextProps<Component extends ElementType = "p"> = TextOwnProps & {
|
|
26
|
+
as?: Component;
|
|
27
|
+
} & Omit<ComponentPropsWithoutRef<Component>, keyof TextOwnProps | "as">;
|
|
28
|
+
/** A type representing the public polymorphic Text component. */
|
|
29
|
+
type TextComponent = <Component extends ElementType = "p">(props: TextProps<Component> & {
|
|
30
|
+
ref?: TextReference<Component>;
|
|
31
|
+
}) => ReactElement | null;
|
|
32
|
+
/**
|
|
33
|
+
* Renders semantic text with a constrained visual treatment.
|
|
34
|
+
*
|
|
35
|
+
* @param props - The properties that configure Text and its selected element.
|
|
36
|
+
* @param forwardedReference - The reference assigned to the rendered element.
|
|
37
|
+
*
|
|
38
|
+
* @returns The rendered Text element.
|
|
39
|
+
*/
|
|
40
|
+
declare const Text: TextComponent;
|
|
41
|
+
export default Text;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { type CSSProperties, type TextareaHTMLAttributes } from "react";
|
|
2
|
+
import "./styles/text-area.css";
|
|
3
|
+
/** A type representing the resize behavior applied to TextArea. */
|
|
4
|
+
export type TextAreaResize = "both" | "horizontal" | "none" | "vertical";
|
|
5
|
+
/** A type representing CSS custom properties accepted by TextArea styles. */
|
|
6
|
+
type TextAreaCustomProperties = {
|
|
7
|
+
"--nk-text-area-min-height"?: string;
|
|
8
|
+
};
|
|
9
|
+
/** A type representing native TextArea styles and its custom properties. */
|
|
10
|
+
type TextAreaStyle = CSSProperties & TextAreaCustomProperties;
|
|
11
|
+
/** A type representing properties for the TextArea component. */
|
|
12
|
+
export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & {
|
|
13
|
+
/** Whether the TextArea exposes an invalid semantic and visual state. */
|
|
14
|
+
invalid?: boolean;
|
|
15
|
+
/** The minimum visible line count retained during manual resizing. */
|
|
16
|
+
minRows?: number;
|
|
17
|
+
/** The manual resize directions available to the consumer. */
|
|
18
|
+
resize?: TextAreaResize;
|
|
19
|
+
/** The native inline styles applied to the TextArea. */
|
|
20
|
+
style?: TextAreaStyle;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Renders a themed native multiline text control.
|
|
24
|
+
*
|
|
25
|
+
* @param props - The properties that configure the TextArea.
|
|
26
|
+
* @param forwardedReference - The reference assigned to the native textarea.
|
|
27
|
+
*
|
|
28
|
+
* @returns The rendered TextArea control.
|
|
29
|
+
*/
|
|
30
|
+
declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & {
|
|
31
|
+
/** Whether the TextArea exposes an invalid semantic and visual state. */
|
|
32
|
+
invalid?: boolean;
|
|
33
|
+
/** The minimum visible line count retained during manual resizing. */
|
|
34
|
+
minRows?: number;
|
|
35
|
+
/** The manual resize directions available to the consumer. */
|
|
36
|
+
resize?: TextAreaResize;
|
|
37
|
+
/** The native inline styles applied to the TextArea. */
|
|
38
|
+
style?: TextAreaStyle;
|
|
39
|
+
} & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
40
|
+
export default TextArea;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { type CSSProperties, type ReactElement, type ReactNode } from "react";
|
|
2
|
+
import type { FloatingPlacement } from "../Portal/utils/floating-position";
|
|
3
|
+
import "./styles/tooltip.css";
|
|
4
|
+
/** A type representing the preferred placement of a Tooltip. */
|
|
5
|
+
export type TooltipPlacement = FloatingPlacement;
|
|
6
|
+
/** A type representing properties for the Tooltip component. */
|
|
7
|
+
export type TooltipProps = {
|
|
8
|
+
/**
|
|
9
|
+
* The single interface element described by the Tooltip.
|
|
10
|
+
*
|
|
11
|
+
* Custom components must forward standard DOM properties and a reference.
|
|
12
|
+
*/
|
|
13
|
+
children: ReactElement;
|
|
14
|
+
/** The additional class name applied to the trigger element. */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** The additional class name applied to the rendered Tooltip content. */
|
|
17
|
+
contentClassName?: string;
|
|
18
|
+
/** The inline styles applied to the rendered Tooltip content. */
|
|
19
|
+
contentStyle?: CSSProperties;
|
|
20
|
+
/**
|
|
21
|
+
* The short, supplementary description displayed by the Tooltip.
|
|
22
|
+
*
|
|
23
|
+
* Interactive content is unsupported. Essential information must remain
|
|
24
|
+
* available outside Tooltip.
|
|
25
|
+
*/
|
|
26
|
+
content: ReactNode;
|
|
27
|
+
/** The delay before pointer hover opens the Tooltip, in milliseconds. */
|
|
28
|
+
delay?: number;
|
|
29
|
+
/** Whether Tooltip behavior is disabled without removing its trigger. */
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/** The callback invoked whenever the Tooltip opens or closes. */
|
|
32
|
+
onOpenChange?: (open: boolean) => void;
|
|
33
|
+
/** The preferred placement before viewport collision handling. */
|
|
34
|
+
placement?: TooltipPlacement;
|
|
35
|
+
/** The optional element receiving the Tooltip portal. */
|
|
36
|
+
portalContainer?: Element | null;
|
|
37
|
+
/** The inline styles applied to the trigger element. */
|
|
38
|
+
style?: CSSProperties;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Renders a non-interactive supplementary description for one trigger.
|
|
42
|
+
*
|
|
43
|
+
* Tooltip content may contain formatting but must not contain actions or
|
|
44
|
+
* information required to understand or complete the surrounding interface.
|
|
45
|
+
* Native disabled controls must be placed inside a focusable wrapper because
|
|
46
|
+
* disabled elements do not consistently emit focus or pointer interactions.
|
|
47
|
+
*
|
|
48
|
+
* @param props - The properties that configure the Tooltip.
|
|
49
|
+
* @param forwardedReference - The reference assigned to the trigger element.
|
|
50
|
+
*
|
|
51
|
+
* @returns The trigger and its portal-backed Tooltip description.
|
|
52
|
+
*/
|
|
53
|
+
declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLElement>>;
|
|
54
|
+
export default Tooltip;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/** A type representing the shared behavior available to descendant Tooltips. */
|
|
3
|
+
type TooltipContextValue = {
|
|
4
|
+
/** The inherited pointer-hover delay in milliseconds. */
|
|
5
|
+
delay: number;
|
|
6
|
+
};
|
|
7
|
+
/** Shared Tooltip behavior remains optional for standalone usage. */
|
|
8
|
+
export declare const TooltipContext: import("react").Context<TooltipContextValue | null>;
|
|
9
|
+
/** A type representing properties for the TooltipProvider component. */
|
|
10
|
+
export type TooltipProviderProps = {
|
|
11
|
+
/** The Tooltip-bearing interface receiving shared behavior. */
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
/** The default pointer-hover delay inherited by descendant Tooltips. */
|
|
14
|
+
delay?: number;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Provides a shared pointer-hover delay to descendant Tooltips.
|
|
18
|
+
*
|
|
19
|
+
* @param props - The Tooltip tree and inherited behavior.
|
|
20
|
+
*
|
|
21
|
+
* @returns A provider supplying shared Tooltip behavior.
|
|
22
|
+
*/
|
|
23
|
+
export default function TooltipProvider(props: TooltipProviderProps): import("react").JSX.Element;
|
|
24
|
+
export {};
|