@bitrise/bitkit-v2 0.3.481-beta.3105 → 0.3.481-beta.3109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitCalendar/BitkitCalendar.d.ts +12 -0
- package/dist/components/BitkitCalendar/BitkitCalendar.js +7 -1
- package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarContent.d.ts +5 -1
- package/dist/components/BitkitCalendar/components/CalendarContent.js +60 -43
- package/dist/components/BitkitCalendar/components/CalendarContent.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonth.d.ts +4 -2
- package/dist/components/BitkitCalendar/components/CalendarMonth.js +15 -5
- package/dist/components/BitkitCalendar/components/CalendarMonth.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts +2 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js +3 -2
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts +3 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts +3 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js +3 -3
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts +1 -0
- package/dist/components/BitkitCalendar/components/CalendarSelect.js +5 -3
- package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js +1 -0
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts +2 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js +3 -2
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
- package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +2 -0
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js +2 -1
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
- package/dist/components/BitkitFilter/BitkitFilter.context.d.ts +65 -0
- package/dist/components/BitkitFilter/BitkitFilter.context.js +82 -0
- package/dist/components/BitkitFilter/BitkitFilter.context.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilter.d.ts +54 -0
- package/dist/components/BitkitFilter/BitkitFilter.js +247 -0
- package/dist/components/BitkitFilter/BitkitFilter.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.d.ts +18 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.js +42 -0
- package/dist/components/BitkitFilter/BitkitFilter.utils.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.d.ts +18 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.js +200 -0
- package/dist/components/BitkitFilter/BitkitFilterAdd.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.d.ts +26 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js +118 -0
- package/dist/components/BitkitFilter/BitkitFilterDateRange.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.d.ts +23 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.js +72 -0
- package/dist/components/BitkitFilter/BitkitFilterSearch.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.d.ts +61 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.js +149 -0
- package/dist/components/BitkitFilter/BitkitFilterSelect.js.map +1 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.d.ts +28 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js +87 -0
- package/dist/components/BitkitFilter/BitkitFilterSwitch.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterChip.d.ts +23 -0
- package/dist/components/BitkitFilter/components/FilterChip.js +66 -0
- package/dist/components/BitkitFilter/components/FilterChip.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterField.d.ts +15 -0
- package/dist/components/BitkitFilter/components/FilterField.js +60 -0
- package/dist/components/BitkitFilter/components/FilterField.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterPanel.d.ts +42 -0
- package/dist/components/BitkitFilter/components/FilterPanel.js +126 -0
- package/dist/components/BitkitFilter/components/FilterPanel.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts +15 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.js +41 -0
- package/dist/components/BitkitFilter/components/FilterSearchInput.js.map +1 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts +45 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.js +342 -0
- package/dist/components/BitkitFilter/components/FilterSelectForm.js.map +1 -0
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.d.ts +4 -3
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js +3 -2
- package/dist/components/BitkitLabelTooltip/BitkitLabelTooltip.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +1 -1
- package/dist/components/BitkitTextInput/BitkitTextInput.js +16 -13
- package/dist/components/BitkitTextInput/BitkitTextInput.js.map +1 -1
- package/dist/components/index.d.ts +6 -1
- package/dist/main.js +8 -9
- package/dist/theme/recipes/index.d.ts +525 -0
- package/dist/theme/recipes/index.js +1 -3
- package/dist/theme/recipes/index.js.map +1 -1
- package/dist/theme/semantic-tokens/index.d.ts +0 -5
- package/dist/theme/semantic-tokens/semanticColors.d.ts +0 -5
- package/dist/theme/semantic-tokens/semanticColors.js +0 -1
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/DatePicker.recipe.d.ts +15 -0
- package/dist/theme/slot-recipes/DatePicker.recipe.js +72 -22
- package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.d.ts +85 -0
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js +35 -10
- package/dist/theme/slot-recipes/DatePickerSelect.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Filter.recipe.d.ts +39 -0
- package/dist/theme/slot-recipes/Filter.recipe.js +656 -0
- package/dist/theme/slot-recipes/Filter.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Listbox.recipe.d.ts +22 -0
- package/dist/theme/slot-recipes/Listbox.recipe.js +108 -0
- package/dist/theme/slot-recipes/Listbox.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Menu.recipe.js +6 -1
- package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Tag.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +2 -1
- package/dist/theme/slot-recipes/UISideNav.recipe.js +3 -2
- package/dist/theme/slot-recipes/UISideNav.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +162 -3
- package/dist/theme/slot-recipes/index.js +4 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/themeUtils.d.ts +0 -6
- package/dist/theme/themeUtils.js +1 -7
- package/dist/theme/themeUtils.js.map +1 -1
- package/dist/utilities/BitkitPortalContext.js +3 -2
- package/dist/utilities/BitkitPortalContext.js.map +1 -1
- package/docs/v1-to-v2-migration-guide.md +48 -1
- package/package.json +1 -1
- package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +0 -41
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js +0 -114
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +0 -1
- package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +0 -10
- package/dist/components/BitkitUIHeader/BitriseLogo.js +0 -86
- package/dist/components/BitkitUIHeader/BitriseLogo.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +0 -26
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js +0 -40
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +0 -34
- package/dist/components/BitkitUIHeader/UIHeaderButton.js +0 -45
- package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +0 -13
- package/dist/components/BitkitUIHeader/UIHeaderContext.js +0 -11
- package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +0 -65
- package/dist/components/BitkitUIHeader/UIHeaderControl.js +0 -72
- package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +0 -20
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +0 -46
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +0 -1
- package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +0 -32
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js +0 -121
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +0 -1
- package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts +0 -14
- package/dist/components/BitkitUIHeader/uiHeaderPart.js +0 -18
- package/dist/components/BitkitUIHeader/uiHeaderPart.js.map +0 -1
- package/dist/theme/recipes/UIHeaderButton.recipe.js +0 -103
- package/dist/theme/recipes/UIHeaderButton.recipe.js.map +0 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +0 -14
- package/dist/theme/slot-recipes/UIHeader.recipe.js +0 -253
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterSelectForm.js","names":["_Fragment","BitkitList"],"sources":["../../../../lib/components/BitkitFilter/components/FilterSelectForm.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Listbox } from '@chakra-ui/react/listbox';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Fragment, type ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../../icons';\nimport { type BitkitColorToken } from '../../../theme/themeUtils';\nimport BitkitCheckbox from '../../BitkitCheckbox/BitkitCheckbox';\nimport BitkitCheckboxGroup from '../../BitkitCheckboxGroup/BitkitCheckboxGroup';\nimport BitkitGroupHeading from '../../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitInlineLoading from '../../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitList from '../../BitkitList/BitkitList';\nimport BitkitSearchInput from '../../BitkitSearchInput/BitkitSearchInput';\nimport BitkitTextInput from '../../BitkitTextInput/BitkitTextInput';\nimport { useFilterContext } from '../BitkitFilter.context';\nimport { compilePattern, isEqualFilterValue, isPattern, toRunningText } from '../BitkitFilter.utils';\nimport { FilterPanelFooter, FilterPanelHeader } from './FilterPanel';\nimport FilterSearchInput from './FilterSearchInput';\n\nexport interface BitkitFilterSelectItem {\n /**\n * Lists the option under this heading, with the others of the same group. Only the open list shows\n * it: the chip shows the label alone, so the label has to make sense without its group.\n */\n group?: string;\n icon?: BitkitIconComponent;\n /** Colors the icon, e.g. a status: `icon/positive` for \"Passed\". */\n iconColor?: BitkitColorToken<'icon'>;\n label: string;\n /** Unique across all groups. */\n value: string;\n}\n\n/**\n * Gathers the options by `group`, so the list (and its keyboard order) runs group by group. The groups\n * keep their order in `items`, with the ungrouped options (an empty-named group) first; within a\n * group the options keep their order in `options`, e.g. the applied ones first.\n */\nconst groupItems = (options: BitkitFilterSelectItem[], items: BitkitFilterSelectItem[]) => {\n const groups = new Map<string, BitkitFilterSelectItem[]>([['', []]]);\n [...items, ...options].forEach((item) => {\n if (!groups.has(item.group ?? '')) groups.set(item.group ?? '', []);\n });\n options.forEach((option) => groups.get(option.group ?? '')?.push(option));\n return [...groups].filter(([, groupOptions]) => groupOptions.length);\n};\n\n/** The list renders at most this many options; search narrows down the rest. */\nexport const MAX_VISIBLE_ITEMS = 100;\n\n/** Below this many options the list is short enough to scan, so there is no search input. */\nconst SEARCH_THRESHOLD = 5;\n\nexport interface FilterSelectFormProps {\n /** The filter holds a value: the footer offers \"Clear\" instead of the wildcard-mode switch. */\n isEditing: boolean;\n /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */\n isOrderFixed?: boolean;\n /** A value is always applied: no \"Clear\" in the footer. */\n isRequired?: boolean;\n items: BitkitFilterSelectItem[];\n label: string;\n loading?: boolean;\n loadingLabel?: string;\n multiple?: boolean;\n onApply: (value: string[]) => void;\n onCancel: () => void;\n onSearchChange?: (searchText: string) => void;\n pattern?: boolean;\n pluralLabel: string;\n searchPlaceholder?: string;\n /**\n * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.\n * left behind by a server search — is listed first, so it can still be unchecked.\n */\n selectedItems?: BitkitFilterSelectItem[];\n value: string[];\n}\n\n/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */\nconst FilterSelectForm = (props: FilterSelectFormProps) => {\n const {\n isEditing,\n isOrderFixed,\n isRequired,\n items,\n label,\n loading,\n loadingLabel = 'Loading...',\n multiple,\n onApply,\n onCancel,\n onSearchChange,\n pattern,\n pluralLabel,\n searchPlaceholder = 'Search for options',\n selectedItems = [],\n value,\n } = props;\n const { isMobile, styles } = useFilterContext();\n\n const [draft, setDraft] = useState(value);\n const [mode, setMode] = useState<'list' | 'pattern'>(pattern && value[0] && isPattern(value[0]) ? 'pattern' : 'list');\n const [searchText, setSearchText] = useState('');\n // Set once the options have loaded, so a later reload (a search, or clearing it) keeps the search and footer.\n const [hasLoaded, setHasLoaded] = useState(!loading);\n if (!loading && !hasLoaded) setHasLoaded(true);\n\n const onSearchTextChange = (text: string) => {\n setSearchText(text);\n onSearchChange?.(text);\n };\n\n // With `onSearchChange` the consumer filters `items` itself, e.g. on the server. Without a search,\n // the applied options come first. `value` doesn't change while the panel is open, so the order is\n // set when it opens and rows don't jump as options are (un)checked.\n const matchingItems = useMemo(() => {\n if (!searchText) {\n if (isOrderFixed) return items;\n const applied = value.flatMap((selected) => {\n const item = items.find((option) => option.value === selected);\n return item ?? selectedItems.find((option) => option.value === selected) ?? [];\n });\n return [...applied, ...items.filter((item) => !value.includes(item.value))];\n }\n if (onSearchChange) return items;\n const query = searchText.toLowerCase();\n return items.filter((item) => item.label.toLowerCase().includes(query));\n }, [isOrderFixed, items, onSearchChange, searchText, selectedItems, value]);\n\n const visibleGroups = useMemo(\n () => groupItems(matchingItems.slice(0, MAX_VISIBLE_ITEMS), items),\n [items, matchingItems],\n );\n const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);\n // The first load shows only the title and a loading row; later loads keep the input and footer in place.\n const isInitialLoading = !!loading && !hasLoaded;\n const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);\n const searchLabel = `Search ${toRunningText(pluralLabel)}`;\n const showLimitHelper = matchingItems.length > MAX_VISIBLE_ITEMS;\n\n const patternValue = draft[0] ?? '';\n const isApplyDisabled =\n isEqualFilterValue(draft, value) ||\n (mode === 'pattern' && !(patternValue && isPattern(patternValue))) ||\n (!!isRequired && !draft.length);\n\n // Switching between the list and the pattern moves focus into the new view, so typing goes there.\n const bodyRef = useRef<HTMLDivElement>(null);\n const hasSwitchedMode = useRef(false);\n useEffect(() => {\n if (!hasSwitchedMode.current) return;\n bodyRef.current\n ?.querySelector<HTMLElement>('input:not([type=hidden]), [role=listbox], input[type=checkbox]')\n ?.focus();\n }, [mode]);\n\n let start;\n if (isEditing && !isRequired) {\n start = { label: multiple && isMobile ? 'Clear all' : 'Clear', onClick: () => onApply([]) };\n } else if (pattern && !isEditing) {\n start = {\n label: mode === 'list' ? 'Use wildcard pattern' : 'Select from list',\n onClick: () => {\n hasSwitchedMode.current = true;\n setMode(mode === 'list' ? 'pattern' : 'list');\n setDraft([]);\n },\n };\n }\n\n let list;\n if (loading) {\n list = <BitkitInlineLoading css={styles.loading} label={loadingLabel} size={isMobile ? 'lg' : 'md'} />;\n } else if (!visibleItems.length) {\n list = (\n <Text css={styles.loading} color=\"text/secondary\" textStyle={isMobile ? 'body/lg/regular' : 'body/md/regular'}>\n {searchText ? 'No result. Refine your search term.' : 'No options available.'}\n </Text>\n );\n } else if (multiple && !isMobile) {\n list = (\n <Box css={styles.checkboxList}>\n <BitkitCheckboxGroup aria-label={label} onValueChange={setDraft} size=\"md\" value={draft}>\n {visibleGroups.map(([group, groupItems]) => {\n const checkboxes = groupItems.map((item) => (\n <BitkitCheckbox\n key={item.value}\n labelText={\n item.icon ? (\n <HStack gap=\"4\">\n <item.icon color={item.iconColor} data-option-icon={item.iconColor ? undefined : ''} size=\"16\" />\n {item.label}\n </HStack>\n ) : (\n item.label\n )\n }\n value={item.value}\n />\n ));\n return group ? (\n <CheckboxOptionGroup key={group} label={group}>\n {checkboxes}\n </CheckboxOptionGroup>\n ) : (\n <Fragment key={group}>{checkboxes}</Fragment>\n );\n })}\n </BitkitCheckboxGroup>\n {showLimitHelper && <LimitHelper marginBlockStart=\"16\" />}\n </Box>\n );\n } else {\n list = (\n <FilterListbox\n groups={visibleGroups}\n items={visibleItems}\n label={label}\n multiple={multiple}\n onValueChange={setDraft}\n showLimitHelper={showLimitHelper}\n value={draft}\n />\n );\n }\n\n let search = null;\n if (showSearch && isMobile) {\n search = (\n <FilterSearchInput\n label={searchLabel}\n onValueChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n value={searchText}\n />\n );\n } else if (showSearch) {\n search = (\n <Box css={styles.popoverSearch}>\n <BitkitSearchInput\n label={searchLabel}\n onChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n size=\"md\"\n value={searchText}\n />\n </Box>\n );\n }\n\n const body = (\n <Box css={styles.popoverBody} ref={bodyRef}>\n {mode === 'pattern' ? (\n <FilterPatternBody items={items} onValueChange={setDraft} pluralLabel={pluralLabel} value={patternValue} />\n ) : (\n <>\n {search}\n {list}\n </>\n )}\n </Box>\n );\n\n return (\n <>\n <FilterPanelHeader\n count={multiple && mode === 'list' ? draft.length : undefined}\n title={multiple ? pluralLabel : label}\n />\n {isMobile ? (\n <Box flex=\"1\" overflowY=\"auto\">\n {body}\n </Box>\n ) : (\n body\n )}\n {!isInitialLoading && (\n <FilterPanelFooter\n applyLabel={multiple && mode === 'list' && draft.length ? `Apply (${draft.length})` : undefined}\n isApplyDisabled={isApplyDisabled}\n onApply={() => onApply(mode === 'pattern' ? [patternValue] : draft)}\n onCancel={onCancel}\n start={start}\n />\n )}\n </>\n );\n};\n\n/** A named group of the desktop checkboxes, so a screen reader tells which group an option is in. */\nconst CheckboxOptionGroup = ({ children, label }: { children: ReactNode; label: string }) => {\n const headingId = useId();\n\n return (\n // Stacked like the checkbox group's own children, which its flex column no longer reaches in here.\n <Box aria-labelledby={headingId} display=\"flex\" flexDirection=\"column\" gap=\"12\" role=\"group\">\n {/* The list pads 20; the heading lines up 24 from the popover's edge, like the listbox's. */}\n <BitkitGroupHeading id={headingId} label={label} paddingBlockStart=\"12\" paddingInline=\"4\" />\n {children}\n </Box>\n );\n};\n\nconst LimitHelper = ({ marginBlockStart }: { marginBlockStart?: '16' }) => {\n const { styles } = useFilterContext();\n\n return (\n <Text css={styles.listHelperText} marginBlockStart={marginBlockStart}>\n Showing the first {MAX_VISIBLE_ITEMS} options. Search to find more.\n </Text>\n );\n};\n\ninterface FilterListboxProps {\n groups: [string, BitkitFilterSelectItem[]][];\n /** `groups` flattened, in the same order: the collection's (and so the keyboard's) order. */\n items: BitkitFilterSelectItem[];\n label: string;\n multiple?: boolean;\n onValueChange: (value: string[]) => void;\n showLimitHelper: boolean;\n value: string[];\n}\n\n/**\n * The option list for a single select, and on mobile for a multiple one too — there the rows are\n * full-width and highlighted when selected, with a checkbox drawn in front.\n */\nconst FilterListbox = (props: FilterListboxProps) => {\n const { groups, items, label, multiple, onValueChange, showLimitHelper, value } = props;\n const { isMobile, styles } = useFilterContext();\n const collection = useMemo(() => createListCollection({ items }), [items]);\n const checkboxStyles = useSlotRecipe({ key: 'checkbox' })({ size: 'lg' });\n\n const checkIndicator = (\n <Listbox.ItemIndicator>\n <IconCheck size=\"16\" />\n </Listbox.ItemIndicator>\n );\n\n const renderItem = (item: BitkitFilterSelectItem) => {\n const state = value.includes(item.value) ? 'checked' : 'unchecked';\n const check = multiple ? (\n // Drawn, not a real checkbox: the option row is the control, and a nested input would be a second one.\n <Box aria-hidden css={[checkboxStyles.control, styles.mobileListCheckbox]} data-state={state}>\n <IconCheck />\n </Box>\n ) : (\n <Box aria-hidden css={styles.mobileListCheck} data-state={state}>\n <IconCheck size=\"16\" />\n </Box>\n );\n return (\n <Listbox.Item item={item} key={item.value}>\n {isMobile && check}\n {!!item.icon && (\n <item.icon\n color={item.iconColor}\n // Without an `iconColor` of its own, the icon follows the row's state.\n data-option-icon={item.iconColor ? undefined : ''}\n size={isMobile ? '24' : '16'}\n />\n )}\n <Listbox.ItemText>{item.label}</Listbox.ItemText>\n {!isMobile && checkIndicator}\n </Listbox.Item>\n );\n };\n\n return (\n <Listbox.Root\n collection={collection}\n onValueChange={(details) => onValueChange(details.value)}\n selectionMode={multiple ? 'multiple' : 'single'}\n size={isMobile ? 'lg' : 'md'}\n value={value}\n >\n {/* Zag points the content's aria-labelledby at the label, so it has to exist. */}\n <Listbox.Label srOnly>{label}</Listbox.Label>\n <Listbox.Content>\n {/* Ungrouped options sit straight in the list: a group around them would have no name. */}\n {groups.map(([group, groupItems]) =>\n group ? (\n <Listbox.ItemGroup key={group}>\n <Listbox.ItemGroupLabel asChild>\n <BitkitGroupHeading label={group} paddingBlockStart=\"12\" paddingInline=\"24\" />\n </Listbox.ItemGroupLabel>\n {groupItems.map(renderItem)}\n </Listbox.ItemGroup>\n ) : (\n groupItems.map(renderItem)\n ),\n )}\n </Listbox.Content>\n {/* Outside the content, whose `listbox` role allows only options and groups. */}\n {showLimitHelper && (\n <Box paddingBlockStart=\"8\" paddingInline=\"24\">\n <LimitHelper />\n </Box>\n )}\n </Listbox.Root>\n );\n};\n\ninterface FilterPatternBodyProps {\n items: BitkitFilterSelectItem[];\n onValueChange: (value: string[]) => void;\n pluralLabel: string;\n value: string;\n}\n\nconst FilterPatternBody = ({ items, onValueChange, pluralLabel, value }: FilterPatternBodyProps) => {\n const { isMobile, styles } = useFilterContext();\n const noun = toRunningText(pluralLabel);\n const matches = useMemo(() => {\n if (!isPattern(value)) return null;\n const regExp = compilePattern(value);\n return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));\n }, [items, value]);\n\n let results;\n if (!matches) {\n results = (\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n Enter a pattern with the wildcard ‘*’ to view {noun} with matching names.\n </Text>\n );\n } else if (!matches.length) {\n results = (\n <Text color=\"text/tertiary\" textStyle=\"body/md/regular\">\n (no matching {noun})\n </Text>\n );\n } else {\n results = (\n <>\n <BitkitList size=\"md\">\n {matches.slice(0, MAX_VISIBLE_ITEMS).map((item) => (\n <BitkitList.Item key={item.value}>{item.label}</BitkitList.Item>\n ))}\n </BitkitList>\n {matches.length > MAX_VISIBLE_ITEMS && (\n <Text css={styles.listHelperText} marginBlockStart=\"16\">\n Showing the first {MAX_VISIBLE_ITEMS} matches.\n </Text>\n )}\n </>\n );\n }\n\n return (\n <Box css={styles.pattern} data-filter-pattern=\"\">\n <BitkitTextInput\n helperText=\"Allowed wildcard character: *\"\n label=\"Wildcard pattern\"\n onValueChange={(text) => onValueChange(text ? [text] : [])}\n placeholder=\"(e.g. *main*, release-*)\"\n size={isMobile ? 'lg' : 'md'}\n value={value}\n />\n <Box css={styles.patternResults}>\n <Text css={styles.patternResultsLabel}>Matching results{matches?.length ? ` (${matches.length})` : ''}</Text>\n {results}\n </Box>\n </Box>\n );\n};\n\nexport default FilterSelectForm;\n"],"mappings":"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"}
|
|
@@ -12,12 +12,13 @@ export type BitkitLabelTooltipProps = {
|
|
|
12
12
|
disablePortal?: boolean;
|
|
13
13
|
/** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
|
|
14
14
|
placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
|
|
15
|
-
/** The label. Keep it to a
|
|
15
|
+
/** The label. Keep it to a few words — a name or a short hint, not an explanation. */
|
|
16
16
|
text: string;
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
19
|
-
* Names a control that shows no text of its own, typically an icon button
|
|
20
|
-
*
|
|
19
|
+
* Names a control that shows no text of its own, typically an icon button, or says in a few words
|
|
20
|
+
* what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
|
|
21
|
+
* `BitkitTooltip`, which explains rather than labels.
|
|
21
22
|
*
|
|
22
23
|
* Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
|
|
23
24
|
* An icon-only control still needs its own `aria-label`.
|
|
@@ -5,8 +5,9 @@ import { Portal } from "@chakra-ui/react/portal";
|
|
|
5
5
|
import { Tooltip } from "@chakra-ui/react/tooltip";
|
|
6
6
|
//#region lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx
|
|
7
7
|
/**
|
|
8
|
-
* Names a control that shows no text of its own, typically an icon button
|
|
9
|
-
*
|
|
8
|
+
* Names a control that shows no text of its own, typically an icon button, or says in a few words
|
|
9
|
+
* what a control takes, e.g. what a search field matches. Small, tight and semibold, in contrast to
|
|
10
|
+
* `BitkitTooltip`, which explains rather than labels.
|
|
10
11
|
*
|
|
11
12
|
* Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
|
|
12
13
|
* An icon-only control still needs its own `aria-label`.
|
|
@@ -1 +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
|
|
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 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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import BitkitCodeSnippet from "../BitkitCodeSnippet/BitkitCodeSnippet.js";
|
|
2
|
+
import BitkitList_default from "../BitkitList/BitkitList.js";
|
|
2
3
|
import BitkitHeading from "../BitkitHeading/BitkitHeading.js";
|
|
3
4
|
import BitkitLink from "../BitkitLink/BitkitLink.js";
|
|
4
|
-
import BitkitList_default from "../BitkitList/BitkitList.js";
|
|
5
5
|
import { getTextContent } from "../../utilities/getTextContent.js";
|
|
6
6
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
7
7
|
import { forwardRef } from "react";
|
|
@@ -3,8 +3,8 @@ import IconChevronDown from "../../icons/IconChevronDown.js";
|
|
|
3
3
|
import IconChevronUp from "../../icons/IconChevronUp.js";
|
|
4
4
|
import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
|
|
5
5
|
import BitkitButton from "../BitkitButton/BitkitButton.js";
|
|
6
|
-
import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
|
|
7
6
|
import BitkitList_default from "../BitkitList/BitkitList.js";
|
|
7
|
+
import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
|
|
8
8
|
import { Box } from "@chakra-ui/react/box";
|
|
9
9
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
10
10
|
import { forwardRef, useState } from "react";
|
|
@@ -3,9 +3,9 @@ import IconChevronLeft from "../../icons/IconChevronLeft.js";
|
|
|
3
3
|
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
4
4
|
import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
|
|
5
5
|
import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
|
|
6
|
+
import useResponsive from "../../hooks/useResponsive.js";
|
|
6
7
|
import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
|
|
7
8
|
import useIsTruncated from "../../utilities/useIsTruncated.js";
|
|
8
|
-
import useResponsive from "../../hooks/useResponsive.js";
|
|
9
9
|
import { Box } from "@chakra-ui/react/box";
|
|
10
10
|
import { chakra, useChakraContext, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
11
11
|
import { forwardRef } from "react";
|
|
@@ -65,19 +65,22 @@ var BitkitTextInput = forwardRef((props, ref) => {
|
|
|
65
65
|
flex: "1",
|
|
66
66
|
...stateAttrs,
|
|
67
67
|
children: [
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
children: startElement
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
68
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
69
|
+
as: "label",
|
|
70
|
+
display: "contents",
|
|
71
|
+
children: [startElement != null && /* @__PURE__ */ jsx(Box, {
|
|
72
|
+
css: styles.element,
|
|
73
|
+
...stateAttrs,
|
|
74
|
+
children: startElement
|
|
75
|
+
}), /* @__PURE__ */ jsx(Input, {
|
|
76
|
+
css: [styles.input, inputCss],
|
|
77
|
+
maxLength,
|
|
78
|
+
onChange: handleChange,
|
|
79
|
+
placeholder,
|
|
80
|
+
value: resolvedValue,
|
|
81
|
+
...restInputProps,
|
|
82
|
+
unstyled: true
|
|
83
|
+
})]
|
|
81
84
|
}),
|
|
82
85
|
statusIcon != null && /* @__PURE__ */ jsx(Box, {
|
|
83
86
|
css: styles.element,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Group } from '@chakra-ui/react/group';\nimport { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputAddon, type InputAddonProps } from '@chakra-ui/react/input-addon';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'onChange' | 'state' | 'value'> {\n /**\n * Show a live character counter (`length/maxLength`) next to the label. Requires `maxLength` and a\n * known `value`.\n */\n counter?: boolean;\n /**\n * Content attached to the trailing edge, outside the input border. A bare string or number\n * renders in the standard bordered addon box (a unit label like `USD`); any other node renders\n * as itself — see `startAddon`.\n */\n endAddon?: ReactNode;\n /** Props forwarded to the trailing `InputAddon` box. Inert unless the addon is a string. */\n endAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the trailing edge (e.g. an icon or reveal button). */\n endElement?: ReactNode;\n /**\n * Escape hatch for the underlying Chakra `Input` — extra native attributes or a spread\n * `{...register()}`. On conflict, values here win over the top-level `value`/`onChange`.\n */\n inputProps?: InputProps;\n /** Maximum number of characters accepted; also feeds the optional `counter`. */\n maxLength?: HTMLInputElement['maxLength'];\n /**\n * Native change event — the same handler you could put on `inputProps`, promoted to the top level.\n * Reach for `onValueChange` when you only need the value. If both this and `inputProps.onChange` are\n * set, `inputProps.onChange` wins (it's the same event, so they shouldn't both be set).\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Convenience change handler that receives the value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder text shown while the field is empty. */\n placeholder?: string;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Content attached to the leading edge, outside the input border. Text has to arrive as a bare\n * string (or number) to get the standard bordered addon box (a unit label like `$`) — wrapped in\n * a `<Text>` or a fragment it counts as a component, which loses the box and leaves\n * `startAddonProps` inert. Any other node keeps its own styling and is welded to the field\n * instead: it shares the field's border and the corners it touches are squared automatically, so\n * a `BitkitButton` / `BitkitIconButton` needs only its own `variant` and a `size` matching the\n * field's — the field's `size` does not reach it.\n */\n startAddon?: ReactNode;\n /** Props forwarded to the leading `InputAddon` box. Inert unless the addon is a string. */\n startAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the leading edge (e.g. an icon). */\n startElement?: ReactNode;\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n * `readOnly` gate interaction.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /**\n * Controlled value. Pair with `onValueChange` or `onChange`. Can also be supplied via `inputProps`,\n * which wins on conflict.\n */\n value?: string;\n}\n\n/**\n * A single-line text field wrapping the native `<input>`, with a label and helper/error/warning\n * text. Reflect the value with `value` + `onValueChange` (or the native `onChange`); `inputProps` is\n * the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border\n * (as a bordered box for text, welded to the field for a component), `startElement`/`endElement`\n * inline inside it, and `counter` pairs with `maxLength`.\n */\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n const {\n counter,\n endAddon,\n endAddonProps,\n endElement,\n inputProps,\n maxLength,\n onChange,\n onValueChange,\n placeholder,\n size = 'lg',\n startAddon,\n startAddonProps,\n startElement,\n state,\n value,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const iconSize = size === 'md' ? '16' : '24';\n const addonSize = size === 'md' ? 'md' : 'lg';\n\n const hasWarning = state === 'warning' || !!rest.warningText;\n const isInvalid = state === 'error' || !!rest.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n // `value` / `onChange` may come in at the top level or via `inputProps` — the object wins on\n // conflict (natural for a spread `{...register()}`). `onValueChange` always fires with the value.\n const { css: inputCss, onChange: inputOnChange, value: inputValue, ...restInputProps } = inputProps ?? {};\n const resolvedValue = inputValue ?? value;\n const nativeOnChange = inputOnChange ?? onChange;\n const handleChange: ChangeEventHandler<HTMLInputElement> | undefined =\n onValueChange || nativeOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n nativeOnChange?.(event);\n }\n : undefined;\n\n const counterText =\n counter && maxLength && resolvedValue !== undefined ? `${resolvedValue.toString().length}/${maxLength}` : undefined;\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const renderAddon = (addon: ReactNode, position: 'end' | 'start', addonProps?: InputAddonProps) =>\n typeof addon === 'string' || typeof addon === 'number' ? (\n <InputAddon position={position} size={addonSize} {...stateAttrs} {...addonProps}>\n {addon}\n </InputAddon>\n ) : (\n addon\n );\n\n return (\n <BitkitField counterText={counterText} ref={ref} state={state} {...rest}>\n <Group attached width=\"100%\">\n {startAddon != null && renderAddon(startAddon, 'start', startAddonProps)}\n <Box css={styles.field} data-has-end-element={endElement != null ? '' : undefined} flex=\"1\" {...stateAttrs}>\n {startElement != null && (\n
|
|
1
|
+
{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Group } from '@chakra-ui/react/group';\nimport { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputAddon, type InputAddonProps } from '@chakra-ui/react/input-addon';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'onChange' | 'state' | 'value'> {\n /**\n * Show a live character counter (`length/maxLength`) next to the label. Requires `maxLength` and a\n * known `value`.\n */\n counter?: boolean;\n /**\n * Content attached to the trailing edge, outside the input border. A bare string or number\n * renders in the standard bordered addon box (a unit label like `USD`); any other node renders\n * as itself — see `startAddon`.\n */\n endAddon?: ReactNode;\n /** Props forwarded to the trailing `InputAddon` box. Inert unless the addon is a string. */\n endAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the trailing edge (e.g. an icon or reveal button). */\n endElement?: ReactNode;\n /**\n * Escape hatch for the underlying Chakra `Input` — extra native attributes or a spread\n * `{...register()}`. On conflict, values here win over the top-level `value`/`onChange`.\n */\n inputProps?: InputProps;\n /** Maximum number of characters accepted; also feeds the optional `counter`. */\n maxLength?: HTMLInputElement['maxLength'];\n /**\n * Native change event — the same handler you could put on `inputProps`, promoted to the top level.\n * Reach for `onValueChange` when you only need the value. If both this and `inputProps.onChange` are\n * set, `inputProps.onChange` wins (it's the same event, so they shouldn't both be set).\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Convenience change handler that receives the value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder text shown while the field is empty. */\n placeholder?: string;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Content attached to the leading edge, outside the input border. Text has to arrive as a bare\n * string (or number) to get the standard bordered addon box (a unit label like `$`) — wrapped in\n * a `<Text>` or a fragment it counts as a component, which loses the box and leaves\n * `startAddonProps` inert. Any other node keeps its own styling and is welded to the field\n * instead: it shares the field's border and the corners it touches are squared automatically, so\n * a `BitkitButton` / `BitkitIconButton` needs only its own `variant` and a `size` matching the\n * field's — the field's `size` does not reach it.\n */\n startAddon?: ReactNode;\n /** Props forwarded to the leading `InputAddon` box. Inert unless the addon is a string. */\n startAddonProps?: InputAddonProps;\n /** Inline content rendered inside the input, at the leading edge (e.g. an icon). */\n startElement?: ReactNode;\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n * `readOnly` gate interaction.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /**\n * Controlled value. Pair with `onValueChange` or `onChange`. Can also be supplied via `inputProps`,\n * which wins on conflict.\n */\n value?: string;\n}\n\n/**\n * A single-line text field wrapping the native `<input>`, with a label and helper/error/warning\n * text. Reflect the value with `value` + `onValueChange` (or the native `onChange`); `inputProps` is\n * the escape hatch for any other native attribute. `startAddon`/`endAddon` sit outside the border\n * (as a bordered box for text, welded to the field for a component), `startElement`/`endElement`\n * inline inside it, and `counter` pairs with `maxLength`.\n */\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n const {\n counter,\n endAddon,\n endAddonProps,\n endElement,\n inputProps,\n maxLength,\n onChange,\n onValueChange,\n placeholder,\n size = 'lg',\n startAddon,\n startAddonProps,\n startElement,\n state,\n value,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const iconSize = size === 'md' ? '16' : '24';\n const addonSize = size === 'md' ? 'md' : 'lg';\n\n const hasWarning = state === 'warning' || !!rest.warningText;\n const isInvalid = state === 'error' || !!rest.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n // `value` / `onChange` may come in at the top level or via `inputProps` — the object wins on\n // conflict (natural for a spread `{...register()}`). `onValueChange` always fires with the value.\n const { css: inputCss, onChange: inputOnChange, value: inputValue, ...restInputProps } = inputProps ?? {};\n const resolvedValue = inputValue ?? value;\n const nativeOnChange = inputOnChange ?? onChange;\n const handleChange: ChangeEventHandler<HTMLInputElement> | undefined =\n onValueChange || nativeOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n nativeOnChange?.(event);\n }\n : undefined;\n\n const counterText =\n counter && maxLength && resolvedValue !== undefined ? `${resolvedValue.toString().length}/${maxLength}` : undefined;\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const renderAddon = (addon: ReactNode, position: 'end' | 'start', addonProps?: InputAddonProps) =>\n typeof addon === 'string' || typeof addon === 'number' ? (\n <InputAddon position={position} size={addonSize} {...stateAttrs} {...addonProps}>\n {addon}\n </InputAddon>\n ) : (\n addon\n );\n\n return (\n <BitkitField counterText={counterText} ref={ref} state={state} {...rest}>\n <Group attached width=\"100%\">\n {startAddon != null && renderAddon(startAddon, 'start', startAddonProps)}\n <Box css={styles.field} data-has-end-element={endElement != null ? '' : undefined} flex=\"1\" {...stateAttrs}>\n {/* A label around the leading element and the input, so a click on e.g. an icon focuses the input.\n The end element stays outside, as it may be a control. `contents` keeps the field's layout. */}\n <Box as=\"label\" display=\"contents\">\n {startElement != null && (\n <Box css={styles.element} {...stateAttrs}>\n {startElement}\n </Box>\n )}\n <Input\n css={[styles.input, inputCss]}\n maxLength={maxLength}\n onChange={handleChange}\n placeholder={placeholder}\n value={resolvedValue}\n {...restInputProps}\n unstyled\n />\n </Box>\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {endElement != null && (\n <Box css={styles.element} {...stateAttrs}>\n {endElement}\n </Box>\n )}\n </Box>\n {endAddon != null && renderAddon(endAddon, 'end', endAddonProps)}\n </Group>\n </BitkitField>\n );\n});\n\nBitkitTextInput.displayName = 'BitkitTextInput';\n\nexport default BitkitTextInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8EA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SACA,UACA,eACA,YACA,YACA,WACA,UACA,eACA,aACA,OAAO,MACP,YACA,iBACA,cACA,OACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,YAAY,SAAS,OAAO,OAAO;CAEzC,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,KAAK;CACjD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,KAAK;CAE9C,IAAI,aAAwB;CAC5B,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM;CAAW,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAKnD,MAAM,EAAE,KAAK,UAAU,UAAU,eAAe,OAAO,YAAY,GAAG,mBAAmB,cAAc,CAAC;CACxG,MAAM,gBAAgB,cAAc;CACpC,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,eACJ,iBAAiB,kBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,iBAAiB,KAAK;CACxB,IACA,KAAA;CAEN,MAAM,cACJ,WAAW,aAAa,kBAAkB,KAAA,IAAY,GAAG,cAAc,SAAS,CAAC,CAAC,OAAO,GAAG,cAAc,KAAA;CAE5G,MAAM,aAAa;EACjB,iBAAiB,UAAU,aAAa,KAAK,KAAA;EAC7C,gBAAgB,YAAY,KAAK,KAAA;EACjC,iBAAiB,UAAU,aAAa,KAAK,KAAA;CAC/C;CAEA,MAAM,eAAe,OAAkB,UAA2B,eAChE,OAAO,UAAU,YAAY,OAAO,UAAU,WAC5C,oBAAC,YAAD;EAAsB;EAAU,MAAM;EAAW,GAAI;EAAY,GAAI;EAClE,UAAA;CACS,CAAA,IAEZ;CAGJ,OACE,oBAAC,aAAD;EAA0B;EAAkB;EAAY;EAAO,GAAI;EACjE,UAAA,qBAAC,OAAD;GAAO,UAAA;GAAS,OAAM;GAAtB,UAAA;IACG,cAAc,QAAQ,YAAY,YAAY,SAAS,eAAe;IACvE,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAO,wBAAsB,cAAc,OAAO,KAAK,KAAA;KAAW,MAAK;KAAI,GAAI;KAAhG,UAAA;MAGE,qBAAC,KAAD;OAAK,IAAG;OAAQ,SAAQ;OAAxB,UAAA,CACG,gBAAgB,QACf,oBAAC,KAAD;QAAK,KAAK,OAAO;QAAS,GAAI;QAC3B,UAAA;OACE,CAAA,GAEP,oBAAC,OAAD;QACE,KAAK,CAAC,OAAO,OAAO,QAAQ;QACjB;QACX,UAAU;QACG;QACb,OAAO;QACP,GAAI;QACJ,UAAA;OACD,CAAA,CACE;;MACJ,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;OAC3B,UAAA;MACE,CAAA;MAEN,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;OAC3B,UAAA;MACE,CAAA;KAEJ;;IACJ,YAAY,QAAQ,YAAY,UAAU,OAAO,aAAa;GAC1D;;CACI,CAAA;AAEjB,CAAC;AAED,gBAAgB,cAAc"}
|
|
@@ -28,6 +28,12 @@ export { default as BitkitEmptyState, type BitkitEmptyStateProps } from './Bitki
|
|
|
28
28
|
export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from './BitkitExpandableCard/BitkitExpandableCard';
|
|
29
29
|
export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
|
|
30
30
|
export { default as BitkitFileInput, type BitkitFileInputProps } from './BitkitFileInput/BitkitFileInput';
|
|
31
|
+
export { default as BitkitFilter, type BitkitFilterProps } from './BitkitFilter/BitkitFilter';
|
|
32
|
+
export { type BitkitFilterAddProps } from './BitkitFilter/BitkitFilterAdd';
|
|
33
|
+
export { type BitkitFilterDateRangeProps, type BitkitFilterDateRangeValue } from './BitkitFilter/BitkitFilterDateRange';
|
|
34
|
+
export { type BitkitFilterSearchProps } from './BitkitFilter/BitkitFilterSearch';
|
|
35
|
+
export { type BitkitFilterSelectItem, type BitkitFilterSelectProps } from './BitkitFilter/BitkitFilterSelect';
|
|
36
|
+
export { type BitkitFilterSwitchItem, type BitkitFilterSwitchProps } from './BitkitFilter/BitkitFilterSwitch';
|
|
31
37
|
export { default as BitkitGroupHeading, type BitkitGroupHeadingProps } from './BitkitGroupHeading/BitkitGroupHeading';
|
|
32
38
|
export { default as BitkitHeading, type BitkitHeadingProps } from './BitkitHeading/BitkitHeading';
|
|
33
39
|
export { default as BitkitIconButton, type BitkitIconButtonProps } from './BitkitIconButton/BitkitIconButton';
|
|
@@ -94,6 +100,5 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
|
|
|
94
100
|
export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
|
|
95
101
|
export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
|
|
96
102
|
export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
|
|
97
|
-
export { default as BitkitUIHeader, type BitkitUIHeaderAccountProps, type BitkitUIHeaderBadge, type BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, uiHeaderHeightPx, } from './BitkitUIHeader/BitkitUIHeader';
|
|
98
103
|
export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
|
|
99
104
|
export { useUISideNav } from './BitkitUISideNav/UISideNavContext';
|
package/dist/main.js
CHANGED
|
@@ -306,8 +306,8 @@ import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
|
|
|
306
306
|
import BitkitControlButton from "./components/BitkitControlButton/BitkitControlButton.js";
|
|
307
307
|
import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
|
|
308
308
|
import BitkitButton from "./components/BitkitButton/BitkitButton.js";
|
|
309
|
-
import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
|
|
310
309
|
import BitkitTooltip from "./components/BitkitTooltip/BitkitTooltip.js";
|
|
310
|
+
import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
|
|
311
311
|
import BitkitSelectMenuAction from "./components/BitkitSelectMenu/BitkitSelectMenuAction.js";
|
|
312
312
|
import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
|
|
313
313
|
import BitkitCalendar from "./components/BitkitCalendar/BitkitCalendar.js";
|
|
@@ -332,14 +332,18 @@ import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
|
|
|
332
332
|
import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
|
|
333
333
|
import BitkitExpandableCard from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
|
|
334
334
|
import BitkitFileInput from "./components/BitkitFileInput/BitkitFileInput.js";
|
|
335
|
+
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
336
|
+
import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
|
|
337
|
+
import BitkitList_default from "./components/BitkitList/BitkitList.js";
|
|
338
|
+
import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
|
|
339
|
+
import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
|
|
340
|
+
import BitkitFilter_default from "./components/BitkitFilter/BitkitFilter.js";
|
|
335
341
|
import BitkitHeading from "./components/BitkitHeading/BitkitHeading.js";
|
|
336
342
|
import BitkitIconButton from "./components/BitkitIconButton/BitkitIconButton.js";
|
|
337
|
-
import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
|
|
338
343
|
import BitkitLabeledData from "./components/BitkitLabeledData/BitkitLabeledData.js";
|
|
339
344
|
import BitkitLightbox from "./components/BitkitLightbox/BitkitLightbox.js";
|
|
340
345
|
import BitkitLink from "./components/BitkitLink/BitkitLink.js";
|
|
341
346
|
import BitkitLinkButton from "./components/BitkitLinkButton/BitkitLinkButton.js";
|
|
342
|
-
import BitkitList_default from "./components/BitkitList/BitkitList.js";
|
|
343
347
|
import BitkitMarkdown from "./components/BitkitMarkdown/BitkitMarkdown.js";
|
|
344
348
|
import BitkitMarkdownCard from "./components/BitkitMarkdownCard/BitkitMarkdownCard.js";
|
|
345
349
|
import BitkitMultiselectMenu from "./components/BitkitMultiselectMenu/BitkitMultiselectMenu.js";
|
|
@@ -352,7 +356,6 @@ import BitkitOverflowContent from "./components/BitkitOverflowContent/BitkitOver
|
|
|
352
356
|
import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOverflowTooltip.js";
|
|
353
357
|
import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
|
|
354
358
|
import BitkitPageHeader from "./components/BitkitPageHeader/BitkitPageHeader.js";
|
|
355
|
-
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
356
359
|
import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
|
|
357
360
|
import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
|
|
358
361
|
import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
|
|
@@ -362,8 +365,6 @@ import BitkitPromoBanner from "./components/BitkitPromoBanner/BitkitPromoBanner.
|
|
|
362
365
|
import BitkitRadio from "./components/BitkitRadio/BitkitRadio.js";
|
|
363
366
|
import BitkitRadioGroup from "./components/BitkitRadioGroup/BitkitRadioGroup.js";
|
|
364
367
|
import BitkitRibbon from "./components/BitkitRibbon/BitkitRibbon.js";
|
|
365
|
-
import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
|
|
366
|
-
import BitkitSearchInput from "./components/BitkitSearchInput/BitkitSearchInput.js";
|
|
367
368
|
import BitkitSectionHeading from "./components/BitkitSectionHeading/BitkitSectionHeading.js";
|
|
368
369
|
import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/BitkitSegmentedControl.js";
|
|
369
370
|
import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
|
|
@@ -384,11 +385,9 @@ import createBitkitToast, { dismissBitkitToast } from "./components/BitkitToast/
|
|
|
384
385
|
import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
|
|
385
386
|
import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
|
|
386
387
|
import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
|
|
387
|
-
import { uiHeaderHeight, uiHeaderHeightPx } from "./theme/slot-recipes/UIHeader.recipe.js";
|
|
388
|
-
import BitkitUIHeader_default from "./components/BitkitUIHeader/BitkitUIHeader.js";
|
|
389
388
|
import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
|
|
390
389
|
import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
|
|
391
390
|
import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
|
|
392
391
|
import bitkitTheme from "./theme/index.js";
|
|
393
392
|
import Provider from "./providers/BitkitProvider.js";
|
|
394
|
-
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,
|
|
393
|
+
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 };
|