ember-design-system 0.2.3
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/README.md +96 -0
- package/dist/ember-design-system.css +2 -0
- package/dist/favicon.svg +1 -0
- package/dist/index.js +5441 -0
- package/dist/index.js.map +1 -0
- package/dist/src/lib/components/editorial/ArticleHeader/ArticleHeader.d.ts +10 -0
- package/dist/src/lib/components/editorial/ArticleHeader/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/AuthorByline/AuthorByline.d.ts +9 -0
- package/dist/src/lib/components/editorial/AuthorByline/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/CodeBlock/CodeBlock.d.ts +11 -0
- package/dist/src/lib/components/editorial/CodeBlock/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/Footnote/Footnote.d.ts +6 -0
- package/dist/src/lib/components/editorial/Footnote/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/MarginNote/MarginNote.d.ts +7 -0
- package/dist/src/lib/components/editorial/MarginNote/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/PullQuote/PullQuote.d.ts +6 -0
- package/dist/src/lib/components/editorial/PullQuote/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/ReadingProgress/ReadingProgress.d.ts +5 -0
- package/dist/src/lib/components/editorial/ReadingProgress/index.d.ts +2 -0
- package/dist/src/lib/components/editorial/TagCloud/TagCloud.d.ts +10 -0
- package/dist/src/lib/components/editorial/TagCloud/index.d.ts +2 -0
- package/dist/src/lib/components/layout/AspectRatio/AspectRatio.d.ts +6 -0
- package/dist/src/lib/components/layout/AspectRatio/index.d.ts +2 -0
- package/dist/src/lib/components/layout/Box/Box.d.ts +43 -0
- package/dist/src/lib/components/layout/Box/index.d.ts +2 -0
- package/dist/src/lib/components/layout/Flex/Flex.d.ts +9 -0
- package/dist/src/lib/components/layout/Flex/index.d.ts +2 -0
- package/dist/src/lib/components/layout/Grid/Grid.d.ts +4 -0
- package/dist/src/lib/components/layout/Grid/index.d.ts +2 -0
- package/dist/src/lib/components/layout/Inline/Inline.d.ts +4 -0
- package/dist/src/lib/components/layout/Inline/index.d.ts +2 -0
- package/dist/src/lib/components/layout/Stack/Stack.d.ts +4 -0
- package/dist/src/lib/components/layout/Stack/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Accordion/Accordion.d.ts +13 -0
- package/dist/src/lib/components/patterns/Accordion/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Alert/Alert.d.ts +10 -0
- package/dist/src/lib/components/patterns/Alert/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/AlertDialog/AlertDialog.d.ts +39 -0
- package/dist/src/lib/components/patterns/AlertDialog/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Breadcrumb/Breadcrumb.d.ts +10 -0
- package/dist/src/lib/components/patterns/Breadcrumb/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Calendar/Calendar.d.ts +24 -0
- package/dist/src/lib/components/patterns/Calendar/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Card/Card.d.ts +14 -0
- package/dist/src/lib/components/patterns/Card/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Carousel/Carousel.d.ts +20 -0
- package/dist/src/lib/components/patterns/Carousel/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Collapsible/Collapsible.d.ts +29 -0
- package/dist/src/lib/components/patterns/Collapsible/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Combobox/Combobox.d.ts +31 -0
- package/dist/src/lib/components/patterns/Combobox/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Command/Command.d.ts +65 -0
- package/dist/src/lib/components/patterns/Command/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/ContextMenu/ContextMenu.d.ts +42 -0
- package/dist/src/lib/components/patterns/ContextMenu/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/DatePicker/DatePicker.d.ts +15 -0
- package/dist/src/lib/components/patterns/DatePicker/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Drawer/Drawer.d.ts +11 -0
- package/dist/src/lib/components/patterns/Drawer/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/DropdownMenu/DropdownMenu.d.ts +53 -0
- package/dist/src/lib/components/patterns/DropdownMenu/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/EmptyState/EmptyState.d.ts +8 -0
- package/dist/src/lib/components/patterns/EmptyState/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/FormField/FormField.d.ts +10 -0
- package/dist/src/lib/components/patterns/FormField/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/HoverCard/HoverCard.d.ts +41 -0
- package/dist/src/lib/components/patterns/HoverCard/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Menubar/Menubar.d.ts +49 -0
- package/dist/src/lib/components/patterns/Menubar/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Modal/Modal.d.ts +12 -0
- package/dist/src/lib/components/patterns/Modal/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Navigation/Navigation.d.ts +19 -0
- package/dist/src/lib/components/patterns/Navigation/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Pagination/Pagination.d.ts +8 -0
- package/dist/src/lib/components/patterns/Pagination/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Resizable/Resizable.d.ts +24 -0
- package/dist/src/lib/components/patterns/Resizable/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Table/Table.d.ts +7 -0
- package/dist/src/lib/components/patterns/Table/index.d.ts +1 -0
- package/dist/src/lib/components/patterns/Tabs/Tabs.d.ts +17 -0
- package/dist/src/lib/components/patterns/Tabs/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/Toast/Toast.d.ts +18 -0
- package/dist/src/lib/components/patterns/Toast/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/_menu/index.d.ts +2 -0
- package/dist/src/lib/components/patterns/_menu/menu-core.d.ts +89 -0
- package/dist/src/lib/components/patterns/_menu/menu.d.ts +47 -0
- package/dist/src/lib/components/primitives/Avatar/Avatar.d.ts +15 -0
- package/dist/src/lib/components/primitives/Avatar/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Badge/Badge.d.ts +10 -0
- package/dist/src/lib/components/primitives/Badge/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Button/Button.d.ts +16 -0
- package/dist/src/lib/components/primitives/Button/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Checkbox/Checkbox.d.ts +7 -0
- package/dist/src/lib/components/primitives/Checkbox/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Divider/Divider.d.ts +7 -0
- package/dist/src/lib/components/primitives/Divider/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Dot/Dot.d.ts +14 -0
- package/dist/src/lib/components/primitives/Dot/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/IconButton/IconButton.d.ts +15 -0
- package/dist/src/lib/components/primitives/IconButton/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Image/Image.d.ts +11 -0
- package/dist/src/lib/components/primitives/Image/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Input/Input.d.ts +10 -0
- package/dist/src/lib/components/primitives/Input/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/InputOTP/InputOTP.d.ts +22 -0
- package/dist/src/lib/components/primitives/InputOTP/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Kbd/Kbd.d.ts +12 -0
- package/dist/src/lib/components/primitives/Kbd/index.d.ts +3 -0
- package/dist/src/lib/components/primitives/Kbd/key-icons.d.ts +14 -0
- package/dist/src/lib/components/primitives/Label/Label.d.ts +7 -0
- package/dist/src/lib/components/primitives/Label/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Mark/Mark.d.ts +7 -0
- package/dist/src/lib/components/primitives/Mark/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Overline/Overline.d.ts +9 -0
- package/dist/src/lib/components/primitives/Overline/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Popover/Popover.d.ts +47 -0
- package/dist/src/lib/components/primitives/Popover/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Progress/Progress.d.ts +12 -0
- package/dist/src/lib/components/primitives/Progress/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Radio/Radio.d.ts +14 -0
- package/dist/src/lib/components/primitives/Radio/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/ScrollArea/ScrollArea.d.ts +14 -0
- package/dist/src/lib/components/primitives/ScrollArea/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Select/Select.d.ts +25 -0
- package/dist/src/lib/components/primitives/Select/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Skeleton/Skeleton.d.ts +12 -0
- package/dist/src/lib/components/primitives/Skeleton/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Slider/Slider.d.ts +18 -0
- package/dist/src/lib/components/primitives/Slider/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Spinner/Spinner.d.ts +6 -0
- package/dist/src/lib/components/primitives/Spinner/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Switch/Switch.d.ts +7 -0
- package/dist/src/lib/components/primitives/Switch/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Tag/Tag.d.ts +7 -0
- package/dist/src/lib/components/primitives/Tag/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Text/Text.d.ts +31 -0
- package/dist/src/lib/components/primitives/Text/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Textarea/Textarea.d.ts +6 -0
- package/dist/src/lib/components/primitives/Textarea/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Toggle/Toggle.d.ts +14 -0
- package/dist/src/lib/components/primitives/Toggle/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/ToggleGroup/ToggleGroup.d.ts +29 -0
- package/dist/src/lib/components/primitives/ToggleGroup/index.d.ts +2 -0
- package/dist/src/lib/components/primitives/Tooltip/Tooltip.d.ts +9 -0
- package/dist/src/lib/components/primitives/Tooltip/index.d.ts +2 -0
- package/dist/src/lib/hooks/useTheme.d.ts +6 -0
- package/dist/src/lib/index.d.ts +71 -0
- package/dist/src/lib/utils/cn.d.ts +2 -0
- package/dist/src/lib/utils/space.d.ts +12 -0
- package/dist/src/lib/utils/url.d.ts +1 -0
- package/dist/src/lib/utils/useControllableState.d.ts +14 -0
- package/dist/src/lib/utils/useDismiss.d.ts +16 -0
- package/dist/src/lib/utils/useFloating.d.ts +59 -0
- package/package.json +74 -0
- package/src/styles/tokens.css +162 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ImgHTMLAttributes } from 'react';
|
|
2
|
+
export type ImageFit = 'contain' | 'cover' | 'fill' | 'none';
|
|
3
|
+
export type ImageRadius = 'none' | 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
5
|
+
fit?: ImageFit;
|
|
6
|
+
radius?: ImageRadius;
|
|
7
|
+
/** Subtle placeholder background while loading / for transparent images. */
|
|
8
|
+
bg?: boolean;
|
|
9
|
+
maxHeight?: number | string;
|
|
10
|
+
}
|
|
11
|
+
export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLImageElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type InputSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
4
|
+
inputSize?: InputSize;
|
|
5
|
+
invalid?: boolean;
|
|
6
|
+
disableFocus?: boolean;
|
|
7
|
+
leadingIcon?: ReactNode;
|
|
8
|
+
trailingIcon?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type InputOTPPattern = 'numeric' | 'alphanumeric';
|
|
3
|
+
export interface InputOTPProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
4
|
+
/** Number of character slots. */
|
|
5
|
+
length?: number;
|
|
6
|
+
/** Controlled value. */
|
|
7
|
+
value?: string;
|
|
8
|
+
/** Initial value when uncontrolled. */
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
/** Called with the full string whenever it changes. */
|
|
11
|
+
onChange?: (value: string) => void;
|
|
12
|
+
/** Called once the value fills every slot. */
|
|
13
|
+
onComplete?: (value: string) => void;
|
|
14
|
+
/** Which characters are accepted. */
|
|
15
|
+
pattern?: InputOTPPattern;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
'aria-label'?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare const InputOTP: import('react').ForwardRefExoticComponent<InputOTPProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export type InputOTPSeparatorProps = HTMLAttributes<HTMLSpanElement>;
|
|
21
|
+
/** Optional visual separator (e.g. a dash) for use between OTP slot groups. */
|
|
22
|
+
export declare const InputOTPSeparator: import('react').ForwardRefExoticComponent<InputOTPSeparatorProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type KbdTone = 'default' | 'accent';
|
|
3
|
+
export interface KbdProps extends HTMLAttributes<HTMLElement> {
|
|
4
|
+
size?: 'sm' | 'md';
|
|
5
|
+
tone?: KbdTone;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const Kbd: import('react').ForwardRefExoticComponent<KbdProps & import('react').RefAttributes<HTMLElement>>;
|
|
9
|
+
export interface KbdGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
+
separator?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function KbdGroup({ separator, className, children, ...rest }: KbdGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { Kbd, KbdGroup } from './Kbd';
|
|
2
|
+
export type { KbdProps, KbdGroupProps } from './Kbd';
|
|
3
|
+
export { KbdCmd, KbdCtrl, KbdOption, KbdShift, KbdTab, KbdReturn, KbdBackspace, KbdCapslock, KbdSpace, KbdArrowUp, KbdArrowDown, KbdArrowLeft, KbdArrowRight, KbdEscape, } from './key-icons';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const KbdCmd: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const KbdCtrl: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const KbdOption: () => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const KbdShift: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const KbdTab: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const KbdReturn: () => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const KbdBackspace: () => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const KbdCapslock: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const KbdSpace: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const KbdArrowUp: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const KbdArrowDown: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const KbdArrowLeft: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const KbdArrowRight: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const KbdEscape: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { LabelHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
3
|
+
required?: boolean;
|
|
4
|
+
optional?: boolean;
|
|
5
|
+
hint?: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type MarkTone = 'accent' | 'warning';
|
|
3
|
+
export interface MarkProps extends HTMLAttributes<HTMLElement> {
|
|
4
|
+
tone?: MarkTone;
|
|
5
|
+
}
|
|
6
|
+
/** Inline highlight for matched text (search results, emphasis). */
|
|
7
|
+
export declare const Mark: import('react').ForwardRefExoticComponent<MarkProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TextProps, TextTone } from '../Text/Text';
|
|
2
|
+
export interface OverlineProps extends Omit<TextProps, 'family' | 'transform'> {
|
|
3
|
+
tone?: TextTone;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Small, uppercase, letter-spaced mono label — used for section headings and
|
|
7
|
+
* eyebrow text throughout the system.
|
|
8
|
+
*/
|
|
9
|
+
export declare const Overline: import('react').ForwardRefExoticComponent<OverlineProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
|
|
2
|
+
import { Placement } from '../../../utils/useFloating';
|
|
3
|
+
export interface PopoverProps {
|
|
4
|
+
open?: boolean;
|
|
5
|
+
defaultOpen?: boolean;
|
|
6
|
+
onOpenChange?: (open: boolean) => void;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
type TriggerChildProps = {
|
|
11
|
+
ref?: Ref<HTMLElement>;
|
|
12
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
13
|
+
'aria-expanded'?: boolean;
|
|
14
|
+
'aria-haspopup'?: string;
|
|
15
|
+
'aria-controls'?: string;
|
|
16
|
+
id?: string;
|
|
17
|
+
};
|
|
18
|
+
export interface PopoverTriggerProps {
|
|
19
|
+
children: ReactElement<TriggerChildProps>;
|
|
20
|
+
}
|
|
21
|
+
/** Renders the provided child element as the popover trigger (asChild semantics). */
|
|
22
|
+
export declare function PopoverTrigger({ children }: PopoverTriggerProps): ReactElement<TriggerChildProps, string | import('react').JSXElementConstructor<any>>;
|
|
23
|
+
/** Optional explicit anchor when the trigger isn't the positioning reference. */
|
|
24
|
+
export declare function PopoverAnchor({ children }: {
|
|
25
|
+
children: ReactElement<{
|
|
26
|
+
ref?: Ref<HTMLElement>;
|
|
27
|
+
}>;
|
|
28
|
+
}): ReactElement<{
|
|
29
|
+
ref?: Ref<HTMLElement>;
|
|
30
|
+
}, string | import('react').JSXElementConstructor<any>>;
|
|
31
|
+
export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
32
|
+
placement?: Placement;
|
|
33
|
+
offset?: number;
|
|
34
|
+
matchWidth?: boolean;
|
|
35
|
+
/** Close when a pointer press lands outside the content/trigger. Default true. */
|
|
36
|
+
dismissOnOutside?: boolean;
|
|
37
|
+
/** Render into a portal at document.body. Default true. */
|
|
38
|
+
portal?: boolean;
|
|
39
|
+
role?: string;
|
|
40
|
+
}
|
|
41
|
+
export declare const PopoverContent: import('react').ForwardRefExoticComponent<PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
42
|
+
export interface PopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
43
|
+
children: ReactNode;
|
|
44
|
+
}
|
|
45
|
+
/** A button that closes the popover when clicked. */
|
|
46
|
+
export declare const PopoverClose: import('react').ForwardRefExoticComponent<PopoverCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
47
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type ProgressSize = 'sm' | 'md';
|
|
3
|
+
export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/** Current value, clamped to 0..max. Ignored when `indeterminate`. */
|
|
5
|
+
value?: number;
|
|
6
|
+
/** Upper bound of the scale. */
|
|
7
|
+
max?: number;
|
|
8
|
+
/** Render a looping animation with no known value. */
|
|
9
|
+
indeterminate?: boolean;
|
|
10
|
+
size?: ProgressSize;
|
|
11
|
+
}
|
|
12
|
+
export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
3
|
+
label?: ReactNode;
|
|
4
|
+
description?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
7
|
+
export interface RadioGroupProps {
|
|
8
|
+
name: string;
|
|
9
|
+
value?: string;
|
|
10
|
+
onChange?: (value: string) => void;
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
orientation?: 'horizontal' | 'vertical';
|
|
13
|
+
}
|
|
14
|
+
export declare function RadioGroup({ name, onChange, children, orientation }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
|
|
3
|
+
export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/** Which axis (or axes) the viewport may scroll along. Default `'vertical'`. */
|
|
5
|
+
orientation?: ScrollAreaOrientation;
|
|
6
|
+
/** Caps the height of the scroll viewport; accepts any CSS length. */
|
|
7
|
+
maxHeight?: number | string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* A scrollable region with a tasteful, thin custom scrollbar that preserves
|
|
11
|
+
* native scrolling and keyboard interaction. Children render inside a viewport
|
|
12
|
+
* whose overflow is determined by `orientation`.
|
|
13
|
+
*/
|
|
14
|
+
export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type SelectSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export interface SelectOption {
|
|
4
|
+
label: ReactNode;
|
|
5
|
+
value: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
description?: ReactNode;
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export interface SelectProps {
|
|
11
|
+
options: SelectOption[];
|
|
12
|
+
value?: string;
|
|
13
|
+
defaultValue?: string;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
selectSize?: SelectSize;
|
|
17
|
+
invalid?: boolean;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
className?: string;
|
|
20
|
+
name?: string;
|
|
21
|
+
id?: string;
|
|
22
|
+
'aria-label'?: string;
|
|
23
|
+
'aria-labelledby'?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type SkeletonVariant = 'text' | 'circle' | 'rect';
|
|
3
|
+
export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
variant?: SkeletonVariant;
|
|
5
|
+
/** number → px, string → used as-is (e.g. '100%'). */
|
|
6
|
+
width?: number | string;
|
|
7
|
+
/** number → px, string → used as-is. */
|
|
8
|
+
height?: number | string;
|
|
9
|
+
/** Border radius override; number → px, string → used as-is. */
|
|
10
|
+
radius?: number | string;
|
|
11
|
+
}
|
|
12
|
+
export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type SliderOrientation = 'horizontal' | 'vertical';
|
|
3
|
+
export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
|
|
4
|
+
/** Controlled value. A number for a single thumb, an array for a range. */
|
|
5
|
+
value?: number | number[];
|
|
6
|
+
/** Initial value when uncontrolled. */
|
|
7
|
+
defaultValue?: number | number[];
|
|
8
|
+
/** Called with the next value (matching the single/array shape used). */
|
|
9
|
+
onValueChange?: (value: number | number[]) => void;
|
|
10
|
+
min?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
step?: number;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
orientation?: SliderOrientation;
|
|
15
|
+
'aria-label'?: string;
|
|
16
|
+
'aria-labelledby'?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
size?: 'sm' | 'md' | 'lg';
|
|
4
|
+
label?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function Spinner({ size, label, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
3
|
+
label?: ReactNode;
|
|
4
|
+
description?: ReactNode;
|
|
5
|
+
switchSize?: 'sm' | 'md';
|
|
6
|
+
}
|
|
7
|
+
export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
onRemove?: () => void;
|
|
4
|
+
removable?: boolean;
|
|
5
|
+
interactive?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const Tag: import('react').ForwardRefExoticComponent<TagProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ElementType, HTMLAttributes } from 'react';
|
|
2
|
+
export type TextSize = '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
3
|
+
export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
4
|
+
export type TextTone = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'accent' | 'accent-ink' | 'danger' | 'success' | 'warning';
|
|
5
|
+
export type TextFamily = 'sans' | 'mono' | 'serif';
|
|
6
|
+
export type TextLeading = 'tight' | 'snug' | 'base' | 'relaxed';
|
|
7
|
+
export type TextTracking = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
|
|
8
|
+
export type TextAlign = 'left' | 'center' | 'right';
|
|
9
|
+
export type TextWhitespace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
|
|
10
|
+
export interface TextProps extends HTMLAttributes<HTMLElement> {
|
|
11
|
+
as?: ElementType;
|
|
12
|
+
/** Token size key, or a raw pixel number for fine-grained control. */
|
|
13
|
+
size?: TextSize | number;
|
|
14
|
+
weight?: TextWeight;
|
|
15
|
+
tone?: TextTone;
|
|
16
|
+
family?: TextFamily;
|
|
17
|
+
leading?: TextLeading | number;
|
|
18
|
+
tracking?: TextTracking;
|
|
19
|
+
align?: TextAlign;
|
|
20
|
+
transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
|
|
21
|
+
italic?: boolean;
|
|
22
|
+
/** Single-line ellipsis truncation. */
|
|
23
|
+
truncate?: boolean;
|
|
24
|
+
tabularNums?: boolean;
|
|
25
|
+
whitespace?: TextWhitespace;
|
|
26
|
+
/** Fill remaining space in a flex parent (and allow truncation). */
|
|
27
|
+
grow?: boolean;
|
|
28
|
+
/** Prevent shrinking in a flex parent. */
|
|
29
|
+
shrink?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TextareaHTMLAttributes } from 'react';
|
|
2
|
+
export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
invalid?: boolean;
|
|
4
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
5
|
+
}
|
|
6
|
+
export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
export type ToggleVariant = 'default' | 'outline';
|
|
3
|
+
export type ToggleSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
|
|
5
|
+
/** Controlled pressed state. */
|
|
6
|
+
pressed?: boolean;
|
|
7
|
+
/** Initial pressed state when uncontrolled. */
|
|
8
|
+
defaultPressed?: boolean;
|
|
9
|
+
/** Called when the pressed state changes. */
|
|
10
|
+
onPressedChange?: (pressed: boolean) => void;
|
|
11
|
+
variant?: ToggleVariant;
|
|
12
|
+
size?: ToggleSize;
|
|
13
|
+
}
|
|
14
|
+
export declare const Toggle: import('react').ForwardRefExoticComponent<ToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
2
|
+
export type ToggleGroupVariant = 'default' | 'outline';
|
|
3
|
+
export type ToggleGroupSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export type ToggleGroupOrientation = 'horizontal' | 'vertical';
|
|
5
|
+
type ToggleGroupBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
6
|
+
variant?: ToggleGroupVariant;
|
|
7
|
+
size?: ToggleGroupSize;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
orientation?: ToggleGroupOrientation;
|
|
10
|
+
};
|
|
11
|
+
export type ToggleGroupSingleProps = ToggleGroupBaseProps & {
|
|
12
|
+
type: 'single';
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onValueChange?: (value: string) => void;
|
|
16
|
+
};
|
|
17
|
+
export type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
|
|
18
|
+
type: 'multiple';
|
|
19
|
+
value?: string[];
|
|
20
|
+
defaultValue?: string[];
|
|
21
|
+
onValueChange?: (value: string[]) => void;
|
|
22
|
+
};
|
|
23
|
+
export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
|
|
24
|
+
export declare const ToggleGroup: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export interface ToggleGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
|
|
26
|
+
value: string;
|
|
27
|
+
}
|
|
28
|
+
export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<ToggleGroupItemProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
|
|
3
|
+
export interface TooltipProps {
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
side?: TooltipSide;
|
|
6
|
+
delay?: number;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare function Tooltip({ content, side, delay, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
export * from './components/layout/Box';
|
|
2
|
+
export * from './components/layout/Flex';
|
|
3
|
+
export * from './components/layout/Stack';
|
|
4
|
+
export * from './components/layout/Inline';
|
|
5
|
+
export * from './components/layout/Grid';
|
|
6
|
+
export * from './components/layout/AspectRatio';
|
|
7
|
+
export * from './components/primitives/Text';
|
|
8
|
+
export * from './components/primitives/Overline';
|
|
9
|
+
export * from './components/primitives/Dot';
|
|
10
|
+
export * from './components/primitives/Mark';
|
|
11
|
+
export * from './components/primitives/Image';
|
|
12
|
+
export * from './components/primitives/Button';
|
|
13
|
+
export * from './components/primitives/IconButton';
|
|
14
|
+
export * from './components/primitives/Input';
|
|
15
|
+
export * from './components/primitives/Textarea';
|
|
16
|
+
export * from './components/primitives/Select';
|
|
17
|
+
export * from './components/primitives/Checkbox';
|
|
18
|
+
export * from './components/primitives/Radio';
|
|
19
|
+
export * from './components/primitives/Switch';
|
|
20
|
+
export * from './components/primitives/Label';
|
|
21
|
+
export * from './components/primitives/Badge';
|
|
22
|
+
export * from './components/primitives/Tag';
|
|
23
|
+
export * from './components/primitives/Avatar';
|
|
24
|
+
export * from './components/primitives/Divider';
|
|
25
|
+
export * from './components/primitives/Tooltip';
|
|
26
|
+
export * from './components/primitives/Spinner';
|
|
27
|
+
export * from './components/primitives/Kbd';
|
|
28
|
+
export * from './components/primitives/Popover';
|
|
29
|
+
export * from './components/primitives/Skeleton';
|
|
30
|
+
export * from './components/primitives/Progress';
|
|
31
|
+
export * from './components/primitives/Toggle';
|
|
32
|
+
export * from './components/primitives/ToggleGroup';
|
|
33
|
+
export * from './components/primitives/Slider';
|
|
34
|
+
export * from './components/primitives/InputOTP';
|
|
35
|
+
export * from './components/primitives/ScrollArea';
|
|
36
|
+
export * from './components/patterns/Alert';
|
|
37
|
+
export * from './components/patterns/AlertDialog';
|
|
38
|
+
export * from './components/patterns/Card';
|
|
39
|
+
export * from './components/patterns/Collapsible';
|
|
40
|
+
export * from './components/patterns/Resizable';
|
|
41
|
+
export * from './components/patterns/HoverCard';
|
|
42
|
+
export * from './components/patterns/Command';
|
|
43
|
+
export * from './components/patterns/Combobox';
|
|
44
|
+
export * from './components/patterns/Carousel';
|
|
45
|
+
export * from './components/patterns/Calendar';
|
|
46
|
+
export * from './components/patterns/DatePicker';
|
|
47
|
+
export * from './components/patterns/DropdownMenu';
|
|
48
|
+
export * from './components/patterns/ContextMenu';
|
|
49
|
+
export * from './components/patterns/Menubar';
|
|
50
|
+
export * from './components/patterns/Modal';
|
|
51
|
+
export * from './components/patterns/Drawer';
|
|
52
|
+
export * from './components/patterns/Toast';
|
|
53
|
+
export * from './components/patterns/Tabs';
|
|
54
|
+
export * from './components/patterns/Accordion';
|
|
55
|
+
export * from './components/patterns/Navigation';
|
|
56
|
+
export * from './components/patterns/Breadcrumb';
|
|
57
|
+
export * from './components/patterns/Pagination';
|
|
58
|
+
export * from './components/patterns/Table';
|
|
59
|
+
export * from './components/patterns/EmptyState';
|
|
60
|
+
export * from './components/patterns/FormField';
|
|
61
|
+
export * from './components/editorial/ArticleHeader';
|
|
62
|
+
export * from './components/editorial/PullQuote';
|
|
63
|
+
export * from './components/editorial/MarginNote';
|
|
64
|
+
export * from './components/editorial/CodeBlock';
|
|
65
|
+
export * from './components/editorial/Footnote';
|
|
66
|
+
export * from './components/editorial/AuthorByline';
|
|
67
|
+
export * from './components/editorial/TagCloud';
|
|
68
|
+
export * from './components/editorial/ReadingProgress';
|
|
69
|
+
export { useTheme } from './hooks/useTheme';
|
|
70
|
+
export type { Theme } from './hooks/useTheme';
|
|
71
|
+
export { cn } from './utils/cn';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
/** Spacing scale keys — mirror the `--space-*` tokens in tokens.css. */
|
|
3
|
+
export type SpaceToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
|
|
4
|
+
/** Resolve a spacing token to its CSS variable reference. */
|
|
5
|
+
export declare function space(token: SpaceToken): string;
|
|
6
|
+
/** Resolve an optional spacing token, returning undefined when absent. */
|
|
7
|
+
export declare function maybeSpace(token: SpaceToken | undefined): string | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Build a style object that assigns design-token values to CSS custom
|
|
10
|
+
* properties. Skips undefined entries so callers can spread freely.
|
|
11
|
+
*/
|
|
12
|
+
export declare function tokenVars(vars: Record<string, string | number | undefined>): CSSProperties;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function resolveEnvUrl(envUrl: string | undefined, fallback: string): string;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Manages state that may be either controlled (a `value` prop is supplied) or
|
|
3
|
+
* uncontrolled (the component owns the state, seeded by `defaultValue`).
|
|
4
|
+
*
|
|
5
|
+
* Mirrors the controlled/uncontrolled contract used across the design system:
|
|
6
|
+
* when `value` is defined the component is controlled and the internal state is
|
|
7
|
+
* ignored; otherwise the hook owns the state and notifies `onChange` on every
|
|
8
|
+
* commit. The setter accepts either a next value or an updater function.
|
|
9
|
+
*/
|
|
10
|
+
export declare function useControllableState<T>({ value, defaultValue, onChange, }: {
|
|
11
|
+
value?: T;
|
|
12
|
+
defaultValue: T | (() => T);
|
|
13
|
+
onChange?: (value: T) => void;
|
|
14
|
+
}): [T, (next: T | ((prev: T) => T)) => void];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export interface DismissOptions {
|
|
3
|
+
enabled: boolean;
|
|
4
|
+
onDismiss: () => void;
|
|
5
|
+
/** Elements that should NOT count as "outside" (e.g. trigger + content). */
|
|
6
|
+
refs: Array<RefObject<HTMLElement | null>>;
|
|
7
|
+
/** Dismiss when Escape is pressed. Default: true. */
|
|
8
|
+
escapeKey?: boolean;
|
|
9
|
+
/** Dismiss on outside pointer press. Default: true. */
|
|
10
|
+
outsidePress?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Closes a floating layer on Escape or on a pointer press outside the provided
|
|
14
|
+
* element refs. Shared by Popover, Dropdown Menu, Combobox, Hover Card, etc.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useDismiss({ enabled, onDismiss, refs, escapeKey, outsidePress, }: DismissOptions): void;
|