@bitrise/bitkit-v2 0.3.414 → 0.3.415
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/BitkitControlButton/BitkitControlButton.js +1 -0
- package/dist/components/BitkitControlButton/BitkitControlButton.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts +2 -0
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js +15 -11
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts +74 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js +263 -0
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/main.js +2 -2
- package/dist/theme/slot-recipes/GroupHeading.recipe.js +4 -1
- package/dist/theme/slot-recipes/GroupHeading.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/PageSidebar.recipe.d.ts +85 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js +276 -0
- package/dist/theme/slot-recipes/PageSidebar.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +84 -21
- package/dist/theme/slot-recipes/index.js +2 -2
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/utilities/useIsTruncated.d.ts +27 -0
- package/dist/utilities/useIsTruncated.js +54 -0
- package/dist/utilities/useIsTruncated.js.map +1 -0
- package/docs/v1-to-v2-migration-guide.md +9 -6
- package/package.json +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.d.ts +0 -45
- package/dist/components/BitkitSidebar/BitkitSidebar.js +0 -147
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +0 -1
- package/dist/theme/slot-recipes/Sidebar.recipe.d.ts +0 -22
- package/dist/theme/slot-recipes/Sidebar.recipe.js +0 -143
- package/dist/theme/slot-recipes/Sidebar.recipe.js.map +0 -1
|
@@ -273,12 +273,15 @@ If your codebase has a local `card.tsx` wrapper around v1 Card (e.g. Shadcn-styl
|
|
|
273
273
|
### Sidebar & Breadcrumb
|
|
274
274
|
|
|
275
275
|
```tsx
|
|
276
|
-
// Sidebar v2
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
<
|
|
280
|
-
<
|
|
281
|
-
|
|
276
|
+
// Sidebar v2 — note the rename: v1 `Sidebar` maps to `BitkitPageSidebar`.
|
|
277
|
+
// It stands at least viewport-tall; an embedded panel opts out with `minHeight="auto"`.
|
|
278
|
+
<BitkitPageSidebar>
|
|
279
|
+
<BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
|
|
280
|
+
<BitkitPageSidebar.Body>
|
|
281
|
+
<BitkitPageSidebar.GroupHeading label="Group" />
|
|
282
|
+
<BitkitPageSidebar.Item icon={IconName} selected={...}>Label</BitkitPageSidebar.Item>
|
|
283
|
+
</BitkitPageSidebar.Body>
|
|
284
|
+
</BitkitPageSidebar>
|
|
282
285
|
|
|
283
286
|
// Breadcrumb v2
|
|
284
287
|
<BitkitBreadcrumb>
|
package/package.json
CHANGED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
import { BitkitIconComponent } from '../../icons';
|
|
5
|
-
import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
|
|
6
|
-
export interface BitkitSidebarProps extends BoxProps {
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
}
|
|
9
|
-
interface BitkitSidebarItemCommonProps {
|
|
10
|
-
badge?: ReactNode;
|
|
11
|
-
children: ReactNode;
|
|
12
|
-
icon?: BitkitIconComponent;
|
|
13
|
-
selected?: boolean;
|
|
14
|
-
suffixIcon?: BitkitIconComponent;
|
|
15
|
-
}
|
|
16
|
-
interface BitkitSidebarItemLinkProps extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
17
|
-
href: string;
|
|
18
|
-
}
|
|
19
|
-
interface BitkitSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'>, 'children'>, BitkitSidebarItemCommonProps {
|
|
20
|
-
href?: never;
|
|
21
|
-
}
|
|
22
|
-
export type BitkitSidebarItemProps = BitkitSidebarItemButtonProps | BitkitSidebarItemLinkProps;
|
|
23
|
-
export interface BitkitSidebarTitleProps extends BoxProps {
|
|
24
|
-
backHref?: string;
|
|
25
|
-
backLabel?: string;
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
onBackClick?: () => void;
|
|
28
|
-
}
|
|
29
|
-
export interface BitkitSidebarFooterProps extends BoxProps {
|
|
30
|
-
children: ReactNode;
|
|
31
|
-
}
|
|
32
|
-
export interface BitkitSidebarProjectProps extends BoxProps {
|
|
33
|
-
label: string;
|
|
34
|
-
value: string;
|
|
35
|
-
}
|
|
36
|
-
export type BitkitSidebarGroupHeadingProps = BitkitGroupHeadingProps;
|
|
37
|
-
declare const _default: import('react').ForwardRefExoticComponent<BitkitSidebarProps & import('react').RefAttributes<HTMLElement>> & {
|
|
38
|
-
Divider: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
|
|
39
|
-
Footer: import('react').ForwardRefExoticComponent<BitkitSidebarFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
40
|
-
GroupHeading: import('react').ForwardRefExoticComponent<BitkitGroupHeadingProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
41
|
-
Item: import('react').ForwardRefExoticComponent<BitkitSidebarItemProps & import('react').RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
|
|
42
|
-
Project: import('react').ForwardRefExoticComponent<BitkitSidebarProjectProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
43
|
-
Title: import('react').ForwardRefExoticComponent<BitkitSidebarTitleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
44
|
-
};
|
|
45
|
-
export default _default;
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
2
|
-
import IconChevronLeft from "../../icons/IconChevronLeft.js";
|
|
3
|
-
import BitkitLabelTooltip from "../BitkitLabelTooltip/BitkitLabelTooltip.js";
|
|
4
|
-
import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
|
|
5
|
-
import { Box } from "@chakra-ui/react/box";
|
|
6
|
-
import { chakra, useRecipe, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
7
|
-
import { forwardRef } from "react";
|
|
8
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { Separator } from "@chakra-ui/react/separator";
|
|
10
|
-
//#region lib/components/BitkitSidebar/BitkitSidebar.tsx
|
|
11
|
-
var BitkitSidebar = forwardRef((props, ref) => {
|
|
12
|
-
const { children, ...rest } = props;
|
|
13
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
14
|
-
return /* @__PURE__ */ jsx(Box, {
|
|
15
|
-
ref,
|
|
16
|
-
asChild: true,
|
|
17
|
-
css: styles.root,
|
|
18
|
-
...rest,
|
|
19
|
-
children: /* @__PURE__ */ jsx("nav", { children })
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
BitkitSidebar.displayName = "BitkitSidebar";
|
|
23
|
-
var BitkitSidebarItem = forwardRef((props, ref) => {
|
|
24
|
-
const { badge, children, icon: Icon, selected, suffixIcon: SuffixIcon, ...rest } = props;
|
|
25
|
-
const styles = useSlotRecipe({ key: "sidebar" })({ selected });
|
|
26
|
-
const itemContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
27
|
-
Icon && /* @__PURE__ */ jsx(Icon, {
|
|
28
|
-
css: styles.itemIcon,
|
|
29
|
-
size: "24"
|
|
30
|
-
}),
|
|
31
|
-
/* @__PURE__ */ jsx(chakra.span, {
|
|
32
|
-
css: styles.itemLabel,
|
|
33
|
-
children
|
|
34
|
-
}),
|
|
35
|
-
badge,
|
|
36
|
-
SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, {
|
|
37
|
-
css: styles.suffixIcon,
|
|
38
|
-
size: "24"
|
|
39
|
-
}),
|
|
40
|
-
/* @__PURE__ */ jsx(chakra.div, { css: styles.selectionMarker })
|
|
41
|
-
] });
|
|
42
|
-
if (rest.href !== void 0) {
|
|
43
|
-
const { className, ...linkRest } = rest;
|
|
44
|
-
return /* @__PURE__ */ jsx(chakra.a, {
|
|
45
|
-
ref,
|
|
46
|
-
...linkRest,
|
|
47
|
-
"aria-current": selected ? "page" : void 0,
|
|
48
|
-
className: className ? `group ${className}` : "group",
|
|
49
|
-
css: styles.item,
|
|
50
|
-
children: itemContent
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
const { className, href: _, ...buttonRest } = rest;
|
|
54
|
-
return /* @__PURE__ */ jsx(chakra.button, {
|
|
55
|
-
ref,
|
|
56
|
-
...buttonRest,
|
|
57
|
-
"aria-pressed": selected,
|
|
58
|
-
className: className ? `group ${className}` : "group",
|
|
59
|
-
css: styles.item,
|
|
60
|
-
type: "button",
|
|
61
|
-
children: itemContent
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
BitkitSidebarItem.displayName = "BitkitSidebarItem";
|
|
65
|
-
var BitkitSidebarTitle = forwardRef((props, ref) => {
|
|
66
|
-
const { backHref, backLabel = "Back", children, onBackClick, ...rest } = props;
|
|
67
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
68
|
-
const controlButtonRecipe = useRecipe({ key: "controlButton" });
|
|
69
|
-
const hasBack = !!backHref || !!onBackClick;
|
|
70
|
-
const BackElement = onBackClick ? chakra.button : chakra.a;
|
|
71
|
-
return /* @__PURE__ */ jsxs(Box, {
|
|
72
|
-
ref,
|
|
73
|
-
css: hasBack ? styles.titleWithBack : styles.title,
|
|
74
|
-
...rest,
|
|
75
|
-
children: [hasBack && /* @__PURE__ */ jsx(BitkitLabelTooltip, {
|
|
76
|
-
text: backLabel,
|
|
77
|
-
children: /* @__PURE__ */ jsx(BackElement, {
|
|
78
|
-
"aria-label": backLabel,
|
|
79
|
-
css: controlButtonRecipe({ size: "sm" }),
|
|
80
|
-
...onBackClick ? {
|
|
81
|
-
onClick: onBackClick,
|
|
82
|
-
type: "button"
|
|
83
|
-
} : { href: backHref },
|
|
84
|
-
children: /* @__PURE__ */ jsx(IconChevronLeft, { size: "24" })
|
|
85
|
-
})
|
|
86
|
-
}), children]
|
|
87
|
-
});
|
|
88
|
-
});
|
|
89
|
-
BitkitSidebarTitle.displayName = "BitkitSidebarTitle";
|
|
90
|
-
var BitkitSidebarFooter = forwardRef((props, ref) => {
|
|
91
|
-
const { children, ...rest } = props;
|
|
92
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
93
|
-
return /* @__PURE__ */ jsx(Box, {
|
|
94
|
-
ref,
|
|
95
|
-
css: styles.footer,
|
|
96
|
-
...rest,
|
|
97
|
-
children
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
BitkitSidebarFooter.displayName = "BitkitSidebarFooter";
|
|
101
|
-
var BitkitSidebarProject = forwardRef((props, ref) => {
|
|
102
|
-
const { label, value, ...rest } = props;
|
|
103
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
104
|
-
return /* @__PURE__ */ jsxs(Box, {
|
|
105
|
-
ref,
|
|
106
|
-
css: styles.project,
|
|
107
|
-
...rest,
|
|
108
|
-
children: [/* @__PURE__ */ jsx(chakra.span, {
|
|
109
|
-
css: styles.projectLabel,
|
|
110
|
-
children: label
|
|
111
|
-
}), /* @__PURE__ */ jsx(chakra.span, {
|
|
112
|
-
css: styles.projectValue,
|
|
113
|
-
children: value
|
|
114
|
-
})]
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
BitkitSidebarProject.displayName = "BitkitSidebarProject";
|
|
118
|
-
var BitkitSidebarGroupHeading = forwardRef((props, ref) => {
|
|
119
|
-
return /* @__PURE__ */ jsx(BitkitGroupHeading, {
|
|
120
|
-
ref,
|
|
121
|
-
paddingBlockEnd: "12",
|
|
122
|
-
paddingBlockStart: "24",
|
|
123
|
-
paddingInline: "32",
|
|
124
|
-
...props
|
|
125
|
-
});
|
|
126
|
-
});
|
|
127
|
-
BitkitSidebarGroupHeading.displayName = "BitkitSidebarGroupHeading";
|
|
128
|
-
var BitkitSidebarDivider = forwardRef((_, ref) => {
|
|
129
|
-
const styles = useSlotRecipe({ key: "sidebar" })();
|
|
130
|
-
return /* @__PURE__ */ jsx(Separator, {
|
|
131
|
-
ref,
|
|
132
|
-
css: styles.divider
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
BitkitSidebarDivider.displayName = "BitkitSidebarDivider";
|
|
136
|
-
var BitkitSidebar_default = withSubComponents(BitkitSidebar, {
|
|
137
|
-
Divider: BitkitSidebarDivider,
|
|
138
|
-
Footer: BitkitSidebarFooter,
|
|
139
|
-
GroupHeading: BitkitSidebarGroupHeading,
|
|
140
|
-
Item: BitkitSidebarItem,
|
|
141
|
-
Project: BitkitSidebarProject,
|
|
142
|
-
Title: BitkitSidebarTitle
|
|
143
|
-
});
|
|
144
|
-
//#endregion
|
|
145
|
-
export { BitkitSidebar_default as default };
|
|
146
|
-
|
|
147
|
-
//# sourceMappingURL=BitkitSidebar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 { withSubComponents } from '../../utilities/withSubComponents';\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 withSubComponents(BitkitSidebar, {\n Divider: BitkitSidebarDivider,\n Footer: BitkitSidebarFooter,\n GroupHeading: BitkitSidebarGroupHeading,\n Item: BitkitSidebarItem,\n Project: BitkitSidebarProject,\n Title: BitkitSidebarTitle,\n});\n"],"mappings":"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"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
declare const sidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
|
|
2
|
-
selected: {
|
|
3
|
-
true: {
|
|
4
|
-
item: {
|
|
5
|
-
background: "background/selected";
|
|
6
|
-
_hover: {
|
|
7
|
-
background: "background/selected-hover";
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
itemIcon: {
|
|
11
|
-
color: "icon/interactive";
|
|
12
|
-
};
|
|
13
|
-
itemLabel: {
|
|
14
|
-
textStyle: "body/lg/semibold";
|
|
15
|
-
};
|
|
16
|
-
selectionMarker: {
|
|
17
|
-
display: "block";
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
}>;
|
|
22
|
-
export default sidebarSlotRecipe;
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { rem } from "../themeUtils.js";
|
|
2
|
-
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
|
-
//#region lib/theme/slot-recipes/Sidebar.recipe.ts
|
|
4
|
-
var sidebarSlotRecipe = defineSlotRecipe({
|
|
5
|
-
className: "sidebar",
|
|
6
|
-
slots: [
|
|
7
|
-
"divider",
|
|
8
|
-
"suffixIcon",
|
|
9
|
-
"footer",
|
|
10
|
-
"item",
|
|
11
|
-
"itemIcon",
|
|
12
|
-
"itemLabel",
|
|
13
|
-
"project",
|
|
14
|
-
"projectLabel",
|
|
15
|
-
"projectValue",
|
|
16
|
-
"root",
|
|
17
|
-
"selectionMarker",
|
|
18
|
-
"title",
|
|
19
|
-
"titleWithBack"
|
|
20
|
-
],
|
|
21
|
-
base: {
|
|
22
|
-
root: {
|
|
23
|
-
background: "background/primary",
|
|
24
|
-
borderInlineEnd: "1px solid",
|
|
25
|
-
borderColor: "border/regular",
|
|
26
|
-
display: "flex",
|
|
27
|
-
flexDirection: "column",
|
|
28
|
-
width: rem(256),
|
|
29
|
-
height: "100dvh"
|
|
30
|
-
},
|
|
31
|
-
item: {
|
|
32
|
-
alignItems: "center",
|
|
33
|
-
cursor: "pointer",
|
|
34
|
-
display: "flex",
|
|
35
|
-
gap: "16",
|
|
36
|
-
overflow: "clip",
|
|
37
|
-
paddingBlock: "12",
|
|
38
|
-
paddingInlineEnd: "24",
|
|
39
|
-
paddingInlineStart: "32",
|
|
40
|
-
position: "relative",
|
|
41
|
-
width: "full",
|
|
42
|
-
_hover: { background: "background/hover" }
|
|
43
|
-
},
|
|
44
|
-
itemIcon: {
|
|
45
|
-
color: "icon/secondary",
|
|
46
|
-
flexShrink: 0
|
|
47
|
-
},
|
|
48
|
-
itemLabel: {
|
|
49
|
-
color: "text/primary",
|
|
50
|
-
flex: 1,
|
|
51
|
-
minWidth: 0,
|
|
52
|
-
overflow: "hidden",
|
|
53
|
-
textAlign: "start",
|
|
54
|
-
textOverflow: "ellipsis",
|
|
55
|
-
textStyle: "body/lg/regular",
|
|
56
|
-
whiteSpace: "nowrap"
|
|
57
|
-
},
|
|
58
|
-
suffixIcon: {
|
|
59
|
-
color: "icon/tertiary",
|
|
60
|
-
display: "none",
|
|
61
|
-
flexShrink: 0,
|
|
62
|
-
_groupHover: { display: "block" }
|
|
63
|
-
},
|
|
64
|
-
selectionMarker: {
|
|
65
|
-
background: "border/selected",
|
|
66
|
-
borderStartEndRadius: "2",
|
|
67
|
-
borderEndEndRadius: "2",
|
|
68
|
-
display: "none",
|
|
69
|
-
height: "full",
|
|
70
|
-
insetBlockStart: 0,
|
|
71
|
-
insetInlineEnd: 0,
|
|
72
|
-
position: "absolute",
|
|
73
|
-
width: "2"
|
|
74
|
-
},
|
|
75
|
-
footer: {
|
|
76
|
-
borderBlockStart: "1px solid",
|
|
77
|
-
borderColor: "border/regular",
|
|
78
|
-
display: "flex",
|
|
79
|
-
flexDirection: "column",
|
|
80
|
-
marginBlockStart: "auto",
|
|
81
|
-
paddingBlock: "12"
|
|
82
|
-
},
|
|
83
|
-
project: {
|
|
84
|
-
display: "flex",
|
|
85
|
-
flexDirection: "column",
|
|
86
|
-
gap: "4",
|
|
87
|
-
justifyContent: "center",
|
|
88
|
-
overflow: "clip",
|
|
89
|
-
paddingBlockEnd: "12",
|
|
90
|
-
paddingBlockStart: "8",
|
|
91
|
-
paddingInlineEnd: "24",
|
|
92
|
-
paddingInlineStart: "32",
|
|
93
|
-
whiteSpace: "nowrap"
|
|
94
|
-
},
|
|
95
|
-
projectLabel: {
|
|
96
|
-
color: "text/tertiary",
|
|
97
|
-
textStyle: "heading/h6"
|
|
98
|
-
},
|
|
99
|
-
projectValue: {
|
|
100
|
-
color: "text/body",
|
|
101
|
-
textStyle: "body/lg/semibold"
|
|
102
|
-
},
|
|
103
|
-
title: {
|
|
104
|
-
alignItems: "center",
|
|
105
|
-
color: "text/primary",
|
|
106
|
-
display: "flex",
|
|
107
|
-
gap: "12",
|
|
108
|
-
paddingBlock: "16",
|
|
109
|
-
paddingInlineEnd: "8",
|
|
110
|
-
paddingInlineStart: "32",
|
|
111
|
-
textStyle: "heading/h3"
|
|
112
|
-
},
|
|
113
|
-
titleWithBack: {
|
|
114
|
-
alignItems: "center",
|
|
115
|
-
color: "text/primary",
|
|
116
|
-
display: "flex",
|
|
117
|
-
gap: "12",
|
|
118
|
-
paddingBlockEnd: "16",
|
|
119
|
-
paddingBlockStart: "24",
|
|
120
|
-
paddingInlineEnd: "8",
|
|
121
|
-
paddingInlineStart: "24",
|
|
122
|
-
textStyle: "heading/h3"
|
|
123
|
-
},
|
|
124
|
-
divider: {
|
|
125
|
-
marginInline: "32",
|
|
126
|
-
marginBlock: "24",
|
|
127
|
-
width: "auto"
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
variants: { selected: { true: {
|
|
131
|
-
item: {
|
|
132
|
-
background: "background/selected",
|
|
133
|
-
_hover: { background: "background/selected-hover" }
|
|
134
|
-
},
|
|
135
|
-
itemIcon: { color: "icon/interactive" },
|
|
136
|
-
itemLabel: { textStyle: "body/lg/semibold" },
|
|
137
|
-
selectionMarker: { display: "block" }
|
|
138
|
-
} } }
|
|
139
|
-
});
|
|
140
|
-
//#endregion
|
|
141
|
-
export { sidebarSlotRecipe as default };
|
|
142
|
-
|
|
143
|
-
//# sourceMappingURL=Sidebar.recipe.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Sidebar.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst sidebarSlotRecipe = defineSlotRecipe({\n className: 'sidebar',\n slots: [\n 'divider',\n 'suffixIcon',\n 'footer',\n 'item',\n 'itemIcon',\n 'itemLabel',\n 'project',\n 'projectLabel',\n 'projectValue',\n 'root',\n 'selectionMarker',\n 'title',\n 'titleWithBack',\n ],\n base: {\n root: {\n background: 'background/primary',\n borderInlineEnd: '1px solid',\n borderColor: 'border/regular',\n display: 'flex',\n flexDirection: 'column',\n width: rem(256),\n height: '100dvh',\n },\n item: {\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n gap: '16',\n overflow: 'clip',\n paddingBlock: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '32',\n position: 'relative',\n width: 'full',\n _hover: {\n background: 'background/hover',\n },\n },\n itemIcon: {\n color: 'icon/secondary',\n flexShrink: 0,\n },\n itemLabel: {\n color: 'text/primary',\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n textAlign: 'start',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/regular',\n whiteSpace: 'nowrap',\n },\n suffixIcon: {\n color: 'icon/tertiary',\n display: 'none',\n flexShrink: 0,\n _groupHover: {\n display: 'block',\n },\n },\n selectionMarker: {\n background: 'border/selected',\n borderStartEndRadius: '2',\n borderEndEndRadius: '2',\n display: 'none',\n height: 'full',\n insetBlockStart: 0,\n insetInlineEnd: 0,\n position: 'absolute',\n width: '2',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/regular',\n display: 'flex',\n flexDirection: 'column',\n marginBlockStart: 'auto',\n paddingBlock: '12',\n },\n project: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n justifyContent: 'center',\n overflow: 'clip',\n paddingBlockEnd: '12',\n paddingBlockStart: '8',\n paddingInlineEnd: '24',\n paddingInlineStart: '32',\n whiteSpace: 'nowrap',\n },\n projectLabel: {\n color: 'text/tertiary',\n textStyle: 'heading/h6',\n },\n projectValue: {\n color: 'text/body',\n textStyle: 'body/lg/semibold',\n },\n title: {\n alignItems: 'center',\n color: 'text/primary',\n display: 'flex',\n gap: '12',\n paddingBlock: '16',\n paddingInlineEnd: '8',\n paddingInlineStart: '32',\n textStyle: 'heading/h3',\n },\n titleWithBack: {\n alignItems: 'center',\n color: 'text/primary',\n display: 'flex',\n gap: '12',\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n textStyle: 'heading/h3',\n },\n divider: {\n marginInline: '32',\n marginBlock: '24',\n width: 'auto',\n },\n },\n variants: {\n selected: {\n true: {\n item: {\n background: 'background/selected',\n _hover: {\n background: 'background/selected-hover',\n },\n },\n itemIcon: {\n color: 'icon/interactive',\n },\n itemLabel: {\n textStyle: 'body/lg/semibold',\n },\n selectionMarker: {\n display: 'block',\n },\n },\n },\n },\n});\n\nexport default sidebarSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,iBAAiB;GACjB,aAAa;GACb,SAAS;GACT,eAAe;GACf,OAAO,IAAI,GAAG;GACd,QAAQ;EACV;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,KAAK;GACL,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,YAAY,mBACd;EACF;EACA,UAAU;GACR,OAAO;GACP,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,WAAW;GACX,cAAc;GACd,WAAW;GACX,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,SAAS;GACT,YAAY;GACZ,aAAa,EACX,SAAS,QACX;EACF;EACA,iBAAiB;GACf,YAAY;GACZ,sBAAsB;GACtB,oBAAoB;GACpB,SAAS;GACT,QAAQ;GACR,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;GACV,OAAO;EACT;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,cAAc;EAChB;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,gBAAgB;GAChB,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;GAClB,oBAAoB;GACpB,YAAY;EACd;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,cAAc;GACZ,OAAO;GACP,WAAW;EACb;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACL,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,WAAW;EACb;EACA,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;GAClB,oBAAoB;GACpB,WAAW;EACb;EACA,SAAS;GACP,cAAc;GACd,aAAa;GACb,OAAO;EACT;CACF;CACA,UAAU,EACR,UAAU,EACR,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,QAAQ,EACN,YAAY,4BACd;EACF;EACA,UAAU,EACR,OAAO,mBACT;EACA,WAAW,EACT,WAAW,mBACb;EACA,iBAAiB,EACf,SAAS,QACX;CACF,EACF,EACF;AACF,CAAC"}
|