@bitrise/bitkit-v2 0.3.205 → 0.3.207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -0
- package/dist/atoms/ImageCropper/ImageCropper.d.ts +10 -10
- package/dist/components/BitkitAccordion/BitkitAccordion.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarFooter.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/components/BitkitCollapsible/BitkitCollapsible.js.map +1 -1
- package/dist/components/BitkitCombobox/BitkitCombobox.d.ts +11 -1
- package/dist/components/BitkitCombobox/BitkitCombobox.js +4 -7
- package/dist/components/BitkitCombobox/BitkitCombobox.js.map +1 -1
- package/dist/components/BitkitDataWidget/BitkitDataWidget.d.ts +10 -0
- package/dist/components/BitkitDataWidget/BitkitDataWidget.js +45 -0
- package/dist/components/BitkitDataWidget/BitkitDataWidget.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialog.d.ts +19 -6
- package/dist/components/BitkitDialog/BitkitDialog.js +22 -5
- package/dist/components/BitkitDialog/BitkitDialog.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialogBody.d.ts +1 -1
- package/dist/components/BitkitDialog/BitkitDialogBody.js +15 -4
- package/dist/components/BitkitDialog/BitkitDialogBody.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialogContent.d.ts +4 -2
- package/dist/components/BitkitDialog/BitkitDialogContent.js +29 -18
- package/dist/components/BitkitDialog/BitkitDialogContent.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialogHeader.d.ts +9 -0
- package/dist/components/BitkitDialog/BitkitDialogHeader.js +8 -0
- package/dist/components/BitkitDialog/BitkitDialogHeader.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogStep.d.ts +11 -0
- package/dist/components/BitkitDialog/BitkitDialogStep.js +26 -0
- package/dist/components/BitkitDialog/BitkitDialogStep.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.d.ts +5 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.js +7 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.js.map +1 -0
- package/dist/components/BitkitDraggableCard/BitkitDraggableCard.js.map +1 -1
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitInlineLoading/BitkitInlineLoading.js.map +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js +3 -3
- package/dist/components/BitkitLabel/BitkitLabel.js.map +1 -1
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js +24 -17
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js.map +1 -1
- package/dist/components/BitkitList/BitkitList.d.ts +21 -0
- package/dist/components/BitkitList/BitkitList.js +107 -0
- package/dist/components/BitkitList/BitkitList.js.map +1 -0
- package/dist/components/BitkitList/index.d.ts +2 -0
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js +11 -17
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
- package/dist/components/BitkitMarkdownCard/BitkitMarkdownCard.js.map +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts +13 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js +3 -6
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts +5 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js +5 -3
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -1
- package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js +2 -2
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js.map +1 -1
- package/dist/components/BitkitPageFooter/BitkitPageFooter.js.map +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js.map +1 -1
- package/dist/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js.map +1 -1
- package/dist/components/BitkitRibbon/BitkitRibbon.js.map +1 -1
- package/dist/components/BitkitSearchInput/BitkitSearchInput.js +2 -1
- package/dist/components/BitkitSearchInput/BitkitSearchInput.js.map +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.d.ts +12 -1
- package/dist/components/BitkitSelect/BitkitSelect.js +3 -6
- package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts +14 -11
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
- package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts +1 -1
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js +13 -13
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.js +3 -3
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.d.ts +3 -0
- package/dist/components/BitkitSwitch/BitkitSwitch.js +105 -0
- package/dist/components/BitkitSwitch/BitkitSwitch.js.map +1 -0
- package/dist/components/BitkitSwitch/BitkitSwitch.types.d.ts +21 -0
- package/dist/components/{BitkitToggle/BitkitToggle.utils.d.ts → BitkitSwitch/BitkitSwitch.utils.d.ts} +1 -1
- package/dist/components/{BitkitToggle/BitkitToggle.utils.js → BitkitSwitch/BitkitSwitch.utils.js} +2 -2
- package/dist/components/{BitkitToggle/BitkitToggle.utils.js.map → BitkitSwitch/BitkitSwitch.utils.js.map} +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.d.ts +3 -0
- package/dist/components/{BitkitToggle/components/BitkitToggleHelperText.js → BitkitSwitch/components/BitkitSwitchHelperText.js} +5 -5
- package/dist/components/BitkitSwitch/components/BitkitSwitchHelperText.js.map +1 -0
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.d.ts +3 -0
- package/dist/components/{BitkitToggle/components/BitkitToggleLabel.js → BitkitSwitch/components/BitkitSwitchLabel.js} +4 -4
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js.map +1 -0
- package/dist/components/BitkitSwitch/components/BitkitSwitchReadOnly.d.ts +4 -0
- package/dist/components/{BitkitToggle/components/BitkitToggleReadOnly.js → BitkitSwitch/components/BitkitSwitchReadOnly.js} +4 -4
- package/dist/components/{BitkitToggle/components/BitkitToggleReadOnly.js.map → BitkitSwitch/components/BitkitSwitchReadOnly.js.map} +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchValueText.d.ts +3 -0
- package/dist/components/{BitkitToggle/components/BitkitToggleValueText.js → BitkitSwitch/components/BitkitSwitchValueText.js} +7 -7
- package/dist/components/BitkitSwitch/components/BitkitSwitchValueText.js.map +1 -0
- package/dist/components/BitkitSwitch/index.d.ts +2 -0
- package/dist/components/BitkitTag/BitkitTag.js +1 -1
- package/dist/components/BitkitTag/BitkitTag.js.map +1 -1
- package/dist/components/BitkitTagsInput/BitkitTagsInput.d.ts +1 -0
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js +5 -2
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map +1 -1
- package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -1
- package/dist/components/index.d.ts +5 -4
- package/dist/main.js +8 -7
- package/dist/theme/common/ComboboxAndSelect.common.js +2 -1
- package/dist/theme/common/ComboboxAndSelect.common.js.map +1 -1
- package/dist/theme/common/InputAndTextarea.common.d.ts +7 -0
- package/dist/theme/common/InputAndTextarea.common.js +8 -1
- package/dist/theme/common/InputAndTextarea.common.js.map +1 -1
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/recipes/Button.recipe.js.map +1 -1
- package/dist/theme/recipes/Input.recipe.js +6 -2
- package/dist/theme/recipes/Input.recipe.js.map +1 -1
- package/dist/theme/recipes/SelectableTag.recipe.js +1 -1
- package/dist/theme/recipes/SelectableTag.recipe.js.map +1 -1
- package/dist/theme/recipes/ToggleButton.recipe.js +20 -2
- package/dist/theme/recipes/ToggleButton.recipe.js.map +1 -1
- package/dist/theme/semantic-tokens/semanticColors.js +14 -9
- package/dist/theme/semantic-tokens/semanticColors.js.map +1 -1
- package/dist/theme/slot-recipes/Combobox.recipe.js +14 -4
- package/dist/theme/slot-recipes/Combobox.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/DataWidget.recipe.d.ts +2 -0
- package/dist/theme/slot-recipes/DataWidget.recipe.js +65 -0
- package/dist/theme/slot-recipes/DataWidget.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/Dialog.recipe.d.ts +13 -4
- package/dist/theme/slot-recipes/Dialog.recipe.js +40 -7
- package/dist/theme/slot-recipes/Dialog.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +1 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/MarkdownCard.recipe.d.ts +3 -3
- package/dist/theme/slot-recipes/MarkdownCard.recipe.js +4 -3
- package/dist/theme/slot-recipes/MarkdownCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js +14 -4
- package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Select.recipe.js +28 -11
- package/dist/theme/slot-recipes/Select.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/StepCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Switch.recipe.d.ts +3 -3
- package/dist/theme/slot-recipes/Switch.recipe.js +12 -12
- package/dist/theme/slot-recipes/Switch.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/TagsInput.recipe.d.ts +9 -4
- package/dist/theme/slot-recipes/TagsInput.recipe.js +18 -5
- package/dist/theme/slot-recipes/TagsInput.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/TreeView.recipe.d.ts +1 -0
- package/dist/theme/slot-recipes/TreeView.recipe.js +4 -1
- package/dist/theme/slot-recipes/TreeView.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.js +2 -0
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/text-styles.js.map +1 -1
- package/package.json +10 -7
- package/scripts/postinstall.cjs +38 -0
- package/dist/components/BitkitExplainerList/BitkitExplainerList.d.ts +0 -14
- package/dist/components/BitkitExplainerList/BitkitExplainerList.js +0 -54
- package/dist/components/BitkitExplainerList/BitkitExplainerList.js.map +0 -1
- package/dist/components/BitkitOrderedList/BitkitOrderedList.d.ts +0 -13
- package/dist/components/BitkitOrderedList/BitkitOrderedList.js +0 -30
- package/dist/components/BitkitOrderedList/BitkitOrderedList.js.map +0 -1
- package/dist/components/BitkitToggle/BitkitToggle.d.ts +0 -3
- package/dist/components/BitkitToggle/BitkitToggle.js +0 -123
- package/dist/components/BitkitToggle/BitkitToggle.js.map +0 -1
- package/dist/components/BitkitToggle/BitkitToggle.types.d.ts +0 -22
- package/dist/components/BitkitToggle/components/BitkitToggleHelperText.d.ts +0 -3
- package/dist/components/BitkitToggle/components/BitkitToggleHelperText.js.map +0 -1
- package/dist/components/BitkitToggle/components/BitkitToggleLabel.d.ts +0 -3
- package/dist/components/BitkitToggle/components/BitkitToggleLabel.js.map +0 -1
- package/dist/components/BitkitToggle/components/BitkitToggleReadOnly.d.ts +0 -4
- package/dist/components/BitkitToggle/components/BitkitToggleValueText.d.ts +0 -3
- package/dist/components/BitkitToggle/components/BitkitToggleValueText.js.map +0 -1
- package/dist/components/BitkitToggle/index.d.ts +0 -2
- package/dist/components/BitkitUnorderedList/BitkitUnorderedList.d.ts +0 -16
- package/dist/components/BitkitUnorderedList/BitkitUnorderedList.js +0 -52
- package/dist/components/BitkitUnorderedList/BitkitUnorderedList.js.map +0 -1
- package/dist/theme/slot-recipes/Combobox.recipe.d.ts +0 -11
|
@@ -8,22 +8,22 @@ import { Text } from "@chakra-ui/react/text";
|
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { Spinner } from "@chakra-ui/react/spinner";
|
|
10
10
|
//#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
|
|
11
|
-
var SelectMenuShell = ({ NS, collection, contentProps, contentRef, createItemLabel = "Create item", emptyHelperText, emptyLabel = "No matching options",
|
|
11
|
+
var SelectMenuShell = ({ NS, collection, contentProps, contentRef, createItemLabel = "Create item", emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onCreateItem, onSearchChange, renderItem, searchValue, size, styles }) => {
|
|
12
12
|
const isEmpty = collection.size === 0;
|
|
13
13
|
return /* @__PURE__ */ jsxs(NS.Content, {
|
|
14
14
|
css: styles.content,
|
|
15
15
|
ref: contentRef,
|
|
16
16
|
...contentProps,
|
|
17
17
|
children: [
|
|
18
|
-
!
|
|
18
|
+
!onSearchChange && onCreateItem && /* @__PURE__ */ jsx("span", {
|
|
19
19
|
"data-autofocus": "",
|
|
20
20
|
tabIndex: -1,
|
|
21
21
|
"aria-hidden": "true"
|
|
22
22
|
}),
|
|
23
|
-
|
|
23
|
+
onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
|
|
24
24
|
iconSize,
|
|
25
25
|
styles,
|
|
26
|
-
value: searchValue,
|
|
26
|
+
value: searchValue ?? "",
|
|
27
27
|
onSearchChange
|
|
28
28
|
}),
|
|
29
29
|
/* @__PURE__ */ jsxs(Box, {
|
|
@@ -61,15 +61,15 @@ var SelectMenuShell = ({ NS, collection, contentProps, contentRef, createItemLab
|
|
|
61
61
|
}), group.map(renderItem)] }, type))
|
|
62
62
|
]
|
|
63
63
|
}),
|
|
64
|
-
onCreateItem && /* @__PURE__ */
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
})
|
|
64
|
+
onCreateItem && /* @__PURE__ */ jsx(Box, {
|
|
65
|
+
css: styles.createItemContainer,
|
|
66
|
+
children: /* @__PURE__ */ jsxs(chakra.button, {
|
|
67
|
+
type: "button",
|
|
68
|
+
css: styles.createItem,
|
|
69
|
+
onClick: onCreateItem,
|
|
70
|
+
onKeyDown: stopMenuSelectionKeys,
|
|
71
|
+
children: [/* @__PURE__ */ jsx(IconPlus, { size: iconSize }), createItemLabel]
|
|
72
|
+
})
|
|
73
73
|
})
|
|
74
74
|
]
|
|
75
75
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier, IconPlus } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuCreateItemProps,\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and create button —\n * the caller only provides per-item rendering via renderItem.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: '16' | '24';\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n size?: 'md' | 'lg';\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n collection,\n contentProps,\n contentRef,\n createItemLabel = 'Create item',\n emptyHelperText,\n emptyLabel = 'No matching options',\n
|
|
1
|
+
{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier, IconPlus } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuCreateItemProps,\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and create button —\n * the caller only provides per-item rendering via renderItem.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: '16' | '24';\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n size?: 'md' | 'lg';\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n collection,\n contentProps,\n contentRef,\n createItemLabel = 'Create item',\n emptyHelperText,\n emptyLabel = 'No matching options',\n iconSize,\n isLoading = false,\n onCreateItem,\n onSearchChange,\n renderItem,\n searchValue,\n size,\n styles,\n}: SelectMenuShellProps<T>) => {\n const isEmpty = collection.size === 0;\n\n return (\n <NS.Content css={styles.content} ref={contentRef} {...contentProps}>\n {/*\n Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n tabbable descendant as the menu's initial focus target — which would be the create\n button, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n aria-activedescendant drives the highlight like a normal Select would.\n */}\n {!onSearchChange && onCreateItem && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n {onSearchChange && (\n <SelectMenuSearch\n iconSize={iconSize}\n styles={styles}\n value={searchValue ?? ''}\n onSearchChange={onSearchChange}\n />\n )}\n <Box css={styles.itemList}>\n {isLoading && (\n <Box display=\"flex\" alignItems=\"center\" gap=\"12\" justifyContent=\"left\" css={styles.item}>\n <Spinner variant=\"purple\" />\n <Text color=\"text/secondary\" textStyle={size === 'md' ? 'body/md/regular' : 'body/lg/regular'}>\n Loading...\n </Text>\n </Box>\n )}\n {!isLoading && isEmpty && (\n <Box css={styles.emptyState}>\n <Text css={styles.itemLabel}>{emptyLabel}</Text>\n {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n </Box>\n )}\n {!isLoading &&\n !isEmpty &&\n collection.group().map(([type, group]) => (\n <NS.ItemGroup key={type}>\n {type && (\n <NS.ItemGroupLabel asChild>\n <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n </NS.ItemGroupLabel>\n )}\n {group.map(renderItem)}\n </NS.ItemGroup>\n ))}\n </Box>\n {onCreateItem && (\n <Box css={styles.createItemContainer}>\n <chakra.button type=\"button\" css={styles.createItem} onClick={onCreateItem} onKeyDown={stopMenuSelectionKeys}>\n <IconPlus size={iconSize} />\n {createItemLabel}\n </chakra.button>\n </Box>\n )}\n </NS.Content>\n );\n};\n\n/**\n * Zag's Select.Content keyDown handler fires ITEM.CLICK and preventDefaults on Enter/Space\n * regardless of which descendant is focused. For the create row (a real <button> sibling of\n * the items list), that hijacks its native activation. Stopping propagation at the element\n * keeps its own onClick firing via the browser's native keyboard-activation path.\n */\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.stopPropagation();\n }\n};\n\ntype SelectMenuSearchProps = {\n iconSize: '16' | '24';\n onSearchChange: (searchText: string) => void;\n styles: Record<string, SystemStyleObject>;\n value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n <Box css={styles.searchInputGroup}>\n <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n <chakra.input\n aria-label=\"Search\"\n css={styles.searchInput}\n placeholder=\"Search...\"\n value={value}\n onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n onKeyDown={(event) => {\n // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n // regardless of which descendant is focused. That would eat the space before the\n // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n if (event.key === ' ') event.stopPropagation();\n }}\n />\n {value && (\n <chakra.button\n type=\"button\"\n css={styles.searchClear}\n aria-label=\"Clear search\"\n onClick={() => onSearchChange('')}\n >\n <IconCross size={iconSize} />\n </chakra.button>\n )}\n </Box>\n);\n"],"mappings":";;;;;;;;;;AAoCA,IAAa,mBAAgE,EAC3E,IACA,YACA,cACA,YACA,kBAAkB,eAClB,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,cACA,gBACA,YACA,aACA,MACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;AAEpC,QACE,qBAAC,GAAG,SAAJ;EAAY,KAAK,OAAO;EAAS,KAAK;EAAY,GAAI;YAAtD;GAQG,CAAC,kBAAkB,gBAAgB,oBAAC,QAAD;IAAM,kBAAe;IAAG,UAAU;IAAI,eAAY;IAAS,CAAA;GAC9F,kBACC,oBAAC,kBAAD;IACY;IACF;IACR,OAAO,eAAe;IACN;IAChB,CAAA;GAEJ,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB;KACG,aACC,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAS,KAAI;MAAK,gBAAe;MAAO,KAAK,OAAO;gBAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,UAAW,CAAA,EAC5B,oBAAC,MAAD;OAAM,OAAM;OAAiB,WAAW,SAAS,OAAO,oBAAoB;iBAAmB;OAExF,CAAA,CACH;;KAEP,CAAC,aAAa,WACb,qBAAC,KAAD;MAAK,KAAK,OAAO;gBAAjB,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAY;OAAkB,CAAA,EAC/C,mBAAmB,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAiB;OAAuB,CAAA,CAC1E;;KAEP,CAAC,aACA,CAAC,WACD,WAAW,OAAO,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;MAAmB,SAAA;gBACjB,oBAAC,oBAAD;OAAoB,OAAO;OAAM,cAAa;OAAK,eAAc;OAAO,CAAA;MACtD,CAAA,EAErB,MAAM,IAAI,WAAW,CACT,EAAA,EAPI,KAOJ,CACf;KACA;;GACL,gBACC,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,qBAAC,OAAO,QAAR;KAAe,MAAK;KAAS,KAAK,OAAO;KAAY,SAAS;KAAc,WAAW;eAAvF,CACE,oBAAC,UAAD,EAAU,MAAM,UAAY,CAAA,EAC3B,gBACa;;IACZ,CAAA;GAEG;;;;;;;;;AAUjB,IAAM,yBAAyB,UAA8B;AAC3D,KAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;AAW3B,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;WAAjB;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;GAAkB,CAAA;EACvD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,MAAM;GACtF,YAAY,UAAU;AAIpB,QAAI,MAAM,QAAQ,IAAK,OAAM,iBAAiB;;GAEhD,CAAA;EACD,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,GAAG;aAEjC,oBAAC,WAAD,EAAW,MAAM,UAAY,CAAA;GACf,CAAA;EAEd"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nconst useSettingsCardStyles = () => {\n const recipe = useSlotRecipe({ key: 'settingsCard' });\n return recipe();\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={styles.root} {...rest}>\n {children}\n </Card.Root>\n );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n actions?: ReactNode;\n children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n const { actions, children, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Body ref={ref} css={styles.content} {...rest}>\n <Box css={styles.contentBody}>{children}</Box>\n {actions && <Box css={styles.contentActions}>{actions}</Box>}\n </Card.Body>\n );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n description?: string;\n helperText?: ReactNode;\n icon: BitkitIconComponent;\n iconColor?: string;\n statusText: string;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n const { description, helperText, icon: Icon, iconColor, statusText, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Box ref={ref} role=\"status\" {...rest}>\n <Box css={styles.statusRow}>\n <Icon color={iconColor} css={styles.statusIcon} size=\"16\" />\n <Box>\n <Text as=\"strong\" css={styles.statusText}>\n {statusText}\n </Text>\n {description && (\n <Text as=\"p\" css={styles.statusDescription}>\n {description}\n </Text>\n )}\n </Box>\n </Box>\n {helperText && <Text css={styles.statusHelperText}>{helperText}</Text>}\n </Box>\n );\n});\n\nStatus.displayName = 'BitkitSettingsCard.Status';\n\n// --- Footer ---\n\nconst Footer = forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n const styles = useSettingsCardStyles();\n return <Card.Footer ref={ref} css={styles.footer} {...props} />;\n});\n\nFooter.displayName = 'BitkitSettingsCard.Footer';\n\n// --- Compound export ---\n\nexport default Object.assign(BitkitSettingsCard, {\n Content,\n Footer,\n Status,\n});\n"],"mappings":";;;;;;;AAQA,IAAM,8BAA8B;AAElC,QADe,cAAc,EAAE,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nconst useSettingsCardStyles = () => {\n const recipe = useSlotRecipe({ key: 'settingsCard' });\n return recipe();\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={styles.root} {...rest}>\n {children}\n </Card.Root>\n );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n actions?: ReactNode;\n children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n const { actions, children, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Body ref={ref} css={styles.content} {...rest}>\n <Box css={styles.contentBody}>{children}</Box>\n {actions && <Box css={styles.contentActions}>{actions}</Box>}\n </Card.Body>\n );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n description?: string;\n helperText?: ReactNode;\n icon: BitkitIconComponent;\n iconColor?: string;\n statusText: string;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n const { description, helperText, icon: Icon, iconColor, statusText, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Box ref={ref} role=\"status\" {...rest}>\n <Box css={styles.statusRow}>\n <Icon color={iconColor} css={styles.statusIcon} size=\"16\" />\n <Box>\n <Text as=\"strong\" css={styles.statusText}>\n {statusText}\n </Text>\n {description && (\n <Text as=\"p\" css={styles.statusDescription}>\n {description}\n </Text>\n )}\n </Box>\n </Box>\n {helperText && <Text css={styles.statusHelperText}>{helperText}</Text>}\n </Box>\n );\n});\n\nStatus.displayName = 'BitkitSettingsCard.Status';\n\n// --- Footer ---\n\nconst Footer = forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n const styles = useSettingsCardStyles();\n return <Card.Footer ref={ref} css={styles.footer} {...props} />;\n});\n\nFooter.displayName = 'BitkitSettingsCard.Footer';\n\n// --- Compound export ---\n\nexport default Object.assign(BitkitSettingsCard, {\n Content,\n Footer,\n Status,\n});\n"],"mappings":";;;;;;;AAQA,IAAM,8BAA8B;AAElC,QADe,cAAc,EAAE,KAAK,gBAAgB,CAC7C,EAAQ;;AASjB,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,uBAAuB;AAEtC,QACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,WAAW;EAAO,aAAY;EAAK,KAAK,OAAO;EAAM,GAAI;EAC3E;EACS,CAAA;EAEd;AAEF,mBAAmB,cAAc;AASjC,IAAM,UAAU,YAA4D,OAAO,QAAQ;CACzF,MAAM,EAAE,SAAS,UAAU,GAAG,SAAS;CACvC,MAAM,SAAS,uBAAuB;AAEtC,QACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAS,GAAI;YAA9C,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc;GAAe,CAAA,EAC7C,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;aAAiB;GAAc,CAAA,CAClD;;EAEd;AAEF,QAAQ,cAAc;AAYtB,IAAM,SAAS,YAA2D,OAAO,QAAQ;CACvF,MAAM,EAAE,aAAa,YAAY,MAAM,MAAM,WAAW,YAAY,GAAG,SAAS;CAChF,MAAM,SAAS,uBAAuB;AAEtC,QACE,qBAAC,KAAD;EAAU;EAAK,MAAK;EAAS,GAAI;YAAjC,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;aAAjB,CACE,oBAAC,MAAD;IAAM,OAAO;IAAW,KAAK,OAAO;IAAY,MAAK;IAAO,CAAA,EAC5D,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;IAAS,KAAK,OAAO;cAC3B;IACI,CAAA,EACN,eACC,oBAAC,MAAD;IAAM,IAAG;IAAI,KAAK,OAAO;cACtB;IACI,CAAA,CAEL,EAAA,CAAA,CACF;MACL,cAAc,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAmB;GAAkB,CAAA,CAClE;;EAER;AAEF,OAAO,cAAc;AAIrB,IAAM,SAAS,YAA6C,OAAO,QAAQ;CACzE,MAAM,SAAS,uBAAuB;AACtC,QAAO,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;EAAS,CAAA;EAC/D;AAEF,OAAO,cAAc;AAIrB,IAAA,6BAAe,OAAO,OAAO,oBAAoB;CAC/C;CACA;CACA;CACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSidebar.js","names":[],"sources":["../../../lib/components/BitkitSidebar/BitkitSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useRecipe, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\n// ----- BitkitSidebar (Root) -----\n\nexport interface BitkitSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebar = forwardRef<HTMLElement, BitkitSidebarProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} asChild css={styles.root} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitSidebar.displayName = 'BitkitSidebar';\n\n// ----- BitkitSidebar.Item -----\n\ninterface BitkitSidebarItemCommonProps {\n badge?: ReactNode;\n children: ReactNode;\n icon?: BitkitIconComponent;\n selected?: boolean;\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;\n\nconst BitkitSidebarItem = forwardRef<HTMLButtonElement & HTMLAnchorElement, BitkitSidebarItemProps>((props, ref) => {\n const { badge, children, icon: Icon, selected, suffixIcon: SuffixIcon, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe({ selected });\n\n const itemContent = (\n <>\n {Icon && <Icon css={styles.itemIcon} size=\"24\" />}\n <chakra.span css={styles.itemLabel}>{children}</chakra.span>\n {badge}\n {SuffixIcon && <SuffixIcon css={styles.suffixIcon} size=\"24\" />}\n <chakra.div css={styles.selectionMarker} />\n </>\n );\n\n if (rest.href !== undefined) {\n const { className, ...linkRest } = rest;\n return (\n <chakra.a\n ref={ref}\n {...linkRest}\n aria-current={selected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n >\n {itemContent}\n </chakra.a>\n );\n }\n\n const { className, href: _, ...buttonRest } = rest;\n return (\n <chakra.button\n ref={ref}\n {...buttonRest}\n aria-pressed={selected}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>\n );\n});\n\nBitkitSidebarItem.displayName = 'BitkitSidebarItem';\n\n// ----- BitkitSidebar.Title -----\n\nexport interface BitkitSidebarTitleProps extends BoxProps {\n backHref?: string;\n backLabel?: string;\n children: ReactNode;\n onBackClick?: () => void;\n}\n\nconst BitkitSidebarTitle = forwardRef<HTMLDivElement, BitkitSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n const controlButtonRecipe = useRecipe({ key: 'controlButton' });\n\n const hasBack = !!backHref || !!onBackClick;\n\n const BackElement = onBackClick ? chakra.button : chakra.a;\n\n return (\n <Box ref={ref} css={hasBack ? styles.titleWithBack : styles.title} {...rest}>\n {hasBack && (\n <BitkitLabelTooltip text={backLabel}>\n <BackElement\n aria-label={backLabel}\n css={controlButtonRecipe({ size: 'sm' })}\n {...(onBackClick ? { onClick: onBackClick, type: 'button' as const } : { href: backHref })}\n >\n <IconChevronLeft size=\"24\" />\n </BackElement>\n </BitkitLabelTooltip>\n )}\n {children}\n </Box>\n );\n});\n\nBitkitSidebarTitle.displayName = 'BitkitSidebarTitle';\n\n// ----- BitkitSidebar.Footer -----\n\nexport interface BitkitSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebarFooter = forwardRef<HTMLDivElement, BitkitSidebarFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.footer} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitSidebarFooter.displayName = 'BitkitSidebarFooter';\n\n// ----- BitkitSidebar.Project -----\n\nexport interface BitkitSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitSidebarProject = forwardRef<HTMLDivElement, BitkitSidebarProjectProps>((props, ref) => {\n const { label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.project} {...rest}>\n <chakra.span css={styles.projectLabel}>{label}</chakra.span>\n <chakra.span css={styles.projectValue}>{value}</chakra.span>\n </Box>\n );\n});\n\nBitkitSidebarProject.displayName = 'BitkitSidebarProject';\n\n// ----- BitkitSidebar.GroupHeading -----\n\nexport type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"12\" paddingBlockStart=\"24\" paddingInline=\"32\" {...props} />;\n});\n\nBitkitSidebarGroupHeading.displayName = 'BitkitSidebarGroupHeading';\n\n// ----- BitkitSidebar.Divider -----\n\nconst BitkitSidebarDivider = forwardRef<HTMLDivElement>((_, ref) => {\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={styles.divider} />;\n});\n\nBitkitSidebarDivider.displayName = 'BitkitSidebarDivider';\n\nexport default Object.assign(BitkitSidebar, {\n Divider: BitkitSidebarDivider,\n Footer: BitkitSidebarFooter,\n GroupHeading: BitkitSidebarGroupHeading,\n Item: BitkitSidebarItem,\n Project: BitkitSidebarProject,\n Title: BitkitSidebarTitle,\n});\n"],"mappings":";;;;;;;;;AAgBA,IAAM,gBAAgB,YAA6C,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,GAAG,SAAS;AAK9B,QACE,oBAAC,KAAD;EAAU;EAAK,SAAA;EAAQ,KAJV,cAAc,EAAE,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"BitkitSidebar.js","names":[],"sources":["../../../lib/components/BitkitSidebar/BitkitSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useRecipe, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\n// ----- BitkitSidebar (Root) -----\n\nexport interface BitkitSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebar = forwardRef<HTMLElement, BitkitSidebarProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} asChild css={styles.root} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitSidebar.displayName = 'BitkitSidebar';\n\n// ----- BitkitSidebar.Item -----\n\ninterface BitkitSidebarItemCommonProps {\n badge?: ReactNode;\n children: ReactNode;\n icon?: BitkitIconComponent;\n selected?: boolean;\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;\n\nconst BitkitSidebarItem = forwardRef<HTMLButtonElement & HTMLAnchorElement, BitkitSidebarItemProps>((props, ref) => {\n const { badge, children, icon: Icon, selected, suffixIcon: SuffixIcon, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe({ selected });\n\n const itemContent = (\n <>\n {Icon && <Icon css={styles.itemIcon} size=\"24\" />}\n <chakra.span css={styles.itemLabel}>{children}</chakra.span>\n {badge}\n {SuffixIcon && <SuffixIcon css={styles.suffixIcon} size=\"24\" />}\n <chakra.div css={styles.selectionMarker} />\n </>\n );\n\n if (rest.href !== undefined) {\n const { className, ...linkRest } = rest;\n return (\n <chakra.a\n ref={ref}\n {...linkRest}\n aria-current={selected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n >\n {itemContent}\n </chakra.a>\n );\n }\n\n const { className, href: _, ...buttonRest } = rest;\n return (\n <chakra.button\n ref={ref}\n {...buttonRest}\n aria-pressed={selected}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>\n );\n});\n\nBitkitSidebarItem.displayName = 'BitkitSidebarItem';\n\n// ----- BitkitSidebar.Title -----\n\nexport interface BitkitSidebarTitleProps extends BoxProps {\n backHref?: string;\n backLabel?: string;\n children: ReactNode;\n onBackClick?: () => void;\n}\n\nconst BitkitSidebarTitle = forwardRef<HTMLDivElement, BitkitSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n const controlButtonRecipe = useRecipe({ key: 'controlButton' });\n\n const hasBack = !!backHref || !!onBackClick;\n\n const BackElement = onBackClick ? chakra.button : chakra.a;\n\n return (\n <Box ref={ref} css={hasBack ? styles.titleWithBack : styles.title} {...rest}>\n {hasBack && (\n <BitkitLabelTooltip text={backLabel}>\n <BackElement\n aria-label={backLabel}\n css={controlButtonRecipe({ size: 'sm' })}\n {...(onBackClick ? { onClick: onBackClick, type: 'button' as const } : { href: backHref })}\n >\n <IconChevronLeft size=\"24\" />\n </BackElement>\n </BitkitLabelTooltip>\n )}\n {children}\n </Box>\n );\n});\n\nBitkitSidebarTitle.displayName = 'BitkitSidebarTitle';\n\n// ----- BitkitSidebar.Footer -----\n\nexport interface BitkitSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitSidebarFooter = forwardRef<HTMLDivElement, BitkitSidebarFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.footer} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitSidebarFooter.displayName = 'BitkitSidebarFooter';\n\n// ----- BitkitSidebar.Project -----\n\nexport interface BitkitSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitSidebarProject = forwardRef<HTMLDivElement, BitkitSidebarProjectProps>((props, ref) => {\n const { label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={styles.project} {...rest}>\n <chakra.span css={styles.projectLabel}>{label}</chakra.span>\n <chakra.span css={styles.projectValue}>{value}</chakra.span>\n </Box>\n );\n});\n\nBitkitSidebarProject.displayName = 'BitkitSidebarProject';\n\n// ----- BitkitSidebar.GroupHeading -----\n\nexport type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"12\" paddingBlockStart=\"24\" paddingInline=\"32\" {...props} />;\n});\n\nBitkitSidebarGroupHeading.displayName = 'BitkitSidebarGroupHeading';\n\n// ----- BitkitSidebar.Divider -----\n\nconst BitkitSidebarDivider = forwardRef<HTMLDivElement>((_, ref) => {\n const recipe = useSlotRecipe({ key: 'sidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={styles.divider} />;\n});\n\nBitkitSidebarDivider.displayName = 'BitkitSidebarDivider';\n\nexport default Object.assign(BitkitSidebar, {\n Divider: BitkitSidebarDivider,\n Footer: BitkitSidebarFooter,\n GroupHeading: BitkitSidebarGroupHeading,\n Item: BitkitSidebarItem,\n Project: BitkitSidebarProject,\n Title: BitkitSidebarTitle,\n});\n"],"mappings":";;;;;;;;;AAgBA,IAAM,gBAAgB,YAA6C,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,GAAG,SAAS;AAK9B,QACE,oBAAC,KAAD;EAAU;EAAK,SAAA;EAAQ,KAJV,cAAc,EAAE,KAAK,WAAW,CAChC,EAGe,CAAO;EAAM,GAAI;YAC3C,oBAAC,OAAD,EAAM,UAAe,CAAA;EACjB,CAAA;EAER;AAEF,cAAc,cAAc;AAuB5B,IAAM,oBAAoB,YAA2E,OAAO,QAAQ;CAClH,MAAM,EAAE,OAAO,UAAU,MAAM,MAAM,UAAU,YAAY,YAAY,GAAG,SAAS;CAGnF,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAO,EAAE,UAAU,CAAC;CAEnC,MAAM,cACJ,qBAAA,YAAA,EAAA,UAAA;EACG,QAAQ,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAU,MAAK;GAAO,CAAA;EACjD,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAY;GAAuB,CAAA;EAC3D;EACA,cAAc,oBAAC,YAAD;GAAY,KAAK,OAAO;GAAY,MAAK;GAAO,CAAA;EAC/D,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,iBAAmB,CAAA;EAC1C,EAAA,CAAA;AAGL,KAAI,KAAK,SAAS,KAAA,GAAW;EAC3B,MAAM,EAAE,WAAW,GAAG,aAAa;AACnC,SACE,oBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,gBAAc,WAAW,SAAS,KAAA;GAClC,WAAW,YAAY,SAAS,cAAc;GAC9C,KAAK,OAAO;aAEX;GACQ,CAAA;;CAIf,MAAM,EAAE,WAAW,MAAM,GAAG,GAAG,eAAe;AAC9C,QACE,oBAAC,OAAO,QAAR;EACO;EACL,GAAI;EACJ,gBAAc;EACd,WAAW,YAAY,SAAS,cAAc;EAC9C,KAAK,OAAO;EACZ,MAAK;YAEJ;EACa,CAAA;EAElB;AAEF,kBAAkB,cAAc;AAWhC,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,YAAY,QAAQ,UAAU,aAAa,GAAG,SAAS;CAGzE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,EAAQ;CACvB,MAAM,sBAAsB,UAAU,EAAE,KAAK,iBAAiB,CAAC;CAE/D,MAAM,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;CAEhC,MAAM,cAAc,cAAc,OAAO,SAAS,OAAO;AAEzD,QACE,qBAAC,KAAD;EAAU;EAAK,KAAK,UAAU,OAAO,gBAAgB,OAAO;EAAO,GAAI;YAAvE,CACG,WACC,oBAAC,oBAAD;GAAoB,MAAM;aACxB,oBAAC,aAAD;IACE,cAAY;IACZ,KAAK,oBAAoB,EAAE,MAAM,MAAM,CAAC;IACxC,GAAK,cAAc;KAAE,SAAS;KAAa,MAAM;KAAmB,GAAG,EAAE,MAAM,UAAU;cAEzF,oBAAC,iBAAD,EAAiB,MAAK,MAAO,CAAA;IACjB,CAAA;GACK,CAAA,EAEtB,SACG;;EAER;AAEF,mBAAmB,cAAc;AAQjC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,GAAG,SAAS;AAK9B,QACE,oBAAC,KAAD;EAAU;EAAK,KAJF,cAAc,EAAE,KAAK,WAAW,CAChC,EAGO,CAAO;EAAQ,GAAI;EACpC;EACG,CAAA;EAER;AAEF,oBAAoB,cAAc;AASlC,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,OAAO,OAAO,GAAG,SAAS;CAGlC,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,EAAQ;AAEvB,QACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAS,GAAI;YAAxC,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;aAAe;GAAoB,CAAA,EAC5D,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;aAAe;GAAoB,CAAA,CACxD;;EAER;AAEF,qBAAqB,cAAc;AAMnC,IAAM,4BAA4B,YAA4D,OAAO,QAAQ;AAC3G,QAAO,oBAAC,oBAAD;EAAyB;EAAK,iBAAgB;EAAK,mBAAkB;EAAK,eAAc;EAAK,GAAI;EAAS,CAAA;EACjH;AAEF,0BAA0B,cAAc;AAIxC,IAAM,uBAAuB,YAA4B,GAAG,QAAQ;AAIlE,QAAO,oBAAC,WAAD;EAAgB;EAAK,KAHb,cAAc,EAAE,KAAK,WAAW,CAChC,EAEkB,CAAO;EAAW,CAAA;EACnD;AAEF,qBAAqB,cAAc;AAEnC,IAAA,wBAAe,OAAO,OAAO,eAAe;CAC1C,SAAS;CACT,QAAQ;CACR,cAAc;CACd,MAAM;CACN,SAAS;CACT,OAAO;CACR,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, { type BitkitButtonProps } from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\ntype BitkitSplitButtonActionProps = Omit<BitkitButtonProps, 'size' | 'variant' | 'state'>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLButtonElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n return <BitkitButton ref={ref} css={styles.action} size={size} variant={variant} state={state} {...props} />;\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<{\n size?: Size;\n variant?: Variant;\n state?: State;\n}>;\n\nconst BitkitSplitButton = forwardRef<HTMLDivElement, BitkitSplitButtonProps>((props, ref) => {\n const { children, size = 'lg', state, variant = 'primary' } = props;\n\n const childArray = Children.toArray(children);\n const actionChild = childArray.find(isValidActionItem);\n const menuItems = childArray.filter(isValidMenuItem);\n\n const menuSize = size === 'lg' ? 'lg' : 'md';\n const recipe = useSlotRecipe({ key: 'splitButton' });\n const styles = recipe({ variant });\n\n return (\n <SplitButtonProvider value={{ size, state, styles, variant }}>\n <Skeleton asChild loading={state === 'skeleton'}>\n <Group ref={ref} attached display=\"inline-flex\">\n {actionChild}\n <BitkitActionMenu.Root\n size={menuSize}\n trigger={\n <BitkitIconButton\n css={styles.trigger}\n icon={IconChevronDown}\n label=\"Toggle menu\"\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n }\n positioning={{ placement: 'bottom-end' }}\n >\n {menuItems}\n </BitkitActionMenu.Root>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default Object.assign(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,qBAAqB,UAA4C;AACrE,QAAO,eAAe,MAAM,IAAI,MAAM,SAAS;;AAGjD,IAAM,mBAAmB,UAA4C;AACnE,QACE,eAAe,MAAM,KACpB,MAAM,SAAS,iBAAiB,SAC/B,MAAM,SAAS,iBAAiB,QAChC,MAAM,SAAS,iBAAiB;;AAYtC,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;CACf,CAAC;AAKF,IAAM,0BAA0B,YAA6D,OAAO,QAAQ;CAC1G,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,uBAAuB;AAEhE,QAAO,oBAAC,cAAD;EAAmB;EAAK,KAAK,OAAO;EAAc;EAAe;EAAgB;EAAO,GAAI;EAAS,CAAA;EAC5G;AAEF,wBAAwB,cAAc;AAStC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,cAAc;CAE9D,MAAM,aAAa,SAAS,QAAQ,SAAS;CAC7C,MAAM,cAAc,WAAW,KAAK,kBAAkB;CACtD,MAAM,YAAY,WAAW,OAAO,gBAAgB;CAEpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,
|
|
1
|
+
{"version":3,"file":"BitkitSplitButton.js","names":[],"sources":["../../../lib/components/BitkitSplitButton/BitkitSplitButton.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Group } from '@chakra-ui/react/group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, forwardRef, isValidElement, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitButton, { type BitkitButtonProps } from '../BitkitButton/BitkitButton';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\n\ntype Size = 'lg' | 'md' | 'sm';\ntype Variant = 'primary' | 'secondary';\ntype State = 'disabled' | 'loading' | 'skeleton';\n\nconst isValidActionItem = (child: ReactNode): child is ReactElement => {\n return isValidElement(child) && child.type === BitkitSplitButtonAction;\n};\n\nconst isValidMenuItem = (child: ReactNode): child is ReactElement => {\n return (\n isValidElement(child) &&\n (child.type === BitkitActionMenu.Group ||\n child.type === BitkitActionMenu.Item ||\n child.type === BitkitActionMenu.Separator)\n );\n};\n\n// --- Context ---\ninterface SplitButtonContext {\n size: Size;\n variant: Variant;\n state: State | undefined;\n styles: Record<string, SystemStyleObject>;\n}\n\nconst [SplitButtonProvider, useSplitButtonContext] = createContext<SplitButtonContext>({\n name: 'SplitButtonContext',\n hookName: 'useSplitButtonContext',\n providerName: '<BitkitSplitButton />',\n});\n\n// --- Action ---\ntype BitkitSplitButtonActionProps = Omit<BitkitButtonProps, 'size' | 'variant' | 'state'>;\n\nconst BitkitSplitButtonAction = forwardRef<HTMLButtonElement, BitkitSplitButtonActionProps>((props, ref) => {\n const { size, state, styles, variant } = useSplitButtonContext();\n\n return <BitkitButton ref={ref} css={styles.action} size={size} variant={variant} state={state} {...props} />;\n});\n\nBitkitSplitButtonAction.displayName = 'BitkitSplitButtonAction';\n\n// --- Root ---\nexport type BitkitSplitButtonProps = PropsWithChildren<{\n size?: Size;\n variant?: Variant;\n state?: State;\n}>;\n\nconst BitkitSplitButton = forwardRef<HTMLDivElement, BitkitSplitButtonProps>((props, ref) => {\n const { children, size = 'lg', state, variant = 'primary' } = props;\n\n const childArray = Children.toArray(children);\n const actionChild = childArray.find(isValidActionItem);\n const menuItems = childArray.filter(isValidMenuItem);\n\n const menuSize = size === 'lg' ? 'lg' : 'md';\n const recipe = useSlotRecipe({ key: 'splitButton' });\n const styles = recipe({ variant });\n\n return (\n <SplitButtonProvider value={{ size, state, styles, variant }}>\n <Skeleton asChild loading={state === 'skeleton'}>\n <Group ref={ref} attached display=\"inline-flex\">\n {actionChild}\n <BitkitActionMenu.Root\n size={menuSize}\n trigger={\n <BitkitIconButton\n css={styles.trigger}\n icon={IconChevronDown}\n label=\"Toggle menu\"\n size={size}\n state={state === 'loading' ? 'disabled' : state}\n variant={variant}\n />\n }\n positioning={{ placement: 'bottom-end' }}\n >\n {menuItems}\n </BitkitActionMenu.Root>\n </Group>\n </Skeleton>\n </SplitButtonProvider>\n );\n});\nBitkitSplitButton.displayName = 'BitkitSplitButton';\n\nexport default Object.assign(BitkitSplitButton, {\n Action: BitkitSplitButtonAction,\n Group: BitkitActionMenu.Group,\n Item: BitkitActionMenu.Item,\n Separator: BitkitActionMenu.Separator,\n});\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,qBAAqB,UAA4C;AACrE,QAAO,eAAe,MAAM,IAAI,MAAM,SAAS;;AAGjD,IAAM,mBAAmB,UAA4C;AACnE,QACE,eAAe,MAAM,KACpB,MAAM,SAAS,iBAAiB,SAC/B,MAAM,SAAS,iBAAiB,QAChC,MAAM,SAAS,iBAAiB;;AAYtC,IAAM,CAAC,qBAAqB,yBAAyB,gBAAkC;CACrF,MAAM;CACN,UAAU;CACV,cAAc;CACf,CAAC;AAKF,IAAM,0BAA0B,YAA6D,OAAO,QAAQ;CAC1G,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,uBAAuB;AAEhE,QAAO,oBAAC,cAAD;EAAmB;EAAK,KAAK,OAAO;EAAc;EAAe;EAAgB;EAAO,GAAI;EAAS,CAAA;EAC5G;AAEF,wBAAwB,cAAc;AAStC,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EAAE,UAAU,OAAO,MAAM,OAAO,UAAU,cAAc;CAE9D,MAAM,aAAa,SAAS,QAAQ,SAAS;CAC7C,MAAM,cAAc,WAAW,KAAK,kBAAkB;CACtD,MAAM,YAAY,WAAW,OAAO,gBAAgB;CAEpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAO,EAAE,SAAS,CAAC;AAElC,QACE,oBAAC,qBAAD;EAAqB,OAAO;GAAE;GAAM;GAAO;GAAQ;GAAS;YAC1D,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS,UAAU;aACnC,qBAAC,OAAD;IAAY;IAAK,UAAA;IAAS,SAAQ;cAAlC,CACG,aACD,oBAAC,iBAAiB,MAAlB;KACE,MAAM;KACN,SACE,oBAAC,kBAAD;MACE,KAAK,OAAO;MACZ,MAAM;MACN,OAAM;MACA;MACN,OAAO,UAAU,YAAY,aAAa;MACjC;MACT,CAAA;KAEJ,aAAa,EAAE,WAAW,cAAc;eAEvC;KACqB,CAAA,CAClB;;GACC,CAAA;EACS,CAAA;EAExB;AACF,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,OAAO,OAAO,mBAAmB;CAC9C,QAAQ;CACR,OAAO,iBAAiB;CACxB,MAAM,iBAAiB;CACvB,WAAW,iBAAiB;CAC7B,CAAC"}
|
|
@@ -24,7 +24,7 @@ var renderIndicatorContent = (index, status) => {
|
|
|
24
24
|
var renderLabel = (label, action) => {
|
|
25
25
|
if (!action) return label;
|
|
26
26
|
if (action.href) return /* @__PURE__ */ jsx(Link, {
|
|
27
|
-
|
|
27
|
+
_hover: { color: "text/link" },
|
|
28
28
|
href: action.href,
|
|
29
29
|
onClick: action.onClick,
|
|
30
30
|
rel: action.isExternal ? "noopener noreferrer" : void 0,
|
|
@@ -32,8 +32,8 @@ var renderLabel = (label, action) => {
|
|
|
32
32
|
children: label
|
|
33
33
|
});
|
|
34
34
|
return /* @__PURE__ */ jsx(Link, {
|
|
35
|
+
_hover: { color: "text/link" },
|
|
35
36
|
as: "button",
|
|
36
|
-
colorScheme: "purple",
|
|
37
37
|
onClick: action.onClick,
|
|
38
38
|
type: "button",
|
|
39
39
|
children: label
|
|
@@ -64,7 +64,7 @@ var BitkitStepsItem = forwardRef((props, ref) => {
|
|
|
64
64
|
const { _index = 0, _orientation = "horizontal", action, helperText, label, state } = props;
|
|
65
65
|
const styles = useStepsStyles();
|
|
66
66
|
const status = getEffectiveStatus(state, _index, useStepsContext().value);
|
|
67
|
-
const resolvedAction =
|
|
67
|
+
const resolvedAction = status === "completed" ? action : void 0;
|
|
68
68
|
const statusAttr = { "data-step-status": status };
|
|
69
69
|
return /* @__PURE__ */ jsxs(Steps.Item, {
|
|
70
70
|
...statusAttr,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n if (action.href) {\n return (\n <Link\n
|
|
1
|
+
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n _index: index,\n _orientation: orientation,\n });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n helperText?: string;\n label: string;\n state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n _index?: number;\n _orientation?: 'horizontal' | 'vertical';\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n const {\n _index = 0,\n _orientation = 'horizontal',\n action,\n helperText,\n label,\n state,\n } = props as BitkitStepsItemInternalProps;\n\n const styles = useStepsStyles();\n const stepsCtx = useStepsContext();\n const status = getEffectiveStatus(state, _index, stepsCtx.value);\n const resolvedAction = status === 'completed' ? action : undefined;\n const statusAttr = { 'data-step-status': status };\n\n return (\n <Steps.Item {...statusAttr} index={_index} ref={ref}>\n <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n <Box css={styles.trigger}>\n <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n {_orientation === 'vertical' && helperText && (\n <Steps.Description {...statusAttr}>{helperText}</Steps.Description>\n )}\n </Box>\n <Steps.Separator />\n </Steps.Item>\n );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default Object.assign(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;AAaA,IAAM,sBACJ,WACA,OACA,SACoB;AACpB,KAAI,cAAc,WAAY,QAAO;AACrC,KAAI,cAAc,UAAW,QAAO;AACpC,KAAI,cAAc,YAAa,QAAO,QAAQ,OAAO,YAAY;AACjE,KAAI,QAAQ,KAAM,QAAO;AACzB,KAAI,UAAU,KAAM,QAAO;AAC3B,QAAO;;AAGT,IAAM,0BAA0B,OAAe,WAA4B;AACzE,KAAI,WAAW,YAAa,QAAO,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;AAC1D,KAAI,WAAW,eAAe,WAAW,UAAW,QAAO,oBAAC,UAAD,EAAU,MAAK,MAAO,CAAA;AACjF,KAAI,WAAW,UAAW,QAAO;AACjC,QAAO,QAAQ;;AAGjB,IAAM,eAAe,OAAe,WAA2C;AAC7E,KAAI,CAAC,OAAQ,QAAO;AAKpB,KAAI,OAAO,KACT,QACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,aAAa;EAC9B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;YAEtC;EACI,CAAA;AAIX,QACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,aAAa;EAAE,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;YAC7E;EACI,CAAA;;AAUX,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,aAAa;CACjE,MAAM,cAAc,oBAAoB;CACxC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,QACE,oBAAC,MAAM,MAAP;EAAiB;EAAY;EAAO,QAAQ;EAAoB;EAAmB;YACjF,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;AACxC,OAAI,eAAe,MAAM,CACvB,QAAO,aAAa,OAAqD;IACvE,QAAQ;IACR,cAAc;IACf,CAAC;AAEJ,UAAO;IACP,EACS,CAAA;EACF,CAAA;EAEf;AAEF,YAAY,cAAc;AAkB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SAAS,GACT,eAAe,cACf,QACA,YACA,OACA,UACE;CAEJ,MAAM,SAAS,gBAAgB;CAE/B,MAAM,SAAS,mBAAmB,OAAO,QADxB,iBACgC,CAAS,MAAM;CAChE,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,QAAQ;AAEjD,QACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;YAAhD;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;cAAa,uBAAuB,QAAQ,OAAO;IAAmB,CAAA;GAC3F,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;eAAa,YAAY,OAAO,eAAe;KAAe,CAAA,EAC9E,iBAAiB,cAAc,cAC9B,oBAAC,MAAM,aAAP;KAAmB,GAAI;eAAa;KAA+B,CAAA,CAEjE;;GACN,oBAAC,MAAM,WAAP,EAAmB,CAAA;GACR;;EAEf;AAEF,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,OAAO,OAAO,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStepsCard.js","names":[],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import {\n Card,\n type CardBodyProps,\n type CardFooterProps,\n type CardHeaderProps,\n type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n const recipe = useSlotRecipe({ key: 'stepsCard' });\n return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n children: ReactNode;\n step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n const { children, step, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <StepCardProvider value={{ step }}>\n <Card.Root ref={ref} css={styles.root} unstyled {...rest}>\n {children}\n </Card.Root>\n </StepCardProvider>\n );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Header ref={ref} css={styles.header} {...rest}>\n {children}\n </Card.Header>\n );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Body ref={ref} css={styles.body} {...rest}>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n }\n return child;\n })}\n </Card.Body>\n );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nexport interface BitkitStepsCardStepProps {\n children?: ReactNode;\n description?: string;\n title: string;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n const { step } = useStepCardContext() ?? { step: 0 };\n const styles = useStepsCardStyles();\n\n if (_index !== step) return null;\n\n return (\n <>\n <chakra.div css={styles.titleGroup}>\n <Card.Title css={styles.title}>{title}</Card.Title>\n {description && <Card.Description css={styles.description}>{description}</Card.Description>}\n </chakra.div>\n {children}\n </>\n );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Footer ref={ref} css={styles.footer} {...rest}>\n {children}\n </Card.Footer>\n );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default Object.assign(BitkitStepsCard, {\n Body: BitkitStepsCardBody,\n Footer: BitkitStepsCardFooter,\n Header: BitkitStepsCardHeader,\n Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;AAYA,IAAM,2BAA2B;AAE/B,QADe,cAAc,EAAE,KAAK,aAAa,
|
|
1
|
+
{"version":3,"file":"BitkitStepsCard.js","names":[],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import {\n Card,\n type CardBodyProps,\n type CardFooterProps,\n type CardHeaderProps,\n type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n const recipe = useSlotRecipe({ key: 'stepsCard' });\n return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n children: ReactNode;\n step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n const { children, step, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <StepCardProvider value={{ step }}>\n <Card.Root ref={ref} css={styles.root} unstyled {...rest}>\n {children}\n </Card.Root>\n </StepCardProvider>\n );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Header ref={ref} css={styles.header} {...rest}>\n {children}\n </Card.Header>\n );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Body ref={ref} css={styles.body} {...rest}>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n }\n return child;\n })}\n </Card.Body>\n );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nexport interface BitkitStepsCardStepProps {\n children?: ReactNode;\n description?: string;\n title: string;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n const { step } = useStepCardContext() ?? { step: 0 };\n const styles = useStepsCardStyles();\n\n if (_index !== step) return null;\n\n return (\n <>\n <chakra.div css={styles.titleGroup}>\n <Card.Title css={styles.title}>{title}</Card.Title>\n {description && <Card.Description css={styles.description}>{description}</Card.Description>}\n </chakra.div>\n {children}\n </>\n );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n const { children, ...rest } = props;\n const styles = useStepsCardStyles();\n\n return (\n <Card.Footer ref={ref} css={styles.footer} {...rest}>\n {children}\n </Card.Footer>\n );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default Object.assign(BitkitStepsCard, {\n Body: BitkitStepsCardBody,\n Footer: BitkitStepsCardFooter,\n Header: BitkitStepsCardHeader,\n Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;AAYA,IAAM,2BAA2B;AAE/B,QADe,cAAc,EAAE,KAAK,aAAa,CAC1C,EAAQ;;AAQjB,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,MAAM,GAAG,SAAS;CACpC,MAAM,SAAS,oBAAoB;AAEnC,QACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,MAAM;YAC/B,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,OAAO;GAAM,UAAA;GAAS,GAAI;GACjD;GACS,CAAA;EACK,CAAA;EAErB;AAEF,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,oBAAoB;AAEnC,QACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;EAC5C;EACW,CAAA;EAEhB;AAEF,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,oBAAoB;AAEnC,QACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAM,GAAI;YACxC,SAAS,IAAI,WAAW,OAAO,UAAU;AACxC,OAAI,eAAe,MAAM,CACvB,QAAO,aAAa,OAA4C,EAAE,QAAQ,OAAO,CAAC;AAEpF,UAAO;IACP;EACQ,CAAA;EAEd;AAEF,oBAAoB,cAAc;AAYlC,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CACrD,MAAM,EAAE,SAAS,oBAAoB,IAAI,EAAE,MAAM,GAAG;CACpD,MAAM,SAAS,oBAAoB;AAEnC,KAAI,WAAW,KAAM,QAAO;AAE5B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;EAAY,KAAK,OAAO;YAAxB,CACE,oBAAC,KAAK,OAAN;GAAY,KAAK,OAAO;aAAQ;GAAmB,CAAA,EAClD,eAAe,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;aAAc;GAA+B,CAAA,CAChF;KACZ,SACA,EAAA,CAAA;;AAIP,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,oBAAoB;AAEnC,QACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;EAC5C;EACW,CAAA;EAEhB;AAEF,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,OAAO,OAAO,iBAAiB;CAC5C,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;CACP,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import IconCheck from "../../icons/IconCheck.js";
|
|
2
|
+
import IconCross from "../../icons/IconCross.js";
|
|
3
|
+
import BitkitSwitchHelperText from "./components/BitkitSwitchHelperText.js";
|
|
4
|
+
import BitkitSwitchLabel from "./components/BitkitSwitchLabel.js";
|
|
5
|
+
import BitkitSwitchReadOnly from "./components/BitkitSwitchReadOnly.js";
|
|
6
|
+
import BitkitSwitchValueText from "./components/BitkitSwitchValueText.js";
|
|
7
|
+
import { Box } from "@chakra-ui/react/box";
|
|
8
|
+
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
9
|
+
import { forwardRef } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
12
|
+
import { Switch } from "@chakra-ui/react/switch";
|
|
13
|
+
//#region lib/components/BitkitSwitch/BitkitSwitch.tsx
|
|
14
|
+
var BitkitSwitchDefault = forwardRef((props, ref) => {
|
|
15
|
+
const { label, size = "lg", state = "default", ...rest } = props;
|
|
16
|
+
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
17
|
+
size,
|
|
18
|
+
readOnly: state === "readOnly",
|
|
19
|
+
disabled: state === "disabled" || state === "skeleton",
|
|
20
|
+
...rest,
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
23
|
+
/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
|
|
24
|
+
state,
|
|
25
|
+
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
26
|
+
loading: state === "skeleton",
|
|
27
|
+
borderRadius: "12",
|
|
28
|
+
height: size === "md" ? "16" : "24",
|
|
29
|
+
children: /* @__PURE__ */ jsxs(Switch.Control, { children: [/* @__PURE__ */ jsx(Switch.Thumb, {}), /* @__PURE__ */ jsx(Switch.Indicator, {
|
|
30
|
+
fallback: /* @__PURE__ */ jsx(IconCross, { size: size === "md" ? "16" : "24" }),
|
|
31
|
+
children: /* @__PURE__ */ jsx(IconCheck, { size: size === "md" ? "16" : "24" })
|
|
32
|
+
})] })
|
|
33
|
+
})
|
|
34
|
+
}),
|
|
35
|
+
label && /* @__PURE__ */ jsx(Switch.Label, { children: label })
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
BitkitSwitchDefault.displayName = "BitkitSwitchDefault";
|
|
40
|
+
var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
41
|
+
const { label, optional, tooltip, helperText, valueText, size = "lg", state = "default", ...rest } = props;
|
|
42
|
+
const styles = useSlotRecipe({ key: "switch" })({ size });
|
|
43
|
+
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
44
|
+
gap: "4",
|
|
45
|
+
size,
|
|
46
|
+
required: !optional,
|
|
47
|
+
flexDirection: "column",
|
|
48
|
+
alignItems: "flex-start",
|
|
49
|
+
readOnly: state === "readOnly",
|
|
50
|
+
disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
|
|
51
|
+
...rest,
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
54
|
+
/* @__PURE__ */ jsx(BitkitSwitchLabel, {
|
|
55
|
+
label,
|
|
56
|
+
state,
|
|
57
|
+
tooltip,
|
|
58
|
+
optional
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
61
|
+
css: styles.root,
|
|
62
|
+
children: [/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
|
|
63
|
+
state,
|
|
64
|
+
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
65
|
+
loading: state === "skeleton",
|
|
66
|
+
borderRadius: "12",
|
|
67
|
+
height: size === "md" ? "16" : "24",
|
|
68
|
+
children: /* @__PURE__ */ jsxs(Switch.Control, { children: [/* @__PURE__ */ jsx(Switch.Thumb, {}), /* @__PURE__ */ jsx(Switch.Indicator, {
|
|
69
|
+
fallback: /* @__PURE__ */ jsx(IconCross, { size: size === "md" ? "16" : "24" }),
|
|
70
|
+
children: /* @__PURE__ */ jsx(IconCheck, { size: size === "md" ? "16" : "24" })
|
|
71
|
+
})] })
|
|
72
|
+
})
|
|
73
|
+
}), /* @__PURE__ */ jsx(BitkitSwitchValueText, {
|
|
74
|
+
size,
|
|
75
|
+
state,
|
|
76
|
+
valueText
|
|
77
|
+
})]
|
|
78
|
+
}),
|
|
79
|
+
/* @__PURE__ */ jsx(BitkitSwitchHelperText, {
|
|
80
|
+
state,
|
|
81
|
+
helperText
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
BitkitSwitchDynamicText.displayName = "BitkitSwitchDynamicText";
|
|
87
|
+
var BitkitSwitch = forwardRef((props, ref) => {
|
|
88
|
+
if (props.variant === "dynamic-text") {
|
|
89
|
+
const { variant: _variant, ...rest } = props;
|
|
90
|
+
return /* @__PURE__ */ jsx(BitkitSwitchDynamicText, {
|
|
91
|
+
ref,
|
|
92
|
+
...rest
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
const { variant: _variant, helperText: _helperText, optional: _optional, tooltip: _tooltip, valueText: _valueText, ...rest } = props;
|
|
96
|
+
return /* @__PURE__ */ jsx(BitkitSwitchDefault, {
|
|
97
|
+
ref,
|
|
98
|
+
...rest
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
BitkitSwitch.displayName = "BitkitSwitch";
|
|
102
|
+
//#endregion
|
|
103
|
+
export { BitkitSwitch as default };
|
|
104
|
+
|
|
105
|
+
//# sourceMappingURL=BitkitSwitch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type { BitkitSwitchDefaultProps, BitkitSwitchDynamicTextProps, BitkitSwitchProps } from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLInputElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n const { label, size = 'lg', state = 'default', ...rest } = props;\n\n return (\n <Switch.Root\n size={size}\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={ref} />\n <BitkitSwitchReadOnly state={state}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n <Switch.Control>\n <Switch.Thumb />\n <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n <IconCheck size={size === 'md' ? '16' : '24'} />\n </Switch.Indicator>\n </Switch.Control>\n </Skeleton>\n </BitkitSwitchReadOnly>\n {label && <Switch.Label>{label}</Switch.Label>}\n </Switch.Root>\n );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLInputElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n (props, ref) => {\n const { label, optional, tooltip, helperText, valueText, size = 'lg', state = 'default', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'switch' });\n const styles = recipe({ size });\n\n return (\n <Switch.Root\n gap=\"4\"\n size={size}\n required={!optional}\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={ref} />\n <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n <Box css={styles.root}>\n <BitkitSwitchReadOnly state={state}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n <Switch.Control>\n <Switch.Thumb />\n <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n <IconCheck size={size === 'md' ? '16' : '24'} />\n </Switch.Indicator>\n </Switch.Control>\n </Skeleton>\n </BitkitSwitchReadOnly>\n <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n </Box>\n <BitkitSwitchHelperText state={state} helperText={helperText} />\n </Switch.Root>\n );\n },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitch = forwardRef<HTMLInputElement, BitkitSwitchProps>((props, ref) => {\n if (props.variant === 'dynamic-text') {\n const { variant: _variant, ...rest } = props;\n return <BitkitSwitchDynamicText ref={ref} {...rest} />;\n }\n\n // Default variant. At runtime (e.g. a shared Storybook meta) sibling-variant props may still\n // flow in, so strip them explicitly before forwarding to avoid leaking to the DOM.\n const {\n variant: _variant,\n helperText: _helperText,\n optional: _optional,\n tooltip: _tooltip,\n valueText: _valueText,\n ...rest\n } = props as unknown as BitkitSwitchDynamicTextProps;\n return <BitkitSwitchDefault ref={ref} {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)} />;\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAM,sBAAsB,YAAyE,OAAO,QAAQ;CAClH,MAAM,EAAE,OAAO,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;AAE3D,QACE,qBAAC,OAAO,MAAR;EACQ;EACN,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;YAJN;GAME,oBAAC,OAAO,aAAR,EAAyB,KAAO,CAAA;GAChC,oBAAC,sBAAD;IAA6B;cAC3B,oBAAC,UAAD;KAAU,SAAS,UAAU;KAAY,cAAa;KAAK,QAAQ,SAAS,OAAO,OAAO;eACxF,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,EAAgB,CAAA,EAChB,oBAAC,OAAO,WAAR;MAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA;gBAC1E,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA;MAC/B,CAAA,CACJ,EAAA,CAAA;KACR,CAAA;IACU,CAAA;GACtB,SAAS,oBAAC,OAAO,OAAR,EAAA,UAAe,OAAqB,CAAA;GAClC;;EAEhB;AAEF,oBAAoB,cAAc;AAElC,IAAM,0BAA0B,YAC7B,OAAO,QAAQ;CACd,MAAM,EAAE,OAAO,UAAU,SAAS,YAAY,WAAW,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAGrG,MAAM,SADS,cAAc,EAAE,KAAK,UAAU,CAC/B,CAAO,EAAE,MAAM,CAAC;AAE/B,QACE,qBAAC,OAAO,MAAR;EACE,KAAI;EACE;EACN,UAAU,CAAC;EACX,eAAc;EACd,YAAW;EACX,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU,mBAAmB,UAAU;EACzE,GAAI;YARN;GAUE,oBAAC,OAAO,aAAR,EAAyB,KAAO,CAAA;GAChC,oBAAC,mBAAD;IAA0B;IAAc;IAAgB;IAAmB;IAAY,CAAA;GACvF,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,oBAAC,sBAAD;KAA6B;eAC3B,oBAAC,UAAD;MAAU,SAAS,UAAU;MAAY,cAAa;MAAK,QAAQ,SAAS,OAAO,OAAO;gBACxF,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,EAAgB,CAAA,EAChB,oBAAC,OAAO,WAAR;OAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA;iBAC1E,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA;OAC/B,CAAA,CACJ,EAAA,CAAA;MACR,CAAA;KACU,CAAA,EACvB,oBAAC,uBAAD;KAA6B;KAAa;KAAkB;KAAa,CAAA,CACrE;;GACN,oBAAC,wBAAD;IAA+B;IAAmB;IAAc,CAAA;GACpD;;EAGnB;AAED,wBAAwB,cAAc;AAEtC,IAAM,eAAe,YAAiD,OAAO,QAAQ;AACnF,KAAI,MAAM,YAAY,gBAAgB;EACpC,MAAM,EAAE,SAAS,UAAU,GAAG,SAAS;AACvC,SAAO,oBAAC,yBAAD;GAA8B;GAAK,GAAI;GAAQ,CAAA;;CAKxD,MAAM,EACJ,SAAS,UACT,YAAY,aACZ,UAAU,WACV,SAAS,UACT,WAAW,YACX,GAAG,SACD;AACJ,QAAO,oBAAC,qBAAD;EAA0B;EAAK,GAAK;EAAsD,CAAA;EACjG;AAEF,aAAa,cAAc"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SwitchRootProps } from '@chakra-ui/react/switch';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export type OnOff = {
|
|
4
|
+
on: ReactNode;
|
|
5
|
+
off: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly' | 'required'> {
|
|
8
|
+
variant?: 'default';
|
|
9
|
+
label?: ReactNode;
|
|
10
|
+
state?: 'default' | 'disabled' | 'readOnly' | 'skeleton';
|
|
11
|
+
}
|
|
12
|
+
export interface BitkitSwitchDynamicTextProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly' | 'required'> {
|
|
13
|
+
variant: 'dynamic-text';
|
|
14
|
+
tooltip?: string;
|
|
15
|
+
optional?: boolean;
|
|
16
|
+
label?: ReactNode;
|
|
17
|
+
valueText?: ReactNode | OnOff;
|
|
18
|
+
helperText?: ReactNode | OnOff;
|
|
19
|
+
state?: 'default' | 'disabled' | 'disabledInput' | 'readOnly' | 'skeleton';
|
|
20
|
+
}
|
|
21
|
+
export type BitkitSwitchProps = BitkitSwitchDefaultProps | BitkitSwitchDynamicTextProps;
|
package/dist/components/{BitkitToggle/BitkitToggle.utils.js → BitkitSwitch/BitkitSwitch.utils.js}
RENAMED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
//#region lib/components/
|
|
1
|
+
//#region lib/components/BitkitSwitch/BitkitSwitch.utils.ts
|
|
2
2
|
function isOnOff(obj) {
|
|
3
3
|
return typeof obj === "object" && obj !== null && "on" in obj && "off" in obj;
|
|
4
4
|
}
|
|
5
5
|
//#endregion
|
|
6
6
|
export { isOnOff };
|
|
7
7
|
|
|
8
|
-
//# sourceMappingURL=
|
|
8
|
+
//# sourceMappingURL=BitkitSwitch.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"BitkitSwitch.utils.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.utils.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { OnOff } from './BitkitSwitch.types';\n\nexport function isOnOff(obj: ReactNode | OnOff): obj is OnOff {\n return typeof obj === 'object' && obj !== null && 'on' in obj && 'off' in obj;\n}\n"],"mappings":";AAIA,SAAgB,QAAQ,KAAsC;AAC5D,QAAO,OAAO,QAAQ,YAAY,QAAQ,QAAQ,QAAQ,OAAO,SAAS"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';
|
|
2
|
+
declare const BitkitSwitchHelperText: ({ state, helperText }: Pick<BitkitSwitchDynamicTextProps, "state" | "helperText">) => import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
+
export default BitkitSwitchHelperText;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { isOnOff } from "../
|
|
1
|
+
import { isOnOff } from "../BitkitSwitch.utils.js";
|
|
2
2
|
import { Text } from "@chakra-ui/react/text";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
5
5
|
import { useSwitchContext } from "@chakra-ui/react/switch";
|
|
6
|
-
//#region lib/components/
|
|
7
|
-
var
|
|
6
|
+
//#region lib/components/BitkitSwitch/components/BitkitSwitchHelperText.tsx
|
|
7
|
+
var BitkitSwitchHelperText = ({ state, helperText }) => {
|
|
8
8
|
const { checked, disabled } = useSwitchContext();
|
|
9
9
|
if (state === "skeleton") return /* @__PURE__ */ jsx(Skeleton, {
|
|
10
10
|
height: "12",
|
|
@@ -26,6 +26,6 @@ var BitkitToggleHelperText = ({ state, helperText }) => {
|
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
28
|
//#endregion
|
|
29
|
-
export {
|
|
29
|
+
export { BitkitSwitchHelperText as default };
|
|
30
30
|
|
|
31
|
-
//# sourceMappingURL=
|
|
31
|
+
//# sourceMappingURL=BitkitSwitchHelperText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitSwitchHelperText.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchHelperText.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\nimport { isOnOff } from '../BitkitSwitch.utils';\n\nconst BitkitSwitchHelperText = ({ state, helperText }: Pick<BitkitSwitchDynamicTextProps, 'state' | 'helperText'>) => {\n const { checked, disabled } = useSwitchContext();\n\n if (state === 'skeleton') {\n return <Skeleton height=\"12\" width=\"128\" my=\"2\" />;\n }\n\n if (!helperText) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput';\n\n const props = {\n textStyle: 'comp/input/helperText',\n color: shouldShowAsDisabled ? 'text/disabled' : 'input/text/helper',\n };\n\n if (!isOnOff(helperText)) {\n return <Text {...props}>{helperText}</Text>;\n }\n\n return <Text {...props}>{checked ? helperText.on : helperText.off}</Text>;\n};\n\nexport default BitkitSwitchHelperText;\n"],"mappings":";;;;;;AAOA,IAAM,0BAA0B,EAAE,OAAO,iBAA6E;CACpH,MAAM,EAAE,SAAS,aAAa,kBAAkB;AAEhD,KAAI,UAAU,WACZ,QAAO,oBAAC,UAAD;EAAU,QAAO;EAAK,OAAM;EAAM,IAAG;EAAM,CAAA;AAGpD,KAAI,CAAC,WACH,QAAO;CAKT,MAAM,QAAQ;EACZ,WAAW;EACX,OAJ2B,YAAY,UAAU,kBAInB,kBAAkB;EACjD;AAED,KAAI,CAAC,QAAQ,WAAW,CACtB,QAAO,oBAAC,MAAD;EAAM,GAAI;YAAQ;EAAkB,CAAA;AAG7C,QAAO,oBAAC,MAAD;EAAM,GAAI;YAAQ,UAAU,WAAW,KAAK,WAAW;EAAW,CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';
|
|
2
|
+
declare const BitkitSwitchLabel: ({ label, state, tooltip, optional, }: Pick<BitkitSwitchDynamicTextProps, "label" | "state" | "tooltip" | "optional">) => import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
+
export default BitkitSwitchLabel;
|
|
@@ -4,8 +4,8 @@ import { Text } from "@chakra-ui/react/text";
|
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { Flex } from "@chakra-ui/react/flex";
|
|
6
6
|
import { useSwitchContext } from "@chakra-ui/react/switch";
|
|
7
|
-
//#region lib/components/
|
|
8
|
-
var
|
|
7
|
+
//#region lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx
|
|
8
|
+
var BitkitSwitchLabel = ({ label, state, tooltip, optional }) => {
|
|
9
9
|
const { disabled } = useSwitchContext();
|
|
10
10
|
if (!label) return null;
|
|
11
11
|
const shouldShowAsDisabled = disabled && state !== "disabledInput" && state !== "skeleton";
|
|
@@ -36,6 +36,6 @@ var BitkitToggleLabel = ({ label, state, tooltip, optional }) => {
|
|
|
36
36
|
});
|
|
37
37
|
};
|
|
38
38
|
//#endregion
|
|
39
|
-
export {
|
|
39
|
+
export { BitkitSwitchLabel as default };
|
|
40
40
|
|
|
41
|
-
//# sourceMappingURL=
|
|
41
|
+
//# sourceMappingURL=BitkitSwitchLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitSwitchLabel.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchLabel.tsx"],"sourcesContent":["import { Flex } from '@chakra-ui/react/flex';\nimport { useSwitchContext } from '@chakra-ui/react/switch';\nimport { Text } from '@chakra-ui/react/text';\n\nimport { IconInfoCircle } from '../../../icons';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport type { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';\n\nconst BitkitSwitchLabel = ({\n label,\n state,\n tooltip,\n optional,\n}: Pick<BitkitSwitchDynamicTextProps, 'label' | 'state' | 'tooltip' | 'optional'>) => {\n const { disabled } = useSwitchContext();\n\n if (!label) {\n return null;\n }\n\n const shouldShowAsDisabled = disabled && state !== 'disabledInput' && state !== 'skeleton';\n\n return (\n <Flex gap=\"4\" alignItems=\"center\">\n <Text as=\"span\" textStyle=\"body/md/semibold\" color={shouldShowAsDisabled ? 'text/disabled' : 'text/body'}>\n {label}\n </Text>\n\n {!!optional && (\n <Text\n as=\"span\"\n textStyle=\"body/md/regular\"\n color={shouldShowAsDisabled ? 'text/disabled' : 'input/text/helper'}\n >\n (optional)\n </Text>\n )}\n\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </Flex>\n );\n};\n\nexport default BitkitSwitchLabel;\n"],"mappings":";;;;;;;AAQA,IAAM,qBAAqB,EACzB,OACA,OACA,SACA,eACoF;CACpF,MAAM,EAAE,aAAa,kBAAkB;AAEvC,KAAI,CAAC,MACH,QAAO;CAGT,MAAM,uBAAuB,YAAY,UAAU,mBAAmB,UAAU;AAEhF,QACE,qBAAC,MAAD;EAAM,KAAI;EAAI,YAAW;YAAzB;GACE,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAmB,OAAO,uBAAuB,kBAAkB;cAC1F;IACI,CAAA;GAEN,CAAC,CAAC,YACD,oBAAC,MAAD;IACE,IAAG;IACH,WAAU;IACV,OAAO,uBAAuB,kBAAkB;cACjD;IAEM,CAAA;GAGR,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;KAAkB,CAAA;IACpC,CAAA;GAEb"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { BitkitSwitchProps } from '../BitkitSwitch.types';
|
|
2
|
+
type Props = Pick<BitkitSwitchProps, 'state' | 'children'>;
|
|
3
|
+
declare const BitkitSwitchReadOnly: ({ state, children }: Props) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
4
|
+
export default BitkitSwitchReadOnly;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import BitkitBadge from "../../BitkitBadge/BitkitBadge.js";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useSwitchContext } from "@chakra-ui/react/switch";
|
|
4
|
-
//#region lib/components/
|
|
5
|
-
var
|
|
4
|
+
//#region lib/components/BitkitSwitch/components/BitkitSwitchReadOnly.tsx
|
|
5
|
+
var BitkitSwitchReadOnly = ({ state, children }) => {
|
|
6
6
|
const { checked } = useSwitchContext();
|
|
7
7
|
if (state === "readOnly" && checked) return /* @__PURE__ */ jsx(BitkitBadge, {
|
|
8
8
|
colorPalette: "green",
|
|
@@ -17,6 +17,6 @@ var BitkitToggleReadOnly = ({ state, children }) => {
|
|
|
17
17
|
return children;
|
|
18
18
|
};
|
|
19
19
|
//#endregion
|
|
20
|
-
export {
|
|
20
|
+
export { BitkitSwitchReadOnly as default };
|
|
21
21
|
|
|
22
|
-
//# sourceMappingURL=
|
|
22
|
+
//# sourceMappingURL=BitkitSwitchReadOnly.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"BitkitSwitchReadOnly.js","names":[],"sources":["../../../../lib/components/BitkitSwitch/components/BitkitSwitchReadOnly.tsx"],"sourcesContent":["import { useSwitchContext } from '@chakra-ui/react/switch';\n\nimport BitkitBadge from '../../BitkitBadge/BitkitBadge';\nimport { type BitkitSwitchProps } from '../BitkitSwitch.types';\n\ntype Props = Pick<BitkitSwitchProps, 'state' | 'children'>;\n\nconst BitkitSwitchReadOnly = ({ state, children }: Props) => {\n const { checked } = useSwitchContext();\n\n if (state === 'readOnly' && checked) {\n return (\n <BitkitBadge colorPalette=\"green\" variant=\"subtle\">\n ON\n </BitkitBadge>\n );\n }\n\n if (state === 'readOnly' && !checked) {\n return (\n <BitkitBadge colorPalette=\"neutral\" variant=\"subtle\">\n OFF\n </BitkitBadge>\n );\n }\n\n return children;\n};\n\nexport default BitkitSwitchReadOnly;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,EAAE,OAAO,eAAsB;CAC3D,MAAM,EAAE,YAAY,kBAAkB;AAEtC,KAAI,UAAU,cAAc,QAC1B,QACE,oBAAC,aAAD;EAAa,cAAa;EAAQ,SAAQ;YAAS;EAErC,CAAA;AAIlB,KAAI,UAAU,cAAc,CAAC,QAC3B,QACE,oBAAC,aAAD;EAAa,cAAa;EAAU,SAAQ;YAAS;EAEvC,CAAA;AAIlB,QAAO"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { BitkitSwitchDynamicTextProps } from '../BitkitSwitch.types';
|
|
2
|
+
declare const BitkitSwitchValueText: ({ size, state, valueText, }: Pick<BitkitSwitchDynamicTextProps, "size" | "state" | "valueText">) => import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
+
export default BitkitSwitchValueText;
|