/** * Keys for the slotRecipes object MUST be a valid JS identifier!!!!!!!!!! * * you MUST be able to access the key with dot notation: ✅ slotRecipes.exampleComponent ✅ * NOT with bracket notation: ❌ slotRecipes["example-component"] ❌ * * Failure to do so will make it so that `pnpm build-theme-typings` will fail silently * due to some truly awful interplay between `@chakra-ui/cli` and `prettier` * * Silent failure results in there being no generated types for slot recipes, and causes all kinds of * false typescript errors that are really hard to debug. */ /** * Slot Recipes for Nimbus Components * * IMPORTANT: All recipe keys are prefixed with `nimbus` to avoid naming collisions * with Chakra UI's built-in recipes. This ensures that Nimbus's custom variant types * are correctly generated and don't conflict with Chakra's default types. * * Without this prefix, generated TypeScript interfaces (e.g., `DrawerVariant`) would * collide with Chakra's defaults, causing incorrect type inference in consumer applications. * * @example * // Correct: Use nimbus prefix * nimbusDrawer: drawerSlotRecipe * * // Wrong: No prefix causes collision * drawer: drawerSlotRecipe // ❌ Collides with Chakra's drawer */ export declare const slotRecipes: { nimbusAccordion: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "disclosure" | "trigger" | "panel" | "accordionTitle" | "headerContentRight", { size: { md: { trigger: { "--accordion-font-size": "fontSizes.500"; "& svg": { "--accordion-width": "sizes.600"; "--accordion-height": "sizes.600"; }; }; panel: { "--accordion-padding-top": "spacing.600"; "--accordion-padding-bottom": "spacing.800"; "--accordion-padding-left": "spacing.800"; }; }; sm: { trigger: { "--accordion-font-size": "fontSizes.400"; "& svg": { "--accordion-width": "sizes.500"; "--accordion-height": "sizes.500"; }; }; panel: { "--accordion-padding-top": "spacing.400"; "--accordion-padding-bottom": "spacing.600"; "--accordion-padding-left": "spacing.700"; }; }; }; }>; nimbusAlert: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "icon" | "actions" | "dismissButton", { variant: { flat: {}; outlined: { root: { border: "solid-25"; borderColor: "colorPalette.5"; backgroundColor: "colorPalette.2"; padding: "200"; borderRadius: "200"; }; }; }; }>; nimbusCalendar: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>; nimbusCard: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "footer" | "header", { size: { sm: { root: { "--card-spacing": "spacing.300"; }; }; md: { root: { "--card-spacing": "spacing.400"; }; }; lg: { root: { "--card-spacing": "spacing.600"; }; }; }; variant: { plain: { root: { backgroundColor: "bg"; }; }; outlined: { root: { border: "solid-25"; borderColor: "colorPalette.6"; backgroundColor: "bg"; }; }; elevated: { root: { shadow: "1"; backgroundColor: "bg"; }; }; "outlined-elevated": { root: { border: "solid-25"; borderColor: "colorPalette.6"; shadow: "1"; backgroundColor: "bg"; }; }; muted: { root: { backgroundColor: "colorPalette.2"; }; }; "outlined-muted": { root: { border: "solid-25"; borderColor: "colorPalette.6"; backgroundColor: "colorPalette.2"; }; }; "elevated-muted": { root: { shadow: "1"; backgroundColor: "colorPalette.2"; }; }; "outlined-elevated-muted": { root: { border: "solid-25"; borderColor: "colorPalette.6"; shadow: "1"; backgroundColor: "colorPalette.2"; }; }; }; }>; nimbusCheckbox: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "indicator", { size: { md: { label: { fontSize: "350"; fontWeight: "400"; lineHeight: "400"; }; indicator: { w: "400"; h: "400"; zIndex: number; _after: { position: "absolute"; content: "''"; width: "600"; height: "600"; zIndex: number; }; }; }; }; }>; nimbusCollapsibleMotion: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "trigger" | "content">>; nimbusCombobox: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "input" | "option" | "section" | "popover" | "leadingElement" | "tagGroup" | "listBox" | "optionIndicator" | "optionContent", { size: { sm: { trigger: { minH: "800"; textStyle: "sm"; }; leadingElement: { minH: "800"; }; }; md: { trigger: { minH: "1000"; textStyle: "md"; }; leadingElement: { minH: "1000"; }; }; }; variant: { solid: { root: { bg: "primary.1"; "&:hover:not([data-disabled='true'])": { bg: "primary.2"; }; width: "7200"; }; trigger: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; width: "100%"; }; }; ghost: { root: { bg: "transparent"; "&:hover:not([data-disabled='true'])": { bg: "primaryAlpha.2"; }; width: "7200"; }; trigger: { "--border-width": "sizes.25"; "--border-color": "transparent"; bg: "transparent"; width: "100%"; }; }; }; selectionMode: { multiple: { options: { boxShadow: "none"; px: "200"; my: "200"; minW: "unset"; "& section:first-of-type > header": { mt: number; }; }; option: { colorPalette: "primary"; display: "flex"; alignItems: "flex-start"; justifyContent: "center"; position: "relative"; cursor: "pointer"; gap: "200"; mb: "var(--focus-ring-width)"; "&:last-of-type": { mb: number; }; '&[aria-selected="true"]': { bg: "unset"; }; '&[data-focused="true"]': { outlineWidth: "var(--focus-ring-width)"; outlineColor: "var(--focus-ring-color)"; outlineStyle: "var(--focus-ring-style)"; bg: "unset"; }; _hover: { bg: "primary.2"; }; }; }; single: {}; none: {}; }; }>; nimbusDataTable: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "footer" | "header" | "table" | "cell" | "row" | "column" | "selectionCell" | "nestedIcon" | "headerSortIcon" | "columnResizer", { truncated: { true: { root: { "& .truncated-cell": { maxWidth: "200px"; overflow: "hidden"; textOverflow: "ellipsis"; whiteSpace: "nowrap"; }; }; }; }; density: { default: { cell: { paddingTop: "400"; paddingBottom: "400"; }; }; condensed: { cell: { paddingTop: "300"; paddingBottom: "300"; }; }; }; }>; nimbusDefaultPage: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "footer" | "header" | "title" | "backLink" | "subtitle" | "actions" | "tabNav", { layout: { constrained: { root: { height: "100%"; }; content: { overflow: "auto"; }; }; flexible: { root: { height: "auto"; }; }; }; stickyHeader: { true: { header: { position: "sticky"; top: number; zIndex: number; bg: "bg"; }; }; }; stickyFooter: { true: { footer: { position: "sticky"; bottom: number; zIndex: number; bg: "bg"; }; }; }; }>; nimbusDateInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", { size: { sm: { root: { h: "800"; textStyle: "sm"; px: "300"; gap: "100"; }; leadingElement: { "& > svg": { boxSize: "400"; }; }; trailingElement: { "& > svg": { boxSize: "400"; }; }; }; md: { root: { h: "1000"; textStyle: "md"; px: "400"; gap: "200"; }; leadingElement: { "& > svg": { boxSize: "500"; }; }; trailingElement: { "& > svg": { boxSize: "500"; }; }; }; }; variant: { solid: { root: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "neutral.1"; _hover: { backgroundColor: "primary.2"; }; }; }; ghost: { root: { _hover: { backgroundColor: "primary.2"; }; }; }; plain: { root: { px: "0"; outline: "none!"; boxShadow: "none!"; bg: "transparent!"; }; }; }; }>; nimbusDatePicker: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "popover" | "group" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", { size: { sm: {}; md: {}; }; variant: { solid: {}; ghost: {}; }; }>; nimbusDateRangePicker: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "popover" | "group" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", { size: { sm: { group: { height: "800"; pr: "calc({spacing.1400} + {spacing.400})"; }; trigger: { top: "50"; }; }; md: { group: { height: "1000"; pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})"; }; trigger: { top: "100"; }; }; }; variant: { solid: { group: { "--border-width": "{sizes.25}"; "--border-color": "{colors.neutral.7}"; bg: "neutral.1"; }; }; ghost: { group: { bg: "transparent"; }; }; }; }>; nimbusDialog: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "body" | "footer" | "header" | "title" | "modal" | "modalOverlay" | "closeTrigger", { placement: { center: { modal: { alignItems: "center"; }; content: { "--dialog-base-margin": "auto"; mx: "auto"; }; }; top: { modal: { alignItems: "flex-start"; }; content: { "--dialog-base-margin": "spacing.1600"; mx: "auto"; }; }; bottom: { modal: { alignItems: "flex-end"; }; content: { "--dialog-base-margin": "spacing.1600"; mx: "auto"; }; }; }; scrollBehavior: { inside: { modal: { overflow: "hidden"; }; content: { maxH: "calc(100% - 7.5rem)"; }; body: { overflow: "auto"; focusVisibleRing: "outside"; }; }; outside: { modal: { overflow: "auto"; }; }; }; }>; nimbusDraggableList: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "empty" | "itemContent", { size: { sm: {}; md: { item: { minH: "800"; }; }; }; }>; nimbusDrawer: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "body" | "footer" | "header" | "title" | "modal" | "modalOverlay" | "closeTrigger", { showBackdrop: { true: { modalOverlay: { bg: { _dark: "bg/20"; _light: "fg/20"; }; backdropFilter: "blur({sizes.100})"; }; }; false: { modalOverlay: { bg: "transparent"; }; }; }; placement: { left: { modal: { justifyContent: "flex-start"; alignItems: "stretch"; "&[data-entering]": { animationName: "slide-from-left-full"; }; "&[data-exiting]": { animationName: "slide-to-left-full"; }; }; content: { "--drawer-base-margin": number; mx: number; height: "100vh"; maxH: "100vh"; borderRadius: number; }; }; right: { modal: { justifyContent: "flex-end"; alignItems: "stretch"; "&[data-entering]": { animationName: "slide-from-right-full"; }; "&[data-exiting]": { animationName: "slide-to-right-full"; }; }; content: { "--drawer-base-margin": number; mx: number; height: "100vh"; maxH: "100vh"; borderRadius: number; }; }; top: { modal: { alignItems: "flex-start"; justifyContent: "stretch"; "&[data-entering]": { animationName: "slide-from-top-full"; }; "&[data-exiting]": { animationName: "slide-to-top-full"; }; }; content: { "--drawer-base-margin": number; mx: number; width: "100vw"; borderRadius: number; }; }; bottom: { modal: { alignItems: "flex-end"; justifyContent: "stretch"; "&[data-entering]": { animationName: "slide-from-bottom-full"; }; "&[data-exiting]": { animationName: "slide-to-bottom-full"; }; }; content: { "--drawer-base-margin": number; mx: number; width: "100vw"; borderRadius: number; }; }; }; }>; nimbusFieldErrors: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "message", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "message">>; nimbusFormField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "label" | "popover" | "error" | "description", { size: { md: { root: { "--form-field-font-size": "fontSizes.350"; "--form-field-line-height": "lineHeights.500"; }; }; sm: { root: { "--form-field-font-size": "fontSizes.300"; "--form-field-line-height": "lineHeights.450"; }; }; }; direction: { column: { root: { gridTemplateAreas: "\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n"; }; input: { mt: "var(--grid-gap)"; }; description: { mt: "var(--grid-gap)"; }; error: { mt: "var(--grid-gap)"; }; }; row: { root: { gridTemplateAreas: "\n\"label input\"\n\"label description\"\n\"label error\"\n"; gridTemplateColumns: "auto 1fr"; gridColumnGap: "200"; }; description: { mt: "var(--grid-gap)"; }; error: { mt: "var(--grid-gap)"; }; }; }; }>; nimbusList: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item" | "indicator", { variant: { marker: { root: { listStyle: "revert"; listStylePosition: "inside"; }; item: { _marker: { color: "fg.subtle"; }; }; }; plain: { item: { alignItems: "flex-start"; display: "inline-flex"; }; }; }; align: { center: { item: { alignItems: "center"; }; }; start: { item: { alignItems: "flex-start"; }; }; end: { item: { alignItems: "flex-end"; }; }; }; }>; nimbusLocalizedField: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "error" | "description" | "infoDialog" | "fieldsContainer" | "toggleButtonContainer" | "localeFieldRoot" | "localeFieldLabel" | "localeFieldInput" | "localeFieldDescription" | "localeFieldError", { size: { md: { root: { "--localized-field-font-size": "fontSizes.350"; "--localized-field-line-height": "lineHeights.500"; }; }; sm: { root: { "--localized-field-font-size": "fontSizes.300"; "--localized-field-line-height": "lineHeights.450"; }; }; }; type: { text: {}; multiLine: {}; money: {}; richText: {}; }; }>; nimbusMenu: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "content" | "section" | "popover" | "item" | "sectionLabel" | "submenu", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "trigger" | "content" | "section" | "popover" | "item" | "sectionLabel" | "submenu">>; nimbusModalPage: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "footer" | "header" | "title" | "subtitle" | "actions" | "tabNav" | "topBar", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "content" | "footer" | "header" | "title" | "subtitle" | "actions" | "tabNav" | "topBar">>; nimbusMoneyInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "container" | "currencySelect" | "currencyLabel" | "amountInput" | "badge", { size: { sm: { root: { fontSize: "fontSize.20"; minWidth: "280px"; }; currencySelect: { padding: "0 spacing.20"; }; amountInput: { paddingRight: "spacing.30"; }; currencyLabel: { fontSize: "300"; lineHeight: "450"; }; }; md: { root: { fontSize: "fontSize.30"; minWidth: "360px"; }; currencySelect: { padding: "0 spacing.25"; }; amountInput: { paddingRight: "spacing.40"; }; currencyLabel: { fontSize: "350"; lineHeight: "500"; }; }; }; }>; nimbusMultilineTextInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "textarea" | "leadingElement", { size: { sm: { root: { minH: "800"; textStyle: "sm"; gap: "100"; pl: "300"; }; textarea: { pr: "300"; py: "100"; }; leadingElement: { pt: "200"; "& svg": { boxSize: "400"; }; }; }; md: { root: { minH: "1000"; textStyle: "md"; gap: "200"; pl: "400"; }; textarea: { py: "200"; pr: "400"; }; leadingElement: { pt: "200"; "& svg": { mt: "50"; boxSize: "500"; }; }; }; }; variant: { solid: { root: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "neutral.1"; _hover: { backgroundColor: "primary.2"; }; }; }; ghost: { root: { _hover: { backgroundColor: "primary.2"; }; }; }; }; }>; nimbusNumberInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "leadingElement" | "trailingElement" | "incrementButton" | "decrementButton", { size: { sm: { root: { pl: "300"; pr: "900"; gap: "100"; }; input: { h: "800"; textStyle: "sm"; }; leadingElement: { "& > svg": { boxSize: "400"; }; }; trailingElement: { "& > svg": { boxSize: "400"; }; }; }; md: { root: { pl: "400"; pr: "1000"; gap: "200"; }; input: { h: "1000"; textStyle: "md"; }; leadingElement: { "& > svg": { boxSize: "500"; }; }; trailingElement: { "& > svg": { boxSize: "500"; }; }; }; }; variant: { solid: { root: { _hover: { backgroundColor: "primary.2"; }; "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "neutral.1"; }; incrementButton: { "&[data-invalid='true']": { borderTop: "2px solid var(--border-color)"; borderRight: "2px solid var(--border-color)"; }; borderTop: "var(--border-width) solid var(--border-color)"; borderRight: "var(--border-width) solid var(--border-color)"; borderLeft: "var(--border-width) solid var(--border-color)"; boxShadow: "inset 0 -0.5px 0 0 var(--border-color)"; _hover: { backgroundColor: "primaryAlpha.4"; }; }; decrementButton: { "&[data-invalid='true']": { borderBottom: "2px solid var(--border-color)"; borderRight: "2px solid var(--border-color)"; }; borderBottom: "var(--border-width) solid var(--border-color)"; borderRight: "var(--border-width) solid var(--border-color)"; borderLeft: "var(--border-width) solid var(--border-color)"; boxShadow: "inset 0 0.5px 0 0 var(--border-color)"; _hover: { backgroundColor: "primaryAlpha.4"; }; }; }; ghost: { root: { _hover: { backgroundColor: "primary.2"; }; }; incrementButton: { "&[data-invalid='true']": { borderTop: "2px solid var(--border-color)"; borderRight: "2px solid var(--border-color)"; }; _hover: { backgroundColor: "primaryAlpha.4"; }; }; decrementButton: { "&[data-invalid='true']": { borderBottom: "2px solid var(--border-color)"; borderRight: "2px solid var(--border-color)"; }; _hover: { backgroundColor: "primaryAlpha.4"; }; }; }; }; }>; nimbusPageContent: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "column", { variant: { wide: { root: { gridTemplateAreas: "'. content .'"; gridTemplateColumns: "1fr minmax({sizes.sm}, {sizes.6xl}) 1fr"; }; }; narrow: { root: { gridTemplateAreas: "'. content .'"; gridTemplateColumns: "1fr minmax({sizes.sm}, {sizes.3xl}) 1fr"; }; }; full: { root: { gridTemplateAreas: "'content'"; gridTemplateColumns: "1fr"; }; }; }; columns: { "1": { root: { "& > [data-slot=content]": { gridArea: "content"; display: "grid"; gridTemplateColumns: "minmax(0, 1fr)"; }; }; }; "1/1": { root: { "& > [data-slot=content]": { gridArea: "content"; display: "grid"; gridTemplateColumns: { base: "minmax(0, 1fr)"; md: "repeat(2, minmax(0, 1fr))"; }; gap: "inherit"; }; }; }; "2/1": { root: { "& > [data-slot=content]": { gridArea: "content"; display: "grid"; gridTemplateColumns: { base: "minmax(0, 1fr)"; md: "minmax(0, 2fr) minmax(0, 1fr)"; }; gap: "inherit"; }; }; }; }; }>; nimbusProgressBar: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "fill" | "label" | "track" | "value", { size: { "2xs": { root: { "--progress-bar-radius": "{radii.300}"; "--progress-bar-font-size": "{fontSizes.350}"; "--progress-bar-height": "{sizes.300}"; "--progress-bar-line-height": "{fontSizes.500}"; }; }; md: { root: { "--progress-bar-radius": "{radii.600}"; "--progress-bar-font-size": "{fontSizes.400}"; "--progress-bar-height": "{sizes.600}"; "--progress-bar-line-height": "{fontSizes.600}"; }; }; }; isDynamic: { true: { fill: { "--progress-bar-animation": "gradient-shimmer 4s ease-in-out infinite"; "&[data-complete='true']": { "--progress-bar-animation": "none"; }; }; }; }; isIndeterminate: { true: { fill: { "--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite"; width: "40% !important"; }; }; }; variant: { solid: { root: { "--progress-bar-text-color": "{colors.neutral.12}"; "--progress-bar-track-bg": "{colors.neutralAlpha.3}"; }; }; contrast: { root: { "--progress-bar-text-color": "{colors.colorPalette.contrast}"; "--progress-bar-track-bg": "{colors.colorPalette.contrast/15}"; }; fill: { bgImage: "linear-gradient(90deg, {colors.colorPalette.contrast/25}, {colors.colorPalette.contrast}, {colors.colorPalette.contrast/25})"; }; }; }; layout: { minimal: { label: { display: "none"; }; value: { display: "none"; }; }; inline: { root: { flexDirection: "row"; alignItems: "center"; gap: "400"; }; track: { flex: number; }; }; stacked: { root: { flexDirection: "column"; gap: "200"; }; text: { display: "flex"; justifyContent: "space-between"; alignItems: "center"; width: "100%"; }; }; }; }>; nimbusRadioInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "option", { orientation: { horizontal: { root: { flexDirection: "row"; gap: "600"; }; }; vertical: { root: { flexDirection: "column"; alignItems: "flex-start"; gap: "400"; }; }; }; }>; nimbusRangeCalendar: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>; nimbusRichTextInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "toolbar" | "editable", {}>; nimbusScopedSearchInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "container" | "selectWrapper" | "searchWrapper", { size: { sm: {}; md: {}; }; }>; nimbusSearchInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "leadingElement", { size: { sm: { root: { height: "800"; px: "300"; gap: "100"; textStyle: "sm"; }; leadingElement: { "& > svg": { boxSize: "400"; }; }; }; md: { root: { height: "1000"; px: "400"; gap: "200"; textStyle: "md"; }; leadingElement: { "& > svg": { boxSize: "500"; }; }; }; }; variant: { solid: { root: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "primary.1"; }; }; ghost: {}; }; }>; nimbusSelect: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "option" | "leadingElement" | "options" | "triggerLabel" | "optionGroup", { size: { sm: { root: {}; trigger: { px: "300"; gap: "100"; h: "800"; textStyle: "sm"; }; leadingElement: { "& > svg": { boxSize: "400"; }; }; }; md: { root: {}; trigger: { h: "1000"; px: "400"; gap: "200"; textStyle: "md"; }; leadingElement: { "& > svg": { boxSize: "500"; }; }; }; }; variant: { outline: { root: { bg: "primary.1"; "&:hover": { bg: "primary.2"; }; }; trigger: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; }; }; ghost: { root: { bg: "transparent"; "&:hover": { bg: "primaryAlpha.2"; }; }; trigger: { "--border-width": "sizes.25"; "--border-color": "transparent"; }; }; }; isClearable: { false: { triggerLabel: { "--button-safespace": "sizes.1000"; }; }; }; }>; nimbusSplitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "buttonGroup" | "primaryButton" | "dropdownTrigger", { variant: { solid: { dropdownTrigger: { borderLeftColor: "colorPalette.contrast"; }; }; ghost: { dropdownTrigger: { borderLeftColor: "colorPalette.7"; }; }; outline: {}; subtle: {}; link: {}; }; }>; nimbusSwitch: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "track" | "thumb", { size: { sm: { track: { "--switch-track-height": "sizes.400"; "--switch-track-width": "sizes.700"; }; thumb: { "--switch-thumb-size": "sizes.400"; }; label: { "--switch-label-font-size": "fontSizes.350"; }; }; md: { track: { "--switch-track-height": "sizes.600"; "--switch-track-width": "sizes.1100"; }; thumb: { "--switch-thumb-size": "sizes.600"; }; label: { "--switch-label-font-size": "fontSizes.400"; }; }; }; }>; nimbusTable: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "caption" | "footer" | "header" | "cell" | "row" | "columnHeader", { interactive: { true: { body: { "& tr": { _hover: { bg: "colorPalette.subtle"; }; }; }; }; }; stickyHeader: { true: { header: { "& :where(tr)": { top: "var(--table-sticky-offset, 0)"; position: "sticky"; zIndex: number; }; }; }; }; striped: { true: { row: { "&:nth-of-type(odd) td": { bg: "bg.muted"; }; }; }; }; showColumnBorder: { true: { columnHeader: { "&:not(:last-of-type)": { borderInlineEndWidth: "1px"; }; }; cell: { "&:not(:last-of-type)": { borderInlineEndWidth: "1px"; }; }; }; }; variant: { line: { columnHeader: { borderBottomWidth: "1px"; }; cell: { borderBottomWidth: "1px"; }; row: { bg: "bg"; }; }; outline: { root: { boxShadow: "0 0 0 1px {colors.border}"; overflow: "hidden"; }; columnHeader: { borderBottomWidth: "1px"; }; header: { bg: "bg.muted"; }; row: { "&:not(:last-of-type)": { borderBottomWidth: "1px"; }; }; footer: { borderTopWidth: "1px"; }; }; }; size: { sm: { root: { textStyle: "sm"; }; columnHeader: { px: "200"; py: "200"; }; cell: { px: "200"; py: "200"; }; }; md: { root: { textStyle: "sm"; }; columnHeader: { px: "300"; py: "300"; }; cell: { px: "300"; py: "300"; }; }; lg: { root: { textStyle: "md"; }; columnHeader: { px: "400"; py: "300"; }; cell: { px: "400"; py: "300"; }; }; }; }>; nimbusTabNav: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item", { variant: { tabs: { root: { boxShadow: "0 1px 0 0 {colors.neutral.6}"; }; item: { color: "neutral.12"; cursor: "pointer"; fontWeight: "500"; textDecoration: "none"; transition: "all 150ms ease"; boxShadow: "0 2px 0 0 transparent"; focusVisibleRing: "outside"; _hover: { color: "primary.11"; }; '&[aria-current="page"]': { color: "primary.9"; boxShadow: "0 2px 0 0 {colors.primary.9}"; }; _disabled: { layerStyle: "disabled"; }; }; }; }; size: { sm: { item: { "--tab-nav-font-size": "fontSizes.300"; "--tab-nav-padding-top": "spacing.100"; "--tab-nav-padding-right": "spacing.300"; "--tab-nav-padding-bottom": "spacing.100"; "--tab-nav-padding-left": "spacing.300"; }; }; md: { item: { "--tab-nav-font-size": "fontSizes.350"; "--tab-nav-padding-top": "spacing.200"; "--tab-nav-padding-right": "spacing.400"; "--tab-nav-padding-bottom": "spacing.200"; "--tab-nav-padding-left": "spacing.400"; }; }; lg: { item: { "--tab-nav-font-size": "fontSizes.400"; "--tab-nav-padding-top": "spacing.300"; "--tab-nav-padding-right": "spacing.600"; "--tab-nav-padding-bottom": "spacing.300"; "--tab-nav-padding-left": "spacing.600"; }; }; }; }>; nimbusTabs: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "panel" | "list" | "tab" | "panels", { variant: { line: {}; pills: { tab: { borderRadius: "full"; _selected: { backgroundColor: "primary.3"; }; }; }; }; orientation: { horizontal: { root: { flexDirection: "column"; }; }; vertical: { root: { flexDirection: "row"; }; list: { flexDirection: "column"; }; tab: { justifyContent: "flex-start"; }; }; }; placement: { start: {}; end: {}; }; size: { sm: { tab: { "--tabs-font-size": "fontSizes.300"; "--tabs-padding-top": "spacing.100"; "--tabs-padding-right": "spacing.300"; "--tabs-padding-bottom": "spacing.100"; "--tabs-padding-left": "spacing.300"; }; }; md: { tab: { "--tabs-font-size": "fontSizes.350"; "--tabs-padding-top": "spacing.200"; "--tabs-padding-right": "spacing.400"; "--tabs-padding-bottom": "spacing.200"; "--tabs-padding-left": "spacing.400"; }; }; lg: { tab: { "--tabs-font-size": "fontSizes.400"; "--tabs-padding-top": "spacing.300"; "--tabs-padding-right": "spacing.600"; "--tabs-padding-bottom": "spacing.300"; "--tabs-padding-left": "spacing.600"; }; }; }; }>; nimbusTagGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "tagList" | "tag", { size: { sm: { tag: { minH: "600"; paddingX: "200"; fontSize: "350"; lineHeight: "400"; }; }; md: { tag: { minH: "800"; paddingX: "200"; paddingY: "100"; }; }; lg: { tag: { minH: "1000"; padding: "200"; }; }; }; }>; nimbusTextInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "leadingElement" | "trailingElement", { size: { sm: { root: { height: "800"; px: "300"; gap: "100"; textStyle: "sm"; }; leadingElement: { "& > svg": { boxSize: "400"; }; }; trailingElement: { "& > svg": { boxSize: "400"; }; }; }; md: { root: { height: "1000"; px: "400"; gap: "200"; textStyle: "md"; }; leadingElement: { "& > svg": { boxSize: "500"; }; }; trailingElement: { "& > svg": { boxSize: "500"; }; }; }; }; variant: { solid: { root: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "primary.1"; }; }; ghost: {}; }; }>; nimbusTimeInput: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", { size: { sm: { root: { h: number; gap: number; px: number; }; segment: { textStyle: "sm"; }; leadingElement: { "& svg": { boxSize: "400"; }; }; trailingElement: { "& svg": { boxSize: "400"; }; }; }; md: { root: { h: number; gap: number; px: number; }; segment: { textStyle: "md"; }; leadingElement: { "& svg": { boxSize: "500"; }; }; trailingElement: { "& svg": { boxSize: "500"; }; }; }; }; variant: { solid: { root: { "--border-width": "sizes.25"; "--border-color": "colors.neutral.7"; backgroundColor: "neutral.1"; _hover: { backgroundColor: "primary.2"; }; }; }; ghost: { root: { _hover: { backgroundColor: "primary.2"; }; }; }; }; }>; nimbusToggleButtonGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "button", { size: { xs: { button: { h: "800"; minW: "800"; fontSize: "350"; fontWeight: "500"; lineHeight: "400"; px: "300"; gap: "100"; _icon: { width: "500"; height: "500"; }; } | undefined; }; md: { button: { h: "1000"; minW: "1000"; fontSize: "400"; lineHeight: "500"; px: "400"; gap: "200"; _icon: { width: "600"; height: "600"; }; } | undefined; }; }; colorPalette: { primary: { button: { colorPalette: "primary"; }; }; critical: { button: { colorPalette: "critical"; }; }; neutral: { button: { colorPalette: "neutral"; }; }; }; }>; nimbusSteps: import('@chakra-ui/react').SlotRecipeDefinition<"number" | "root" | "trigger" | "content" | "title" | "list" | "separator" | "description" | "item" | "indicator" | "completedContent" | "prevTrigger" | "nextTrigger", { size: { xs: { root: { "--indicator-size": "sizes.600"; }; item: { gap: "200"; }; trigger: { gap: "200"; }; indicator: { width: "var(--indicator-size)"; height: "var(--indicator-size)"; fontSize: "300"; lineHeight: "350"; }; number: { fontSize: "300"; lineHeight: "350"; }; title: { fontSize: "350"; lineHeight: "550"; fontWeight: "bold"; }; description: { fontSize: "300"; lineHeight: "450"; }; }; sm: { root: { "--indicator-size": "sizes.800"; }; item: { gap: "300"; }; trigger: { gap: "300"; }; indicator: { width: "var(--indicator-size)"; height: "var(--indicator-size)"; fontSize: "350"; lineHeight: "400"; }; number: { fontSize: "350"; lineHeight: "400"; }; title: { fontSize: "400"; lineHeight: "500"; fontWeight: "semibold"; }; description: { fontSize: "350"; lineHeight: "500"; }; }; md: { root: { "--indicator-size": "sizes.1000"; }; item: { gap: "400"; }; trigger: { gap: "400"; }; indicator: { width: "var(--indicator-size)"; height: "var(--indicator-size)"; fontSize: "400"; lineHeight: "500"; }; number: { fontSize: "400"; lineHeight: "500"; }; title: { fontSize: "450"; lineHeight: "600"; fontWeight: "semibold"; }; description: { fontSize: "350"; lineHeight: "500"; }; }; }; orientation: { horizontal: { list: { flexDirection: "row"; gap: "300"; }; item: { flex: "1"; }; separator: { height: "var(--separator-width)"; flex: "1"; minWidth: "1000"; }; }; vertical: { list: { flexDirection: "column"; alignItems: "flex-start"; gap: "0"; }; item: { flexDirection: "column"; alignItems: "flex-start"; gap: "0"; }; separator: { width: "var(--separator-width)"; minHeight: "1000"; marginLeft: "calc(var(--indicator-size) / 2 - var(--separator-width) / 2)"; marginTop: "100"; marginBottom: "100"; }; }; }; }>; scrollArea: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "scrollbar" | "viewport" | "thumb" | "corner", { variant: { hover: { scrollbar: { opacity: "0"; "&[data-hover], &[data-scrolling]": { opacity: "1"; transitionDuration: "faster"; transitionDelay: "0ms"; }; }; }; always: { viewport: { flex: "1"; minHeight: "0"; "&[data-overflow-y]": { width: "calc(100% - var(--scroll-area-scrollbar-size) - var(--scroll-area-scrollbar-margin) * 2)"; }; "&[data-overflow-x]": { marginBottom: "calc(var(--scroll-area-scrollbar-size) + var(--scroll-area-scrollbar-margin) * 2)"; }; }; scrollbar: { opacity: "1"; }; corner: { opacity: number; }; }; }; size: { xs: { root: { "--scroll-area-scrollbar-size": "{sizes.100}"; }; }; sm: { root: { "--scroll-area-scrollbar-size": "{sizes.150}"; }; }; md: { root: { "--scroll-area-scrollbar-size": "{sizes.200}"; }; }; lg: { root: { "--scroll-area-scrollbar-size": "{sizes.300}"; }; }; }; }>; toast: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "indicator" | "closeTrigger" | "actionTrigger", { variant: { solid: { root: { backgroundColor: "colorPalette.9"; }; indicator: { "& svg": { color: "colorPalette.contrast"; }; }; title: { color: "colorPalette.contrast"; }; description: { color: "colorPalette.contrast"; }; actionTrigger: { borderColor: "colorPalette.contrast"; }; }; subtle: { root: { backgroundColor: "colorPalette.2"; boxShadow: "inset 0 0 0 1px {colors.colorPalette.5}, {shadows.1}"; }; indicator: { "& svg": { color: "colorPalette.11"; }; }; title: { color: "colorPalette.11"; }; description: { color: "colorPalette.12"; }; }; "accent-start": { root: { backgroundColor: "neutral.2"; boxShadow: "inset 3px 0 0 0 {colors.colorPalette.9}, inset 0 0 0 1px {colors.neutral.5}, {shadows.1}"; }; indicator: { "& svg": { color: "colorPalette.11"; }; }; title: { color: "neutral.12"; }; description: { color: "neutral.11"; }; actionTrigger: { colorPalette: "neutral"; }; closeTrigger: { colorPalette: "neutral"; }; }; }; }>; };