@commercetools/nimbus 0.0.1 → 0.0.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/dist/index.d.ts +1412 -0
- package/dist/index.js +11183 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.cjs +27 -0
- package/dist/index.umd.cjs.map +1 -0
- package/package.json +33 -6
- package/.storybook/apca-check/index.ts +0 -150
- package/.storybook/main.ts +0 -64
- package/.storybook/preview.tsx +0 -92
- package/.storybook/vitest.setup.ts +0 -13
- package/docs/architecture-decisions/adr-0001-consumer-component-apis.md +0 -177
- package/docs/architecture-decisions/adr-0002-compound-component-extraction.md +0 -82
- package/src/components/accordion/accordion-context.tsx +0 -17
- package/src/components/accordion/accordion.mdx +0 -172
- package/src/components/accordion/accordion.recipe.tsx +0 -98
- package/src/components/accordion/accordion.slots.tsx +0 -39
- package/src/components/accordion/accordion.stories.tsx +0 -188
- package/src/components/accordion/accordion.tsx +0 -16
- package/src/components/accordion/accordion.types.tsx +0 -54
- package/src/components/accordion/components/accordion-content.tsx +0 -28
- package/src/components/accordion/components/accordion-group.tsx +0 -27
- package/src/components/accordion/components/accordion-header.tsx +0 -63
- package/src/components/accordion/components/accordion-item.tsx +0 -87
- package/src/components/accordion/index.ts +0 -2
- package/src/components/alert/alert.mdx +0 -92
- package/src/components/alert/alert.recipe.tsx +0 -65
- package/src/components/alert/alert.slots.tsx +0 -46
- package/src/components/alert/alert.stories.tsx +0 -308
- package/src/components/alert/alert.tsx +0 -18
- package/src/components/alert/alert.types.tsx +0 -70
- package/src/components/alert/components/alert.actions.tsx +0 -27
- package/src/components/alert/components/alert.description.tsx +0 -27
- package/src/components/alert/components/alert.dismiss-button.tsx +0 -41
- package/src/components/alert/components/alert.root.tsx +0 -92
- package/src/components/alert/components/alert.title.tsx +0 -29
- package/src/components/alert/index.ts +0 -2
- package/src/components/avatar/avatar.mdx +0 -80
- package/src/components/avatar/avatar.recipe.tsx +0 -36
- package/src/components/avatar/avatar.slots.tsx +0 -16
- package/src/components/avatar/avatar.stories.tsx +0 -136
- package/src/components/avatar/avatar.tsx +0 -34
- package/src/components/avatar/avatar.types.ts +0 -33
- package/src/components/avatar/index.ts +0 -2
- package/src/components/badge/badge.mdx +0 -91
- package/src/components/badge/badge.recipe.tsx +0 -72
- package/src/components/badge/badge.slots.tsx +0 -8
- package/src/components/badge/badge.stories.tsx +0 -124
- package/src/components/badge/badge.tsx +0 -35
- package/src/components/badge/badge.types.tsx +0 -40
- package/src/components/badge/index.ts +0 -2
- package/src/components/bleed/bleed.tsx +0 -1
- package/src/components/bleed/index.ts +0 -1
- package/src/components/box/box.mdx +0 -115
- package/src/components/box/box.stories.tsx +0 -71
- package/src/components/box/box.tsx +0 -11
- package/src/components/box/index.ts +0 -1
- package/src/components/button/button.mdx +0 -169
- package/src/components/button/button.recipe.ts +0 -185
- package/src/components/button/button.slots.tsx +0 -45
- package/src/components/button/button.stories.tsx +0 -369
- package/src/components/button/button.tsx +0 -37
- package/src/components/button/button.types.ts +0 -14
- package/src/components/button/index.ts +0 -2
- package/src/components/card/card.mdx +0 -92
- package/src/components/card/card.recipe.tsx +0 -71
- package/src/components/card/card.slots.tsx +0 -50
- package/src/components/card/card.stories.tsx +0 -175
- package/src/components/card/card.tsx +0 -9
- package/src/components/card/card.types.ts +0 -22
- package/src/components/card/components/card.content.tsx +0 -29
- package/src/components/card/components/card.header.tsx +0 -28
- package/src/components/card/components/card.root.tsx +0 -62
- package/src/components/card/index.ts +0 -2
- package/src/components/checkbox/checkbox.mdx +0 -78
- package/src/components/checkbox/checkbox.recipe.tsx +0 -116
- package/src/components/checkbox/checkbox.slots.tsx +0 -33
- package/src/components/checkbox/checkbox.stories.tsx +0 -200
- package/src/components/checkbox/checkbox.tsx +0 -77
- package/src/components/checkbox/checkbox.types.tsx +0 -22
- package/src/components/checkbox/index.ts +0 -2
- package/src/components/code/code.mdx +0 -17
- package/src/components/code/code.recipe.ts +0 -63
- package/src/components/code/code.tsx +0 -1
- package/src/components/code/index.ts +0 -1
- package/src/components/dialog/dialog.mdx +0 -20
- package/src/components/dialog/dialog.recipe.ts +0 -254
- package/src/components/dialog/dialog.tsx +0 -61
- package/src/components/dialog/index.ts +0 -1
- package/src/components/em/em.mdx +0 -17
- package/src/components/em/em.tsx +0 -1
- package/src/components/em/index.ts +0 -1
- package/src/components/flex/flex.mdx +0 -41
- package/src/components/flex/flex.tsx +0 -1
- package/src/components/flex/index.ts +0 -1
- package/src/components/grid/grid.mdx +0 -156
- package/src/components/grid/grid.stories.tsx +0 -151
- package/src/components/grid/grid.tsx +0 -29
- package/src/components/grid/index.ts +0 -1
- package/src/components/heading/heading.mdx +0 -23
- package/src/components/heading/heading.recipe.ts +0 -49
- package/src/components/heading/heading.tsx +0 -1
- package/src/components/heading/index.ts +0 -1
- package/src/components/highlight/highlight.mdx +0 -18
- package/src/components/highlight/highlight.tsx +0 -1
- package/src/components/highlight/index.ts +0 -1
- package/src/components/icon-button/icon-button.mdx +0 -98
- package/src/components/icon-button/icon-button.stories.tsx +0 -188
- package/src/components/icon-button/icon-button.tsx +0 -21
- package/src/components/icon-button/icon-button.types.tsx +0 -10
- package/src/components/icon-button/index.ts +0 -2
- package/src/components/index.ts +0 -33
- package/src/components/input/index.ts +0 -1
- package/src/components/input/input.mdx +0 -20
- package/src/components/input/input.recipe.ts +0 -95
- package/src/components/input/input.tsx +0 -1
- package/src/components/input-group/index.ts +0 -1
- package/src/components/input-group/input-group.mdx +0 -20
- package/src/components/input-group/input-group.tsx +0 -44
- package/src/components/kbd/index.ts +0 -1
- package/src/components/kbd/kbd.mdx +0 -18
- package/src/components/kbd/kbd.recipe.ts +0 -57
- package/src/components/kbd/kbd.tsx +0 -1
- package/src/components/link/index.ts +0 -2
- package/src/components/link/link.mdx +0 -77
- package/src/components/link/link.recipe.ts +0 -52
- package/src/components/link/link.slots.tsx +0 -29
- package/src/components/link/link.stories.tsx +0 -204
- package/src/components/link/link.tsx +0 -38
- package/src/components/link/link.types.tsx +0 -26
- package/src/components/list/index.ts +0 -1
- package/src/components/list/list.mdx +0 -18
- package/src/components/list/list.recipe.ts +0 -68
- package/src/components/list/list.tsx +0 -9
- package/src/components/loading-spinner/index.ts +0 -2
- package/src/components/loading-spinner/loading-spinner.mdx +0 -92
- package/src/components/loading-spinner/loading-spinner.recipe.tsx +0 -70
- package/src/components/loading-spinner/loading-spinner.slots.tsx +0 -38
- package/src/components/loading-spinner/loading-spinner.stories.tsx +0 -97
- package/src/components/loading-spinner/loading-spinner.tsx +0 -50
- package/src/components/loading-spinner/loading-spinner.types.tsx +0 -21
- package/src/components/nimbus-provider/color-mode.tsx +0 -32
- package/src/components/nimbus-provider/index.ts +0 -2
- package/src/components/nimbus-provider/nimbus-provider.mdx +0 -21
- package/src/components/nimbus-provider/nimbus-provider.tsx +0 -51
- package/src/components/select/components/select.clear-button.tsx +0 -31
- package/src/components/select/components/select.option-group.tsx +0 -48
- package/src/components/select/components/select.option.tsx +0 -21
- package/src/components/select/components/select.options.tsx +0 -23
- package/src/components/select/components/select.root.tsx +0 -81
- package/src/components/select/index.ts +0 -2
- package/src/components/select/select.mdx +0 -170
- package/src/components/select/select.recipe.tsx +0 -216
- package/src/components/select/select.slots.tsx +0 -58
- package/src/components/select/select.stories.tsx +0 -841
- package/src/components/select/select.tsx +0 -18
- package/src/components/select/select.types.tsx +0 -37
- package/src/components/simple-grid/index.ts +0 -1
- package/src/components/simple-grid/simple-grid.mdx +0 -133
- package/src/components/simple-grid/simple-grid.stories.tsx +0 -143
- package/src/components/simple-grid/simple-grid.tsx +0 -31
- package/src/components/stack/index.ts +0 -1
- package/src/components/stack/stack.mdx +0 -88
- package/src/components/stack/stack.stories.tsx +0 -82
- package/src/components/stack/stack.tsx +0 -15
- package/src/components/table/index.ts +0 -1
- package/src/components/table/table.mdx +0 -23
- package/src/components/table/table.recipe.ts +0 -170
- package/src/components/table/table.tsx +0 -43
- package/src/components/text/index.ts +0 -1
- package/src/components/text/text.mdx +0 -244
- package/src/components/text/text.tsx +0 -23
- package/src/components/text-input/index.ts +0 -2
- package/src/components/text-input/text-input.mdx +0 -118
- package/src/components/text-input/text-input.recipe.tsx +0 -68
- package/src/components/text-input/text-input.slots.tsx +0 -24
- package/src/components/text-input/text-input.stories.tsx +0 -282
- package/src/components/text-input/text-input.tsx +0 -39
- package/src/components/text-input/text-input.types.ts +0 -7
- package/src/components/toggle-button-group/components/toggle-button-group.button.tsx +0 -14
- package/src/components/toggle-button-group/components/toggle-button-group.root.tsx +0 -15
- package/src/components/toggle-button-group/index.ts +0 -2
- package/src/components/toggle-button-group/toggle-button-group.mdx +0 -94
- package/src/components/toggle-button-group/toggle-button-group.recipe.tsx +0 -64
- package/src/components/toggle-button-group/toggle-button-group.slots.tsx +0 -26
- package/src/components/toggle-button-group/toggle-button-group.stories.tsx +0 -311
- package/src/components/toggle-button-group/toggle-button-group.tsx +0 -12
- package/src/components/toggle-button-group/toggle-button-group.types.tsx +0 -62
- package/src/components/tooltip/index.ts +0 -4
- package/src/components/tooltip/make-element-focusable.stories.tsx +0 -56
- package/src/components/tooltip/make-element-focusable.tsx +0 -57
- package/src/components/tooltip/tooltip-trigger.stories.tsx +0 -157
- package/src/components/tooltip/tooltip-trigger.tsx +0 -15
- package/src/components/tooltip/tooltip.mdx +0 -48
- package/src/components/tooltip/tooltip.recipe.ts +0 -26
- package/src/components/tooltip/tooltip.slots.ts +0 -35
- package/src/components/tooltip/tooltip.stories.tsx +0 -139
- package/src/components/tooltip/tooltip.tsx +0 -31
- package/src/components/tooltip/tooltip.types.ts +0 -44
- package/src/components/visually-hidden/index.ts +0 -1
- package/src/components/visually-hidden/visually-hidden.mdx +0 -61
- package/src/components/visually-hidden/visually-hidden.stories.tsx +0 -124
- package/src/components/visually-hidden/visually-hidden.tsx +0 -18
- package/src/docs/accessibility.mdx +0 -21
- package/src/docs/background.mdx +0 -154
- package/src/docs/border.mdx +0 -226
- package/src/docs/changelog.mdx +0 -17
- package/src/docs/components-layout.mdx +0 -22
- package/src/docs/components.mdx +0 -17
- package/src/docs/data-display.mdx +0 -23
- package/src/docs/display.mdx +0 -55
- package/src/docs/effects.mdx +0 -73
- package/src/docs/feedback.mdx +0 -22
- package/src/docs/filters.mdx +0 -268
- package/src/docs/flex-and-grid.mdx +0 -445
- package/src/docs/forms.mdx +0 -22
- package/src/docs/generated/index.mdx +0 -16
- package/src/docs/getting-started.mdx +0 -17
- package/src/docs/home.mdx +0 -56
- package/src/docs/hooks.mdx +0 -16
- package/src/docs/inputs.mdx +0 -21
- package/src/docs/installation.mdx +0 -60
- package/src/docs/interactivity.mdx +0 -278
- package/src/docs/known-issues.mdx +0 -19
- package/src/docs/layout.mdx +0 -301
- package/src/docs/list.mdx +0 -82
- package/src/docs/markdown.mdx +0 -234
- package/src/docs/media.mdx +0 -22
- package/src/docs/naivgation.mdx +0 -22
- package/src/docs/playground.mdx +0 -16
- package/src/docs/rfcs-component-structure-rfcs.mdx +0 -17
- package/src/docs/rfcs-component-structure.mdx +0 -74
- package/src/docs/rfcs-hook-structure.mdx +0 -59
- package/src/docs/sizing.mdx +0 -210
- package/src/docs/spacing.mdx +0 -193
- package/src/docs/style-props-typography.mdx +0 -373
- package/src/docs/style-props.mdx +0 -15
- package/src/docs/svg.mdx +0 -58
- package/src/docs/tables.mdx +0 -95
- package/src/docs/toc.mdx +0 -39
- package/src/docs/tokens/animations.mdx +0 -68
- package/src/docs/tokens/aspect-ratios.mdx +0 -21
- package/src/docs/tokens/blurs.mdx +0 -20
- package/src/docs/tokens/borders.mdx +0 -25
- package/src/docs/tokens/breakpoints.mdx +0 -35
- package/src/docs/tokens/colors.mdx +0 -86
- package/src/docs/tokens/cursors.mdx +0 -21
- package/src/docs/tokens/radii.mdx +0 -23
- package/src/docs/tokens/shadows.mdx +0 -21
- package/src/docs/tokens/sizes.mdx +0 -54
- package/src/docs/tokens/spacing.mdx +0 -35
- package/src/docs/tokens/typography.mdx +0 -61
- package/src/docs/tokens/z-indices.mdx +0 -23
- package/src/docs/tokens-other.mdx +0 -17
- package/src/docs/tokens.mdx +0 -16
- package/src/docs/transforms.mdx +0 -150
- package/src/docs/transitions.mdx +0 -164
- package/src/docs/typography.mdx +0 -17
- package/src/docs/utilities.mdx +0 -17
- package/src/hooks/index.ts +0 -2
- package/src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.mdx +0 -54
- package/src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts +0 -1
- package/src/hooks/use-hotkeys/use-hotkeys.mdx +0 -48
- package/src/hooks/use-hotkeys/use-hotkeys.stories.tsx +0 -69
- package/src/hooks/use-hotkeys/use-hotkeys.ts +0 -1
- package/src/index.ts +0 -3
- package/src/test/utils.tsx +0 -20
- package/src/theme/animation-styles.ts +0 -52
- package/src/theme/breakpoints.ts +0 -32
- package/src/theme/global-css.ts +0 -53
- package/src/theme/index.ts +0 -35
- package/src/theme/keyframes.ts +0 -192
- package/src/theme/layer-styles.ts +0 -12
- package/src/theme/recipes/index.ts +0 -21
- package/src/theme/semantic-tokens/colors.ts +0 -55
- package/src/theme/semantic-tokens/index.ts +0 -9
- package/src/theme/semantic-tokens/radii.ts +0 -3
- package/src/theme/semantic-tokens/shadows.ts +0 -4
- package/src/theme/slot-recipes/index.ts +0 -15
- package/src/theme/text-styles.ts +0 -8
- package/src/theme/tokens/animations.ts +0 -4
- package/src/theme/tokens/aspect-ratios.ts +0 -5
- package/src/theme/tokens/blurs.ts +0 -5
- package/src/theme/tokens/borders.ts +0 -4
- package/src/theme/tokens/colors.ts +0 -8
- package/src/theme/tokens/cursor.ts +0 -4
- package/src/theme/tokens/durations.ts +0 -4
- package/src/theme/tokens/easings.ts +0 -4
- package/src/theme/tokens/font-sizes.ts +0 -4
- package/src/theme/tokens/font-weights.ts +0 -4
- package/src/theme/tokens/fonts.ts +0 -4
- package/src/theme/tokens/index.ts +0 -57
- package/src/theme/tokens/letter-spacings.ts +0 -24
- package/src/theme/tokens/line-heights.ts +0 -4
- package/src/theme/tokens/radii.ts +0 -4
- package/src/theme/tokens/sizes.ts +0 -120
- package/src/theme/tokens/spacing.ts +0 -4
- package/src/theme/tokens/z-index.ts +0 -4
- package/src/utils/extractStyleProps.ts +0 -26
- package/src/utils/fixedForwardRef.ts +0 -17
- package/tsconfig.json +0 -38
- package/vite.config.ts +0 -54
- package/vitest.config.ts +0 -50
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1412 @@
|
|
|
1
|
+
import { AccordionItemProps as AccordionItemProps_2 } from './accordion.types';
|
|
2
|
+
import { AlertActionsProps as AlertActionsProps_2 } from './alert.types';
|
|
3
|
+
import { AlertDescriptionProps as AlertDescriptionProps_2 } from './alert.types';
|
|
4
|
+
import { AlertDismissButtonProps as AlertDismissButtonProps_2 } from './alert.types';
|
|
5
|
+
import { AlertRootComponent as AlertRootComponent_2 } from './alert.types';
|
|
6
|
+
import { AlertTitleProps as AlertTitleProps_2 } from './alert.types';
|
|
7
|
+
import { AriaButtonProps } from 'react-aria';
|
|
8
|
+
import { AriaCheckboxProps } from 'react-aria';
|
|
9
|
+
import { AriaLinkOptions } from 'react-aria';
|
|
10
|
+
import { AriaToggleButtonGroupProps } from 'react-aria';
|
|
11
|
+
import { AriaToggleButtonProps } from 'react-aria';
|
|
12
|
+
import { Bleed } from '@chakra-ui/react';
|
|
13
|
+
import { CardContentProps } from './card.slots';
|
|
14
|
+
import { CardHeaderProps } from './card.slots';
|
|
15
|
+
import { CardProps as CardProps_2 } from './card.types';
|
|
16
|
+
import { Code } from '@chakra-ui/react';
|
|
17
|
+
import { ConditionalValue } from '@chakra-ui/react';
|
|
18
|
+
import { Context } from 'react';
|
|
19
|
+
import { DetailedHTMLProps } from 'react';
|
|
20
|
+
import { Dialog } from '@chakra-ui/react';
|
|
21
|
+
import { DisclosureGroupProps as DisclosureGroupProps_2 } from './accordion.types';
|
|
22
|
+
import { DisclosureProps } from 'react-aria-components';
|
|
23
|
+
import { Dispatch } from 'react';
|
|
24
|
+
import { Em } from '@chakra-ui/react';
|
|
25
|
+
import { FC } from 'react';
|
|
26
|
+
import { Flex } from '@chakra-ui/react';
|
|
27
|
+
import { FocusableOptions } from 'react-aria';
|
|
28
|
+
import { FormFieldProps as FormFieldProps_2 } from './form-field.types';
|
|
29
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
30
|
+
import { GridItemProps } from '@chakra-ui/react';
|
|
31
|
+
import { GridProps as GridProps_2 } from '@chakra-ui/react';
|
|
32
|
+
import { Heading } from '@chakra-ui/react';
|
|
33
|
+
import { Highlight as Highlight_2 } from '@chakra-ui/react';
|
|
34
|
+
import { HTMLAttributes } from 'react';
|
|
35
|
+
import { HTMLChakraProps } from '@chakra-ui/react';
|
|
36
|
+
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
37
|
+
import { JsxStyleProps } from '@chakra-ui/react';
|
|
38
|
+
import { Kbd } from '@chakra-ui/react';
|
|
39
|
+
import { List } from '@chakra-ui/react';
|
|
40
|
+
import { ListBoxItemProps } from 'react-aria-components';
|
|
41
|
+
import { ListBoxProps } from 'react-aria-components';
|
|
42
|
+
import { ListBoxSectionProps } from 'react-aria-components';
|
|
43
|
+
import { LoadingSpinnerRootProps } from './loading-spinner.slots';
|
|
44
|
+
import { PatchHtmlProps } from '@chakra-ui/react';
|
|
45
|
+
import { PolymorphicProps } from '@chakra-ui/react';
|
|
46
|
+
import { PropsWithChildren } from 'react';
|
|
47
|
+
import { ReactNode } from 'react';
|
|
48
|
+
import { RecipeDefinition } from '@chakra-ui/react';
|
|
49
|
+
import { RecipeProps } from '@chakra-ui/react';
|
|
50
|
+
import { RecipeVariantProps } from '@chakra-ui/react';
|
|
51
|
+
import { RecipeVariantRecord } from '@chakra-ui/react';
|
|
52
|
+
import { RefAttributes } from 'react';
|
|
53
|
+
import { RefObject } from 'react';
|
|
54
|
+
import { SelectOptionGroupProps as SelectOptionGroupProps_2 } from './select.types';
|
|
55
|
+
import { SelectOptionProps as SelectOptionProps_2 } from './select.types';
|
|
56
|
+
import { SelectOptionsProps as SelectOptionsProps_2 } from './select.types';
|
|
57
|
+
import { SelectProps } from 'react-aria-components';
|
|
58
|
+
import { SelectRootProps as SelectRootProps_2 } from './select.types';
|
|
59
|
+
import { SetStateAction } from 'react';
|
|
60
|
+
import { SimpleGridProps as SimpleGridProps_2 } from '@chakra-ui/react';
|
|
61
|
+
import { SlotRecipeDefinition } from '@chakra-ui/react';
|
|
62
|
+
import { StackProps as StackProps_2 } from '@chakra-ui/react';
|
|
63
|
+
import { SystemContext } from '@chakra-ui/react';
|
|
64
|
+
import { Table } from '@chakra-ui/react';
|
|
65
|
+
import { TextFieldProps } from 'react-aria-components';
|
|
66
|
+
import { TextProps as TextProps_2 } from '@chakra-ui/react';
|
|
67
|
+
import { ThemeProviderProps } from 'next-themes';
|
|
68
|
+
import { ToggleButton } from 'react-aria-components';
|
|
69
|
+
import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
|
|
70
|
+
import { ToggleButtonGroupButtonComponent as ToggleButtonGroupButtonComponent_2 } from './toggle-button-group.types';
|
|
71
|
+
import { ToggleButtonGroupRootComponent as ToggleButtonGroupRootComponent_2 } from './toggle-button-group.types';
|
|
72
|
+
import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
|
|
73
|
+
import { TooltipTrigger as TooltipTrigger_2 } from 'react-aria-components';
|
|
74
|
+
import { TooltipTriggerComponentProps } from 'react-aria-components';
|
|
75
|
+
import { UnstyledProp } from '@chakra-ui/react';
|
|
76
|
+
import { useButton } from 'react-aria';
|
|
77
|
+
import { useCopyToClipboard } from 'react-use';
|
|
78
|
+
import { useDisclosure } from 'react-aria';
|
|
79
|
+
import { useDisclosureState } from 'react-stately';
|
|
80
|
+
import { useHotkeys } from 'react-hotkeys-hook';
|
|
81
|
+
import { VisuallyHiddenProps as VisuallyHiddenProps_2 } from 'react-aria';
|
|
82
|
+
|
|
83
|
+
export declare const Accordion: {
|
|
84
|
+
Root: ForwardRefExoticComponent<Omit<DisclosureGroupProps_2, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
85
|
+
Item: ForwardRefExoticComponent<AccordionItemProps_2 & {
|
|
86
|
+
children: ReactNode;
|
|
87
|
+
id?: string;
|
|
88
|
+
value?: string;
|
|
89
|
+
isDisabled?: boolean;
|
|
90
|
+
isExpanded?: boolean;
|
|
91
|
+
onExpandedChange?: (isExpanded: boolean) => void;
|
|
92
|
+
} & RefAttributes<HTMLDivElement>>;
|
|
93
|
+
Header: ForwardRefExoticComponent<Omit<DisclosureGroupProps_2, "ref"> & RefAttributes<HTMLButtonElement>>;
|
|
94
|
+
Content: ForwardRefExoticComponent<Omit<DisclosureGroupProps_2, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
95
|
+
HeaderRightContent: ForwardRefExoticComponent<Omit<PatchHtmlProps<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>, "page" | "container" | "_hover" | "_active" | "_focus" | "_focusWithin" | "_focusVisible" | "_disabled" | "_visited" | "_target" | "_readOnly" | "_readWrite" | "_empty" | "_checked" | "_enabled" | "_expanded" | "_highlighted" | "_complete" | "_incomplete" | "_dragging" | "_before" | "_after" | "_firstLetter" | "_firstLine" | "_marker" | "_selection" | "_file" | "_backdrop" | "_first" | "_last" | "_notFirst" | "_notLast" | "_only" | "_even" | "_odd" | "_peerFocus" | "_peerHover" | "_peerActive" | "_peerFocusWithin" | "_peerFocusVisible" | "_peerDisabled" | "_peerChecked" | "_peerInvalid" | "_peerExpanded" | "_peerPlaceholderShown" | "_groupFocus" | "_groupHover" | "_groupActive" | "_groupFocusWithin" | "_groupFocusVisible" | "_groupDisabled" | "_groupChecked" | "_groupExpanded" | "_groupInvalid" | "_indeterminate" | "_required" | "_valid" | "_invalid" | "_autofill" | "_inRange" | "_outOfRange" | "_placeholder" | "_placeholderShown" | "_pressed" | "_selected" | "_grabbed" | "_underValue" | "_overValue" | "_atValue" | "_default" | "_optional" | "_open" | "_closed" | "_fullscreen" | "_loading" | "_hidden" | "_current" | "_currentPage" | "_currentStep" | "_today" | "_unavailable" | "_rangeStart" | "_rangeEnd" | "_now" | "_topmost" | "_motionReduce" | "_motionSafe" | "_print" | "_landscape" | "_portrait" | "_dark" | "_light" | "_osDark" | "_osLight" | "_highContrast" | "_lessContrast" | "_moreContrast" | "_ltr" | "_rtl" | "_scrollbar" | "_scrollbarThumb" | "_scrollbarTrack" | "_horizontal" | "_vertical" | "_icon" | "_starting" | "sm" | "smOnly" | "smDown" | "md" | "mdOnly" | "mdDown" | "lg" | "lgOnly" | "lgDown" | "xl" | "xlOnly" | "xlDown" | "2xl" | "2xlOnly" | "2xlDown" | "smToMd" | "smToLg" | "smToXl" | "smTo2xl" | "mdToLg" | "mdToXl" | "mdTo2xl" | "lgToXl" | "lgTo2xl" | "xlTo2xl" | "base" | "display" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "color" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "margin" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "paddingBlock" | "paddingInline" | "placeContent" | "placeItems" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "transition" | "viewTimeline" | "WebkitAppearance" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBoxReflect" | "WebkitLineClamp" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitOverflowScrolling" | "WebkitTapHighlightColor" | "WebkitTextFillColor" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTouchCallout" | "WebkitUserModify" | "WebkitBorderBefore" | "WebkitMask" | "WebkitTextStroke" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "bg" | "colorPalette" | "focusVisibleRing" | "layerStyle" | "textStyle" | "css" | "initialLetterAlign" | "bgColor" | "bgSize" | "bgPos" | "bgRepeat" | "bgAttachment" | "bgClip" | "bgGradient" | "bgImg" | "bgImage" | "borderStart" | "borderX" | "borderY" | "borderStartColor" | "borderEndColor" | "borderStartStyle" | "borderEndStyle" | "rounded" | "roundedTopLeft" | "roundedStartStart" | "borderTopStartRadius" | "roundedEndStart" | "borderBottomStartRadius" | "roundedTopRight" | "roundedStartEnd" | "borderTopEndRadius" | "roundedEndEnd" | "borderBottomEndRadius" | "roundedBottomLeft" | "roundedBottomRight" | "roundedStart" | "borderStartRadius" | "roundedEnd" | "borderEndRadius" | "roundedTop" | "roundedBottom" | "roundedLeft" | "roundedRight" | "borderXWidth" | "borderStartWidth" | "borderEndWidth" | "borderYWidth" | "shadow" | "shadowColor" | "blendMode" | "bgBlendMode" | "gapY" | "gapX" | "flexDir" | "w" | "h" | "minW" | "minH" | "maxW" | "maxH" | "overscroll" | "overscrollX" | "overscrollY" | "scrollPaddingX" | "scrollPaddingY" | "listStylePos" | "listStyleImg" | "pos" | "insetX" | "insetY" | "insetStart" | "insetEnd" | "m" | "mt" | "mr" | "mb" | "ml" | "ms" | "marginStart" | "me" | "marginEnd" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "ps" | "paddingStart" | "pe" | "paddingEnd" | "px" | "paddingX" | "py" | "paddingY" | "textDecor" | "backgroundGradient" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderInlineStartRadius" | "borderInlineEndRadius" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius" | "divideX" | "divideY" | "divideColor" | "divideStyle" | "boxShadowColor" | "blur" | "brightness" | "contrast" | "grayscale" | "hueRotate" | "invert" | "saturate" | "sepia" | "dropShadow" | "backdropBlur" | "backdropBrightness" | "backdropContrast" | "backdropGrayscale" | "backdropHueRotate" | "backdropInvert" | "backdropOpacity" | "backdropSaturate" | "backdropSepia" | "focusRing" | "focusRingColor" | "focusRingOffset" | "focusRingWidth" | "focusRingStyle" | "boxSize" | "hideFrom" | "hideBelow" | "scrollbar" | "scrollMarginX" | "scrollMarginY" | "scrollSnapStrictness" | "ring" | "ringColor" | "ringOffset" | "ringOffsetColor" | "ringInset" | "skewX" | "skewY" | "scaleX" | "scaleY" | "spaceXReverse" | "spaceX" | "spaceYReverse" | "spaceY" | "rotateX" | "rotateY" | "translateX" | "translateY" | "truncate" | "srOnly" | "debug" | "animationStyle" | keyof PolymorphicProps> & Omit<JsxStyleProps, never> & PolymorphicProps & RefAttributes<HTMLDivElement>>;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export declare type AccordionComposition = {
|
|
99
|
+
state: ReturnType<typeof useDisclosureState>;
|
|
100
|
+
buttonProps: ReturnType<typeof useButton>["buttonProps"];
|
|
101
|
+
panelProps: ReturnType<typeof useDisclosure>["panelProps"];
|
|
102
|
+
triggerRef: RefObject<HTMLButtonElement>;
|
|
103
|
+
panelRef: RefObject<HTMLDivElement>;
|
|
104
|
+
isFocusVisible: boolean;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export declare type AccordionItemProps = {
|
|
108
|
+
isDisabled?: boolean;
|
|
109
|
+
isExpanded?: boolean;
|
|
110
|
+
onExpandedChange?: (isExpanded: boolean) => void;
|
|
111
|
+
id?: string;
|
|
112
|
+
children: ReactNode;
|
|
113
|
+
title?: string;
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
export declare interface AccordionProps extends Omit<DisclosureProps, "children" | "id"> {
|
|
117
|
+
additionalTriggerComponent?: ReactNode;
|
|
118
|
+
children: ReactNode;
|
|
119
|
+
recipe?: string;
|
|
120
|
+
size?: "sm" | "md";
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export declare type AccordionRootProps = HTMLChakraProps<"div", RecipeVariantProps<typeof accordionSlotRecipe>>;
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Recipe configuration for the Accordion component.
|
|
127
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
128
|
+
*/
|
|
129
|
+
declare const accordionSlotRecipe: SlotRecipeDefinition<"root" | "trigger" | "disclosure" | "panel" | "accordionTitle" | "headerContentRight", {
|
|
130
|
+
size: {
|
|
131
|
+
md: {
|
|
132
|
+
trigger: {
|
|
133
|
+
"--font-size": "fontSizes.500";
|
|
134
|
+
"& svg": {
|
|
135
|
+
"--width": "sizes.600";
|
|
136
|
+
"--height": "sizes.600";
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
panel: {
|
|
140
|
+
"--padding-top": "spacing.600";
|
|
141
|
+
"--padding-bottom": "spacing.800";
|
|
142
|
+
"--padding-left": "spacing.800";
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
sm: {
|
|
146
|
+
trigger: {
|
|
147
|
+
"--font-size": "fontSizes.400";
|
|
148
|
+
"& svg": {
|
|
149
|
+
"--width": "sizes.500";
|
|
150
|
+
"--height": "sizes.500";
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
panel: {
|
|
154
|
+
"--padding-top": "spacing.400";
|
|
155
|
+
"--padding-bottom": "spacing.600";
|
|
156
|
+
"--padding-left": "spacing.700";
|
|
157
|
+
};
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
}>;
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Alert
|
|
164
|
+
* ============================================================
|
|
165
|
+
* Provides feedback to the user about the status of an action or system event
|
|
166
|
+
*/
|
|
167
|
+
export declare const Alert: {
|
|
168
|
+
Root: AlertRootComponent_2;
|
|
169
|
+
Title: {
|
|
170
|
+
({ children, ...props }: AlertTitleProps_2): null;
|
|
171
|
+
displayName: string;
|
|
172
|
+
};
|
|
173
|
+
Description: {
|
|
174
|
+
({ children, ...props }: AlertDescriptionProps_2): null;
|
|
175
|
+
displayName: string;
|
|
176
|
+
};
|
|
177
|
+
Actions: {
|
|
178
|
+
({ children, ...props }: AlertActionsProps_2): null;
|
|
179
|
+
displayName: string;
|
|
180
|
+
};
|
|
181
|
+
DismissButton: {
|
|
182
|
+
({ children, ...props }: AlertDismissButtonProps_2): null;
|
|
183
|
+
displayName: string;
|
|
184
|
+
};
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
/** Base Chakra styling props for the `actions` slot (`div`). */
|
|
188
|
+
export declare type AlertActionsProps = HTMLChakraProps<"div", RecipeProps<"div">>;
|
|
189
|
+
|
|
190
|
+
/** Props for the `Alert.Description` sub-component (inherits from Text). */
|
|
191
|
+
export declare type AlertDescriptionProps = TextProps;
|
|
192
|
+
|
|
193
|
+
/** Props for the `Alert.DismissButton` sub-component (inherits from Button). */
|
|
194
|
+
export declare type AlertDismissButtonProps = ButtonProps;
|
|
195
|
+
|
|
196
|
+
/** Base Chakra styling props for the `icon` slot (`div`). */
|
|
197
|
+
export declare type AlertIconProps = HTMLChakraProps<"div", RecipeProps<"div">>;
|
|
198
|
+
|
|
199
|
+
/** Final external props for the `<Alert>` component (variants + children + data-* attrs). */
|
|
200
|
+
export declare type AlertProps = PropsWithChildren<AlertVariantProps> & {
|
|
201
|
+
[key: `data-${string}`]: unknown;
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* Recipe configuration for the Alert component.
|
|
206
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
207
|
+
*/
|
|
208
|
+
declare const alertRecipe: SlotRecipeDefinition<"title" | "description" | "icon" | "root" | "actions" | "dismissButton", {
|
|
209
|
+
tone: {
|
|
210
|
+
critical: {
|
|
211
|
+
root: {
|
|
212
|
+
colorPalette: "error";
|
|
213
|
+
};
|
|
214
|
+
};
|
|
215
|
+
info: {
|
|
216
|
+
root: {
|
|
217
|
+
colorPalette: "info";
|
|
218
|
+
};
|
|
219
|
+
};
|
|
220
|
+
warning: {
|
|
221
|
+
root: {
|
|
222
|
+
colorPalette: "amber";
|
|
223
|
+
};
|
|
224
|
+
};
|
|
225
|
+
positive: {
|
|
226
|
+
root: {
|
|
227
|
+
colorPalette: "success";
|
|
228
|
+
};
|
|
229
|
+
};
|
|
230
|
+
};
|
|
231
|
+
variant: {
|
|
232
|
+
flat: {};
|
|
233
|
+
outlined: {
|
|
234
|
+
root: {
|
|
235
|
+
border: "solid-25";
|
|
236
|
+
borderColor: "colorPalette.5";
|
|
237
|
+
backgroundColor: "colorPalette.2";
|
|
238
|
+
padding: "200";
|
|
239
|
+
borderRadius: "200";
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
};
|
|
243
|
+
}>;
|
|
244
|
+
|
|
245
|
+
/** Type signature for the main `Alert` component (using `forwardRef`). */
|
|
246
|
+
export declare type AlertRootComponent = ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;
|
|
247
|
+
|
|
248
|
+
/** Base Chakra styling props for the root `div` slot. */
|
|
249
|
+
export declare type AlertRootProps = HTMLChakraProps<"div", RecipeProps<"div">>;
|
|
250
|
+
|
|
251
|
+
/** Props for the `Alert.Title` sub-component (inherits from Text). */
|
|
252
|
+
export declare type AlertTitleProps = TextProps;
|
|
253
|
+
|
|
254
|
+
/** Combined root props including Chakra styles and recipe variants. */
|
|
255
|
+
declare type AlertVariantProps = AlertRootProps & RecipeVariantProps<typeof alertRecipe>;
|
|
256
|
+
|
|
257
|
+
export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
|
|
258
|
+
|
|
259
|
+
export declare interface AvatarComponentProps extends HTMLAttributes<HTMLDivElement>, RecipeVariantProps<typeof avatarRecipe> {
|
|
260
|
+
/**
|
|
261
|
+
* The first name used to show initials
|
|
262
|
+
*/
|
|
263
|
+
firstName: string;
|
|
264
|
+
/**
|
|
265
|
+
* The last name used to show initials
|
|
266
|
+
*/
|
|
267
|
+
lastName: string;
|
|
268
|
+
/**
|
|
269
|
+
* The image URL
|
|
270
|
+
*/
|
|
271
|
+
src?: string;
|
|
272
|
+
/**
|
|
273
|
+
* Alt text for the avatar image
|
|
274
|
+
*/
|
|
275
|
+
alt?: string;
|
|
276
|
+
/**
|
|
277
|
+
* If the avatar is disabled
|
|
278
|
+
*/
|
|
279
|
+
isDisabled?: boolean;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
export declare interface AvatarProps extends FunctionalAvatarProps {
|
|
283
|
+
children?: React.ReactNode;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
declare const avatarRecipe: RecipeDefinition< {
|
|
287
|
+
size: {
|
|
288
|
+
md: {
|
|
289
|
+
width: number;
|
|
290
|
+
height: number;
|
|
291
|
+
textStyle: "sm";
|
|
292
|
+
};
|
|
293
|
+
xs: {
|
|
294
|
+
width: number;
|
|
295
|
+
height: number;
|
|
296
|
+
textStyle: "xs";
|
|
297
|
+
};
|
|
298
|
+
"2xs": {
|
|
299
|
+
width: number;
|
|
300
|
+
height: number;
|
|
301
|
+
textStyle: "xs";
|
|
302
|
+
};
|
|
303
|
+
};
|
|
304
|
+
}>;
|
|
305
|
+
|
|
306
|
+
declare interface AvatarRecipeProps extends RecipeProps<"div">, UnstyledProp {
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
declare interface AvatarRootProps extends HTMLChakraProps<"div", AvatarRecipeProps> {
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/**
|
|
313
|
+
* Badge
|
|
314
|
+
* ============================================================
|
|
315
|
+
* badge
|
|
316
|
+
*
|
|
317
|
+
* Features:
|
|
318
|
+
*
|
|
319
|
+
* - allows forwarding refs to the underlying DOM element
|
|
320
|
+
* - accepts all native html 'HTMLSpanElement' attributes (including aria- & data-attributes)
|
|
321
|
+
* - supports 'variants', 'sizes', etc. configured in the recipe
|
|
322
|
+
* - allows overriding styles by using style-props
|
|
323
|
+
* - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
|
|
324
|
+
*/
|
|
325
|
+
export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* Main props interface for the Badge component.
|
|
329
|
+
* Extends BadgeVariantProps to include both root props and variant props,
|
|
330
|
+
* while adding support for React children.
|
|
331
|
+
*/
|
|
332
|
+
export declare interface BadgeProps extends BadgeVariantProps {
|
|
333
|
+
children?: React.ReactNode;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/**
|
|
337
|
+
* Recipe configuration for the Badge component.
|
|
338
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
339
|
+
*/
|
|
340
|
+
declare const badgeRecipe: RecipeDefinition< {
|
|
341
|
+
size: {
|
|
342
|
+
"2xs": {
|
|
343
|
+
fontSize: "300";
|
|
344
|
+
gap: "100";
|
|
345
|
+
h: "600";
|
|
346
|
+
lineHeight: "350";
|
|
347
|
+
px: "200";
|
|
348
|
+
_icon: {
|
|
349
|
+
width: "400";
|
|
350
|
+
height: "400";
|
|
351
|
+
};
|
|
352
|
+
};
|
|
353
|
+
xs: {
|
|
354
|
+
fontSize: "350";
|
|
355
|
+
gap: "100";
|
|
356
|
+
h: "800";
|
|
357
|
+
lineHeight: "400";
|
|
358
|
+
px: "300";
|
|
359
|
+
_icon: {
|
|
360
|
+
width: "500";
|
|
361
|
+
height: "500";
|
|
362
|
+
};
|
|
363
|
+
};
|
|
364
|
+
md: {
|
|
365
|
+
fontSize: "400";
|
|
366
|
+
gap: "200";
|
|
367
|
+
h: "1000";
|
|
368
|
+
lineHeight: "500";
|
|
369
|
+
px: "400";
|
|
370
|
+
_icon: {
|
|
371
|
+
width: "600";
|
|
372
|
+
height: "600";
|
|
373
|
+
};
|
|
374
|
+
};
|
|
375
|
+
};
|
|
376
|
+
}>;
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
380
|
+
* with the unstyled prop option for the span element.
|
|
381
|
+
*/
|
|
382
|
+
export declare interface BadgeRecipeProps extends RecipeProps<"span">, UnstyledProp {
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
387
|
+
* This creates a complete set of props for the root element, combining
|
|
388
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
389
|
+
*/
|
|
390
|
+
export declare interface BadgeRootProps extends HTMLChakraProps<"span", BadgeRecipeProps> {
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Combines the root props with Chakra UI's recipe variant props.
|
|
395
|
+
* This allows the component to accept both structural props from Root
|
|
396
|
+
* and styling variants from the recipe.
|
|
397
|
+
*/
|
|
398
|
+
declare type BadgeVariantProps = BadgeRootProps & RecipeVariantProps<typeof badgeRecipe> & {
|
|
399
|
+
[key: `data-${string}`]: string;
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
export { Bleed }
|
|
403
|
+
|
|
404
|
+
export declare const Box: ForwardRefExoticComponent<BoxProps & RefAttributes<HTMLDivElement>>;
|
|
405
|
+
|
|
406
|
+
export declare interface BoxProps extends HTMLChakraProps<"div"> {
|
|
407
|
+
children?: React.ReactNode;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
|
|
411
|
+
|
|
412
|
+
/**
|
|
413
|
+
* Recipe configuration for the ToggleButtonGroup component.
|
|
414
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
415
|
+
*/
|
|
416
|
+
declare const buttonGroupRecipe: SlotRecipeDefinition<"button" | "root", {
|
|
417
|
+
size: {
|
|
418
|
+
xs: {
|
|
419
|
+
button: {
|
|
420
|
+
h: "800";
|
|
421
|
+
minW: "800";
|
|
422
|
+
fontSize: "350";
|
|
423
|
+
fontWeight: "500";
|
|
424
|
+
lineHeight: "400";
|
|
425
|
+
px: "300";
|
|
426
|
+
gap: "100";
|
|
427
|
+
_icon: {
|
|
428
|
+
width: "500";
|
|
429
|
+
height: "500";
|
|
430
|
+
};
|
|
431
|
+
} | undefined;
|
|
432
|
+
};
|
|
433
|
+
md: {
|
|
434
|
+
button: {
|
|
435
|
+
h: "1000";
|
|
436
|
+
minW: "1000";
|
|
437
|
+
fontSize: "400";
|
|
438
|
+
lineHeight: "500";
|
|
439
|
+
px: "400";
|
|
440
|
+
gap: "200";
|
|
441
|
+
_icon: {
|
|
442
|
+
width: "600";
|
|
443
|
+
height: "600";
|
|
444
|
+
};
|
|
445
|
+
} | undefined;
|
|
446
|
+
};
|
|
447
|
+
};
|
|
448
|
+
tone: {
|
|
449
|
+
primary: {
|
|
450
|
+
button: {
|
|
451
|
+
colorPalette: "primary";
|
|
452
|
+
};
|
|
453
|
+
};
|
|
454
|
+
critical: {
|
|
455
|
+
button: {
|
|
456
|
+
colorPalette: "error";
|
|
457
|
+
};
|
|
458
|
+
};
|
|
459
|
+
neutral: {
|
|
460
|
+
button: {
|
|
461
|
+
colorPalette: "neutral";
|
|
462
|
+
};
|
|
463
|
+
};
|
|
464
|
+
};
|
|
465
|
+
}>;
|
|
466
|
+
|
|
467
|
+
export declare interface ButtonProps extends FunctionalButtonProps {
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/**
|
|
471
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
472
|
+
* with the unstyled prop option for the button element.
|
|
473
|
+
*/
|
|
474
|
+
declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/**
|
|
478
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
479
|
+
* This creates a complete set of props for the root element, combining
|
|
480
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
481
|
+
*/
|
|
482
|
+
declare type ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
|
|
483
|
+
|
|
484
|
+
export declare const Card: {
|
|
485
|
+
Root: ForwardRefExoticComponent<CardProps_2 & RefAttributes<HTMLDivElement>>;
|
|
486
|
+
Header: {
|
|
487
|
+
({ children, ...props }: CardHeaderProps): null;
|
|
488
|
+
displayName: string;
|
|
489
|
+
};
|
|
490
|
+
Content: {
|
|
491
|
+
({ children, ...props }: CardContentProps): null;
|
|
492
|
+
displayName: string;
|
|
493
|
+
};
|
|
494
|
+
};
|
|
495
|
+
|
|
496
|
+
/**
|
|
497
|
+
* Main props interface for the Card component.
|
|
498
|
+
* Extends CardVariantProps to include both root props and variant props,
|
|
499
|
+
* while adding support for React children.
|
|
500
|
+
*/
|
|
501
|
+
export declare interface CardProps extends CardVariantProps {
|
|
502
|
+
children?: React.ReactNode;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
/**
|
|
506
|
+
* Recipe configuration for the Card component.
|
|
507
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
508
|
+
*/
|
|
509
|
+
declare const cardRecipe: SlotRecipeDefinition<"content" | "header" | "root", {
|
|
510
|
+
cardPadding: {
|
|
511
|
+
sm: {
|
|
512
|
+
root: {
|
|
513
|
+
padding: "200";
|
|
514
|
+
};
|
|
515
|
+
};
|
|
516
|
+
md: {
|
|
517
|
+
root: {
|
|
518
|
+
padding: "400";
|
|
519
|
+
};
|
|
520
|
+
};
|
|
521
|
+
lg: {
|
|
522
|
+
root: {
|
|
523
|
+
padding: "600";
|
|
524
|
+
};
|
|
525
|
+
};
|
|
526
|
+
};
|
|
527
|
+
borderStyle: {
|
|
528
|
+
none: {};
|
|
529
|
+
outlined: {
|
|
530
|
+
root: {
|
|
531
|
+
border: "solid-25";
|
|
532
|
+
borderColor: "colorPalette.3";
|
|
533
|
+
};
|
|
534
|
+
};
|
|
535
|
+
};
|
|
536
|
+
elevation: {
|
|
537
|
+
none: {};
|
|
538
|
+
elevated: {
|
|
539
|
+
root: {
|
|
540
|
+
shadow: "1";
|
|
541
|
+
};
|
|
542
|
+
};
|
|
543
|
+
};
|
|
544
|
+
backgroundStyle: {
|
|
545
|
+
default: {
|
|
546
|
+
root: {
|
|
547
|
+
backgroundColor: "colorPalette.contrast";
|
|
548
|
+
};
|
|
549
|
+
};
|
|
550
|
+
muted: {
|
|
551
|
+
root: {
|
|
552
|
+
backgroundColor: "colorPalette.2";
|
|
553
|
+
};
|
|
554
|
+
};
|
|
555
|
+
};
|
|
556
|
+
}>;
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
560
|
+
* with the unstyled prop option for the div element.
|
|
561
|
+
*/
|
|
562
|
+
declare interface CardRecipeProps extends RecipeProps<"div">, UnstyledProp {
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
/**
|
|
566
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
567
|
+
* This creates a complete set of props for the root element, combining
|
|
568
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
569
|
+
*/
|
|
570
|
+
declare interface CardRootProps extends HTMLChakraProps<"div", CardRecipeProps> {
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
/**
|
|
574
|
+
* Combines the root props with Chakra UI's recipe variant props.
|
|
575
|
+
* This allows the component to accept both structural props from Root
|
|
576
|
+
* and styling variants from the recipe.
|
|
577
|
+
*/
|
|
578
|
+
declare type CardVariantProps = CardRootProps & RecipeVariantProps<typeof cardRecipe> & {
|
|
579
|
+
[key: `data-${string}`]: unknown;
|
|
580
|
+
};
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* Checkbox
|
|
584
|
+
* ============================================================
|
|
585
|
+
* displays a checkbox and an associated label
|
|
586
|
+
*
|
|
587
|
+
* Features:
|
|
588
|
+
*
|
|
589
|
+
* - allows forwarding refs to the underlying DOM element
|
|
590
|
+
* - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
|
|
591
|
+
* - supports 'variants', 'sizes', etc. configured in the recipe
|
|
592
|
+
* - allows overriding styles by using style-props
|
|
593
|
+
* - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
|
|
594
|
+
*/
|
|
595
|
+
export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* Main props interface for the Checkbox component.
|
|
599
|
+
* Extends CheckboxVariantProps to include both root props and variant props,
|
|
600
|
+
* while adding support for React children.
|
|
601
|
+
*/
|
|
602
|
+
export declare interface CheckboxProps extends CheckboxVariantProps {
|
|
603
|
+
children?: React.ReactNode;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
declare interface CheckboxRootProps extends HTMLChakraProps<"label", RecipeVariantProps<typeof checkboxSlotRecipe>> {
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
/**
|
|
610
|
+
* Recipe configuration for the Checkbox component.
|
|
611
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
612
|
+
*/
|
|
613
|
+
declare const checkboxSlotRecipe: SlotRecipeDefinition<"label" | "root" | "indicator", {
|
|
614
|
+
size: {
|
|
615
|
+
md: {
|
|
616
|
+
label: {
|
|
617
|
+
fontSize: "350";
|
|
618
|
+
fontWeight: "400";
|
|
619
|
+
lineHeight: "400";
|
|
620
|
+
};
|
|
621
|
+
indicator: {
|
|
622
|
+
w: "400";
|
|
623
|
+
h: "400";
|
|
624
|
+
zIndex: number;
|
|
625
|
+
_after: {
|
|
626
|
+
position: "absolute";
|
|
627
|
+
content: "''";
|
|
628
|
+
width: "600";
|
|
629
|
+
height: "600";
|
|
630
|
+
zIndex: number;
|
|
631
|
+
};
|
|
632
|
+
};
|
|
633
|
+
};
|
|
634
|
+
};
|
|
635
|
+
}>;
|
|
636
|
+
|
|
637
|
+
/**
|
|
638
|
+
* Combines the root props with Chakra UI's recipe variant props.
|
|
639
|
+
* This allows the component to accept both structural props from Root
|
|
640
|
+
* and styling variants from the recipe.
|
|
641
|
+
*/
|
|
642
|
+
declare type CheckboxVariantProps = CheckboxRootProps & RecipeVariantProps<typeof checkboxSlotRecipe> & AriaCheckboxProps;
|
|
643
|
+
|
|
644
|
+
export { Code }
|
|
645
|
+
|
|
646
|
+
export declare function ColorModeLabel(): "Light Theme" | "DarkTheme";
|
|
647
|
+
|
|
648
|
+
declare interface ColorModeProviderProps extends ThemeProviderProps {
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
export declare const DialogActionTrigger: ForwardRefExoticComponent<Dialog.ActionTriggerProps & RefAttributes<HTMLButtonElement>>;
|
|
652
|
+
|
|
653
|
+
export declare const DialogBackdrop: ForwardRefExoticComponent<Dialog.BackdropProps & RefAttributes<HTMLDivElement>>;
|
|
654
|
+
|
|
655
|
+
export declare const DialogBody: ForwardRefExoticComponent<Dialog.BodyProps & RefAttributes<HTMLDivElement>>;
|
|
656
|
+
|
|
657
|
+
export declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
|
|
658
|
+
|
|
659
|
+
export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;
|
|
660
|
+
|
|
661
|
+
declare interface DialogContentProps extends Dialog.ContentProps {
|
|
662
|
+
portalled?: boolean;
|
|
663
|
+
portalRef?: React.RefObject<HTMLElement>;
|
|
664
|
+
backdrop?: boolean;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
export declare const DialogDescription: ForwardRefExoticComponent<Dialog.DescriptionProps & RefAttributes<HTMLDivElement>>;
|
|
668
|
+
|
|
669
|
+
export declare const DialogFooter: ForwardRefExoticComponent<Dialog.FooterProps & RefAttributes<HTMLDivElement>>;
|
|
670
|
+
|
|
671
|
+
export declare const DialogHeader: ForwardRefExoticComponent<Dialog.HeaderProps & RefAttributes<HTMLDivElement>>;
|
|
672
|
+
|
|
673
|
+
export declare const DialogRoot: FC<Dialog.RootProps>;
|
|
674
|
+
|
|
675
|
+
export declare const DialogTitle: ForwardRefExoticComponent<Dialog.TitleProps & RefAttributes<HTMLDivElement>>;
|
|
676
|
+
|
|
677
|
+
export declare const DialogTrigger: ForwardRefExoticComponent<Dialog.TriggerProps & RefAttributes<HTMLButtonElement>>;
|
|
678
|
+
|
|
679
|
+
export declare type DisclosureGroupProps = AccordionProps & {
|
|
680
|
+
children: ReactNode;
|
|
681
|
+
ref?: RefAttributes<HTMLButtonElement>;
|
|
682
|
+
allowsMultipleExpanded?: boolean;
|
|
683
|
+
onExpandedChange?: (isExpanded: boolean) => void;
|
|
684
|
+
isDisabled?: boolean;
|
|
685
|
+
isExpanded?: boolean;
|
|
686
|
+
};
|
|
687
|
+
|
|
688
|
+
export declare type DisclosureItemProps = AccordionItemProps & {
|
|
689
|
+
children: ReactNode;
|
|
690
|
+
id?: string;
|
|
691
|
+
value?: string;
|
|
692
|
+
isDisabled?: boolean;
|
|
693
|
+
isExpanded?: boolean;
|
|
694
|
+
onExpandedChange?: (isExpanded: boolean) => void;
|
|
695
|
+
};
|
|
696
|
+
|
|
697
|
+
export { Em }
|
|
698
|
+
|
|
699
|
+
/**
|
|
700
|
+
* For use in components that use the polymorphic `as` and `asChild` props
|
|
701
|
+
* internally, but do not make them available to the consumer.
|
|
702
|
+
*
|
|
703
|
+
* Long rambling background:
|
|
704
|
+
* React-Aria's components cannot be configured to use `as` and `asChild` internally,
|
|
705
|
+
* and cannot be directly styled by chakra's styledSystem. Therefore components
|
|
706
|
+
* from `react-aria-components` should be wrapped in a chakra `withContext`
|
|
707
|
+
* root component to set the styles onto the `r-a-c` component using `asChild`.
|
|
708
|
+
* This means that we need to allow polymorphism internally, but should not
|
|
709
|
+
* allow it in the external props api since it would not work.
|
|
710
|
+
*/
|
|
711
|
+
declare type ExcludePolymorphicFromProps<T> = Omit<T, "as" | "asChild">;
|
|
712
|
+
|
|
713
|
+
export { Flex }
|
|
714
|
+
|
|
715
|
+
export declare const FormField: {
|
|
716
|
+
Root: ForwardRefExoticComponent<FormFieldProps_2 & RefAttributes<HTMLDivElement>>;
|
|
717
|
+
Label: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps) => null;
|
|
718
|
+
Input: ({ children, ...inputSlotProps }: FormFieldInputSlotProps) => null;
|
|
719
|
+
Description: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps) => null;
|
|
720
|
+
Error: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps) => null;
|
|
721
|
+
InfoBox: ({ children }: {
|
|
722
|
+
children: ReactNode;
|
|
723
|
+
}) => null;
|
|
724
|
+
};
|
|
725
|
+
|
|
726
|
+
export declare const FormFieldContext: Context<FormFieldContextType>;
|
|
727
|
+
|
|
728
|
+
export declare type FormFieldContextPayloadType = {
|
|
729
|
+
label: ReactNode;
|
|
730
|
+
labelSlotProps?: FormFieldLabelSlotProps;
|
|
731
|
+
input: ReactNode;
|
|
732
|
+
inputSlotProps?: FormFieldInputSlotProps;
|
|
733
|
+
description: ReactNode;
|
|
734
|
+
descriptionSlotProps?: FormFieldDescriptionSlotProps;
|
|
735
|
+
error: ReactNode;
|
|
736
|
+
errorSlotProps?: FormFieldErrorSlotProps;
|
|
737
|
+
info: ReactNode;
|
|
738
|
+
isInvalid?: boolean;
|
|
739
|
+
isRequired?: boolean;
|
|
740
|
+
isDisabled?: boolean;
|
|
741
|
+
isReadOnly?: boolean;
|
|
742
|
+
};
|
|
743
|
+
|
|
744
|
+
export declare type FormFieldContextType = {
|
|
745
|
+
context: FormFieldContextPayloadType;
|
|
746
|
+
setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;
|
|
747
|
+
};
|
|
748
|
+
|
|
749
|
+
declare interface FormFieldDescriptionSlotProps extends HTMLChakraProps<"div"> {
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
declare interface FormFieldErrorSlotProps extends HTMLChakraProps<"div"> {
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
declare interface FormFieldInputSlotProps extends HTMLChakraProps<"div"> {
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
declare interface FormFieldLabelSlotProps extends HTMLChakraProps<"div"> {
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
/**
|
|
762
|
+
* Main props interface for the FormField component.
|
|
763
|
+
* Extends FormFieldVariantProps to include both root props and variant props,
|
|
764
|
+
* while adding support for React children.
|
|
765
|
+
*/
|
|
766
|
+
export declare interface FormFieldProps extends FormFieldRootSlotProps {
|
|
767
|
+
children?: React.ReactNode;
|
|
768
|
+
/** true if the field is a required field */
|
|
769
|
+
isRequired?: boolean;
|
|
770
|
+
/** true if the field is invalid */
|
|
771
|
+
isInvalid?: boolean;
|
|
772
|
+
/** true if the field is disabled */
|
|
773
|
+
isDisabled?: boolean;
|
|
774
|
+
/** true, if the field is read only */
|
|
775
|
+
isReadOnly?: boolean;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
/**
|
|
779
|
+
* Recipe configuration for the FormField component.
|
|
780
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
781
|
+
*/
|
|
782
|
+
declare const formFieldRecipe: SlotRecipeDefinition<"error" | "input" | "label" | "description" | "root" | "popover", {
|
|
783
|
+
direction: {
|
|
784
|
+
column: {
|
|
785
|
+
root: {
|
|
786
|
+
gridTemplateAreas: "\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n";
|
|
787
|
+
};
|
|
788
|
+
input: {
|
|
789
|
+
mt: "var(--grid-gap)";
|
|
790
|
+
};
|
|
791
|
+
description: {
|
|
792
|
+
mt: "var(--grid-gap)";
|
|
793
|
+
};
|
|
794
|
+
error: {
|
|
795
|
+
mt: "var(--grid-gap)";
|
|
796
|
+
};
|
|
797
|
+
};
|
|
798
|
+
row: {
|
|
799
|
+
root: {
|
|
800
|
+
gridTemplateAreas: "\n\"label input\"\n\"label description\"\n\"label error\"\n";
|
|
801
|
+
gridTemplateColumns: "auto 1fr";
|
|
802
|
+
gridColumnGap: "200";
|
|
803
|
+
};
|
|
804
|
+
description: {
|
|
805
|
+
mt: "var(--grid-gap)";
|
|
806
|
+
};
|
|
807
|
+
error: {
|
|
808
|
+
mt: "var(--grid-gap)";
|
|
809
|
+
};
|
|
810
|
+
};
|
|
811
|
+
};
|
|
812
|
+
}>;
|
|
813
|
+
|
|
814
|
+
declare interface FormFieldRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp> {
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
declare type FunctionalAvatarProps = AvatarRootProps & AvatarComponentProps;
|
|
818
|
+
|
|
819
|
+
/** combine chakra-button props with aria-button props */
|
|
820
|
+
declare type FunctionalButtonProps = ButtonRootProps & AriaButtonProps & {
|
|
821
|
+
[key: `data-${string}`]: unknown;
|
|
822
|
+
};
|
|
823
|
+
|
|
824
|
+
export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> & {
|
|
825
|
+
Item: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
|
|
826
|
+
};
|
|
827
|
+
|
|
828
|
+
/**
|
|
829
|
+
* Grid
|
|
830
|
+
* ============================================================
|
|
831
|
+
* The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes.
|
|
832
|
+
*
|
|
833
|
+
* Features:
|
|
834
|
+
*
|
|
835
|
+
* - allows forwarding refs to the underlying DOM element
|
|
836
|
+
*/
|
|
837
|
+
export declare interface GridProps extends GridProps_2 {
|
|
838
|
+
children?: React.ReactNode;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
export { Heading }
|
|
842
|
+
|
|
843
|
+
export { Highlight_2 as Highlight }
|
|
844
|
+
|
|
845
|
+
/**
|
|
846
|
+
* IconButton
|
|
847
|
+
* ============================================================
|
|
848
|
+
* displays a button with only an icon as child. It is based
|
|
849
|
+
* on the regular `Button` component, but with a few adjustments.
|
|
850
|
+
*/
|
|
851
|
+
export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
|
|
852
|
+
|
|
853
|
+
/**
|
|
854
|
+
* Main props interface for the IconButton component.
|
|
855
|
+
*/
|
|
856
|
+
export declare interface IconButtonProps extends ButtonProps {
|
|
857
|
+
/** explains the intended action, required for accessibility */
|
|
858
|
+
"aria-label": string;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
export { Kbd }
|
|
862
|
+
|
|
863
|
+
/**
|
|
864
|
+
* Link
|
|
865
|
+
* ============================================================
|
|
866
|
+
* To allow a user to navigate to a different page or resource
|
|
867
|
+
*
|
|
868
|
+
* Features:
|
|
869
|
+
*
|
|
870
|
+
* - allows forwarding refs to the underlying DOM element
|
|
871
|
+
* - accepts all native html 'HTMLAnchorElement' attributes (including aria- & data-attributes)
|
|
872
|
+
* - supports 'variants', 'sizes', etc. configured in the recipe
|
|
873
|
+
* - allows overriding styles by using style-props
|
|
874
|
+
* - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
|
|
875
|
+
*/
|
|
876
|
+
export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
|
|
877
|
+
|
|
878
|
+
/**
|
|
879
|
+
* Main props interface for the Link component.
|
|
880
|
+
* Extends LinkVariantProps to include both root props and variant props,
|
|
881
|
+
* while adding support for React children.
|
|
882
|
+
*/
|
|
883
|
+
export declare interface LinkProps extends LinkVariantProps {
|
|
884
|
+
children?: React.ReactNode;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
/**
|
|
888
|
+
* Recipe configuration for the Link component.
|
|
889
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
890
|
+
*/
|
|
891
|
+
declare const linkRecipe: RecipeDefinition< {
|
|
892
|
+
size: {
|
|
893
|
+
xs: {
|
|
894
|
+
fontSize: "300";
|
|
895
|
+
lineHeight: "450";
|
|
896
|
+
};
|
|
897
|
+
sm: {
|
|
898
|
+
fontSize: "350";
|
|
899
|
+
lineHeight: "500";
|
|
900
|
+
};
|
|
901
|
+
md: {
|
|
902
|
+
fontSize: "400";
|
|
903
|
+
lineHeight: "600";
|
|
904
|
+
};
|
|
905
|
+
};
|
|
906
|
+
fontColor: {
|
|
907
|
+
primary: {
|
|
908
|
+
color: "primary";
|
|
909
|
+
};
|
|
910
|
+
inherit: {
|
|
911
|
+
color: "inherit";
|
|
912
|
+
};
|
|
913
|
+
};
|
|
914
|
+
}>;
|
|
915
|
+
|
|
916
|
+
/**
|
|
917
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
918
|
+
* with the unstyled prop option for the a element.
|
|
919
|
+
*/
|
|
920
|
+
declare interface LinkRecipeProps extends RecipeProps<"a">, UnstyledProp {
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/**
|
|
924
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
925
|
+
* This creates a complete set of props for the root element, combining
|
|
926
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
927
|
+
*/
|
|
928
|
+
declare type LinkRootProps = HTMLChakraProps<"a", LinkRecipeProps>;
|
|
929
|
+
|
|
930
|
+
/**
|
|
931
|
+
* Combines the root props with Chakra UI's recipe variant props.
|
|
932
|
+
* This allows the component to accept both structural props from Root
|
|
933
|
+
* and styling variants from the recipe.
|
|
934
|
+
*
|
|
935
|
+
* Differences between LinkRootProps and LinkVariantProps necessitate
|
|
936
|
+
* the use of Omit and Pick to ensure the correct props are passed
|
|
937
|
+
*/
|
|
938
|
+
declare type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur"> & Pick<AriaLinkOptions, "onFocus" | "onBlur"> & RecipeVariantProps<typeof linkRecipe> & {
|
|
939
|
+
[key: `data-${string}`]: string;
|
|
940
|
+
};
|
|
941
|
+
|
|
942
|
+
export { List }
|
|
943
|
+
|
|
944
|
+
export declare const ListItem: (props: ListItemType) => JSX_2.Element;
|
|
945
|
+
|
|
946
|
+
export declare type ListItemType = React.ComponentProps<typeof List.Item>;
|
|
947
|
+
|
|
948
|
+
export declare const ListRoot: (props: ListRootType) => JSX_2.Element;
|
|
949
|
+
|
|
950
|
+
export declare type ListRootType = React.ComponentProps<typeof List.Root>;
|
|
951
|
+
|
|
952
|
+
/**
|
|
953
|
+
* LoadingSpinner
|
|
954
|
+
* ============================================================
|
|
955
|
+
* Indicates ongoing processes or loading states
|
|
956
|
+
*/
|
|
957
|
+
export declare const LoadingSpinner: ForwardRefExoticComponent<LoadingSpinnerRootProps & {
|
|
958
|
+
size?: ConditionalValue<"sm" | "md" | "lg" | "2xs" | "xs" | undefined>;
|
|
959
|
+
tone?: ConditionalValue<"white" | "primary" | undefined>;
|
|
960
|
+
} & {
|
|
961
|
+
[key: `data-${string}`]: string;
|
|
962
|
+
} & RefAttributes<HTMLDivElement>>;
|
|
963
|
+
|
|
964
|
+
/**
|
|
965
|
+
* Main props interface for the LoadingSpinner component.
|
|
966
|
+
* Extends LoadingSpinnerVariantProps to include both root props and variant props,
|
|
967
|
+
* while adding support for React children.
|
|
968
|
+
*/
|
|
969
|
+
export declare type LoadingSpinnerProps = LoadingSpinnerVariantProps;
|
|
970
|
+
|
|
971
|
+
/**
|
|
972
|
+
* Recipe configuration for the LoadingSpinner component.
|
|
973
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
974
|
+
*/
|
|
975
|
+
declare const loadingSpinnerRecipe: RecipeDefinition< {
|
|
976
|
+
size: {
|
|
977
|
+
"2xs": {
|
|
978
|
+
width: "350";
|
|
979
|
+
height: "350";
|
|
980
|
+
};
|
|
981
|
+
xs: {
|
|
982
|
+
width: "500";
|
|
983
|
+
height: "500";
|
|
984
|
+
};
|
|
985
|
+
sm: {
|
|
986
|
+
width: "600";
|
|
987
|
+
height: "600";
|
|
988
|
+
};
|
|
989
|
+
md: {
|
|
990
|
+
width: "800";
|
|
991
|
+
height: "800";
|
|
992
|
+
};
|
|
993
|
+
lg: {
|
|
994
|
+
width: "1000";
|
|
995
|
+
height: "1000";
|
|
996
|
+
};
|
|
997
|
+
};
|
|
998
|
+
tone: {
|
|
999
|
+
primary: {
|
|
1000
|
+
colorPalette: "ctvioletAlpha";
|
|
1001
|
+
};
|
|
1002
|
+
white: {
|
|
1003
|
+
colorPalette: "whiteAlpha";
|
|
1004
|
+
};
|
|
1005
|
+
};
|
|
1006
|
+
}>;
|
|
1007
|
+
|
|
1008
|
+
/**
|
|
1009
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
1010
|
+
* with the unstyled prop option for the div element.
|
|
1011
|
+
*/
|
|
1012
|
+
declare interface LoadingSpinnerRecipeProps extends RecipeProps<"div">, UnstyledProp {
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
/**
|
|
1016
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
1017
|
+
* This creates a complete set of props for the root element, combining
|
|
1018
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
1019
|
+
*/
|
|
1020
|
+
declare type LoadingSpinnerRootProps_2 = Omit<HTMLChakraProps<"div", LoadingSpinnerRecipeProps>, "as" | "asChild">;
|
|
1021
|
+
|
|
1022
|
+
/**
|
|
1023
|
+
* Combines the root props with Chakra UI's recipe variant props and Aria's progress bar props.
|
|
1024
|
+
*
|
|
1025
|
+
* This allows the component to accept both structural props from Root
|
|
1026
|
+
* and styling variants from the recipe.
|
|
1027
|
+
*/
|
|
1028
|
+
declare type LoadingSpinnerVariantProps = LoadingSpinnerRootProps_2 & RecipeVariantProps<typeof loadingSpinnerRecipe> & {
|
|
1029
|
+
[key: `data-${string}`]: string;
|
|
1030
|
+
};
|
|
1031
|
+
|
|
1032
|
+
/**
|
|
1033
|
+
* MakeElementFocusable
|
|
1034
|
+
* ============================================================
|
|
1035
|
+
* A helper component that adds props from `react-aria`s `useFocusable` hook
|
|
1036
|
+
* to its child so that it can be used as a trigger element for a `Tooltip`
|
|
1037
|
+
*
|
|
1038
|
+
* Caveats:
|
|
1039
|
+
* - Using non-interactive elements as tooltip triggers is against ARIA best-practices,
|
|
1040
|
+
* it is your responsibility to ensure that the underlying trigger element handles
|
|
1041
|
+
* focus and hover interactions correctly for keyboard-only users
|
|
1042
|
+
*
|
|
1043
|
+
* Features:
|
|
1044
|
+
* - allows forwarding refs to the underlying DOM element
|
|
1045
|
+
* - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)
|
|
1046
|
+
*
|
|
1047
|
+
* Further Context:
|
|
1048
|
+
* - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
|
|
1049
|
+
* - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)
|
|
1050
|
+
* - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
|
|
1051
|
+
*/
|
|
1052
|
+
export declare const MakeElementFocusable: ForwardRefExoticComponent<FocusableOptions<HTMLElement> & {
|
|
1053
|
+
children?: ReactNode | undefined;
|
|
1054
|
+
} & RefAttributes<HTMLElement>>;
|
|
1055
|
+
|
|
1056
|
+
export declare function NimbusProvider({ children, ...props }: ColorModeProviderProps): JSX_2.Element;
|
|
1057
|
+
|
|
1058
|
+
export declare const Select: {
|
|
1059
|
+
Root: ForwardRefExoticComponent<SelectRootProps_2 & RefAttributes<HTMLDivElement>>;
|
|
1060
|
+
Options: <T extends object>(props: SelectOptionsProps_2<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1061
|
+
Option: <T extends object>(props: SelectOptionProps_2<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1062
|
+
OptionGroup: <T extends object>(props: SelectOptionGroupProps_2<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1063
|
+
};
|
|
1064
|
+
|
|
1065
|
+
export declare const _SelectOption: <T extends object>(props: SelectOptionProps<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1066
|
+
|
|
1067
|
+
export declare const _SelectOptionGroup: <T extends object>(props: SelectOptionGroupProps<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1068
|
+
|
|
1069
|
+
export declare interface SelectOptionGroupProps<T> extends ListBoxSectionProps<T>, Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
|
|
1070
|
+
/** the label for the section */
|
|
1071
|
+
label: string;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
declare interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
export declare interface SelectOptionProps<T> extends Omit<ListBoxItemProps<T>, keyof SelectOptionSlotProps>, SelectOptionSlotProps {
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
export declare const _SelectOptions: <T extends object>(props: SelectOptionsProps<T> & RefAttributes<HTMLDivElement>) => JSX.Element;
|
|
1081
|
+
|
|
1082
|
+
declare interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
export declare interface SelectOptionsProps<T> extends ListBoxProps<T>, Omit<SelectOptionsSlotProps, keyof ListBoxProps<T>> {
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
declare interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
export declare const _SelectRoot: ForwardRefExoticComponent<SelectRootProps & RefAttributes<HTMLDivElement>>;
|
|
1092
|
+
|
|
1093
|
+
export declare interface SelectRootProps extends SelectRootSlotProps, SelectProps {
|
|
1094
|
+
/** set to true if Select is currently busy with something */
|
|
1095
|
+
isLoading?: boolean;
|
|
1096
|
+
/** Children must be ReactNode, no render props/functions allowed */
|
|
1097
|
+
children: ReactNode;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
declare interface SelectRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof selectSlotRecipe> & SelectProps<object>> {
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/**
|
|
1104
|
+
* Recipe configuration for the Select component.
|
|
1105
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
1106
|
+
*/
|
|
1107
|
+
declare const selectSlotRecipe: SlotRecipeDefinition<"option" | "root" | "trigger" | "triggerLabel" | "options" | "optionGroup", {
|
|
1108
|
+
size: {
|
|
1109
|
+
sm: {
|
|
1110
|
+
root: {};
|
|
1111
|
+
trigger: {
|
|
1112
|
+
h: "800";
|
|
1113
|
+
px: "400";
|
|
1114
|
+
textStyle: "sm";
|
|
1115
|
+
};
|
|
1116
|
+
};
|
|
1117
|
+
md: {
|
|
1118
|
+
root: {};
|
|
1119
|
+
trigger: {
|
|
1120
|
+
h: "1000";
|
|
1121
|
+
px: "400";
|
|
1122
|
+
textStyle: "md";
|
|
1123
|
+
};
|
|
1124
|
+
};
|
|
1125
|
+
};
|
|
1126
|
+
variant: {
|
|
1127
|
+
outline: {
|
|
1128
|
+
root: {
|
|
1129
|
+
bg: "bg";
|
|
1130
|
+
"&:hover": {
|
|
1131
|
+
bg: "primary.2";
|
|
1132
|
+
};
|
|
1133
|
+
};
|
|
1134
|
+
trigger: {
|
|
1135
|
+
"--border-width": "sizes.25";
|
|
1136
|
+
"--border-color": "colors.neutral.7";
|
|
1137
|
+
};
|
|
1138
|
+
};
|
|
1139
|
+
ghost: {
|
|
1140
|
+
root: {
|
|
1141
|
+
bg: "transparent";
|
|
1142
|
+
"&:hover": {
|
|
1143
|
+
bg: "primaryAlpha.2";
|
|
1144
|
+
};
|
|
1145
|
+
};
|
|
1146
|
+
trigger: {
|
|
1147
|
+
"--border-width": "sizes.25";
|
|
1148
|
+
"--border-color": "transparent";
|
|
1149
|
+
};
|
|
1150
|
+
};
|
|
1151
|
+
};
|
|
1152
|
+
}>;
|
|
1153
|
+
|
|
1154
|
+
export declare const SimpleGrid: ForwardRefExoticComponent<SimpleGridProps & RefAttributes<HTMLDivElement>> & {
|
|
1155
|
+
Item: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
|
|
1156
|
+
};
|
|
1157
|
+
|
|
1158
|
+
/**
|
|
1159
|
+
* SimpleGrid
|
|
1160
|
+
* ============================================================
|
|
1161
|
+
* The SimpleGrid Layout Component provides a flexible and responsive way to structure content.
|
|
1162
|
+
*
|
|
1163
|
+
* Features:
|
|
1164
|
+
*
|
|
1165
|
+
* - allows forwarding refs to the underlying DOM element
|
|
1166
|
+
*/
|
|
1167
|
+
export declare interface SimpleGridProps extends SimpleGridProps_2 {
|
|
1168
|
+
children?: React.ReactNode;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
export declare const Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>;
|
|
1172
|
+
|
|
1173
|
+
export declare interface StackProps extends StackProps_2 {
|
|
1174
|
+
children?: React.ReactNode;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
export declare const system: SystemContext;
|
|
1178
|
+
|
|
1179
|
+
export { Table }
|
|
1180
|
+
|
|
1181
|
+
export declare const TableBody: (props: TableBodyProps) => JSX_2.Element;
|
|
1182
|
+
|
|
1183
|
+
export declare type TableBodyProps = React.ComponentProps<typeof Table.Body>;
|
|
1184
|
+
|
|
1185
|
+
export declare const TableCell: (props: TableCellProps) => JSX_2.Element;
|
|
1186
|
+
|
|
1187
|
+
export declare type TableCellProps = React.ComponentProps<typeof Table.Cell>;
|
|
1188
|
+
|
|
1189
|
+
export declare const TableColumn: (props: TableColumnProps) => JSX_2.Element;
|
|
1190
|
+
|
|
1191
|
+
export declare const TableColumnGroup: (props: TableColumnGroupProps) => JSX_2.Element;
|
|
1192
|
+
|
|
1193
|
+
export declare type TableColumnGroupProps = React.ComponentProps<typeof Table.ColumnGroup>;
|
|
1194
|
+
|
|
1195
|
+
export declare const TableColumnHeader: (props: TableColumnHeaderProps) => JSX_2.Element;
|
|
1196
|
+
|
|
1197
|
+
export declare type TableColumnHeaderProps = React.ComponentProps<typeof Table.ColumnHeader>;
|
|
1198
|
+
|
|
1199
|
+
export declare type TableColumnProps = React.ComponentProps<typeof Table.Column>;
|
|
1200
|
+
|
|
1201
|
+
export declare const TableFooter: (props: TableFooterProps) => JSX_2.Element;
|
|
1202
|
+
|
|
1203
|
+
export declare type TableFooterProps = React.ComponentProps<typeof Table.Footer>;
|
|
1204
|
+
|
|
1205
|
+
export declare const TableHeader: (props: TableHeaderProps) => JSX_2.Element;
|
|
1206
|
+
|
|
1207
|
+
export declare type TableHeaderProps = React.ComponentProps<typeof Table.Header>;
|
|
1208
|
+
|
|
1209
|
+
export declare const TableRoot: (props: TableRootProps) => JSX_2.Element;
|
|
1210
|
+
|
|
1211
|
+
export declare type TableRootProps = React.ComponentProps<typeof Table.Root>;
|
|
1212
|
+
|
|
1213
|
+
export declare const TableRow: (props: TableRowProps) => JSX_2.Element;
|
|
1214
|
+
|
|
1215
|
+
export declare type TableRowProps = React.ComponentProps<typeof Table.Row>;
|
|
1216
|
+
|
|
1217
|
+
/**
|
|
1218
|
+
* Render Text
|
|
1219
|
+
*
|
|
1220
|
+
* Use this component to render text. Various props can be passed to customize the text.
|
|
1221
|
+
* Check the documentation for more information.
|
|
1222
|
+
*
|
|
1223
|
+
* @see https://DOMAIN/components/typography/text
|
|
1224
|
+
*/
|
|
1225
|
+
declare const Text_2: ForwardRefExoticComponent<TextProps & RefAttributes<HTMLParagraphElement>>;
|
|
1226
|
+
export { Text_2 as Text }
|
|
1227
|
+
|
|
1228
|
+
/**
|
|
1229
|
+
* TextInput
|
|
1230
|
+
* ============================================================
|
|
1231
|
+
* An input component that takes in a text as input
|
|
1232
|
+
*
|
|
1233
|
+
* Features:
|
|
1234
|
+
*
|
|
1235
|
+
* - allows forwarding refs to the underlying DOM element
|
|
1236
|
+
* - accepts all native html 'HTMLInputElement' attributes (including aria- & data-attributes)
|
|
1237
|
+
* - supports 'variants', 'sizes', etc. configured in the recipe
|
|
1238
|
+
* - allows overriding styles by using style-props
|
|
1239
|
+
*/
|
|
1240
|
+
export declare const TextInput: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
|
|
1241
|
+
|
|
1242
|
+
export declare interface TextInputProps extends TextFieldProps, Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> {
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
/**
|
|
1246
|
+
* Recipe configuration for the TextInput component.
|
|
1247
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
1248
|
+
*/
|
|
1249
|
+
declare const textInputRecipe: RecipeDefinition< {
|
|
1250
|
+
size: {
|
|
1251
|
+
sm: {
|
|
1252
|
+
h: number;
|
|
1253
|
+
textStyle: "sm";
|
|
1254
|
+
px: number;
|
|
1255
|
+
};
|
|
1256
|
+
md: {
|
|
1257
|
+
h: number;
|
|
1258
|
+
textStyle: "md";
|
|
1259
|
+
px: number;
|
|
1260
|
+
};
|
|
1261
|
+
};
|
|
1262
|
+
variant: {
|
|
1263
|
+
solid: {
|
|
1264
|
+
"--border-width": "sizes.25";
|
|
1265
|
+
"--border-color": "colors.neutral.7";
|
|
1266
|
+
backgroundColor: "neutral.1";
|
|
1267
|
+
_hover: {
|
|
1268
|
+
backgroundColor: "primary.2";
|
|
1269
|
+
};
|
|
1270
|
+
};
|
|
1271
|
+
ghost: {
|
|
1272
|
+
_hover: {
|
|
1273
|
+
backgroundColor: "primary.2";
|
|
1274
|
+
};
|
|
1275
|
+
};
|
|
1276
|
+
};
|
|
1277
|
+
}>;
|
|
1278
|
+
|
|
1279
|
+
declare interface TextInputRecipeProps extends RecipeVariantProps<typeof textInputRecipe>, UnstyledProp {
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
declare type TextInputRootProps = HTMLChakraProps<"input", TextInputRecipeProps>;
|
|
1283
|
+
|
|
1284
|
+
export declare interface TextProps extends TextProps_2 {
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
/**
|
|
1288
|
+
* ToggleButtonGroup
|
|
1289
|
+
* ============================================================
|
|
1290
|
+
* To group multiple `Button` components together, visually and logically, representing a set of related actions.
|
|
1291
|
+
*/
|
|
1292
|
+
export declare const ToggleButtonGroup: {
|
|
1293
|
+
Root: ToggleButtonGroupRootComponent_2;
|
|
1294
|
+
Button: ToggleButtonGroupButtonComponent_2;
|
|
1295
|
+
};
|
|
1296
|
+
|
|
1297
|
+
/** Type signature for the `ToggleButtonGroup.Button` sub-component (using `forwardRef`). */
|
|
1298
|
+
export declare type ToggleButtonGroupButtonComponent = ForwardRefExoticComponent<ToggleButtonGroupButtonProps & RefAttributes<typeof ToggleButton>>;
|
|
1299
|
+
|
|
1300
|
+
/** Combined props for the button element (Chakra styles + Aria behavior). */
|
|
1301
|
+
export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps;
|
|
1302
|
+
|
|
1303
|
+
/** Base Chakra styling props for the `button` slot. */
|
|
1304
|
+
declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
|
|
1305
|
+
|
|
1306
|
+
/** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
|
|
1307
|
+
export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps>;
|
|
1308
|
+
|
|
1309
|
+
/** Type signature for the main `ToggleButtonGroup` component (using `forwardRef`). */
|
|
1310
|
+
export declare type ToggleButtonGroupRootComponent = ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<typeof ToggleButtonGroup_2>>;
|
|
1311
|
+
|
|
1312
|
+
/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
|
|
1313
|
+
declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps & RecipeVariantProps<typeof buttonGroupRecipe>;
|
|
1314
|
+
|
|
1315
|
+
/** Base Chakra styling props for the root `div` slot. */
|
|
1316
|
+
declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
|
|
1317
|
+
|
|
1318
|
+
/**
|
|
1319
|
+
* Tooltip
|
|
1320
|
+
* ============================================================
|
|
1321
|
+
* A contextual popup that displays a description for an element, uses `Tooltip` component from `react-aria-components`.
|
|
1322
|
+
*
|
|
1323
|
+
* Features:
|
|
1324
|
+
* - allows forwarding refs to the underlying DOM element
|
|
1325
|
+
* - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
|
|
1326
|
+
* - allows overriding styles by using style-props
|
|
1327
|
+
*
|
|
1328
|
+
* Further Context:
|
|
1329
|
+
* - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
|
|
1330
|
+
* - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
|
|
1331
|
+
*/
|
|
1332
|
+
export declare const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>>;
|
|
1333
|
+
|
|
1334
|
+
/**
|
|
1335
|
+
* Main props interface for the Tooltip components
|
|
1336
|
+
* Extends TooltipVariantProps to include root props, variant props,
|
|
1337
|
+
* and react-aria props, while adding support for React children.
|
|
1338
|
+
*/
|
|
1339
|
+
export declare interface TooltipProps extends PropsWithChildren<TooltipVariantProps> {
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
/**
|
|
1343
|
+
* Recipe configuration for the Tooltip component.
|
|
1344
|
+
* Defines the styling variants and base styles using Chakra UI's recipe system.
|
|
1345
|
+
*/
|
|
1346
|
+
declare const tooltipRecipe: RecipeDefinition<RecipeVariantRecord>;
|
|
1347
|
+
|
|
1348
|
+
/**
|
|
1349
|
+
* Base recipe props interface that combines Chakra UI's recipe props
|
|
1350
|
+
*/
|
|
1351
|
+
declare interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
/**
|
|
1355
|
+
* Root props interface that extends Chakra's HTML props with our recipe props.
|
|
1356
|
+
* This creates a complete set of props for the root element, combining
|
|
1357
|
+
* HTML attributes, Chakra's styling system, and our custom recipe props.
|
|
1358
|
+
*/
|
|
1359
|
+
declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeProps> {
|
|
1360
|
+
}
|
|
1361
|
+
|
|
1362
|
+
/**
|
|
1363
|
+
* TooltipTrigger
|
|
1364
|
+
* ============================================================
|
|
1365
|
+
* TooltipTrigger wraps around a trigger element and a Tooltip.
|
|
1366
|
+
* It handles opening and closing the Tooltip when the user hovers over or focuses the trigger,
|
|
1367
|
+
* and positioning the Tooltip relative to the trigger.
|
|
1368
|
+
*
|
|
1369
|
+
* Directly exported from `react-aria-components`
|
|
1370
|
+
* - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
|
|
1371
|
+
*/
|
|
1372
|
+
export declare const TooltipTrigger: typeof TooltipTrigger_2;
|
|
1373
|
+
|
|
1374
|
+
export declare interface TooltipTriggerProps extends TooltipTriggerComponentProps {
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
/**
|
|
1378
|
+
* Combines the root props with Chakra UI's recipe variant props, and
|
|
1379
|
+
* react-aria-component's TooltipProps
|
|
1380
|
+
* This allows the component to accept:
|
|
1381
|
+
* - structural props from Root
|
|
1382
|
+
* - styling variants from the recipe
|
|
1383
|
+
* - a11y/state related props from react-aria-components Tooltip
|
|
1384
|
+
*/
|
|
1385
|
+
declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
|
|
1386
|
+
|
|
1387
|
+
export declare function useColorMode(): {
|
|
1388
|
+
colorMode: string | undefined;
|
|
1389
|
+
setColorMode: Dispatch<SetStateAction<string>>;
|
|
1390
|
+
toggleColorMode: () => void;
|
|
1391
|
+
};
|
|
1392
|
+
|
|
1393
|
+
export declare function useColorModeValue<T>(light: T, dark: T): T;
|
|
1394
|
+
|
|
1395
|
+
export declare function useColorScheme(): string;
|
|
1396
|
+
|
|
1397
|
+
export { useCopyToClipboard }
|
|
1398
|
+
|
|
1399
|
+
export { useHotkeys }
|
|
1400
|
+
|
|
1401
|
+
export declare const VisuallyHidden: {
|
|
1402
|
+
(props: VisuallyHiddenProps): JSX_2.Element;
|
|
1403
|
+
displayName: string;
|
|
1404
|
+
};
|
|
1405
|
+
|
|
1406
|
+
export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2, "elementType"> {
|
|
1407
|
+
/** specifies the element type to render, use `span` for inline content
|
|
1408
|
+
* and `div` for block content */
|
|
1409
|
+
as?: "span" | "div";
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
export { }
|