@bitrise/bitkit-v2 0.3.196 → 0.3.197
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitTreeView/BitkitTreeView.d.ts +34 -0
- package/dist/components/BitkitTreeView/BitkitTreeView.js +109 -0
- package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/main.js +2 -1
- package/dist/theme/slot-recipes/TreeView.recipe.d.ts +152 -0
- package/dist/theme/slot-recipes/TreeView.recipe.js +250 -0
- package/dist/theme/slot-recipes/TreeView.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +151 -0
- package/dist/theme/slot-recipes/index.js +3 -1
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { TreeViewBranchControlProps, TreeViewItemProps, TreeViewNodeRenderProps, TreeViewRootProps } from '@chakra-ui/react/tree-view';
|
|
2
|
+
import { ReactElement, ReactNode } from 'react';
|
|
3
|
+
import { BitkitIconComponent } from '../../icons';
|
|
4
|
+
export { createTreeCollection } from '@chakra-ui/react/collection';
|
|
5
|
+
export type { TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails, TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps, TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails, } from '@chakra-ui/react/tree-view';
|
|
6
|
+
export type BitkitTreeViewVariant = 'files' | 'navigation';
|
|
7
|
+
export interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
render: (props: TreeViewNodeRenderProps) => ReactNode;
|
|
10
|
+
variant?: BitkitTreeViewVariant;
|
|
11
|
+
}
|
|
12
|
+
export interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {
|
|
13
|
+
actions?: ReactElement[];
|
|
14
|
+
hasWarning?: boolean;
|
|
15
|
+
label: string;
|
|
16
|
+
subtext?: ReactNode;
|
|
17
|
+
suffixIcon?: BitkitIconComponent;
|
|
18
|
+
suffixText?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {
|
|
21
|
+
actions?: ReactElement[];
|
|
22
|
+
badge?: ReactElement;
|
|
23
|
+
hasWarning?: boolean;
|
|
24
|
+
icon?: BitkitIconComponent;
|
|
25
|
+
label: string;
|
|
26
|
+
subtext?: ReactNode;
|
|
27
|
+
suffixIcon?: BitkitIconComponent;
|
|
28
|
+
suffixText?: string;
|
|
29
|
+
}
|
|
30
|
+
declare const BitkitTreeView: import('react').ForwardRefExoticComponent<BitkitTreeViewRootProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
31
|
+
Branch: import('react').ForwardRefExoticComponent<BitkitTreeViewBranchProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
32
|
+
Leaf: import('react').ForwardRefExoticComponent<BitkitTreeViewLeafProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
33
|
+
};
|
|
34
|
+
export default BitkitTreeView;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import IconChevronRight from "../../icons/IconChevronRight.js";
|
|
2
|
+
import IconFolder from "../../icons/IconFolder.js";
|
|
3
|
+
import IconWarningYellow from "../../icons/IconWarningYellow.js";
|
|
4
|
+
import { Box } from "@chakra-ui/react/box";
|
|
5
|
+
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
+
import { Text } from "@chakra-ui/react/text";
|
|
7
|
+
import { cloneElement, forwardRef } from "react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { createTreeCollection } from "@chakra-ui/react/collection";
|
|
10
|
+
import { createContext as createContext$1 } from "@chakra-ui/react";
|
|
11
|
+
import { TreeView } from "@chakra-ui/react/tree-view";
|
|
12
|
+
//#region lib/components/BitkitTreeView/BitkitTreeView.tsx
|
|
13
|
+
var [VariantProvider, useVariant] = createContext$1({
|
|
14
|
+
name: "BitkitTreeViewVariantContext",
|
|
15
|
+
defaultValue: { variant: "files" }
|
|
16
|
+
});
|
|
17
|
+
var useCustomSlotStyles = (variant) => {
|
|
18
|
+
return useSlotRecipe({ key: "treeView" })({ variant });
|
|
19
|
+
};
|
|
20
|
+
var Root = forwardRef(({ children, render, variant = "files", ...props }, ref) => {
|
|
21
|
+
const indentGuide = variant === "files" ? /* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {}) : void 0;
|
|
22
|
+
return /* @__PURE__ */ jsx(VariantProvider, {
|
|
23
|
+
value: { variant },
|
|
24
|
+
children: /* @__PURE__ */ jsx(TreeView.Root, {
|
|
25
|
+
ref,
|
|
26
|
+
variant,
|
|
27
|
+
...props,
|
|
28
|
+
children: /* @__PURE__ */ jsxs(TreeView.Tree, { children: [/* @__PURE__ */ jsx(TreeView.Node, {
|
|
29
|
+
indentGuide,
|
|
30
|
+
render
|
|
31
|
+
}), children] })
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
Root.displayName = "BitkitTreeView";
|
|
36
|
+
var Branch = forwardRef((props, ref) => {
|
|
37
|
+
const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
|
|
38
|
+
const { variant } = useVariant();
|
|
39
|
+
const styles = useCustomSlotStyles(variant);
|
|
40
|
+
const hasSuffix = hasWarning || SuffixIcon || suffixText;
|
|
41
|
+
const hasActions = actions && actions.length > 0;
|
|
42
|
+
const BranchIcon = variant === "navigation" ? IconChevronRight : IconFolder;
|
|
43
|
+
return /* @__PURE__ */ jsxs(TreeView.BranchControl, {
|
|
44
|
+
ref,
|
|
45
|
+
className: hasActions ? "group" : void 0,
|
|
46
|
+
...rest,
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsx(TreeView.BranchIndicator, { children: /* @__PURE__ */ jsx(BranchIcon, { size: "16" }) }),
|
|
49
|
+
/* @__PURE__ */ jsxs(TreeView.BranchText, { children: [label, subtext && /* @__PURE__ */ jsx(Text, {
|
|
50
|
+
css: styles.secondaryText,
|
|
51
|
+
children: subtext
|
|
52
|
+
})] }),
|
|
53
|
+
hasSuffix && /* @__PURE__ */ jsxs(Box, {
|
|
54
|
+
css: styles.suffixGroup,
|
|
55
|
+
children: [
|
|
56
|
+
hasWarning && /* @__PURE__ */ jsx(IconWarningYellow, { size: "16" }),
|
|
57
|
+
SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, { size: "16" }),
|
|
58
|
+
suffixText && /* @__PURE__ */ jsx("span", { children: suffixText })
|
|
59
|
+
]
|
|
60
|
+
}),
|
|
61
|
+
hasActions && /* @__PURE__ */ jsx(Box, {
|
|
62
|
+
css: styles.actionGroup,
|
|
63
|
+
children: actions.map((action) => cloneElement(action, { size: "xs" }))
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
Branch.displayName = "BitkitTreeView.Branch";
|
|
69
|
+
var Leaf = forwardRef((props, ref) => {
|
|
70
|
+
const { actions, badge, hasWarning, icon: Icon, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
|
|
71
|
+
const { variant } = useVariant();
|
|
72
|
+
const styles = useCustomSlotStyles(variant);
|
|
73
|
+
const hasSuffix = hasWarning || SuffixIcon || suffixText;
|
|
74
|
+
const hasActions = actions && actions.length > 0;
|
|
75
|
+
return /* @__PURE__ */ jsxs(TreeView.Item, {
|
|
76
|
+
ref,
|
|
77
|
+
className: hasActions ? "group" : void 0,
|
|
78
|
+
...rest,
|
|
79
|
+
children: [
|
|
80
|
+
Icon && /* @__PURE__ */ jsx(Icon, { size: "16" }),
|
|
81
|
+
badge && cloneElement(badge, { size: "xxs" }),
|
|
82
|
+
/* @__PURE__ */ jsxs(TreeView.ItemText, { children: [label, subtext && /* @__PURE__ */ jsx(Text, {
|
|
83
|
+
css: styles.secondaryText,
|
|
84
|
+
children: subtext
|
|
85
|
+
})] }),
|
|
86
|
+
hasSuffix && /* @__PURE__ */ jsxs(Box, {
|
|
87
|
+
css: styles.suffixGroup,
|
|
88
|
+
children: [
|
|
89
|
+
hasWarning && /* @__PURE__ */ jsx(IconWarningYellow, { size: "16" }),
|
|
90
|
+
SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, { size: "16" }),
|
|
91
|
+
suffixText && /* @__PURE__ */ jsx("span", { children: suffixText })
|
|
92
|
+
]
|
|
93
|
+
}),
|
|
94
|
+
hasActions && /* @__PURE__ */ jsx(Box, {
|
|
95
|
+
css: styles.actionGroup,
|
|
96
|
+
children: actions.map((action) => cloneElement(action, { size: "xs" }))
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
Leaf.displayName = "BitkitTreeView.Leaf";
|
|
102
|
+
var BitkitTreeView = Object.assign(Root, {
|
|
103
|
+
Branch,
|
|
104
|
+
Leaf
|
|
105
|
+
});
|
|
106
|
+
//#endregion
|
|
107
|
+
export { createTreeCollection, BitkitTreeView as default };
|
|
108
|
+
|
|
109
|
+
//# sourceMappingURL=BitkitTreeView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n TreeView,\n type TreeViewBranchControlProps,\n type TreeViewItemProps,\n type TreeViewNodeRenderProps,\n type TreeViewRootProps,\n} from '@chakra-ui/react/tree-view';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' | 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n name: 'BitkitTreeViewVariantContext',\n defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n const recipe = useSlotRecipe({ key: 'treeView' });\n return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n children?: ReactNode;\n render: (props: TreeViewNodeRenderProps) => ReactNode;\n variant?: BitkitTreeViewVariant;\n}\n\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n ({ children, render, variant = 'files', ...props }, ref) => {\n const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n\n return (\n <VariantProvider value={{ variant }}>\n <TreeView.Root ref={ref} variant={variant} {...props}>\n <TreeView.Tree>\n <TreeView.Node indentGuide={indentGuide} render={render as never} />\n {children}\n </TreeView.Tree>\n </TreeView.Root>\n </VariantProvider>\n );\n },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n actions?: ReactElement[];\n hasWarning?: boolean;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning || SuffixIcon || suffixText;\n const hasActions = actions && actions.length > 0;\n\n const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n return (\n <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n <TreeView.BranchIndicator>\n <BranchIcon size=\"16\" />\n </TreeView.BranchIndicator>\n <TreeView.BranchText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.BranchText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.BranchControl>\n );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n actions?: ReactElement[];\n badge?: ReactElement;\n hasWarning?: boolean;\n icon?: BitkitIconComponent;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n const { actions, badge, hasWarning, icon: Icon, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning || SuffixIcon || suffixText;\n const hasActions = actions && actions.length > 0;\n\n return (\n <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n {Icon && <Icon size=\"16\" />}\n {badge && cloneElement(badge, { size: 'xxs' })}\n <TreeView.ItemText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.ItemText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.Item>\n );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = Object.assign(Root, {\n Branch,\n Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}
|
|
@@ -67,4 +67,5 @@ export { type BitkitToastProps, default as createBitkitToast } from './BitkitToa
|
|
|
67
67
|
export { default as BitkitToggle, type BitkitToggleProps } from './BitkitToggle';
|
|
68
68
|
export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './BitkitToggleButton/BitkitToggleButton';
|
|
69
69
|
export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
|
|
70
|
+
export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
|
|
70
71
|
export { default as BitkitUnorderedList, type BitkitUnorderedListItemProps, type BitkitUnorderedListProps, } from './BitkitUnorderedList/BitkitUnorderedList';
|
package/dist/main.js
CHANGED
|
@@ -349,6 +349,7 @@ import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
|
|
|
349
349
|
import createBitkitToast from "./components/BitkitToast/BitkitToast.js";
|
|
350
350
|
import BitkitToggle from "./components/BitkitToggle/BitkitToggle.js";
|
|
351
351
|
import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButton.js";
|
|
352
|
+
import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
|
|
352
353
|
import bitkitTheme from "./theme/index.js";
|
|
353
354
|
import Provider from "./providers/BitkitProvider.js";
|
|
354
|
-
export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitUnorderedList_default as BitkitUnorderedList, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast };
|
|
355
|
+
export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitTreeView, BitkitUnorderedList_default as BitkitUnorderedList, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
2
|
+
variant: {
|
|
3
|
+
files: {
|
|
4
|
+
branchControl: {
|
|
5
|
+
borderRadius: "4";
|
|
6
|
+
paddingInlineEnd: "16";
|
|
7
|
+
'& > svg': {
|
|
8
|
+
marginBlockStart: "8";
|
|
9
|
+
};
|
|
10
|
+
'& > .badge': {
|
|
11
|
+
marginBlockStart: "6";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
item: {
|
|
15
|
+
borderRadius: "4";
|
|
16
|
+
paddingInlineEnd: "16";
|
|
17
|
+
'& > svg': {
|
|
18
|
+
marginBlockStart: "8";
|
|
19
|
+
};
|
|
20
|
+
'& > .badge': {
|
|
21
|
+
marginBlockStart: "6";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
branchIndicator: {
|
|
25
|
+
alignItems: "flex-start";
|
|
26
|
+
marginBlockStart: "8";
|
|
27
|
+
alignSelf: "stretch";
|
|
28
|
+
position: "relative";
|
|
29
|
+
_open: {
|
|
30
|
+
'&::after': {
|
|
31
|
+
content: "\"\"";
|
|
32
|
+
position: "absolute";
|
|
33
|
+
insetBlockStart: "16";
|
|
34
|
+
insetBlockEnd: number;
|
|
35
|
+
insetInlineStart: "50%";
|
|
36
|
+
width: "1";
|
|
37
|
+
background: "border/regular";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
branchText: {
|
|
42
|
+
paddingBlock: "6";
|
|
43
|
+
};
|
|
44
|
+
itemText: {
|
|
45
|
+
paddingBlock: "6";
|
|
46
|
+
};
|
|
47
|
+
suffixGroup: {
|
|
48
|
+
height: string;
|
|
49
|
+
'& > span': {
|
|
50
|
+
marginBlockEnd: "-1";
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
branchIndentGuide: {
|
|
54
|
+
height: "100%";
|
|
55
|
+
width: "1";
|
|
56
|
+
background: "border/regular";
|
|
57
|
+
position: "absolute";
|
|
58
|
+
insetBlockStart: number;
|
|
59
|
+
'--tree-depth': "calc(var(--depth) - 1)";
|
|
60
|
+
'--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
|
|
61
|
+
'--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
|
|
62
|
+
'--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
|
|
63
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
|
|
64
|
+
zIndex: number;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
navigation: {
|
|
68
|
+
branchControl: {
|
|
69
|
+
borderRadius: number;
|
|
70
|
+
paddingInlineEnd: "16";
|
|
71
|
+
'&::before': {
|
|
72
|
+
content: "\"\"";
|
|
73
|
+
position: "absolute";
|
|
74
|
+
insetBlockStart: number;
|
|
75
|
+
insetInlineStart: "var(--tree-offset)";
|
|
76
|
+
insetInlineEnd: number;
|
|
77
|
+
height: "1";
|
|
78
|
+
background: "border/minimal";
|
|
79
|
+
};
|
|
80
|
+
_selected: {
|
|
81
|
+
'&::after': {
|
|
82
|
+
content: "\"\"";
|
|
83
|
+
position: "absolute";
|
|
84
|
+
insetBlock: number;
|
|
85
|
+
insetInlineEnd: number;
|
|
86
|
+
width: "4";
|
|
87
|
+
background: "border/selected";
|
|
88
|
+
borderRadius: "0 2px 2px 0";
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
item: {
|
|
93
|
+
borderRadius: number;
|
|
94
|
+
paddingInlineEnd: "16";
|
|
95
|
+
'&::before': {
|
|
96
|
+
content: "\"\"";
|
|
97
|
+
position: "absolute";
|
|
98
|
+
insetBlockStart: number;
|
|
99
|
+
insetInlineStart: "var(--tree-offset)";
|
|
100
|
+
insetInlineEnd: number;
|
|
101
|
+
height: "1";
|
|
102
|
+
background: "border/minimal";
|
|
103
|
+
};
|
|
104
|
+
'& > svg': {
|
|
105
|
+
marginBlockStart: string;
|
|
106
|
+
};
|
|
107
|
+
_selected: {
|
|
108
|
+
'&::after': {
|
|
109
|
+
content: "\"\"";
|
|
110
|
+
position: "absolute";
|
|
111
|
+
insetBlock: number;
|
|
112
|
+
insetInlineEnd: number;
|
|
113
|
+
width: "4";
|
|
114
|
+
background: "border/selected";
|
|
115
|
+
borderRadius: "0 2px 2px 0";
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
branchIndicator: {
|
|
120
|
+
marginBlockStart: "8";
|
|
121
|
+
transformOrigin: "center";
|
|
122
|
+
transitionDuration: "normal";
|
|
123
|
+
transitionProperty: "transform";
|
|
124
|
+
transitionTimingFunction: "default";
|
|
125
|
+
_open: {
|
|
126
|
+
transform: "rotate(90deg)";
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
branchText: {
|
|
130
|
+
paddingBlock: "8";
|
|
131
|
+
gap: "4";
|
|
132
|
+
_open: {
|
|
133
|
+
textStyle: "body/md/semibold";
|
|
134
|
+
color: "text/primary";
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
itemText: {
|
|
138
|
+
paddingBlock: "8";
|
|
139
|
+
};
|
|
140
|
+
suffixGroup: {
|
|
141
|
+
height: string;
|
|
142
|
+
'& > span': {
|
|
143
|
+
marginBlockEnd: "-1";
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
branchIndentGuide: {
|
|
147
|
+
display: "none";
|
|
148
|
+
};
|
|
149
|
+
};
|
|
150
|
+
};
|
|
151
|
+
}>;
|
|
152
|
+
export default treeViewSlotRecipe;
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
import { rem } from "../themeUtils.js";
|
|
2
|
+
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
+
import { treeViewAnatomy } from "@chakra-ui/react/anatomy";
|
|
4
|
+
//#region lib/theme/slot-recipes/TreeView.recipe.ts
|
|
5
|
+
var baseItemStyle = {
|
|
6
|
+
display: "flex",
|
|
7
|
+
alignItems: "flex-start",
|
|
8
|
+
gap: "var(--tree-item-gap)",
|
|
9
|
+
cursor: "pointer",
|
|
10
|
+
userSelect: "none",
|
|
11
|
+
position: "relative",
|
|
12
|
+
"--tree-depth": "calc(var(--depth) - 1)",
|
|
13
|
+
"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
|
|
14
|
+
"--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
|
|
15
|
+
"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
|
|
16
|
+
paddingInlineStart: "var(--tree-offset)",
|
|
17
|
+
focusVisibleRing: "inside",
|
|
18
|
+
focusRingWidth: "2px",
|
|
19
|
+
_hover: {
|
|
20
|
+
background: "background/secondary",
|
|
21
|
+
_active: { background: "background/tertiary" }
|
|
22
|
+
},
|
|
23
|
+
_active: { background: "background/tertiary" },
|
|
24
|
+
_selected: {
|
|
25
|
+
background: "background/selected",
|
|
26
|
+
_hover: {
|
|
27
|
+
background: "background/selected-hover",
|
|
28
|
+
_active: { background: "background/selected-hover" }
|
|
29
|
+
},
|
|
30
|
+
_active: { background: "background/selected-hover" }
|
|
31
|
+
},
|
|
32
|
+
_disabled: {
|
|
33
|
+
opacity: .4,
|
|
34
|
+
cursor: "not-allowed"
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
var baseTextStyle = {
|
|
38
|
+
flex: 1,
|
|
39
|
+
minWidth: 0,
|
|
40
|
+
display: "flex",
|
|
41
|
+
flexDirection: "column"
|
|
42
|
+
};
|
|
43
|
+
var treeViewSlotRecipe = defineSlotRecipe({
|
|
44
|
+
className: "bitkit-tree-view",
|
|
45
|
+
slots: [
|
|
46
|
+
...treeViewAnatomy.keys(),
|
|
47
|
+
"actionGroup",
|
|
48
|
+
"suffixGroup",
|
|
49
|
+
"secondaryText"
|
|
50
|
+
],
|
|
51
|
+
base: {
|
|
52
|
+
root: {
|
|
53
|
+
width: "full",
|
|
54
|
+
display: "flex",
|
|
55
|
+
flexDirection: "column"
|
|
56
|
+
},
|
|
57
|
+
tree: {
|
|
58
|
+
display: "flex",
|
|
59
|
+
flexDirection: "column",
|
|
60
|
+
textStyle: "body/md/regular",
|
|
61
|
+
color: "text/body",
|
|
62
|
+
"--tree-item-gap": "spacing.8",
|
|
63
|
+
"--tree-indentation": "spacing.16",
|
|
64
|
+
"--tree-padding-inline-start": "spacing.8",
|
|
65
|
+
"--tree-icon-size": "spacing.16",
|
|
66
|
+
_icon: { boxSize: "var(--tree-icon-size)" }
|
|
67
|
+
},
|
|
68
|
+
label: {
|
|
69
|
+
fontWeight: "medium",
|
|
70
|
+
textStyle: "body/sm/regular"
|
|
71
|
+
},
|
|
72
|
+
branch: { position: "relative" },
|
|
73
|
+
branchContent: {
|
|
74
|
+
position: "relative",
|
|
75
|
+
overflow: "hidden",
|
|
76
|
+
_open: {
|
|
77
|
+
animationName: "expand-height, fade-in",
|
|
78
|
+
animationDuration: "moderate"
|
|
79
|
+
},
|
|
80
|
+
_closed: {
|
|
81
|
+
animationName: "collapse-height, fade-out",
|
|
82
|
+
animationDuration: "moderate"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
branchIndicator: {
|
|
86
|
+
display: "flex",
|
|
87
|
+
justifyContent: "center",
|
|
88
|
+
color: "icon/secondary"
|
|
89
|
+
},
|
|
90
|
+
branchTrigger: {
|
|
91
|
+
display: "inline-flex",
|
|
92
|
+
alignItems: "center",
|
|
93
|
+
justifyContent: "center"
|
|
94
|
+
},
|
|
95
|
+
branchControl: { ...baseItemStyle },
|
|
96
|
+
item: { ...baseItemStyle },
|
|
97
|
+
branchText: baseTextStyle,
|
|
98
|
+
itemText: baseTextStyle,
|
|
99
|
+
branchIndentGuide: {},
|
|
100
|
+
itemIndicator: {},
|
|
101
|
+
nodeCheckbox: { display: "inline-flex" },
|
|
102
|
+
suffixGroup: {
|
|
103
|
+
display: "flex",
|
|
104
|
+
gap: "8",
|
|
105
|
+
alignItems: "center",
|
|
106
|
+
justifyContent: "flex-end",
|
|
107
|
+
color: "text/secondary",
|
|
108
|
+
"[data-selected] > &, [data-state=\"open\"] > &": { color: "text/primary" },
|
|
109
|
+
paddingInlineStart: "16",
|
|
110
|
+
flexShrink: 0,
|
|
111
|
+
_groupHover: { display: "none" }
|
|
112
|
+
},
|
|
113
|
+
actionGroup: {
|
|
114
|
+
display: "none",
|
|
115
|
+
alignItems: "center",
|
|
116
|
+
justifyContent: "flex-end",
|
|
117
|
+
paddingInlineStart: "16",
|
|
118
|
+
flexShrink: 0,
|
|
119
|
+
_groupHover: { display: "flex" }
|
|
120
|
+
},
|
|
121
|
+
secondaryText: {
|
|
122
|
+
textStyle: "body/sm/regular",
|
|
123
|
+
color: "text/secondary"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
variants: { variant: {
|
|
127
|
+
files: {
|
|
128
|
+
branchControl: {
|
|
129
|
+
borderRadius: "4",
|
|
130
|
+
paddingInlineEnd: "16",
|
|
131
|
+
"& > svg": { marginBlockStart: "8" },
|
|
132
|
+
"& > .badge": { marginBlockStart: "6" }
|
|
133
|
+
},
|
|
134
|
+
item: {
|
|
135
|
+
borderRadius: "4",
|
|
136
|
+
paddingInlineEnd: "16",
|
|
137
|
+
"& > svg": { marginBlockStart: "8" },
|
|
138
|
+
"& > .badge": { marginBlockStart: "6" }
|
|
139
|
+
},
|
|
140
|
+
branchIndicator: {
|
|
141
|
+
alignItems: "flex-start",
|
|
142
|
+
marginBlockStart: "8",
|
|
143
|
+
alignSelf: "stretch",
|
|
144
|
+
position: "relative",
|
|
145
|
+
_open: { "&::after": {
|
|
146
|
+
content: "\"\"",
|
|
147
|
+
position: "absolute",
|
|
148
|
+
insetBlockStart: "16",
|
|
149
|
+
insetBlockEnd: 0,
|
|
150
|
+
insetInlineStart: "50%",
|
|
151
|
+
width: "1",
|
|
152
|
+
background: "border/regular"
|
|
153
|
+
} }
|
|
154
|
+
},
|
|
155
|
+
branchText: { paddingBlock: "6" },
|
|
156
|
+
itemText: { paddingBlock: "6" },
|
|
157
|
+
suffixGroup: {
|
|
158
|
+
height: rem(31),
|
|
159
|
+
"& > span": { marginBlockEnd: "-1" }
|
|
160
|
+
},
|
|
161
|
+
branchIndentGuide: {
|
|
162
|
+
height: "100%",
|
|
163
|
+
width: "1",
|
|
164
|
+
background: "border/regular",
|
|
165
|
+
position: "absolute",
|
|
166
|
+
insetBlockStart: 0,
|
|
167
|
+
"--tree-depth": "calc(var(--depth) - 1)",
|
|
168
|
+
"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
|
|
169
|
+
"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))",
|
|
170
|
+
"--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
|
|
171
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
|
|
172
|
+
zIndex: 1
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
navigation: {
|
|
176
|
+
branchControl: {
|
|
177
|
+
borderRadius: 0,
|
|
178
|
+
paddingInlineEnd: "16",
|
|
179
|
+
"&::before": {
|
|
180
|
+
content: "\"\"",
|
|
181
|
+
position: "absolute",
|
|
182
|
+
insetBlockStart: 0,
|
|
183
|
+
insetInlineStart: "var(--tree-offset)",
|
|
184
|
+
insetInlineEnd: 0,
|
|
185
|
+
height: "1",
|
|
186
|
+
background: "border/minimal"
|
|
187
|
+
},
|
|
188
|
+
_selected: { "&::after": {
|
|
189
|
+
content: "\"\"",
|
|
190
|
+
position: "absolute",
|
|
191
|
+
insetBlock: 0,
|
|
192
|
+
insetInlineEnd: 0,
|
|
193
|
+
width: "4",
|
|
194
|
+
background: "border/selected",
|
|
195
|
+
borderRadius: "0 2px 2px 0"
|
|
196
|
+
} }
|
|
197
|
+
},
|
|
198
|
+
item: {
|
|
199
|
+
borderRadius: 0,
|
|
200
|
+
paddingInlineEnd: "16",
|
|
201
|
+
"&::before": {
|
|
202
|
+
content: "\"\"",
|
|
203
|
+
position: "absolute",
|
|
204
|
+
insetBlockStart: 0,
|
|
205
|
+
insetInlineStart: "var(--tree-offset)",
|
|
206
|
+
insetInlineEnd: 0,
|
|
207
|
+
height: "1",
|
|
208
|
+
background: "border/minimal"
|
|
209
|
+
},
|
|
210
|
+
"& > svg": { marginBlockStart: rem(9) },
|
|
211
|
+
_selected: { "&::after": {
|
|
212
|
+
content: "\"\"",
|
|
213
|
+
position: "absolute",
|
|
214
|
+
insetBlock: 0,
|
|
215
|
+
insetInlineEnd: 0,
|
|
216
|
+
width: "4",
|
|
217
|
+
background: "border/selected",
|
|
218
|
+
borderRadius: "0 2px 2px 0"
|
|
219
|
+
} }
|
|
220
|
+
},
|
|
221
|
+
branchIndicator: {
|
|
222
|
+
marginBlockStart: "8",
|
|
223
|
+
transformOrigin: "center",
|
|
224
|
+
transitionDuration: "normal",
|
|
225
|
+
transitionProperty: "transform",
|
|
226
|
+
transitionTimingFunction: "default",
|
|
227
|
+
_open: { transform: "rotate(90deg)" }
|
|
228
|
+
},
|
|
229
|
+
branchText: {
|
|
230
|
+
paddingBlock: "8",
|
|
231
|
+
gap: "4",
|
|
232
|
+
_open: {
|
|
233
|
+
textStyle: "body/md/semibold",
|
|
234
|
+
color: "text/primary"
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
itemText: { paddingBlock: "8" },
|
|
238
|
+
suffixGroup: {
|
|
239
|
+
height: rem(35),
|
|
240
|
+
"& > span": { marginBlockEnd: "-1" }
|
|
241
|
+
},
|
|
242
|
+
branchIndentGuide: { display: "none" }
|
|
243
|
+
}
|
|
244
|
+
} },
|
|
245
|
+
defaultVariants: { variant: "files" }
|
|
246
|
+
});
|
|
247
|
+
//#endregion
|
|
248
|
+
export { treeViewSlotRecipe as default };
|
|
249
|
+
|
|
250
|
+
//# sourceMappingURL=TreeView.recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TreeView.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TreeView.recipe.ts"],"sourcesContent":["import { treeViewAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst baseItemStyle = {\n display: 'flex',\n alignItems: 'flex-start',\n gap: 'var(--tree-item-gap)',\n cursor: 'pointer',\n userSelect: 'none',\n position: 'relative',\n '--tree-depth': 'calc(var(--depth) - 1)',\n '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n '--tree-icon-offset': 'calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)',\n '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))',\n paddingInlineStart: 'var(--tree-offset)',\n focusVisibleRing: 'inside',\n focusRingWidth: '2px',\n _hover: {\n background: 'background/secondary',\n _active: {\n background: 'background/tertiary',\n },\n },\n _active: {\n background: 'background/tertiary',\n },\n _selected: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n _active: {\n background: 'background/selected-hover',\n },\n },\n _active: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n opacity: 0.4,\n cursor: 'not-allowed',\n },\n} as const;\n\nconst baseTextStyle = {\n flex: 1,\n minWidth: 0,\n display: 'flex',\n flexDirection: 'column',\n} as const;\n\nconst treeViewSlotRecipe = defineSlotRecipe({\n className: 'bitkit-tree-view',\n slots: [...treeViewAnatomy.keys(), 'actionGroup', 'suffixGroup', 'secondaryText'],\n base: {\n root: {\n width: 'full',\n display: 'flex',\n flexDirection: 'column',\n },\n tree: {\n display: 'flex',\n flexDirection: 'column',\n textStyle: 'body/md/regular',\n color: 'text/body',\n '--tree-item-gap': 'spacing.8',\n '--tree-indentation': 'spacing.16',\n '--tree-padding-inline-start': 'spacing.8',\n '--tree-icon-size': 'spacing.16',\n _icon: {\n boxSize: 'var(--tree-icon-size)',\n },\n },\n label: {\n fontWeight: 'medium',\n textStyle: 'body/sm/regular',\n },\n branch: {\n position: 'relative',\n },\n branchContent: {\n position: 'relative',\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n branchIndicator: {\n display: 'flex',\n justifyContent: 'center',\n color: 'icon/secondary',\n },\n branchTrigger: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n branchControl: {\n ...baseItemStyle,\n },\n item: {\n ...baseItemStyle,\n },\n branchText: baseTextStyle,\n itemText: baseTextStyle,\n branchIndentGuide: {},\n itemIndicator: {},\n nodeCheckbox: {\n display: 'inline-flex',\n },\n suffixGroup: {\n display: 'flex',\n gap: '8',\n alignItems: 'center',\n justifyContent: 'flex-end',\n color: 'text/secondary',\n '[data-selected] > &, [data-state=\"open\"] > &': {\n color: 'text/primary',\n },\n paddingInlineStart: '16',\n flexShrink: 0,\n _groupHover: {\n display: 'none',\n },\n },\n actionGroup: {\n display: 'none',\n alignItems: 'center',\n justifyContent: 'flex-end',\n paddingInlineStart: '16',\n flexShrink: 0,\n _groupHover: {\n display: 'flex',\n },\n },\n secondaryText: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n },\n variants: {\n variant: {\n files: {\n branchControl: {\n borderRadius: '4',\n paddingInlineEnd: '16',\n '& > svg': {\n marginBlockStart: '8',\n },\n '& > .badge': {\n marginBlockStart: '6',\n },\n },\n item: {\n borderRadius: '4',\n paddingInlineEnd: '16',\n '& > svg': {\n marginBlockStart: '8',\n },\n '& > .badge': {\n marginBlockStart: '6',\n },\n },\n branchIndicator: {\n alignItems: 'flex-start',\n marginBlockStart: '8',\n alignSelf: 'stretch',\n position: 'relative',\n _open: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: '16',\n insetBlockEnd: 0,\n insetInlineStart: '50%',\n width: '1',\n background: 'border/regular',\n },\n },\n },\n branchText: {\n paddingBlock: '6',\n },\n itemText: {\n paddingBlock: '6',\n },\n suffixGroup: {\n height: rem(31),\n '& > span': {\n marginBlockEnd: '-1',\n },\n },\n branchIndentGuide: {\n height: '100%',\n width: '1',\n background: 'border/regular',\n position: 'absolute',\n insetBlockStart: 0,\n '--tree-depth': 'calc(var(--depth) - 1)',\n '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))',\n '--tree-icon-offset': 'calc(var(--tree-icon-size) * 0.5 * var(--depth))',\n insetInlineStart: 'calc(var(--tree-offset) + var(--tree-icon-offset))',\n zIndex: 1,\n },\n },\n navigation: {\n branchControl: {\n borderRadius: 0,\n paddingInlineEnd: '16',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInlineStart: 'var(--tree-offset)',\n insetInlineEnd: 0,\n height: '1',\n background: 'border/minimal',\n },\n _selected: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlock: 0,\n insetInlineEnd: 0,\n width: '4',\n background: 'border/selected',\n borderRadius: '0 2px 2px 0',\n },\n },\n },\n item: {\n borderRadius: 0,\n paddingInlineEnd: '16',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n insetBlockStart: 0,\n insetInlineStart: 'var(--tree-offset)',\n insetInlineEnd: 0,\n height: '1',\n background: 'border/minimal',\n },\n '& > svg': {\n marginBlockStart: rem(9),\n },\n _selected: {\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n insetBlock: 0,\n insetInlineEnd: 0,\n width: '4',\n background: 'border/selected',\n borderRadius: '0 2px 2px 0',\n },\n },\n },\n branchIndicator: {\n marginBlockStart: '8',\n transformOrigin: 'center',\n transitionDuration: 'normal',\n transitionProperty: 'transform',\n transitionTimingFunction: 'default',\n _open: {\n transform: 'rotate(90deg)',\n },\n },\n branchText: {\n paddingBlock: '8',\n gap: '4',\n _open: {\n textStyle: 'body/md/semibold',\n color: 'text/primary',\n },\n },\n itemText: {\n paddingBlock: '8',\n },\n suffixGroup: {\n height: rem(35),\n '& > span': {\n marginBlockEnd: '-1',\n },\n },\n branchIndentGuide: {\n display: 'none',\n },\n },\n },\n },\n defaultVariants: {\n variant: 'files',\n },\n});\n\nexport default treeViewSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -1834,5 +1834,156 @@ declare const slotRecipes: {
|
|
|
1834
1834
|
};
|
|
1835
1835
|
};
|
|
1836
1836
|
}>;
|
|
1837
|
+
treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
|
|
1838
|
+
variant: {
|
|
1839
|
+
files: {
|
|
1840
|
+
branchControl: {
|
|
1841
|
+
borderRadius: "4";
|
|
1842
|
+
paddingInlineEnd: "16";
|
|
1843
|
+
'& > svg': {
|
|
1844
|
+
marginBlockStart: "8";
|
|
1845
|
+
};
|
|
1846
|
+
'& > .badge': {
|
|
1847
|
+
marginBlockStart: "6";
|
|
1848
|
+
};
|
|
1849
|
+
};
|
|
1850
|
+
item: {
|
|
1851
|
+
borderRadius: "4";
|
|
1852
|
+
paddingInlineEnd: "16";
|
|
1853
|
+
'& > svg': {
|
|
1854
|
+
marginBlockStart: "8";
|
|
1855
|
+
};
|
|
1856
|
+
'& > .badge': {
|
|
1857
|
+
marginBlockStart: "6";
|
|
1858
|
+
};
|
|
1859
|
+
};
|
|
1860
|
+
branchIndicator: {
|
|
1861
|
+
alignItems: "flex-start";
|
|
1862
|
+
marginBlockStart: "8";
|
|
1863
|
+
alignSelf: "stretch";
|
|
1864
|
+
position: "relative";
|
|
1865
|
+
_open: {
|
|
1866
|
+
'&::after': {
|
|
1867
|
+
content: "\"\"";
|
|
1868
|
+
position: "absolute";
|
|
1869
|
+
insetBlockStart: "16";
|
|
1870
|
+
insetBlockEnd: number;
|
|
1871
|
+
insetInlineStart: "50%";
|
|
1872
|
+
width: "1";
|
|
1873
|
+
background: "border/regular";
|
|
1874
|
+
};
|
|
1875
|
+
};
|
|
1876
|
+
};
|
|
1877
|
+
branchText: {
|
|
1878
|
+
paddingBlock: "6";
|
|
1879
|
+
};
|
|
1880
|
+
itemText: {
|
|
1881
|
+
paddingBlock: "6";
|
|
1882
|
+
};
|
|
1883
|
+
suffixGroup: {
|
|
1884
|
+
height: string;
|
|
1885
|
+
'& > span': {
|
|
1886
|
+
marginBlockEnd: "-1";
|
|
1887
|
+
};
|
|
1888
|
+
};
|
|
1889
|
+
branchIndentGuide: {
|
|
1890
|
+
height: "100%";
|
|
1891
|
+
width: "1";
|
|
1892
|
+
background: "border/regular";
|
|
1893
|
+
position: "absolute";
|
|
1894
|
+
insetBlockStart: number;
|
|
1895
|
+
'--tree-depth': "calc(var(--depth) - 1)";
|
|
1896
|
+
'--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
|
|
1897
|
+
'--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
|
|
1898
|
+
'--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
|
|
1899
|
+
insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
|
|
1900
|
+
zIndex: number;
|
|
1901
|
+
};
|
|
1902
|
+
};
|
|
1903
|
+
navigation: {
|
|
1904
|
+
branchControl: {
|
|
1905
|
+
borderRadius: number;
|
|
1906
|
+
paddingInlineEnd: "16";
|
|
1907
|
+
'&::before': {
|
|
1908
|
+
content: "\"\"";
|
|
1909
|
+
position: "absolute";
|
|
1910
|
+
insetBlockStart: number;
|
|
1911
|
+
insetInlineStart: "var(--tree-offset)";
|
|
1912
|
+
insetInlineEnd: number;
|
|
1913
|
+
height: "1";
|
|
1914
|
+
background: "border/minimal";
|
|
1915
|
+
};
|
|
1916
|
+
_selected: {
|
|
1917
|
+
'&::after': {
|
|
1918
|
+
content: "\"\"";
|
|
1919
|
+
position: "absolute";
|
|
1920
|
+
insetBlock: number;
|
|
1921
|
+
insetInlineEnd: number;
|
|
1922
|
+
width: "4";
|
|
1923
|
+
background: "border/selected";
|
|
1924
|
+
borderRadius: "0 2px 2px 0";
|
|
1925
|
+
};
|
|
1926
|
+
};
|
|
1927
|
+
};
|
|
1928
|
+
item: {
|
|
1929
|
+
borderRadius: number;
|
|
1930
|
+
paddingInlineEnd: "16";
|
|
1931
|
+
'&::before': {
|
|
1932
|
+
content: "\"\"";
|
|
1933
|
+
position: "absolute";
|
|
1934
|
+
insetBlockStart: number;
|
|
1935
|
+
insetInlineStart: "var(--tree-offset)";
|
|
1936
|
+
insetInlineEnd: number;
|
|
1937
|
+
height: "1";
|
|
1938
|
+
background: "border/minimal";
|
|
1939
|
+
};
|
|
1940
|
+
'& > svg': {
|
|
1941
|
+
marginBlockStart: string;
|
|
1942
|
+
};
|
|
1943
|
+
_selected: {
|
|
1944
|
+
'&::after': {
|
|
1945
|
+
content: "\"\"";
|
|
1946
|
+
position: "absolute";
|
|
1947
|
+
insetBlock: number;
|
|
1948
|
+
insetInlineEnd: number;
|
|
1949
|
+
width: "4";
|
|
1950
|
+
background: "border/selected";
|
|
1951
|
+
borderRadius: "0 2px 2px 0";
|
|
1952
|
+
};
|
|
1953
|
+
};
|
|
1954
|
+
};
|
|
1955
|
+
branchIndicator: {
|
|
1956
|
+
marginBlockStart: "8";
|
|
1957
|
+
transformOrigin: "center";
|
|
1958
|
+
transitionDuration: "normal";
|
|
1959
|
+
transitionProperty: "transform";
|
|
1960
|
+
transitionTimingFunction: "default";
|
|
1961
|
+
_open: {
|
|
1962
|
+
transform: "rotate(90deg)";
|
|
1963
|
+
};
|
|
1964
|
+
};
|
|
1965
|
+
branchText: {
|
|
1966
|
+
paddingBlock: "8";
|
|
1967
|
+
gap: "4";
|
|
1968
|
+
_open: {
|
|
1969
|
+
textStyle: "body/md/semibold";
|
|
1970
|
+
color: "text/primary";
|
|
1971
|
+
};
|
|
1972
|
+
};
|
|
1973
|
+
itemText: {
|
|
1974
|
+
paddingBlock: "8";
|
|
1975
|
+
};
|
|
1976
|
+
suffixGroup: {
|
|
1977
|
+
height: string;
|
|
1978
|
+
'& > span': {
|
|
1979
|
+
marginBlockEnd: "-1";
|
|
1980
|
+
};
|
|
1981
|
+
};
|
|
1982
|
+
branchIndentGuide: {
|
|
1983
|
+
display: "none";
|
|
1984
|
+
};
|
|
1985
|
+
};
|
|
1986
|
+
};
|
|
1987
|
+
}>;
|
|
1837
1988
|
};
|
|
1838
1989
|
export default slotRecipes;
|
|
@@ -49,6 +49,7 @@ import tagSlotRecipe from "./Tag.recipe.js";
|
|
|
49
49
|
import tagsInputSlotRecipe from "./TagsInput.recipe.js";
|
|
50
50
|
import toastSlotRecipe from "./Toast.recipe.js";
|
|
51
51
|
import tooltipSlotRecipe from "./Tooltip.recipe.js";
|
|
52
|
+
import treeViewSlotRecipe from "./TreeView.recipe.js";
|
|
52
53
|
//#region lib/theme/slot-recipes/index.ts
|
|
53
54
|
var slotRecipes = {
|
|
54
55
|
accordion: accordionSlotRecipe,
|
|
@@ -101,7 +102,8 @@ var slotRecipes = {
|
|
|
101
102
|
tag: tagSlotRecipe,
|
|
102
103
|
tagsInput: tagsInputSlotRecipe,
|
|
103
104
|
toast: toastSlotRecipe,
|
|
104
|
-
tooltip: tooltipSlotRecipe
|
|
105
|
+
tooltip: tooltipSlotRecipe,
|
|
106
|
+
treeView: treeViewSlotRecipe
|
|
105
107
|
};
|
|
106
108
|
//#endregion
|
|
107
109
|
export { slotRecipes as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n sidebar: sidebarSlotRecipe,\n select: selectSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n sidebar: sidebarSlotRecipe,\n select: selectSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;CACX"}
|