@qasa/qds-ui 0.10.0-next.9 → 0.10.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/cjs/index.js +1322 -1322
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/_internal/form-parts.d.ts +3 -3
- package/dist/cjs/types/components/avatar/avatar.d.ts +3 -2
- package/dist/cjs/types/components/button/button-icon.d.ts +1 -1
- package/dist/cjs/types/components/button/button-styles.d.ts +4 -2
- package/dist/cjs/types/components/button/button-types.d.ts +2 -1
- package/dist/cjs/types/components/button/button.d.ts +2 -2
- package/dist/cjs/types/components/checkbox/checkbox.d.ts +9 -1
- package/dist/cjs/types/components/display-text/display-text.d.ts +7 -6
- package/dist/cjs/types/components/dropdown-menu/dropdown-menu-content.d.ts +1 -1
- package/dist/cjs/types/components/dropdown-menu/dropdown-menu-divider.d.ts +2 -2
- package/dist/cjs/types/components/dropdown-menu/dropdown-menu-trigger.d.ts +2 -2
- package/dist/cjs/types/components/dropdown-menu/dropdown-menu.d.ts +3 -3
- package/dist/cjs/types/components/heading/heading.d.ts +6 -5
- package/dist/cjs/types/components/hint-box/hint-box.d.ts +4 -4
- package/dist/cjs/types/components/icon/icon.types.d.ts +3 -3
- package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts +2 -0
- package/dist/cjs/types/components/icon-button/icon-button.d.ts +6 -5
- package/dist/cjs/types/components/index.d.ts +2 -0
- package/dist/cjs/types/components/label/label.d.ts +11 -9
- package/dist/cjs/types/components/link/link.d.ts +2 -2
- package/dist/cjs/types/components/loading-dots/loading-dots.d.ts +4 -2
- package/dist/cjs/types/components/paragraph/paragraph.d.ts +11 -6
- package/dist/cjs/types/components/primitives/input-base/input-base.d.ts +1 -1
- package/dist/cjs/types/components/primitives/select-base/select-base.d.ts +1 -1
- package/dist/cjs/types/components/primitives/textarea-base/textarea-base.d.ts +3 -3
- package/dist/cjs/types/components/radio-group/radio-group-context.d.ts +1 -1
- package/dist/cjs/types/components/radio-group/radio-group-label.d.ts +2 -2
- package/dist/cjs/types/components/radio-group/radio-group.d.ts +1 -1
- package/dist/cjs/types/components/radio-group/radio-indicator.d.ts +1 -1
- package/dist/cjs/types/components/select/select-option.d.ts +1 -1
- package/dist/cjs/types/components/select/select.d.ts +1 -1
- package/dist/cjs/types/components/spacer/spacer.d.ts +2 -1
- package/dist/cjs/types/components/stack/stack.d.ts +6 -5
- package/dist/cjs/types/components/stack/stack.types.d.ts +4 -4
- package/dist/cjs/types/components/switch/index.d.ts +1 -0
- package/dist/cjs/types/components/switch/switch.d.ts +35 -0
- package/dist/cjs/types/components/text-field/text-field.d.ts +1 -1
- package/dist/cjs/types/components/textarea/textarea.d.ts +1 -1
- package/dist/cjs/types/components/toast/toast-provider.d.ts +1 -1
- package/dist/cjs/types/components/toast/toast-store.d.ts +2 -2
- package/dist/cjs/types/components/toast/toast-styles.d.ts +2 -1
- package/dist/cjs/types/components/toast/toast.d.ts +2 -3
- package/dist/cjs/types/hooks/use-breakpoint-value.d.ts +3 -3
- package/dist/cjs/types/hooks/use-form-field.d.ts +4 -4
- package/dist/cjs/types/hooks/use-image.d.ts +1 -1
- package/dist/cjs/types/hooks/use-responsive-prop.d.ts +16 -0
- package/dist/cjs/types/i18n/locale-context.d.ts +1 -1
- package/dist/cjs/types/i18n/locales.d.ts +1 -1
- package/dist/cjs/types/i18n/use-translation.d.ts +1 -1
- package/dist/cjs/types/qds-provider.d.ts +1 -1
- package/dist/cjs/types/styles/common-styles.d.ts +1 -0
- package/dist/cjs/types/styles/css-reset.d.ts +1 -2
- package/dist/cjs/types/styles/css-utils.d.ts +3 -3
- package/dist/cjs/types/styles/global-styles.d.ts +1 -2
- package/dist/cjs/types/theme/foundations/index.d.ts +1 -0
- package/dist/cjs/types/theme/foundations/radius.d.ts +3 -1
- package/dist/cjs/types/theme/theme-tools.d.ts +3 -2
- package/dist/cjs/types/theme/theme.d.ts +2 -1
- package/dist/cjs/types/types.d.ts +4 -4
- package/dist/cjs/types/utils/html-attributes.d.ts +1 -1
- package/dist/cjs/types/utils/merge-refs.d.ts +2 -2
- package/dist/cjs/types/utils/polymorphic.d.ts +4 -4
- package/dist/esm/index.js +1322 -1322
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/_internal/form-parts.d.ts +3 -3
- package/dist/esm/types/components/avatar/avatar.d.ts +3 -2
- package/dist/esm/types/components/button/button-icon.d.ts +1 -1
- package/dist/esm/types/components/button/button-styles.d.ts +4 -2
- package/dist/esm/types/components/button/button-types.d.ts +2 -1
- package/dist/esm/types/components/button/button.d.ts +2 -2
- package/dist/esm/types/components/checkbox/checkbox.d.ts +9 -1
- package/dist/esm/types/components/display-text/display-text.d.ts +7 -6
- package/dist/esm/types/components/dropdown-menu/dropdown-menu-content.d.ts +1 -1
- package/dist/esm/types/components/dropdown-menu/dropdown-menu-divider.d.ts +2 -2
- package/dist/esm/types/components/dropdown-menu/dropdown-menu-trigger.d.ts +2 -2
- package/dist/esm/types/components/dropdown-menu/dropdown-menu.d.ts +3 -3
- package/dist/esm/types/components/heading/heading.d.ts +6 -5
- package/dist/esm/types/components/hint-box/hint-box.d.ts +4 -4
- package/dist/esm/types/components/icon/icon.types.d.ts +3 -3
- package/dist/esm/types/components/icon-button/icon-button-styles.d.ts +2 -0
- package/dist/esm/types/components/icon-button/icon-button.d.ts +6 -5
- package/dist/esm/types/components/index.d.ts +2 -0
- package/dist/esm/types/components/label/label.d.ts +11 -9
- package/dist/esm/types/components/link/link.d.ts +2 -2
- package/dist/esm/types/components/loading-dots/loading-dots.d.ts +4 -2
- package/dist/esm/types/components/paragraph/paragraph.d.ts +11 -6
- package/dist/esm/types/components/primitives/input-base/input-base.d.ts +1 -1
- package/dist/esm/types/components/primitives/select-base/select-base.d.ts +1 -1
- package/dist/esm/types/components/primitives/textarea-base/textarea-base.d.ts +3 -3
- package/dist/esm/types/components/radio-group/radio-group-context.d.ts +1 -1
- package/dist/esm/types/components/radio-group/radio-group-label.d.ts +2 -2
- package/dist/esm/types/components/radio-group/radio-group.d.ts +1 -1
- package/dist/esm/types/components/radio-group/radio-indicator.d.ts +1 -1
- package/dist/esm/types/components/select/select-option.d.ts +1 -1
- package/dist/esm/types/components/select/select.d.ts +1 -1
- package/dist/esm/types/components/spacer/spacer.d.ts +2 -1
- package/dist/esm/types/components/stack/stack.d.ts +6 -5
- package/dist/esm/types/components/stack/stack.types.d.ts +4 -4
- package/dist/esm/types/components/switch/index.d.ts +1 -0
- package/dist/esm/types/components/switch/switch.d.ts +35 -0
- package/dist/esm/types/components/text-field/text-field.d.ts +1 -1
- package/dist/esm/types/components/textarea/textarea.d.ts +1 -1
- package/dist/esm/types/components/toast/toast-provider.d.ts +1 -1
- package/dist/esm/types/components/toast/toast-store.d.ts +2 -2
- package/dist/esm/types/components/toast/toast-styles.d.ts +2 -1
- package/dist/esm/types/components/toast/toast.d.ts +2 -3
- package/dist/esm/types/hooks/use-breakpoint-value.d.ts +3 -3
- package/dist/esm/types/hooks/use-form-field.d.ts +4 -4
- package/dist/esm/types/hooks/use-image.d.ts +1 -1
- package/dist/esm/types/hooks/use-responsive-prop.d.ts +16 -0
- package/dist/esm/types/i18n/locale-context.d.ts +1 -1
- package/dist/esm/types/i18n/locales.d.ts +1 -1
- package/dist/esm/types/i18n/use-translation.d.ts +1 -1
- package/dist/esm/types/qds-provider.d.ts +1 -1
- package/dist/esm/types/styles/common-styles.d.ts +1 -0
- package/dist/esm/types/styles/css-reset.d.ts +1 -2
- package/dist/esm/types/styles/css-utils.d.ts +3 -3
- package/dist/esm/types/styles/global-styles.d.ts +1 -2
- package/dist/esm/types/theme/foundations/index.d.ts +1 -0
- package/dist/esm/types/theme/foundations/radius.d.ts +3 -1
- package/dist/esm/types/theme/theme-tools.d.ts +3 -2
- package/dist/esm/types/theme/theme.d.ts +2 -1
- package/dist/esm/types/types.d.ts +4 -4
- package/dist/esm/types/utils/html-attributes.d.ts +1 -1
- package/dist/esm/types/utils/merge-refs.d.ts +2 -2
- package/dist/esm/types/utils/polymorphic.d.ts +4 -4
- package/dist/index.d.ts +187 -98
- package/package.json +22 -24
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { PropsWithChildren } from 'react';
|
|
2
|
-
export declare function FormField({ children }: PropsWithChildren): JSX.Element;
|
|
2
|
+
export declare function FormField({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare const ErrorMessage: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
6
6
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
7
7
|
export declare const HelperText: import("@emotion/styled").StyledComponent<{
|
|
8
8
|
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
-
as?: import("react").ElementType<any> | undefined;
|
|
9
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
10
10
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { HTMLQdsProps } from '../../types';
|
|
3
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
3
4
|
declare const SIZE_MAP: {
|
|
4
5
|
xs: number;
|
|
5
6
|
sm: number;
|
|
@@ -8,7 +9,7 @@ declare const SIZE_MAP: {
|
|
|
8
9
|
xl: number;
|
|
9
10
|
'2xl': number;
|
|
10
11
|
};
|
|
11
|
-
|
|
12
|
+
type AvatarSize = keyof typeof SIZE_MAP;
|
|
12
13
|
interface AvatarOptions {
|
|
13
14
|
/**
|
|
14
15
|
* Source url of the image to display. If not passed
|
|
@@ -23,7 +24,7 @@ interface AvatarOptions {
|
|
|
23
24
|
* Size of the avatar
|
|
24
25
|
* @default 'md'
|
|
25
26
|
*/
|
|
26
|
-
size?: AvatarSize
|
|
27
|
+
size?: ResponsiveProp<AvatarSize>;
|
|
27
28
|
}
|
|
28
29
|
export interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
|
|
29
30
|
}
|
|
@@ -6,5 +6,5 @@ interface ButtonIconProps {
|
|
|
6
6
|
icon: ElementType<IconProps>;
|
|
7
7
|
placement: 'left' | 'right';
|
|
8
8
|
}
|
|
9
|
-
export declare function ButtonIcon({ buttonSize, icon: Icon, placement }: ButtonIconProps): JSX.Element;
|
|
9
|
+
export declare function ButtonIcon({ buttonSize, icon: Icon, placement }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -199,6 +199,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
199
199
|
md: string;
|
|
200
200
|
lg: string;
|
|
201
201
|
xl: string;
|
|
202
|
+
'2xl': string;
|
|
202
203
|
full: string;
|
|
203
204
|
};
|
|
204
205
|
shadows: {
|
|
@@ -449,7 +450,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
449
450
|
paddingRight: string;
|
|
450
451
|
};
|
|
451
452
|
};
|
|
452
|
-
export
|
|
453
|
+
export type ButtonSize = VariantProps<typeof getSizeStyles>;
|
|
453
454
|
export declare const getVariantStyles: (theme: {
|
|
454
455
|
mediaQueries: {
|
|
455
456
|
readonly smUp: "@media(min-width: 480px)";
|
|
@@ -650,6 +651,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
650
651
|
md: string;
|
|
651
652
|
lg: string;
|
|
652
653
|
xl: string;
|
|
654
|
+
'2xl': string;
|
|
653
655
|
full: string;
|
|
654
656
|
};
|
|
655
657
|
shadows: {
|
|
@@ -892,4 +894,4 @@ export declare const getVariantStyles: (theme: {
|
|
|
892
894
|
};
|
|
893
895
|
};
|
|
894
896
|
};
|
|
895
|
-
export
|
|
897
|
+
export type ButtonVariant = VariantProps<typeof getVariantStyles>;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import type { ElementType } from 'react';
|
|
2
2
|
import type { IconProps } from '../icon';
|
|
3
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
3
4
|
import type { ButtonSize, ButtonVariant } from './button-styles';
|
|
4
5
|
export interface ButtonOptions {
|
|
5
6
|
/**
|
|
6
7
|
* Sets the size of the button
|
|
7
8
|
* @default 'md'
|
|
8
9
|
*/
|
|
9
|
-
size?: ButtonSize
|
|
10
|
+
size?: ResponsiveProp<ButtonSize>;
|
|
10
11
|
/**
|
|
11
12
|
* Sets the style variant of the button
|
|
12
13
|
* @default 'secondary'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
2
2
|
import type { ButtonOptions } from './button-types';
|
|
3
|
-
|
|
4
|
-
export
|
|
3
|
+
type PolymorphicButton = Polymorphic.ForwardRefComponent<'button', ButtonOptions>;
|
|
4
|
+
export type ButtonProps = Polymorphic.PropsOf<PolymorphicButton>;
|
|
5
5
|
export declare const Button: PolymorphicButton;
|
|
6
6
|
export {};
|
|
@@ -21,6 +21,10 @@ interface CheckboxOptions {
|
|
|
21
21
|
* ```
|
|
22
22
|
*/
|
|
23
23
|
label: string | ReactElement<unknown>;
|
|
24
|
+
/**
|
|
25
|
+
* Text that provides additional guidance to the user
|
|
26
|
+
*/
|
|
27
|
+
helperText?: string;
|
|
24
28
|
/**
|
|
25
29
|
* The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
|
|
26
30
|
*/
|
|
@@ -46,6 +50,10 @@ interface CheckboxOptions {
|
|
|
46
50
|
* @default false
|
|
47
51
|
*/
|
|
48
52
|
isInvalid?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* The error message to display if `isInvalid` is `true`
|
|
55
|
+
*/
|
|
56
|
+
errorMessage?: string;
|
|
49
57
|
/**
|
|
50
58
|
* If `true` it prevents the user from interacting with the checkbox.
|
|
51
59
|
* @default false
|
|
@@ -65,6 +73,6 @@ interface CheckboxOptions {
|
|
|
65
73
|
*/
|
|
66
74
|
value?: string;
|
|
67
75
|
}
|
|
68
|
-
export
|
|
76
|
+
export type CheckboxProps = Omit<CheckboxPrimitive.CheckboxProps, 'asChild' | 'children' | 'checked' | 'defaultChecked' | keyof CheckboxOptions> & CheckboxOptions;
|
|
69
77
|
export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps, "children" | "asChild" | keyof CheckboxOptions> & CheckboxOptions & import("react").RefAttributes<HTMLButtonElement>>;
|
|
70
78
|
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
2
2
|
import type { Theme } from '../../theme';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
|
+
type DisplaySize = keyof Theme['typography']['display'];
|
|
5
|
+
type DisplayTextAlign = 'left' | 'center' | 'right';
|
|
6
|
+
type DisplayTextWrap = 'pretty' | 'balance' | 'wrap' | 'nowrap' | 'stable';
|
|
6
7
|
interface DisplayTextOptions {
|
|
7
8
|
/**
|
|
8
9
|
* Sets the visual size of the display text.
|
|
@@ -10,7 +11,7 @@ interface DisplayTextOptions {
|
|
|
10
11
|
*
|
|
11
12
|
* @default 'md'
|
|
12
13
|
*/
|
|
13
|
-
size?: DisplaySize
|
|
14
|
+
size?: ResponsiveProp<DisplaySize>;
|
|
14
15
|
/**
|
|
15
16
|
* Sets the text alignment
|
|
16
17
|
* @default 'left'
|
|
@@ -23,7 +24,7 @@ interface DisplayTextOptions {
|
|
|
23
24
|
*/
|
|
24
25
|
textWrap?: DisplayTextWrap;
|
|
25
26
|
}
|
|
26
|
-
|
|
27
|
-
export
|
|
27
|
+
type DisplayTextComponent = Polymorphic.ForwardRefComponent<'h2', DisplayTextOptions>;
|
|
28
|
+
export type DisplayTextProps = Polymorphic.PropsOf<DisplayTextComponent>;
|
|
28
29
|
export declare const DisplayText: DisplayTextComponent;
|
|
29
30
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
|
|
3
3
|
import type { HTMLQdsProps } from '../../types';
|
|
4
|
-
|
|
4
|
+
type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
|
|
5
5
|
interface DropdownMenuContentOptions {
|
|
6
6
|
/**
|
|
7
7
|
* Event handler called when focus moves to the trigger after closing.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { HTMLQdsProps } from '../../types';
|
|
3
|
-
export
|
|
4
|
-
export declare const DropdownMenuDivider: import("react").ForwardRefExoticComponent<
|
|
3
|
+
export type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
|
|
4
|
+
export declare const DropdownMenuDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type DropdownTriggerComponent = Polymorphic.ForwardRefComponent<'button'>;
|
|
3
|
+
export type DropdownMenuTriggerProps = Polymorphic.PropsOf<DropdownTriggerComponent>;
|
|
4
4
|
export declare const DropdownMenuTrigger: DropdownTriggerComponent;
|
|
5
5
|
export {};
|
|
@@ -19,11 +19,11 @@ interface DropdownMenuRootProps {
|
|
|
19
19
|
*/
|
|
20
20
|
onOpenChange?: (isOpen: boolean) => void;
|
|
21
21
|
}
|
|
22
|
-
declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
|
|
22
|
+
declare function DropdownMenuRoot(props: DropdownMenuRootProps): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export declare const DropdownMenu: typeof DropdownMenuRoot & {
|
|
24
|
-
Trigger: import("
|
|
24
|
+
Trigger: import("../..").ForwardRefComponent<"button", {}>;
|
|
25
25
|
Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
26
26
|
Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
27
|
-
Divider: import("react").ForwardRefExoticComponent<
|
|
27
|
+
Divider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
28
28
|
};
|
|
29
29
|
export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps, };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
2
2
|
import type { Theme } from '../../theme';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
|
+
type HeadingSize = keyof Theme['typography']['title'];
|
|
5
|
+
type HeadingColor = keyof Theme['colors']['text'];
|
|
5
6
|
interface HeadingOptions {
|
|
6
7
|
/**
|
|
7
8
|
* Sets the visual size of the heading.
|
|
@@ -9,7 +10,7 @@ interface HeadingOptions {
|
|
|
9
10
|
*
|
|
10
11
|
* @default 'md'
|
|
11
12
|
*/
|
|
12
|
-
size?: HeadingSize
|
|
13
|
+
size?: ResponsiveProp<HeadingSize>;
|
|
13
14
|
/**
|
|
14
15
|
* Sets the color of the heading
|
|
15
16
|
* @default 'default'
|
|
@@ -25,7 +26,7 @@ interface HeadingOptions {
|
|
|
25
26
|
*/
|
|
26
27
|
textAlign?: 'left' | 'center' | 'right';
|
|
27
28
|
}
|
|
28
|
-
|
|
29
|
-
export
|
|
29
|
+
type HeadingComponent = Polymorphic.ForwardRefComponent<'h2', HeadingOptions>;
|
|
30
|
+
export type HeadingProps = Polymorphic.PropsOf<HeadingComponent>;
|
|
30
31
|
export declare const Heading: HeadingComponent;
|
|
31
32
|
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { HTMLQdsProps } from '../../types';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export declare const HintBox: import("react").ForwardRefExoticComponent<
|
|
3
|
+
export type HintBoxTitleProps = HTMLQdsProps<'span'>;
|
|
4
|
+
export type HintBoxProps = HTMLQdsProps<'aside'>;
|
|
5
|
+
export declare const HintBox: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>> & {
|
|
6
6
|
Title: import("@emotion/styled").StyledComponent<{
|
|
7
7
|
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
-
as?: import("react").ElementType<any> | undefined;
|
|
8
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
9
9
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
10
10
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SVGAttributes } from 'react';
|
|
2
2
|
import type { Theme } from '../../theme';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
type IconSize = 16 | 20 | 24 | 32;
|
|
4
|
+
type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
|
|
5
5
|
export interface IconOptions {
|
|
6
6
|
/**
|
|
7
7
|
* The size of the icon.
|
|
@@ -16,7 +16,7 @@ export interface IconOptions {
|
|
|
16
16
|
*/
|
|
17
17
|
color?: IconColor;
|
|
18
18
|
}
|
|
19
|
-
|
|
19
|
+
type OmittedProps = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
|
|
20
20
|
export interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps>, IconOptions {
|
|
21
21
|
}
|
|
22
22
|
export {};
|
|
@@ -198,6 +198,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
198
198
|
md: string;
|
|
199
199
|
lg: string;
|
|
200
200
|
xl: string;
|
|
201
|
+
'2xl': string;
|
|
201
202
|
full: string;
|
|
202
203
|
};
|
|
203
204
|
shadows: {
|
|
@@ -610,6 +611,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
610
611
|
md: string;
|
|
611
612
|
lg: string;
|
|
612
613
|
xl: string;
|
|
614
|
+
'2xl': string;
|
|
613
615
|
full: string;
|
|
614
616
|
};
|
|
615
617
|
shadows: {
|
|
@@ -2,9 +2,10 @@ import type { ElementType } from 'react';
|
|
|
2
2
|
import type { VariantProps } from '../../styles';
|
|
3
3
|
import type { IconProps } from '../icon';
|
|
4
4
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
5
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
5
6
|
import { getSizeStyles, getVariantStyles } from './icon-button-styles';
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
type IconButtonSize = VariantProps<typeof getSizeStyles>;
|
|
8
|
+
type IconButtonVariant = VariantProps<typeof getVariantStyles>;
|
|
8
9
|
interface IconButtonOptions {
|
|
9
10
|
icon: ElementType<IconProps>;
|
|
10
11
|
/**
|
|
@@ -15,7 +16,7 @@ interface IconButtonOptions {
|
|
|
15
16
|
/**
|
|
16
17
|
* Defines the size of the button
|
|
17
18
|
*/
|
|
18
|
-
size?: IconButtonSize
|
|
19
|
+
size?: ResponsiveProp<IconButtonSize>;
|
|
19
20
|
/**
|
|
20
21
|
* Sets the style variant of the button
|
|
21
22
|
*/
|
|
@@ -25,7 +26,7 @@ interface IconButtonOptions {
|
|
|
25
26
|
*/
|
|
26
27
|
isDisabled?: boolean;
|
|
27
28
|
}
|
|
28
|
-
|
|
29
|
-
export
|
|
29
|
+
type IconButtonComponent = Polymorphic.ForwardRefComponent<'button', IconButtonOptions>;
|
|
30
|
+
export type IconButtonProps = Polymorphic.PropsOf<IconButtonComponent>;
|
|
30
31
|
export declare const IconButton: IconButtonComponent;
|
|
31
32
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './avatar';
|
|
2
2
|
export * from './button';
|
|
3
|
+
export * from './display-text';
|
|
3
4
|
export * from './checkbox';
|
|
4
5
|
export * from './divider';
|
|
5
6
|
export * from './dropdown-menu';
|
|
@@ -17,5 +18,6 @@ export * from './radio-group';
|
|
|
17
18
|
export * from './select';
|
|
18
19
|
export * from './spacer';
|
|
19
20
|
export * from './stack';
|
|
21
|
+
export * from './switch';
|
|
20
22
|
export * from './textarea';
|
|
21
23
|
export * from './toast';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { VariantProps } from '../../styles';
|
|
2
2
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
3
3
|
import type { Theme } from '../../theme';
|
|
4
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
5
|
declare const getSizeStyles: (theme: {
|
|
5
6
|
mediaQueries: {
|
|
6
7
|
readonly smUp: "@media(min-width: 480px)";
|
|
@@ -95,9 +96,6 @@ declare const getSizeStyles: (theme: {
|
|
|
95
96
|
blue60: string;
|
|
96
97
|
blue50: string;
|
|
97
98
|
blue40: string;
|
|
98
|
-
/**
|
|
99
|
-
* Size of the label
|
|
100
|
-
*/
|
|
101
99
|
blue30: string;
|
|
102
100
|
blue20: string;
|
|
103
101
|
blue10: string;
|
|
@@ -204,6 +202,7 @@ declare const getSizeStyles: (theme: {
|
|
|
204
202
|
md: string;
|
|
205
203
|
lg: string;
|
|
206
204
|
xl: string;
|
|
205
|
+
'2xl': string;
|
|
207
206
|
full: string;
|
|
208
207
|
};
|
|
209
208
|
shadows: {
|
|
@@ -242,7 +241,10 @@ declare const getSizeStyles: (theme: {
|
|
|
242
241
|
lg: {
|
|
243
242
|
fontFamily: string;
|
|
244
243
|
fontWeight: string;
|
|
245
|
-
fontSize: string;
|
|
244
|
+
fontSize: string; /**
|
|
245
|
+
* Sets the color of the label
|
|
246
|
+
* @default 'default'
|
|
247
|
+
*/
|
|
246
248
|
lineHeight: string;
|
|
247
249
|
letterSpacing: string;
|
|
248
250
|
fontFeatureSettings: string;
|
|
@@ -418,20 +420,20 @@ declare const getSizeStyles: (theme: {
|
|
|
418
420
|
letterSpacing: string;
|
|
419
421
|
};
|
|
420
422
|
};
|
|
421
|
-
|
|
422
|
-
|
|
423
|
+
type LabelSize = VariantProps<typeof getSizeStyles>;
|
|
424
|
+
type LabelColor = keyof Theme['colors']['text'];
|
|
423
425
|
interface LabelOptions {
|
|
424
426
|
/**
|
|
425
427
|
* Size of the label
|
|
426
428
|
*/
|
|
427
|
-
size?: LabelSize
|
|
429
|
+
size?: ResponsiveProp<LabelSize>;
|
|
428
430
|
/**
|
|
429
431
|
* Sets the color of the label
|
|
430
432
|
* @default 'default'
|
|
431
433
|
*/
|
|
432
434
|
color?: LabelColor;
|
|
433
435
|
}
|
|
434
|
-
|
|
435
|
-
export
|
|
436
|
+
type LabelComponent = Polymorphic.ForwardRefComponent<'label', LabelOptions>;
|
|
437
|
+
export type LabelProps = Polymorphic.PropsOf<LabelComponent>;
|
|
436
438
|
export declare const Label: LabelComponent;
|
|
437
439
|
export {};
|
|
@@ -9,7 +9,7 @@ interface LinkOptions {
|
|
|
9
9
|
*/
|
|
10
10
|
isExternal?: boolean;
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
export
|
|
12
|
+
type LinkComponent = Polymorphic.ForwardRefComponent<'a', LinkOptions>;
|
|
13
|
+
export type LinkProps = Polymorphic.PropsOf<LinkComponent>;
|
|
14
14
|
export declare const Link: LinkComponent;
|
|
15
15
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { VariantProps } from '../../styles';
|
|
3
3
|
import type { HTMLQdsProps } from '../../types';
|
|
4
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
5
|
declare const getSizeStyles: (theme: {
|
|
5
6
|
mediaQueries: {
|
|
6
7
|
readonly smUp: "@media(min-width: 480px)";
|
|
@@ -201,6 +202,7 @@ declare const getSizeStyles: (theme: {
|
|
|
201
202
|
md: string;
|
|
202
203
|
lg: string;
|
|
203
204
|
xl: string;
|
|
205
|
+
'2xl': string;
|
|
204
206
|
full: string;
|
|
205
207
|
};
|
|
206
208
|
shadows: {
|
|
@@ -407,9 +409,9 @@ declare const getSizeStyles: (theme: {
|
|
|
407
409
|
fontSize: string;
|
|
408
410
|
};
|
|
409
411
|
};
|
|
410
|
-
|
|
412
|
+
type LoadingDotsSize = VariantProps<typeof getSizeStyles>;
|
|
411
413
|
interface LoadingDotsOptions {
|
|
412
|
-
size?: LoadingDotsSize
|
|
414
|
+
size?: ResponsiveProp<LoadingDotsSize>;
|
|
413
415
|
}
|
|
414
416
|
export interface LoadingDotsProps extends HTMLQdsProps<'span'>, LoadingDotsOptions {
|
|
415
417
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { VariantProps } from '../../styles';
|
|
2
2
|
import type { Theme } from '../../theme';
|
|
3
3
|
import type * as Polymorphic from '../../utils/polymorphic';
|
|
4
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
5
|
declare const getSizeStyles: (theme: {
|
|
5
6
|
mediaQueries: {
|
|
6
7
|
readonly smUp: "@media(min-width: 480px)";
|
|
@@ -201,6 +202,7 @@ declare const getSizeStyles: (theme: {
|
|
|
201
202
|
md: string;
|
|
202
203
|
lg: string;
|
|
203
204
|
xl: string;
|
|
205
|
+
'2xl': string;
|
|
204
206
|
full: string;
|
|
205
207
|
};
|
|
206
208
|
shadows: {
|
|
@@ -247,7 +249,10 @@ declare const getSizeStyles: (theme: {
|
|
|
247
249
|
md: {
|
|
248
250
|
fontFamily: string;
|
|
249
251
|
fontWeight: string;
|
|
250
|
-
fontSize: string;
|
|
252
|
+
fontSize: string; /**
|
|
253
|
+
* Sets the visual size of the text
|
|
254
|
+
* @default 'md'
|
|
255
|
+
*/
|
|
251
256
|
lineHeight: string;
|
|
252
257
|
letterSpacing: string;
|
|
253
258
|
fontFeatureSettings: string;
|
|
@@ -436,14 +441,14 @@ declare const getSizeStyles: (theme: {
|
|
|
436
441
|
letterSpacing: string;
|
|
437
442
|
};
|
|
438
443
|
};
|
|
439
|
-
|
|
440
|
-
|
|
444
|
+
type ParagraphSize = VariantProps<typeof getSizeStyles>;
|
|
445
|
+
type ParagraphColor = keyof Theme['colors']['text'];
|
|
441
446
|
interface ParagraphOptions {
|
|
442
447
|
/**
|
|
443
448
|
* Sets the visual size of the text
|
|
444
449
|
* @default 'md'
|
|
445
450
|
*/
|
|
446
|
-
size?: ParagraphSize
|
|
451
|
+
size?: ResponsiveProp<ParagraphSize>;
|
|
447
452
|
/**
|
|
448
453
|
* Sets the color of the text
|
|
449
454
|
* @default 'normal'
|
|
@@ -459,7 +464,7 @@ interface ParagraphOptions {
|
|
|
459
464
|
*/
|
|
460
465
|
textAlign?: 'left' | 'center' | 'right';
|
|
461
466
|
}
|
|
462
|
-
|
|
463
|
-
export
|
|
467
|
+
type ParagraphComponent = Polymorphic.ForwardRefComponent<'p', ParagraphOptions>;
|
|
468
|
+
export type ParagraphProps = Polymorphic.PropsOf<ParagraphComponent>;
|
|
464
469
|
export declare const Paragraph: ParagraphComponent;
|
|
465
470
|
export {};
|
|
@@ -14,7 +14,7 @@ export interface InputBaseOptions {
|
|
|
14
14
|
*/
|
|
15
15
|
isRequired?: boolean;
|
|
16
16
|
}
|
|
17
|
-
|
|
17
|
+
type OmittedProps = 'children' | 'readOnly' | 'size' | 'disabled' | 'required';
|
|
18
18
|
export interface InputBaseProps extends Omit<HTMLQdsProps<'input'>, OmittedProps>, InputBaseOptions {
|
|
19
19
|
}
|
|
20
20
|
export declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -23,7 +23,7 @@ export interface SelectBaseOptions {
|
|
|
23
23
|
*/
|
|
24
24
|
isRequired?: boolean;
|
|
25
25
|
}
|
|
26
|
-
|
|
26
|
+
type OmittedProps = 'readOnly' | 'size' | 'multiple' | 'disabled' | 'required';
|
|
27
27
|
interface SelectBaseProps extends Omit<HTMLQdsProps<'select'>, OmittedProps>, SelectBaseOptions {
|
|
28
28
|
}
|
|
29
29
|
export declare const SelectBase: import("react").ForwardRefExoticComponent<SelectBaseProps & import("react").RefAttributes<HTMLSelectElement>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { HTMLQdsProps } from '../../../types';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
type ResizeProp = 'none' | 'both' | 'horizontal' | 'vertical';
|
|
4
|
+
type MinRowsProp = number;
|
|
5
5
|
export interface TextareaBaseOptions {
|
|
6
6
|
/**
|
|
7
7
|
* If `true`, the textarea will be invalid
|
|
@@ -29,7 +29,7 @@ export interface TextareaBaseOptions {
|
|
|
29
29
|
*/
|
|
30
30
|
minRows?: MinRowsProp;
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
type OmittedProps = 'children' | 'readOnly' | 'size' | 'disabled' | 'required' | 'rows' | 'cols';
|
|
33
33
|
export interface TextareaBaseProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps>, TextareaBaseOptions {
|
|
34
34
|
}
|
|
35
35
|
export declare const TextareaBase: import("react").ForwardRefExoticComponent<TextareaBaseProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -8,7 +8,7 @@ interface RadioGroupProviderProps {
|
|
|
8
8
|
value: RadioGroupContextValue;
|
|
9
9
|
children: React.ReactNode;
|
|
10
10
|
}
|
|
11
|
-
export declare function RadioGroupProvider({ value, children }: RadioGroupProviderProps): JSX.Element;
|
|
11
|
+
export declare function RadioGroupProvider({ value, children }: RadioGroupProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
interface UseRadioGroupContextProps {
|
|
13
13
|
consumerName: string;
|
|
14
14
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { HTMLQdsProps } from '../../types';
|
|
3
|
-
export
|
|
4
|
-
export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<
|
|
3
|
+
export type RadioGroupLabelProps = HTMLQdsProps<'span'>;
|
|
4
|
+
export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -45,6 +45,6 @@ export interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProp
|
|
|
45
45
|
}
|
|
46
46
|
export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
|
|
47
47
|
Card: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
48
|
-
Label: import("react").ForwardRefExoticComponent<
|
|
48
|
+
Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
49
49
|
};
|
|
50
50
|
export type { RadioGroupLabelProps, RadioCardProps };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
3
|
-
|
|
3
|
+
type RadioIndicatorProps = Omit<RadioGroupPrimitive.RadioGroupIndicatorProps, 'asChild' | 'forceMount'>;
|
|
4
4
|
/**
|
|
5
5
|
* Styled Radix `RadioIndicator` component.
|
|
6
6
|
* @see Docs https://www.radix-ui.com/primitives/docs/components/radio-group#indicator
|
|
@@ -3,7 +3,7 @@ import type { HTMLQdsProps } from '../../types';
|
|
|
3
3
|
interface SelectOptionOptions {
|
|
4
4
|
isDisabled?: boolean;
|
|
5
5
|
}
|
|
6
|
-
|
|
6
|
+
type OmittedProps = 'disabled' | 'label';
|
|
7
7
|
export interface SelectOptionProps extends Omit<HTMLQdsProps<'option'>, OmittedProps>, SelectOptionOptions {
|
|
8
8
|
}
|
|
9
9
|
export declare const SelectOption: import("react").ForwardRefExoticComponent<SelectOptionProps & import("react").RefAttributes<HTMLOptionElement>>;
|
|
@@ -16,7 +16,7 @@ interface SelectOptions extends SelectBaseOptions {
|
|
|
16
16
|
*/
|
|
17
17
|
helperText?: string;
|
|
18
18
|
}
|
|
19
|
-
|
|
19
|
+
type OmittedProps = 'readOnly' | 'size';
|
|
20
20
|
export interface SelectProps extends Omit<HTMLQdsProps<'select'>, OmittedProps>, SelectOptions {
|
|
21
21
|
}
|
|
22
22
|
export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>> & {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { Theme } from '../../theme';
|
|
3
3
|
import type { HTMLQdsProps } from '../../types';
|
|
4
|
+
import { type ResponsiveProp } from '../../hooks/use-responsive-prop';
|
|
4
5
|
interface SpacerOptions {
|
|
5
6
|
axis?: 'x' | 'y';
|
|
6
|
-
size: keyof Theme['spacing']
|
|
7
|
+
size: ResponsiveProp<keyof Theme['spacing']>;
|
|
7
8
|
}
|
|
8
9
|
export interface SpacerProps extends HTMLQdsProps<'span'>, SpacerOptions {
|
|
9
10
|
}
|