@tpc-mare/mare-ui-components-react 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.storybook/main.d.ts +3 -0
- package/dist/.storybook/manager.d.ts +1 -0
- package/dist/.storybook/preview.d.ts +3 -0
- package/dist/avatar/Avatar.d.ts +2 -0
- package/dist/avatar/Avatar.types.d.ts +26 -0
- package/dist/avatar/index.d.ts +2 -0
- package/dist/avatar/index.js +4 -0
- package/dist/badge/Badge.d.ts +2 -0
- package/dist/badge/Badge.types.d.ts +11 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +4 -0
- package/dist/button/Button.d.ts +2 -0
- package/dist/button/Button.types.d.ts +18 -0
- package/dist/button/index.d.ts +2 -0
- package/dist/button/index.js +4 -0
- package/dist/checkbox/Checkbox.d.ts +2 -0
- package/dist/checkbox/Checkbox.types.d.ts +69 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +4 -0
- package/dist/combobox/Combobox.d.ts +13 -0
- package/dist/combobox/Combobox.types.d.ts +16 -0
- package/dist/combobox/index.d.ts +2 -0
- package/dist/combobox/index.js +4 -0
- package/dist/date-picker/DatePicker.d.ts +3 -0
- package/dist/date-picker/DatePicker.types.d.ts +52 -0
- package/dist/date-picker/index.d.ts +2 -0
- package/dist/date-picker/index.js +4 -0
- package/dist/dialog/Dialog.d.ts +2 -0
- package/dist/dialog/Dialog.types.d.ts +55 -0
- package/dist/dialog/DialogFooter.d.ts +2 -0
- package/dist/dialog/DialogHeader.d.ts +2 -0
- package/dist/dialog/index.d.ts +4 -0
- package/dist/dialog/index.js +6 -0
- package/dist/drawer/Drawer.d.ts +2 -0
- package/dist/drawer/Drawer.types.d.ts +53 -0
- package/dist/drawer/DrawerFooter.d.ts +2 -0
- package/dist/drawer/DrawerHeader.d.ts +2 -0
- package/dist/drawer/index.d.ts +4 -0
- package/dist/drawer/index.js +6 -0
- package/dist/index/index.d.ts +44 -0
- package/dist/index/index.js +57 -0
- package/dist/input-number/InputNumber.d.ts +2 -0
- package/dist/input-number/InputNumber.types.d.ts +30 -0
- package/dist/input-number/index.d.ts +2 -0
- package/dist/input-number/index.js +4 -0
- package/dist/input-text/CharacterCount.d.ts +5 -0
- package/dist/input-text/FloatLabel.d.ts +6 -0
- package/dist/input-text/FormField.d.ts +8 -0
- package/dist/input-text/HelperText.d.ts +4 -0
- package/dist/input-text/IconField.d.ts +16 -0
- package/dist/input-text/InputText.d.ts +2 -0
- package/dist/input-text/InputText.types.d.ts +14 -0
- package/dist/input-text/field-layout.d.ts +12 -0
- package/dist/input-text/index.d.ts +11 -0
- package/dist/input-text/index.js +10 -0
- package/dist/menu/Menu.d.ts +2 -0
- package/dist/menu/Menu.types.d.ts +19 -0
- package/dist/menu/index.d.ts +2 -0
- package/dist/menu/index.js +4 -0
- package/dist/panel-menu/PanelMenu.d.ts +2 -0
- package/dist/panel-menu/PanelMenu.types.d.ts +12 -0
- package/dist/panel-menu/index.d.ts +2 -0
- package/dist/panel-menu/index.js +4 -0
- package/dist/progress-spinner/ProgressSpinner.d.ts +10 -0
- package/dist/progress-spinner/index.d.ts +2 -0
- package/dist/progress-spinner/index.js +4 -0
- package/dist/radio-group/RadioGroup.d.ts +2 -0
- package/dist/radio-group/RadioGroup.types.d.ts +62 -0
- package/dist/radio-group/index.d.ts +2 -0
- package/dist/radio-group/index.js +4 -0
- package/dist/search-field/SearchField.d.ts +2 -0
- package/dist/search-field/SearchField.types.d.ts +26 -0
- package/dist/search-field/index.d.ts +2 -0
- package/dist/search-field/index.js +4 -0
- package/dist/select-field/SelectField.d.ts +14 -0
- package/dist/select-field/SelectField.types.d.ts +11 -0
- package/dist/select-field/index.d.ts +2 -0
- package/dist/select-field/index.js +4 -0
- package/dist/shared/Avatar-D3QlO3Tz.js +59 -0
- package/dist/shared/Badge-WC6my4Aw.js +35 -0
- package/dist/shared/Button-AfMqNCme.js +177 -0
- package/dist/shared/Checkbox-Ci1b59K1.js +134 -0
- package/dist/shared/Combobox-DZ5SgSv6.js +134 -0
- package/dist/shared/DatePicker-BMl0szfL.js +856 -0
- package/dist/shared/DialogFooter-Bg3hz6fh.js +154 -0
- package/dist/shared/DrawerFooter-COA137vD.js +172 -0
- package/dist/shared/HelperText-CVWWvLCI.js +46 -0
- package/dist/shared/IconField-Dh6j6SL1.js +78 -0
- package/dist/shared/InputNumber-D48wsE-o.js +62 -0
- package/dist/shared/Menu-Cv9dU1iA.js +104 -0
- package/dist/shared/PanelMenu-5A9LgcGR.js +123 -0
- package/dist/shared/ProgressSpinner-B-lrS-tu.js +35 -0
- package/dist/shared/RadioGroup-lw27DCoV.js +133 -0
- package/dist/shared/SearchField-CuQ0cXOZ.js +63 -0
- package/dist/shared/SelectField-D6OlgFYy.js +118 -0
- package/dist/shared/Snackbar-C29nLHO9.js +100 -0
- package/dist/shared/Stepper-BGKHXl-b.js +110 -0
- package/dist/shared/Switch-D6E2OmgE.js +104 -0
- package/dist/shared/Tabs-BqIorZYD.js +66 -0
- package/dist/shared/Tag-BtbmgIwL.js +36 -0
- package/dist/shared/Textarea-iJhYTZos.js +40 -0
- package/dist/shared/field-layout-D34MpDMB.js +53 -0
- package/dist/shared/icons-_QeAcImG.js +44 -0
- package/dist/shared/icons.d.ts +11 -0
- package/dist/shared/useMediaQuery.d.ts +5 -0
- package/dist/snackbar/Snackbar.d.ts +3 -0
- package/dist/snackbar/Snackbar.types.d.ts +42 -0
- package/dist/snackbar/index.d.ts +2 -0
- package/dist/snackbar/index.js +5 -0
- package/dist/stepper/Stepper.d.ts +2 -0
- package/dist/stepper/Stepper.types.d.ts +18 -0
- package/dist/stepper/index.d.ts +2 -0
- package/dist/stepper/index.js +4 -0
- package/dist/styles.css +1 -0
- package/dist/switch/Switch.d.ts +2 -0
- package/dist/switch/Switch.types.d.ts +59 -0
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +4 -0
- package/dist/tabs/Tabs.d.ts +10 -0
- package/dist/tabs/Tabs.types.d.ts +7 -0
- package/dist/tabs/index.d.ts +2 -0
- package/dist/tabs/index.js +4 -0
- package/dist/tag/Tag.d.ts +2 -0
- package/dist/tag/Tag.types.d.ts +11 -0
- package/dist/tag/index.d.ts +2 -0
- package/dist/tag/index.js +4 -0
- package/dist/textarea/Textarea.d.ts +2 -0
- package/dist/textarea/Textarea.types.d.ts +15 -0
- package/dist/textarea/index.d.ts +2 -0
- package/dist/textarea/index.js +4 -0
- package/dist/themes/baglioni-resorts.css +1 -0
- package/dist/themes/baglioni.css +1 -0
- package/dist/themes/le-blanc.css +1 -0
- package/dist/themes/palace.css +1 -0
- package/dist/themes/the-palace-company.css +1 -0
- package/dist/vite.config.d.ts +2 -0
- package/package.json +70 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
|
|
2
|
+
export type { AvatarSize } from '@tpc-development/mare-ui-components-core/avatar';
|
|
3
|
+
export interface AvatarProperties {
|
|
4
|
+
/**
|
|
5
|
+
* Image URL. Falls back to the initials derived from `label` while it's
|
|
6
|
+
* loading, missing, or fails to load.
|
|
7
|
+
*/
|
|
8
|
+
image?: string;
|
|
9
|
+
/**
|
|
10
|
+
* `alt` text for the image.
|
|
11
|
+
*/
|
|
12
|
+
alt?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Full name used to derive the fallback initials (e.g. "Tomás Palacio" → "TP").
|
|
15
|
+
*/
|
|
16
|
+
label?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Size variant.
|
|
19
|
+
* @default 'small'
|
|
20
|
+
*/
|
|
21
|
+
size?: AvatarSize;
|
|
22
|
+
/**
|
|
23
|
+
* Unique identifier for the avatar.
|
|
24
|
+
*/
|
|
25
|
+
id?: string;
|
|
26
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BadgeSeverity } from '@tpc-development/mare-ui-components-core/badge';
|
|
3
|
+
export type { BadgeSeverity } from '@tpc-development/mare-ui-components-core/badge';
|
|
4
|
+
export interface BadgeProperties {
|
|
5
|
+
/** @default 'accent' */
|
|
6
|
+
severity?: BadgeSeverity;
|
|
7
|
+
/** Shown next to (or instead of) `children`. */
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
/** The count/label. A bare dot renders when neither this nor `icon` is set. */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { ButtonSeverity, ButtonSize, ButtonVariant, IconPosition } from '@tpc-development/mare-ui-components-core/button';
|
|
3
|
+
export type { ButtonSeverity, ButtonSize, ButtonVariant, IconPosition, } from '@tpc-development/mare-ui-components-core/button';
|
|
4
|
+
type ForwardedNativeProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'children' | 'color'>;
|
|
5
|
+
export interface ButtonProperties extends ForwardedNativeProperties {
|
|
6
|
+
label?: string;
|
|
7
|
+
severity?: ButtonSeverity;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
variant?: ButtonVariant;
|
|
10
|
+
iconOnly?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
link?: boolean;
|
|
14
|
+
linkAnimation?: boolean;
|
|
15
|
+
icon?: ReactNode;
|
|
16
|
+
iconPos?: IconPosition;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { CheckboxSize } from '@tpc-development/mare-ui-components-core/checkbox';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export type { CheckboxSize } from '@tpc-development/mare-ui-components-core/checkbox';
|
|
4
|
+
/**
|
|
5
|
+
* CheckedState can be boolean or 'indeterminate' (Ark's convention).
|
|
6
|
+
*/
|
|
7
|
+
export type CheckedState = boolean | 'indeterminate';
|
|
8
|
+
export interface CheckboxProperties {
|
|
9
|
+
/**
|
|
10
|
+
* The controlled checked state.
|
|
11
|
+
*/
|
|
12
|
+
checked?: CheckedState;
|
|
13
|
+
/**
|
|
14
|
+
* Initial checked state (uncontrolled mode).
|
|
15
|
+
*/
|
|
16
|
+
defaultChecked?: CheckedState;
|
|
17
|
+
/**
|
|
18
|
+
* Handler called when checked state changes.
|
|
19
|
+
*/
|
|
20
|
+
onCheckedChange?: (details: {
|
|
21
|
+
checked: CheckedState;
|
|
22
|
+
}) => void;
|
|
23
|
+
/**
|
|
24
|
+
* The checkbox label (can also use children).
|
|
25
|
+
*/
|
|
26
|
+
children?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Size variant.
|
|
29
|
+
* @default 'small'
|
|
30
|
+
*/
|
|
31
|
+
size?: CheckboxSize;
|
|
32
|
+
/**
|
|
33
|
+
* Disables interaction.
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Marks the checkbox as invalid (red border/background).
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
invalid?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Makes the checkbox read-only.
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
readOnly?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Marks the checkbox as required for form validation.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
required?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* The name attribute for form submission.
|
|
54
|
+
*/
|
|
55
|
+
name?: string;
|
|
56
|
+
/**
|
|
57
|
+
* The value submitted with the form when checked.
|
|
58
|
+
* @default 'on'
|
|
59
|
+
*/
|
|
60
|
+
value?: string;
|
|
61
|
+
/**
|
|
62
|
+
* ID of an associated form element.
|
|
63
|
+
*/
|
|
64
|
+
form?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Unique identifier for the checkbox.
|
|
67
|
+
*/
|
|
68
|
+
id?: string;
|
|
69
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ComboboxProperties, ComboboxOptionItem } from './Combobox.types';
|
|
3
|
+
interface ComboboxReactProperties extends ComboboxProperties {
|
|
4
|
+
value?: string | null;
|
|
5
|
+
onValueChange?: (value: string | null) => void;
|
|
6
|
+
leadingIcon?: ReactNode;
|
|
7
|
+
triggerIcon?: ReactNode;
|
|
8
|
+
checkIcon?: ReactNode;
|
|
9
|
+
clearIcon?: ReactNode;
|
|
10
|
+
renderOption?: (option: ComboboxOptionItem) => ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function Combobox({ value, onValueChange, options, placeholder, searchPlaceholder, size, disabled, invalid, clearable, emptyText, label, leadingIcon, triggerIcon, checkIcon, clearIcon, renderOption, }: ComboboxReactProperties): import("react").JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ComboboxSize, ComboboxOptionItem } from '@tpc-development/mare-ui-components-core/combobox';
|
|
2
|
+
export type { ComboboxSize, ComboboxOptionItem, } from '@tpc-development/mare-ui-components-core/combobox';
|
|
3
|
+
export interface ComboboxProperties {
|
|
4
|
+
options: ComboboxOptionItem[];
|
|
5
|
+
/** Text shown in the trigger when nothing is selected. */
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
/** Placeholder for the search input inside the panel. */
|
|
8
|
+
searchPlaceholder?: string;
|
|
9
|
+
size?: ComboboxSize;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
/** Show a '×' button in the trigger to clear the selected value. */
|
|
13
|
+
clearable?: boolean;
|
|
14
|
+
label?: string;
|
|
15
|
+
emptyText?: string;
|
|
16
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { DatePickerProperties } from './DatePicker.types';
|
|
3
|
+
export declare function DatePicker({ value, onValueChange, selectionMode, size, label, placeholder, disabled, invalid, minDate, maxDate, navigation, doubleMonth, inline, clearable, prices, currency, locale, showTime, timeOnly, showSeconds, footer, leadingIcon, portalContainer, onOpenChange, onVisibleMonthsChange, }: DatePickerProperties): ReactNode;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { DatePickerSelectionMode, DatePickerValue, DatePriceData, InputTextSize } from '@tpc-development/mare-ui-components-core/date-picker';
|
|
3
|
+
export type { DatePickerSelectionMode, DatePickerValue, DatePriceData, InputTextSize, } from '@tpc-development/mare-ui-components-core/date-picker';
|
|
4
|
+
export interface DatePickerProperties {
|
|
5
|
+
value?: DatePickerValue;
|
|
6
|
+
onValueChange?: (value: DatePickerValue) => void;
|
|
7
|
+
selectionMode?: DatePickerSelectionMode;
|
|
8
|
+
size?: InputTextSize;
|
|
9
|
+
label?: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
invalid?: boolean;
|
|
13
|
+
/** Inclusive bounds. Also clamps the time-of-day when `showTime`/`timeOnly`. */
|
|
14
|
+
minDate?: Date;
|
|
15
|
+
maxDate?: Date;
|
|
16
|
+
/** Show prev/next + the clickable month/year view switcher. @default true */
|
|
17
|
+
navigation?: boolean;
|
|
18
|
+
/** Two months side-by-side at/above the `sm` breakpoint. @default false */
|
|
19
|
+
doubleMonth?: boolean;
|
|
20
|
+
/** Render the calendar in normal flow — no field, no floating panel. @default false */
|
|
21
|
+
inline?: boolean;
|
|
22
|
+
/** Show the '×' clear trigger once a value is selected. @default true */
|
|
23
|
+
clearable?: boolean;
|
|
24
|
+
/** Price badge under each day — the booking-calendar use case. */
|
|
25
|
+
prices?: DatePriceData[];
|
|
26
|
+
currency?: string;
|
|
27
|
+
/** BCP 47 tag, e.g. "es-MX". @default "en-US" */
|
|
28
|
+
locale?: string;
|
|
29
|
+
/** Show a native time input under the calendar. @default false */
|
|
30
|
+
showTime?: boolean;
|
|
31
|
+
/** Time-only — the calendar view is hidden, only the time input shows. @default false */
|
|
32
|
+
timeOnly?: boolean;
|
|
33
|
+
showSeconds?: boolean;
|
|
34
|
+
/** Render prop so consumers compose their own Clear/Apply buttons (e.g. Mare's
|
|
35
|
+
* own `<Button>`) instead of Mare hardcoding a footer. */
|
|
36
|
+
footer?: (helpers: {
|
|
37
|
+
close: () => void;
|
|
38
|
+
clear: () => void;
|
|
39
|
+
}) => ReactNode;
|
|
40
|
+
leadingIcon?: ReactNode;
|
|
41
|
+
/** Passed straight through to Ark's `<Portal container>` — see the
|
|
42
|
+
* mare-migrate-component skill's Portal section for why this must be
|
|
43
|
+
* exposed (a single `data-theme` on the document root is the default,
|
|
44
|
+
* correct, common case — this is only for multi-theme layouts). */
|
|
45
|
+
portalContainer?: RefObject<HTMLElement | null>;
|
|
46
|
+
onOpenChange?: (open: boolean) => void;
|
|
47
|
+
/** Fires whenever the visible month(s) change (navigation or open). The Vue
|
|
48
|
+
* DS also had a separate `month-change` event — every real consumer just
|
|
49
|
+
* `console.log`'d both with identical payloads, so this adapter exposes
|
|
50
|
+
* the one Ark already gives us (`onVisibleRangeChange`) instead of two. */
|
|
51
|
+
onVisibleMonthsChange?: (months: Date[]) => void;
|
|
52
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { DialogProperties } from './Dialog.types';
|
|
2
|
+
export declare function Dialog({ open, onOpenChange, size, fullScreen, modal, closeOnEscape, dismissableMask, maskColor, portalContainer, header, footer, children, 'aria-label': ariaLabel, }: DialogProperties): import("react").JSX.Element;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { DialogSize, DialogFooterLayout } from '@tpc-development/mare-ui-components-core/dialog';
|
|
3
|
+
export type { DialogSize, DialogFooterLayout, } from '@tpc-development/mare-ui-components-core/dialog';
|
|
4
|
+
export interface DialogProperties {
|
|
5
|
+
/** Controlled open state. */
|
|
6
|
+
open: boolean;
|
|
7
|
+
/** Change handler — receives the next open state. */
|
|
8
|
+
onOpenChange?: (open: boolean) => void;
|
|
9
|
+
/** Desktop width. Mobile is always full-width regardless. @default 'medium' */
|
|
10
|
+
size?: DialogSize;
|
|
11
|
+
/** Stretches to fill the screen on mobile (no top rounding); barely
|
|
12
|
+
* changes desktop (just max-height, same as the non-fullScreen case).
|
|
13
|
+
* @default false */
|
|
14
|
+
fullScreen?: boolean;
|
|
15
|
+
/** @default true */
|
|
16
|
+
modal?: boolean;
|
|
17
|
+
/** @default true */
|
|
18
|
+
closeOnEscape?: boolean;
|
|
19
|
+
/** Close when clicking the backdrop. @default true */
|
|
20
|
+
dismissableMask?: boolean;
|
|
21
|
+
/** Overrides the backdrop's background class. @default undefined (uses the token overlay color) */
|
|
22
|
+
maskColor?: string;
|
|
23
|
+
/** Where the dialog portals to. Ark defaults to `document.body` — override
|
|
24
|
+
* this if your app scopes `data-theme` (or any other CSS custom property)
|
|
25
|
+
* to a sub-tree rather than the document root, otherwise the portaled
|
|
26
|
+
* dialog renders outside that scope and loses the tokens. */
|
|
27
|
+
portalContainer?: RefObject<HTMLElement | null>;
|
|
28
|
+
/** Typically a `<DialogHeader />`. */
|
|
29
|
+
header?: ReactNode;
|
|
30
|
+
/** Typically a `<DialogFooter>` with action buttons. */
|
|
31
|
+
footer?: ReactNode;
|
|
32
|
+
/** The scrollable body, between header and footer. */
|
|
33
|
+
children?: ReactNode;
|
|
34
|
+
/** Fallback accessible label when no title is rendered in the header. */
|
|
35
|
+
'aria-label'?: string;
|
|
36
|
+
}
|
|
37
|
+
export interface DialogHeaderProperties {
|
|
38
|
+
title?: string;
|
|
39
|
+
/** Closes the dialog on click (matches the legacy DialogHeader: the LEFT
|
|
40
|
+
* icon always closes, regardless of which glyph it shows). @default a close (X) icon */
|
|
41
|
+
leftIcon?: ReactNode;
|
|
42
|
+
/** Does NOT close the dialog on click — wire that yourself if you need it. @default undefined (no button) */
|
|
43
|
+
rightIcon?: ReactNode;
|
|
44
|
+
onLeftIconClick?: () => void;
|
|
45
|
+
onRightIconClick?: () => void;
|
|
46
|
+
/** @default false */
|
|
47
|
+
border?: boolean;
|
|
48
|
+
}
|
|
49
|
+
export interface DialogFooterProperties {
|
|
50
|
+
/** @default 'row' */
|
|
51
|
+
layout?: DialogFooterLayout;
|
|
52
|
+
/** @default false */
|
|
53
|
+
border?: boolean;
|
|
54
|
+
children?: ReactNode;
|
|
55
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { DrawerProperties } from './Drawer.types';
|
|
2
|
+
export declare function Drawer({ open, onOpenChange, position, modal, closeOnEscape, dismissableMask, maskColor, shadow, portalContainer, header, footer, children, 'aria-label': ariaLabel, }: DrawerProperties): import("react").JSX.Element;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { DrawerPosition } from '@tpc-development/mare-ui-components-core/drawer';
|
|
3
|
+
export type { DrawerPosition } from '@tpc-development/mare-ui-components-core/drawer';
|
|
4
|
+
export interface DrawerProperties {
|
|
5
|
+
/** Controlled open state. */
|
|
6
|
+
open: boolean;
|
|
7
|
+
/** Change handler — receives the next open state. */
|
|
8
|
+
onOpenChange?: (open: boolean) => void;
|
|
9
|
+
/** Which edge the panel docks to and slides in from. @default 'left' */
|
|
10
|
+
position?: DrawerPosition;
|
|
11
|
+
/** @default true */
|
|
12
|
+
modal?: boolean;
|
|
13
|
+
/** @default true */
|
|
14
|
+
closeOnEscape?: boolean;
|
|
15
|
+
/** Close when clicking the backdrop. @default true */
|
|
16
|
+
dismissableMask?: boolean;
|
|
17
|
+
/** Overrides the backdrop's background class. @default undefined (uses the token overlay color) */
|
|
18
|
+
maskColor?: string;
|
|
19
|
+
/** @default true */
|
|
20
|
+
shadow?: boolean;
|
|
21
|
+
/** Where the drawer portals to. Ark defaults to `document.body` — override
|
|
22
|
+
* this if your app scopes `data-theme` (or any other CSS custom property)
|
|
23
|
+
* to a sub-tree rather than the document root, otherwise the portaled
|
|
24
|
+
* drawer renders outside that scope and loses the tokens. */
|
|
25
|
+
portalContainer?: RefObject<HTMLElement | null>;
|
|
26
|
+
/** Typically a `<DrawerHeader />`. */
|
|
27
|
+
header?: ReactNode;
|
|
28
|
+
/** Typically a `<DrawerFooter>` with action buttons. */
|
|
29
|
+
footer?: ReactNode;
|
|
30
|
+
/** The scrollable body, between header and footer. */
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
/** Fallback accessible label when no title is rendered in the header. */
|
|
33
|
+
'aria-label'?: string;
|
|
34
|
+
}
|
|
35
|
+
export interface DrawerHeaderProperties {
|
|
36
|
+
title?: string;
|
|
37
|
+
/** Closes the drawer on click (matches the legacy header: the LEFT icon
|
|
38
|
+
* always closes, regardless of which glyph it shows). @default a close (X) icon */
|
|
39
|
+
leftIcon?: ReactNode;
|
|
40
|
+
/** Does NOT close the drawer on click — wire that yourself if you need it. @default undefined (no button) */
|
|
41
|
+
rightIcon?: ReactNode;
|
|
42
|
+
onLeftIconClick?: () => void;
|
|
43
|
+
onRightIconClick?: () => void;
|
|
44
|
+
/** @default false */
|
|
45
|
+
border?: boolean;
|
|
46
|
+
/** Shorter header, smaller inline padding — legacy's "slim" variant. @default false */
|
|
47
|
+
compact?: boolean;
|
|
48
|
+
}
|
|
49
|
+
export interface DrawerFooterProperties {
|
|
50
|
+
/** @default false */
|
|
51
|
+
border?: boolean;
|
|
52
|
+
children?: ReactNode;
|
|
53
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export { Avatar } from '../avatar';
|
|
2
|
+
export type { AvatarProperties, AvatarSize } from '../avatar';
|
|
3
|
+
export { Badge } from '../badge';
|
|
4
|
+
export type { BadgeProperties, BadgeSeverity } from '../badge';
|
|
5
|
+
export { Tag } from '../tag';
|
|
6
|
+
export type { TagProperties, TagSeverity, TagSize } from '../tag';
|
|
7
|
+
export { Button } from '../button';
|
|
8
|
+
export type { ButtonProperties, ButtonSeverity, ButtonSize, ButtonVariant, IconPosition, } from '../button';
|
|
9
|
+
export { SelectField } from '../select-field';
|
|
10
|
+
export type { SelectFieldProperties, SelectFieldSize, SelectOptionItem, } from '../select-field';
|
|
11
|
+
export { Combobox } from '../combobox';
|
|
12
|
+
export type { ComboboxProperties, ComboboxSize, ComboboxOptionItem, } from '../combobox';
|
|
13
|
+
export { Tabs } from '../tabs';
|
|
14
|
+
export type { TabsProperties, TabItem, TabSize } from '../tabs';
|
|
15
|
+
export { ProgressSpinner } from '../progress-spinner';
|
|
16
|
+
export type { ProgressSpinnerProperties } from '../progress-spinner';
|
|
17
|
+
export { InputText, CharacterCount, FormField, FloatLabel, IconField, HelperText, } from '../input-text';
|
|
18
|
+
export type { InputTextProperties, InputTextSize, CharacterCountProperties, } from '../input-text';
|
|
19
|
+
export { Textarea } from '../textarea';
|
|
20
|
+
export type { TextareaProperties } from '../textarea';
|
|
21
|
+
export { SearchField } from '../search-field';
|
|
22
|
+
export type { SearchFieldProperties } from '../search-field';
|
|
23
|
+
export { InputNumber } from '../input-number';
|
|
24
|
+
export type { InputNumberProperties, InputNumberSize, } from '../input-number';
|
|
25
|
+
export { Checkbox } from '../checkbox';
|
|
26
|
+
export type { CheckboxProperties, CheckboxSize, CheckedState, } from '../checkbox';
|
|
27
|
+
export { RadioGroup } from '../radio-group';
|
|
28
|
+
export type { RadioGroupProperties, RadioGroupSize, RadioGroupOrientation, RadioOptionItem, } from '../radio-group';
|
|
29
|
+
export { Switch } from '../switch';
|
|
30
|
+
export type { SwitchProperties, SwitchSize } from '../switch';
|
|
31
|
+
export { Dialog, DialogHeader, DialogFooter } from '../dialog';
|
|
32
|
+
export type { DialogProperties, DialogSize, DialogHeaderProperties, DialogFooterProperties, DialogFooterLayout, } from '../dialog';
|
|
33
|
+
export { Drawer, DrawerHeader, DrawerFooter } from '../drawer';
|
|
34
|
+
export type { DrawerProperties, DrawerPosition, DrawerHeaderProperties, DrawerFooterProperties, } from '../drawer';
|
|
35
|
+
export { Menu } from '../menu';
|
|
36
|
+
export type { MenuProperties, MenuItemData, MenuSeparatorEntry, MenuGroupEntry, MenuEntry, } from '../menu';
|
|
37
|
+
export { PanelMenu } from '../panel-menu';
|
|
38
|
+
export type { PanelMenuProperties, PanelMenuItemData, } from '../panel-menu';
|
|
39
|
+
export { Snackbar, createSnackbar } from '../snackbar';
|
|
40
|
+
export type { SnackbarProperties, SnackbarController, SnackbarConfig, SnackbarShowOptions, SnackbarSeverity, SnackbarPlacement, } from '../snackbar';
|
|
41
|
+
export { Stepper } from '../stepper';
|
|
42
|
+
export type { StepperProperties, StepItemData, StepperOrientation, StepperIndicatorVariant, } from '../stepper';
|
|
43
|
+
export { DatePicker } from '../date-picker';
|
|
44
|
+
export type { DatePickerProperties, DatePickerSelectionMode, DatePickerValue, DatePriceData, } from '../date-picker';
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { A as a } from "../shared/Avatar-D3QlO3Tz.js";
|
|
2
|
+
import { B as t } from "../shared/Badge-WC6my4Aw.js";
|
|
3
|
+
import { T as p } from "../shared/Tag-BtbmgIwL.js";
|
|
4
|
+
import { B as m } from "../shared/Button-AfMqNCme.js";
|
|
5
|
+
import { S as l } from "../shared/SelectField-D6OlgFYy.js";
|
|
6
|
+
import { C as S } from "../shared/Combobox-DZ5SgSv6.js";
|
|
7
|
+
import { T as i } from "../shared/Tabs-BqIorZYD.js";
|
|
8
|
+
import { P as D } from "../shared/ProgressSpinner-B-lrS-tu.js";
|
|
9
|
+
import { I as d, a as u } from "../shared/IconField-Dh6j6SL1.js";
|
|
10
|
+
import { C, F as g, a as I, H as P } from "../shared/HelperText-CVWWvLCI.js";
|
|
11
|
+
import { T as k } from "../shared/Textarea-iJhYTZos.js";
|
|
12
|
+
import { S as B } from "../shared/SearchField-CuQ0cXOZ.js";
|
|
13
|
+
import { I as M } from "../shared/InputNumber-D48wsE-o.js";
|
|
14
|
+
import { C as R } from "../shared/Checkbox-Ci1b59K1.js";
|
|
15
|
+
import { R as G } from "../shared/RadioGroup-lw27DCoV.js";
|
|
16
|
+
import { S as N } from "../shared/Switch-D6E2OmgE.js";
|
|
17
|
+
import { D as q, a as y, b as z } from "../shared/DialogFooter-Bg3hz6fh.js";
|
|
18
|
+
import { D as J, a as K, b as O } from "../shared/DrawerFooter-COA137vD.js";
|
|
19
|
+
import { M as U } from "../shared/Menu-Cv9dU1iA.js";
|
|
20
|
+
import { P as W } from "../shared/PanelMenu-5A9LgcGR.js";
|
|
21
|
+
import { S as Y, c as Z } from "../shared/Snackbar-C29nLHO9.js";
|
|
22
|
+
import { S as $ } from "../shared/Stepper-BGKHXl-b.js";
|
|
23
|
+
import { D as or } from "../shared/DatePicker-BMl0szfL.js";
|
|
24
|
+
export {
|
|
25
|
+
a as Avatar,
|
|
26
|
+
t as Badge,
|
|
27
|
+
m as Button,
|
|
28
|
+
C as CharacterCount,
|
|
29
|
+
R as Checkbox,
|
|
30
|
+
S as Combobox,
|
|
31
|
+
or as DatePicker,
|
|
32
|
+
q as Dialog,
|
|
33
|
+
y as DialogFooter,
|
|
34
|
+
z as DialogHeader,
|
|
35
|
+
J as Drawer,
|
|
36
|
+
K as DrawerFooter,
|
|
37
|
+
O as DrawerHeader,
|
|
38
|
+
g as FloatLabel,
|
|
39
|
+
I as FormField,
|
|
40
|
+
P as HelperText,
|
|
41
|
+
d as IconField,
|
|
42
|
+
M as InputNumber,
|
|
43
|
+
u as InputText,
|
|
44
|
+
U as Menu,
|
|
45
|
+
W as PanelMenu,
|
|
46
|
+
D as ProgressSpinner,
|
|
47
|
+
G as RadioGroup,
|
|
48
|
+
B as SearchField,
|
|
49
|
+
l as SelectField,
|
|
50
|
+
Y as Snackbar,
|
|
51
|
+
$ as Stepper,
|
|
52
|
+
N as Switch,
|
|
53
|
+
i as Tabs,
|
|
54
|
+
p as Tag,
|
|
55
|
+
k as Textarea,
|
|
56
|
+
Z as createSnackbar
|
|
57
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { InputNumberProperties } from './InputNumber.types';
|
|
2
|
+
export declare function InputNumber({ value, onValueChange, size, rounded, invalid, disabled, readOnly, step, clampValueOnBlur, placeholder, id, name, min, max, formatOptions, locale, allowMouseWheel, }: InputNumberProperties): import("react").JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { InputNumberSize } from '@tpc-development/mare-ui-components-core/input-number';
|
|
2
|
+
export type { InputNumberSize } from '@tpc-development/mare-ui-components-core/input-number';
|
|
3
|
+
export interface InputNumberProperties {
|
|
4
|
+
/** Controlled numeric value. `null` when the field is empty. */
|
|
5
|
+
value?: number | null;
|
|
6
|
+
/** Change handler — receives the next number, or `null` when cleared. */
|
|
7
|
+
onValueChange?: (value: number | null) => void;
|
|
8
|
+
size?: InputNumberSize;
|
|
9
|
+
rounded?: boolean;
|
|
10
|
+
invalid?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
readOnly?: boolean;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
id?: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
/** Minimum allowed value. */
|
|
17
|
+
min?: number;
|
|
18
|
+
/** Maximum allowed value. */
|
|
19
|
+
max?: number;
|
|
20
|
+
/** Step for keyboard/scrub increments. @default 1 */
|
|
21
|
+
step?: number;
|
|
22
|
+
/** Intl.NumberFormat options — currency, percent, unit, decimals, grouping. */
|
|
23
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
24
|
+
/** BCP 47 locale used for formatting/parsing. */
|
|
25
|
+
locale?: string;
|
|
26
|
+
/** Increment/decrement the value with the mouse wheel while focused. */
|
|
27
|
+
allowMouseWheel?: boolean;
|
|
28
|
+
/** Clamp the value to min/max when the field loses focus. @default true */
|
|
29
|
+
clampValueOnBlur?: boolean;
|
|
30
|
+
}
|