@bitrise/bitkit-v2 0.3.477 → 0.3.478-beta.3036

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts

@@ -12,12 +12,13 @@ export type BitkitLabelTooltipProps = {
     disablePortal?: boolean;
     /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
     placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
-    /** The label. Keep it to a couple of words — this is a name, not an explanation. */
+    /** The label. Keep it to a few words — a name or a short hint, not an explanation. */
     text: string;
 };
 /**
- * Names a control that shows no text of its own, typically an icon button. Small, tight and
- * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
+ * Names a control that shows no text of its own, typically an icon button, or says in a few words
+ * what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
+ * `BitkitTooltip`, which explains rather than labels.
  *
  * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
  * An icon-only control still needs its own `aria-label`.

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js

@@ -5,8 +5,9 @@ import { Portal } from "@chakra-ui/react/portal";
 import { Tooltip } from "@chakra-ui/react/tooltip";
 //#region lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx
 /**
-* Names a control that shows no text of its own, typically an icon button. Small, tight and
-* semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
+* Names a control that shows no text of its own, typically an icon button, or says in a few words
+* what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
+* `BitkitTooltip`, which explains rather than labels.
 *
 * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
 * An icon-only control still needs its own `aria-label`.

package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitLabelTooltipProps = {\n  /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. */\n  children: ReactNode;\n  /** Render the trigger without a tooltip — for labels that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The label. Keep it to a couple of words — this is a name, not an explanation. */\n  text: string;\n};\n\n/**\n * Names a control that shows no text of its own, typically an icon button. Small, tight and\n * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.\n *\n * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.\n * An icon-only control still needs its own `aria-label`.\n *\n * The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitLabelTooltip = ({\n  children,\n  disablePortal,\n  disabled,\n  placement = 'top',\n  text,\n}: BitkitLabelTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger, Dialog.CloseTrigger), the outer trigger's id and\n  // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n  // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n  // precedence over the id lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      disabled={disabled}\n      paddingSize=\"sm\"\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n      textStyle=\"sm/semibold\"\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {children}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content>{text}</Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAM,sBAAsB,EAC1B,UACA,eACA,UACA,YAAY,OACZ,WAC6B;CAC7B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EAJZ,UAAA,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitLabelTooltipProps = {\n  /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. */\n  children: ReactNode;\n  /** Render the trigger without a tooltip — for labels that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The label. Keep it to a few words — a name or a short hint, not an explanation. */\n  text: string;\n};\n\n/**\n * Names a control that shows no text of its own, typically an icon button, or says in a few words\n * what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to\n * `BitkitTooltip`, which explains rather than labels.\n *\n * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.\n * An icon-only control still needs its own `aria-label`.\n *\n * The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitLabelTooltip = ({\n  children,\n  disablePortal,\n  disabled,\n  placement = 'top',\n  text,\n}: BitkitLabelTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger, Dialog.CloseTrigger), the outer trigger's id and\n  // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n  // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n  // precedence over the id lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      disabled={disabled}\n      paddingSize=\"sm\"\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n      textStyle=\"sm/semibold\"\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {children}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content>{text}</Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,IAAM,sBAAsB,EAC1B,UACA,eACA,UACA,YAAY,OACZ,WAC6B;CAC7B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EAJZ,UAAA,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js

@@ -1,7 +1,7 @@
 import BitkitCodeSnippet from "../BitkitCodeSnippet/BitkitCodeSnippet.js";
+import BitkitList_default from "../BitkitList/BitkitList.js";
 import BitkitHeading from "../BitkitHeading/BitkitHeading.js";
 import BitkitLink from "../BitkitLink/BitkitLink.js";
-import BitkitList_default from "../BitkitList/BitkitList.js";
 import { getTextContent } from "../../utilities/getTextContent.js";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

@@ -3,8 +3,8 @@ import IconChevronDown from "../../icons/IconChevronDown.js";
 import IconChevronUp from "../../icons/IconChevronUp.js";
 import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
 import BitkitButton from "../BitkitButton/BitkitButton.js";
-import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
 import BitkitList_default from "../BitkitList/BitkitList.js";
+import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef, useState } from "react";

package/dist/components/index.d.ts

@@ -28,6 +28,12 @@ export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './Bitki
 export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from './BitkitExpandableCard/BitkitExpandableCard';
 export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
 export { default as BitkitFileInput, type BitkitFileInputProps } from './BitkitFileInput/BitkitFileInput';
+export { default as BitkitFilter, type BitkitFilterProps } from './BitkitFilter/BitkitFilter';
+export { type BitkitFilterAddProps } from './BitkitFilter/BitkitFilterAdd';
+export { type BitkitFilterDateRangeProps, type BitkitFilterDateRangeValue } from './BitkitFilter/BitkitFilterDateRange';
+export { type BitkitFilterSearchProps } from './BitkitFilter/BitkitFilterSearch';
+export { type BitkitFilterSelectItem, type BitkitFilterSelectProps } from './BitkitFilter/BitkitFilterSelect';
+export { type BitkitFilterSwitchItem, type BitkitFilterSwitchProps } from './BitkitFilter/BitkitFilterSwitch';
 export { default as BitkitGroupHeading, type BitkitGroupHeadingProps } from './BitkitGroupHeading/BitkitGroupHeading';
 export { default as BitkitHeading, type BitkitHeadingProps } from './BitkitHeading/BitkitHeading';
 export { default as BitkitIconButton, type BitkitIconButtonProps } from './BitkitIconButton/BitkitIconButton';

package/dist/main.js

@@ -306,8 +306,8 @@ import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
 import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
 import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
 import BitkitButton from "./components/BitkitButton/BitkitButton.js";
-import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitTooltip from "./components/BitkitTooltip/BitkitTooltip.js";
+import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitSelectMenuAction from "./components/BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitCalendar from "./components/BitkitCalendar/BitkitCalendar.js";
@@ -332,14 +332,18 @@ import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
 import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
 import BitkitExpandableCard from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
 import BitkitFileInput from "./components/BitkitFileInput/BitkitFileInput.js";
+import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
+import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
+import BitkitList_default from "./components/BitkitList/BitkitList.js";
+import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
+import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
+import BitkitFilter_default from "./components/BitkitFilter/BitkitFilter.js";
 import BitkitHeading from "./components/BitkitHeading/BitkitHeading.js";
 import BitkitIconButton from "./components/BitkitIconButton/BitkitIconButton.js";
-import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
 import BitkitLabeledData from "./components/BitkitLabeledData/BitkitLabeledData.js";
 import BitkitLightbox from "./components/BitkitLightbox/BitkitLightbox.js";
 import BitkitLink from "./components/BitkitLink/BitkitLink.js";
 import BitkitLinkButton from "./components/BitkitLinkButton/BitkitLinkButton.js";
-import BitkitList_default from "./components/BitkitList/BitkitList.js";
 import BitkitMarkdown from "./components/BitkitMarkdown/BitkitMarkdown.js";
 import BitkitMarkdownCard from "./components/BitkitMarkdownCard/BitkitMarkdownCard.js";
 import BitkitMultiselectMenu from "./components/BitkitMultiselectMenu/BitkitMultiselectMenu.js";
@@ -361,8 +365,6 @@ import BitkitPromoBanner from "./components/BitkitPromoBanner/BitkitPromoBanner.
 import BitkitRadio from "./components/BitkitRadio/BitkitRadio.js";
 import BitkitRadioGroup from "./components/BitkitRadioGroup/BitkitRadioGroup.js";
 import BitkitRibbon from "./components/BitkitRibbon/BitkitRibbon.js";
-import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
-import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
 import BitkitSectionHeading from "./components/BitkitSectionHeading/BitkitSectionHeading.js";
 import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/BitkitSegmentedControl.js";
 import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
@@ -383,10 +385,9 @@ import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/
 import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
-import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
 import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
 import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFilter_default as BitkitFilter, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };

package/dist/theme/slot-recipes/DatePicker.recipe.d.ts

@@ -30,10 +30,25 @@ declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
     device: {
         mobile: {
             content: {
+                minWidth: number;
                 boxShadow: "none";
                 paddingBlock: "16";
                 paddingInline: "16";
             };
+            view: {
+                gap: "16";
+            };
+            tableHeader: {
+                height: "40";
+                maxWidth: "none";
+                minWidth: number;
+                textStyle: "body/lg/regular";
+                width: "auto";
+            };
+            tableCellTrigger: {
+                height: "40";
+                textStyle: "body/lg/regular";
+            };
         };
     };
 }>;

package/dist/theme/slot-recipes/DatePicker.recipe.js

@@ -26,14 +26,15 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			borderRadius: "8",
 			boxShadow: "elevation/lg",
 			minWidth: rem(312),
-			paddingBlock: "24",
+			paddingBlockEnd: "16",
+			paddingBlockStart: "24",
 			paddingInline: "16",
-			zIndex: "select"
+			zIndex: "calc({zIndex.popover} + var(--layer-index, 0))"
 		},
 		view: {
 			display: "flex",
 			flexDirection: "column",
-			gap: "16"
+			gap: "24"
 		},
 		viewControl: {
 			display: "flex",
@@ -73,23 +74,25 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/moderate",
 				borderRadius: "0.5rem"
 			},
+			_focusVisible: { borderRadius: "0.5rem" },
 			"&[data-unavailable]": {
-				borderRadius: 0,
-				backgroundColor: "interactive/disabled",
 				color: "text/disabled",
 				cursor: "default",
 				"&:hover, &[data-outside-range]:hover": {
-					borderRadius: 0,
-					backgroundColor: "interactive/disabled",
+					backgroundColor: "transparent",
 					color: "text/disabled"
 				}
 			},
 			"&[data-outside-range]": { color: "text/tertiary" },
 			"&[data-outside-range][data-unavailable]": { color: "text/disabled" },
-			"&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover": {
+			"&[data-outside-range][data-in-range]": {
 				backgroundColor: "interactive/moderate",
 				color: "interactive/bold"
 			},
+			"&[data-outside-range][data-in-range]:hover": {
+				backgroundColor: "interactive/muted",
+				color: "interactive/minimal"
+			},
 			"&[data-outside-range][data-range-end]": {
 				backgroundColor: "interactive/highlight",
 				borderRadius: "0 0.5rem 0.5rem 0",
@@ -97,13 +100,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			},
 			"&[data-outside-range][data-hover-range-start]:hover": {
 				borderRadius: "0.5rem 0 0 0.5rem",
-				color: "interactive/subtle",
-				backgroundColor: "interactive/highlight"
+				color: "text/tertiary",
+				backgroundColor: "interactive/subtle"
 			},
 			"&[data-outside-range][data-hover-range-end]:hover": {
 				borderRadius: "0 0.5rem 0.5rem 0",
-				color: "interactive/subtle",
-				backgroundColor: "interactive/highlight"
+				color: "text/tertiary",
+				backgroundColor: "interactive/subtle"
 			},
 			"&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]": {
 				backgroundColor: "interactive/highlight",
@@ -120,7 +123,8 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				color: "interactive/minimal"
 			},
 			"&[data-outside-range]:hover": {
-				backgroundColor: "transparent",
+				backgroundColor: "interactive/subtle",
+				borderRadius: "0.5rem",
 				color: "text/tertiary"
 			},
 			"&[data-in-range]": {
@@ -131,6 +135,28 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/muted",
 				borderRadius: 0
 			},
+			"&[data-in-hover-range]:not([data-outside-range], [data-selected])": {
+				backgroundColor: "interactive/minimal",
+				borderRadius: 0,
+				color: "text/primary"
+			},
+			"&[data-hover-range-start]:not([data-outside-range], [data-selected])": {
+				backgroundColor: "interactive/moderate",
+				borderRadius: "0.5rem 0 0 0.5rem",
+				color: "text/primary"
+			},
+			"&[data-hover-range-end]:not([data-outside-range], [data-selected])": {
+				backgroundColor: "interactive/moderate",
+				borderRadius: "0 0.5rem 0.5rem 0",
+				color: "text/primary"
+			},
+			"&[data-hover-range-start][data-hover-range-end]:not([data-outside-range], [data-selected])": { borderRadius: "0.5rem" },
+			"&[data-today]": { color: "text/selected" },
+			"&[data-today][data-unavailable]": { color: "text/disabled" },
+			"&[data-today]:hover:not([data-selected], [data-unavailable])": {
+				backgroundColor: "interactive/subtle",
+				borderRadius: 0
+			},
 			"&[data-selected]": {
 				backgroundColor: "interactive/base",
 				color: "text/on-color",
@@ -141,12 +167,17 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				borderRadius: "0.5rem",
 				color: "interactive/moderate"
 			},
-			"&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover": {
+			"&[data-outside-range][data-selected]:not([data-range-start], [data-range-end])": {
+				backgroundColor: "interactive/subtle",
+				borderRadius: "0.5rem",
+				color: "text/tertiary"
+			},
+			"&[data-range-start]": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0.5rem 0 0 0.5rem",
 				color: "text/on-color"
 			},
-			"&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover": {
+			"&[data-range-end]": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0 0.5rem 0.5rem 0",
 				color: "text/on-color"
@@ -165,7 +196,6 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/base",
 				color: "interactive/moderate"
 			},
-			"&[data-hover-range-start][data-hover-range-end]": { borderRadius: "0.5rem" },
 			"&[data-today] > span": {
 				border: "1px solid",
 				borderColor: "interactive/base"
@@ -193,12 +223,32 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			false: { tableCellTrigger: { "&[data-outside-range]": { visibility: "hidden" } } },
 			true: { tableCellTrigger: { "&[data-outside-range]": { visibility: "visible" } } }
 		},
-		device: { mobile: { content: {
-			boxShadow: "none",
-			paddingBlock: "16",
-			paddingInline: "16"
-		} } }
-	}
+		device: { mobile: {
+			content: {
+				minWidth: 0,
+				boxShadow: "none",
+				paddingBlock: "16",
+				paddingInline: "16"
+			},
+			view: { gap: "16" },
+			tableHeader: {
+				height: "40",
+				maxWidth: "none",
+				minWidth: 0,
+				textStyle: "body/lg/regular",
+				width: "auto"
+			},
+			tableCellTrigger: {
+				height: "40",
+				textStyle: "body/lg/regular"
+			}
+		} }
+	},
+	compoundVariants: [{
+		device: "mobile",
+		layout: "1-month",
+		css: { content: { width: "100%" } }
+	}]
 });
 //#endregion
 export { datePickerSlotRecipe as default };

package/dist/theme/slot-recipes/DatePicker.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlock: '24',\n      paddingInline: '16',\n      zIndex: 'select',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        borderRadius: 0,\n        backgroundColor: 'interactive/disabled',\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          borderRadius: 0,\n          backgroundColor: 'interactive/disabled',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n        backgroundColor: 'interactive/highlight',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'transparent',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n      },\n    },\n  },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n  className: 'datePicker',\n  slots: [...datePickerAnatomy.keys(), 'months'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '8',\n    },\n    control: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n    },\n    months: {\n      display: 'flex',\n      gap: '24',\n    },\n    positioner: {\n      position: 'absolute',\n    },\n    content: {\n      backgroundColor: 'background/primary',\n      borderRadius: '8',\n      boxShadow: 'elevation/lg',\n      minWidth: rem(312),\n      paddingBlockEnd: '16',\n      paddingBlockStart: '24',\n      paddingInline: '16',\n      // A popover layer, so the month and year menus it opens (on the select layer) stay above it.\n      zIndex: 'calc({zIndex.popover} + var(--layer-index, 0))',\n    },\n    view: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '24',\n    },\n    viewControl: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n    },\n    table: {\n      width: 'full',\n      borderCollapse: 'collapse',\n      borderSpacing: 0,\n      tableLayout: 'fixed',\n    },\n    tableBody: {\n      '& > tr:first-child > td': {\n        paddingTop: '8',\n      },\n    },\n    tableRow: {\n      display: 'table-row',\n    },\n    tableHeader: {\n      color: 'text/tertiary',\n      textAlign: 'center',\n      textStyle: 'body/md/regular',\n      width: '40',\n      minWidth: '40',\n      maxWidth: '40',\n    },\n    tableCell: {\n      textAlign: 'center',\n      paddingBlock: '2',\n    },\n    tableCellTrigger: {\n      display: 'flex',\n      alignItems: 'stretch',\n      justifyContent: 'center',\n      width: '100%',\n      height: '32',\n      color: 'text/primary',\n      cursor: 'pointer',\n      textStyle: 'body/md/regular',\n\n      '&:hover:not([data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem',\n      },\n\n      // The focus ring follows the day's rounded shape rather than the square cell.\n      _focusVisible: {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-unavailable]': {\n        color: 'text/disabled',\n        cursor: 'default',\n        '&:hover, &[data-outside-range]:hover': {\n          backgroundColor: 'transparent',\n          color: 'text/disabled',\n        },\n      },\n\n      '&[data-outside-range]': {\n        color: 'text/tertiary',\n      },\n\n      '&[data-outside-range][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-outside-range][data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'interactive/bold',\n      },\n\n      '&[data-outside-range][data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-start]:hover': {\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/tertiary',\n        backgroundColor: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-hover-range-end]:hover': {\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/tertiary',\n        backgroundColor: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n        backgroundColor: 'interactive/highlight',\n        color: 'interactive/subtle',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-start]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range][data-in-range][data-range-end]:hover': {\n        backgroundColor: 'interactive/highlight',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/minimal',\n      },\n\n      '&[data-outside-range]:hover': {\n        backgroundColor: 'interactive/subtle',\n        borderRadius: '0.5rem',\n        color: 'text/tertiary',\n      },\n\n      '&[data-in-range]': {\n        backgroundColor: 'interactive/moderate',\n        color: 'text/primary',\n      },\n\n      '&[data-in-range]:hover': {\n        backgroundColor: 'interactive/muted',\n        borderRadius: 0,\n      },\n\n      // The range being previewed while the pointer picks its end: lighter than the selected range.\n      '&[data-in-hover-range]:not([data-outside-range], [data-selected])': {\n        backgroundColor: 'interactive/minimal',\n        borderRadius: 0,\n        color: 'text/primary',\n      },\n\n      '&[data-hover-range-start]:not([data-outside-range], [data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/primary',\n      },\n\n      '&[data-hover-range-end]:not([data-outside-range], [data-selected])': {\n        backgroundColor: 'interactive/moderate',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/primary',\n      },\n\n      '&[data-hover-range-start][data-hover-range-end]:not([data-outside-range], [data-selected])': {\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-today]': {\n        color: 'text/selected',\n      },\n\n      '&[data-today][data-unavailable]': {\n        color: 'text/disabled',\n      },\n\n      '&[data-today]:hover:not([data-selected], [data-unavailable])': {\n        backgroundColor: 'interactive/subtle',\n        borderRadius: 0,\n      },\n\n      '&[data-selected]': {\n        backgroundColor: 'interactive/base',\n        color: 'text/on-color',\n        borderRadius: '0.5rem',\n      },\n\n      '&[data-selected]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      // A selected day shown in a neighbouring month stays dimmed (Figma's `style=dimmed, selected`).\n      '&[data-outside-range][data-selected]:not([data-range-start], [data-range-end])': {\n        backgroundColor: 'interactive/subtle',\n        borderRadius: '0.5rem',\n        color: 'text/tertiary',\n      },\n\n      '&[data-range-start]': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-end]': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'text/on-color',\n      },\n\n      '&[data-range-start]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0.5rem 0 0 0.5rem',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        borderRadius: '0 0.5rem 0.5rem 0',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-range-start][data-range-end]:hover': {\n        backgroundColor: 'interactive/base',\n        color: 'interactive/moderate',\n      },\n\n      '&[data-today] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/base',\n      },\n\n      '&[data-today][data-selected] > span': {\n        border: '1px solid',\n        borderColor: 'interactive/moderate',\n      },\n\n      '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n        borderColor: 'interactive/moderate',\n      },\n\n      '& > span': {\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: '8',\n        display: 'flex',\n        flex: 1,\n      },\n    },\n  },\n  variants: {\n    layout: {\n      '1-month': {\n        content: {\n          width: '17.5rem',\n        },\n      },\n      '2-month': {\n        content: {\n          width: '38.5rem',\n        },\n      },\n    },\n    showOutsideDays: {\n      false: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'hidden',\n          },\n        },\n      },\n      true: {\n        tableCellTrigger: {\n          '&[data-outside-range]': {\n            visibility: 'visible',\n          },\n        },\n      },\n    },\n    device: {\n      mobile: {\n        content: {\n          minWidth: 0,\n          boxShadow: 'none',\n          paddingBlock: '16',\n          paddingInline: '16',\n        },\n        view: {\n          gap: '16',\n        },\n        tableHeader: {\n          height: '40',\n          maxWidth: 'none',\n          minWidth: 0,\n          textStyle: 'body/lg/regular',\n          width: 'auto',\n        },\n        tableCellTrigger: {\n          height: '40',\n          textStyle: 'body/lg/regular',\n        },\n      },\n    },\n  },\n  // A mobile calendar fills the screen instead of keeping the popover's fixed width.\n  compoundVariants: [\n    {\n      device: 'mobile',\n      layout: '1-month',\n      css: {\n        content: {\n          width: '100%',\n        },\n      },\n    },\n  ],\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts

@@ -85,6 +85,91 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                 height: "16";
             } | undefined;
         };
+        lg: {
+            trigger: {
+                height: "40";
+                paddingBlock: "8";
+                paddingInlineEnd: `${number}rem`;
+                paddingInlineStart: "8";
+                textStyle: "body/lg/regular";
+                '&:has([data-slot="avatar"])'?: {
+                    paddingBlock: `${number}rem`;
+                    paddingInlineStart: `${number}rem`;
+                } | undefined;
+            };
+            indicatorGroup: {
+                paddingInlineEnd: "4";
+            };
+            indicator: {
+                _icon: {
+                    width: "16";
+                    height: "16";
+                };
+            };
+            checkbox?: {
+                width: "24";
+                height: "24";
+            } | undefined;
+            item?: {
+                '&:has([data-slot="avatar"])': {
+                    paddingInlineStart: "12";
+                    paddingInlineEnd: "24";
+                    paddingBlock: "8";
+                    gap: "8";
+                };
+                '&:has([data-slot="checkbox"])': {
+                    minHeight: "48";
+                    paddingInlineEnd: "24";
+                    paddingBlock: "12";
+                    gap: "12";
+                };
+                paddingInline: "16";
+                paddingBlock: "12";
+                textStyle: "body/lg/regular";
+                _selected: {
+                    textStyle: "body/lg/semibold";
+                };
+            } | undefined;
+            content?: {
+                '--select-menu-list-max-height': `${number}rem`;
+            } | undefined;
+            itemLabel?: {
+                textStyle: "body/lg/regular";
+                lineHeight: "normal";
+            } | undefined;
+            itemLoadingLabel?: {
+                textStyle: "body/lg/regular";
+            } | undefined;
+            emptyState?: {
+                paddingBlock: "12";
+            } | undefined;
+            errorState?: {
+                paddingBlock: "8";
+            } | undefined;
+            errorLabel?: {
+                textStyle: "body/lg/regular";
+            } | undefined;
+            action?: {
+                minHeight: "48";
+                paddingBlock: "12";
+                textStyle: "body/lg/regular";
+                lineHeight: "normal";
+            } | undefined;
+            searchInputGroup?: {
+                height: `${number}rem`;
+                paddingBlock: "16";
+            } | undefined;
+            searchInput?: {
+                textStyle: "body/lg/regular";
+            } | undefined;
+            searchClear?: {
+                padding: "8";
+            } | undefined;
+            itemIndicator?: {
+                width: "24";
+                height: "24";
+            } | undefined;
+        };
     };
 }>;
 export default datePickerSelectSlotRecipe;

package/dist/theme/slot-recipes/DatePickerSelect.recipe.js

@@ -1,3 +1,4 @@
+import { rem } from "../themeUtils.js";
 import { selectSlotRecipe } from "./Select.recipe.js";
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { selectAnatomy } from "@chakra-ui/react/anatomy";
@@ -10,6 +11,7 @@ var datePickerSelectSlotRecipe = defineSlotRecipe({
 			...selectSlotRecipe.base?.trigger,
 			borderWidth: 0,
 			height: "32",
+			minWidth: 0,
 			paddingInlineStart: "12",
 			paddingInlineEnd: "8",
 			"&:hover:not(:active)": { bg: "background/hover" },
@@ -26,19 +28,42 @@ var datePickerSelectSlotRecipe = defineSlotRecipe({
 		indicatorGroup: {
 			...selectSlotRecipe.base?.indicatorGroup,
 			paddingInline: "8"
+		},
+		valueText: {
+			display: "block",
+			minWidth: 0,
+			truncate: true
 		}
 	},
-	variants: { size: { md: {
-		...selectSlotRecipe.variants?.size?.md,
-		trigger: {
-			...selectSlotRecipe.variants?.size?.md.trigger,
-			paddingBlock: "6"
+	variants: { size: {
+		md: {
+			...selectSlotRecipe.variants?.size?.md,
+			trigger: {
+				...selectSlotRecipe.variants?.size?.md.trigger,
+				paddingBlock: "6"
+			},
+			indicator: { _icon: {
+				width: "16",
+				height: "16"
+			} }
 		},
-		indicator: { _icon: {
-			width: "16",
-			height: "16"
-		} }
-	} } },
+		lg: {
+			...selectSlotRecipe.variants?.size?.lg,
+			trigger: {
+				...selectSlotRecipe.variants?.size?.lg.trigger,
+				height: "40",
+				paddingBlock: "8",
+				paddingInlineEnd: rem(28),
+				paddingInlineStart: "8",
+				textStyle: "body/lg/regular"
+			},
+			indicatorGroup: { paddingInlineEnd: "4" },
+			indicator: { _icon: {
+				width: "16",
+				height: "16"
+			} }
+		}
+	} },
 	defaultVariants: { size: "md" }
 });
 //#endregion

package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePickerSelect.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { selectSlotRecipe } from './Select.recipe';\n\nconst datePickerSelectSlotRecipe = defineSlotRecipe({\n  className: 'datePickerSelect',\n  slots: selectAnatomy.keys(),\n  base: {\n    trigger: {\n      ...selectSlotRecipe.base?.trigger,\n      borderWidth: 0,\n      height: '32',\n      paddingInlineStart: '12',\n      paddingInlineEnd: '8',\n      '&:hover:not(:active)': {\n        bg: 'background/hover',\n      },\n      '&:active': {\n        bg: 'background/active',\n      },\n    },\n    indicator: {\n      ...selectSlotRecipe.base?.indicator,\n      color: 'icon/tertiary',\n      _icon: {\n        width: '16',\n        height: '16',\n      },\n    },\n    indicatorGroup: {\n      ...selectSlotRecipe.base?.indicatorGroup,\n      paddingInline: '8',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        ...selectSlotRecipe.variants?.size?.md,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.md.trigger,\n          paddingBlock: '6',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport default datePickerSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,6BAA6B,iBAAiB;CAClD,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,SAAS;GACP,GAAG,iBAAiB,MAAM;GAC1B,aAAa;GACb,QAAQ;GACR,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB,EACtB,IAAI,mBACN;GACA,YAAY,EACV,IAAI,oBACN;EACF;EACA,WAAW;GACT,GAAG,iBAAiB,MAAM;GAC1B,OAAO;GACP,OAAO;IACL,OAAO;IACP,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,GAAG,iBAAiB,MAAM;GAC1B,eAAe;EACjB;CACF;CACA,UAAU,EACR,MAAM,EACJ,IAAI;EACF,GAAG,iBAAiB,UAAU,MAAM;EACpC,SAAS;GACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;GACvC,cAAc;EAChB;EACA,WAAW,EACT,OAAO;GACL,OAAO;GACP,QAAQ;EACV,EACF;CACF,EACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"DatePickerSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePickerSelect.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\nimport { selectSlotRecipe } from './Select.recipe';\n\nconst datePickerSelectSlotRecipe = defineSlotRecipe({\n  className: 'datePickerSelect',\n  slots: selectAnatomy.keys(),\n  base: {\n    trigger: {\n      ...selectSlotRecipe.base?.trigger,\n      borderWidth: 0,\n      height: '32',\n      minWidth: 0,\n      paddingInlineStart: '12',\n      paddingInlineEnd: '8',\n      '&:hover:not(:active)': {\n        bg: 'background/hover',\n      },\n      '&:active': {\n        bg: 'background/active',\n      },\n    },\n    indicator: {\n      ...selectSlotRecipe.base?.indicator,\n      color: 'icon/tertiary',\n      _icon: {\n        width: '16',\n        height: '16',\n      },\n    },\n    indicatorGroup: {\n      ...selectSlotRecipe.base?.indicatorGroup,\n      paddingInline: '8',\n    },\n    // A long month name is cut off before the chevron once the select shrinks, e.g. on a 320px screen.\n    valueText: {\n      display: 'block',\n      minWidth: 0,\n      truncate: true,\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        ...selectSlotRecipe.variants?.size?.md,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.md.trigger,\n          paddingBlock: '6',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n      // The mobile calendar: taller trigger and larger text.\n      lg: {\n        ...selectSlotRecipe.variants?.size?.lg,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.lg.trigger,\n          height: '40',\n          paddingBlock: '8',\n          // Clears the chevron, which sits over the trigger's end. Tight, so the year still fits at 320px.\n          paddingInlineEnd: rem(28),\n          paddingInlineStart: '8',\n          textStyle: 'body/lg/regular',\n        },\n        indicatorGroup: {\n          paddingInlineEnd: '4',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport default datePickerSelectSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,6BAA6B,iBAAiB;CAClD,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,SAAS;GACP,GAAG,iBAAiB,MAAM;GAC1B,aAAa;GACb,QAAQ;GACR,UAAU;GACV,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB,EACtB,IAAI,mBACN;GACA,YAAY,EACV,IAAI,oBACN;EACF;EACA,WAAW;GACT,GAAG,iBAAiB,MAAM;GAC1B,OAAO;GACP,OAAO;IACL,OAAO;IACP,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,GAAG,iBAAiB,MAAM;GAC1B,eAAe;EACjB;EAEA,WAAW;GACT,SAAS;GACT,UAAU;GACV,UAAU;EACZ;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,GAAG,iBAAiB,UAAU,MAAM;GACpC,SAAS;IACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;IACvC,cAAc;GAChB;GACA,WAAW,EACT,OAAO;IACL,OAAO;IACP,QAAQ;GACV,EACF;EACF;EAEA,IAAI;GACF,GAAG,iBAAiB,UAAU,MAAM;GACpC,SAAS;IACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;IACvC,QAAQ;IACR,cAAc;IAEd,kBAAkB,IAAI,EAAE;IACxB,oBAAoB;IACpB,WAAW;GACb;GACA,gBAAgB,EACd,kBAAkB,IACpB;GACA,WAAW,EACT,OAAO;IACL,OAAO;IACP,QAAQ;GACV,EACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}