kaze-design-system 0.2.0 → 0.2.1
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/components.css
CHANGED
|
@@ -3522,6 +3522,20 @@
|
|
|
3522
3522
|
border-top: 1px solid var(--color-border-subtle);
|
|
3523
3523
|
}
|
|
3524
3524
|
|
|
3525
|
+
.sidebar__group-label {
|
|
3526
|
+
font-size: var(--font-size-2xs);
|
|
3527
|
+
font-weight: var(--font-weight-semibold);
|
|
3528
|
+
color: var(--color-fg-muted);
|
|
3529
|
+
padding: var(--space-4) var(--space-4) var(--space-1);
|
|
3530
|
+
letter-spacing: 0.03em;
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
.sidebar__divider {
|
|
3534
|
+
height: 1px;
|
|
3535
|
+
background: var(--color-border);
|
|
3536
|
+
margin: var(--space-2) var(--space-4);
|
|
3537
|
+
}
|
|
3538
|
+
|
|
3525
3539
|
@media (min-width: 768px) {
|
|
3526
3540
|
.sidebar {
|
|
3527
3541
|
display: flex;
|
|
@@ -38,7 +38,37 @@ const NavItem = forwardRef(
|
|
|
38
38
|
}
|
|
39
39
|
);
|
|
40
40
|
NavItem.displayName = "NavItem";
|
|
41
|
+
const SidebarGroupLabel = forwardRef(
|
|
42
|
+
({ className, children, ...rest }, ref) => {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
ref,
|
|
47
|
+
className: cn("sidebar__group-label", className),
|
|
48
|
+
...rest,
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
|
55
|
+
const SidebarDivider = forwardRef(
|
|
56
|
+
({ className, ...rest }, ref) => {
|
|
57
|
+
return /* @__PURE__ */ jsx(
|
|
58
|
+
"div",
|
|
59
|
+
{
|
|
60
|
+
ref,
|
|
61
|
+
className: cn("sidebar__divider", className),
|
|
62
|
+
role: "separator",
|
|
63
|
+
...rest
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
SidebarDivider.displayName = "SidebarDivider";
|
|
41
69
|
export {
|
|
42
70
|
NavItem,
|
|
43
|
-
Sidebar
|
|
71
|
+
Sidebar,
|
|
72
|
+
SidebarDivider,
|
|
73
|
+
SidebarGroupLabel
|
|
44
74
|
};
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,7 @@ import { List, ListItem } from "./components/List/List.js";
|
|
|
33
33
|
import { Logo } from "./components/Logo/Logo.js";
|
|
34
34
|
import { Meter } from "./components/Meter/Meter.js";
|
|
35
35
|
import { Metric } from "./components/Metric/Metric.js";
|
|
36
|
-
import { NavItem, Sidebar } from "./components/Sidebar/Sidebar.js";
|
|
36
|
+
import { NavItem, Sidebar, SidebarDivider, SidebarGroupLabel } from "./components/Sidebar/Sidebar.js";
|
|
37
37
|
import { Navbar, NavbarLink, NavbarLinks } from "./components/Navbar/Navbar.js";
|
|
38
38
|
import { NumberField } from "./components/NumberField/NumberField.js";
|
|
39
39
|
import { Pagination } from "./components/Pagination/Pagination.js";
|
|
@@ -127,6 +127,8 @@ export {
|
|
|
127
127
|
SectionHeader,
|
|
128
128
|
Select,
|
|
129
129
|
Sidebar,
|
|
130
|
+
SidebarDivider,
|
|
131
|
+
SidebarGroupLabel,
|
|
130
132
|
Skeleton,
|
|
131
133
|
Sparkline,
|
|
132
134
|
SplitSection,
|
|
@@ -15,3 +15,10 @@ export interface NavItemProps extends HTMLAttributes<HTMLElement> {
|
|
|
15
15
|
href?: string;
|
|
16
16
|
}
|
|
17
17
|
export declare const NavItem: import("react").ForwardRefExoticComponent<NavItemProps & import("react").RefAttributes<HTMLElement>>;
|
|
18
|
+
export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
children: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export declare const SidebarGroupLabel: import("react").ForwardRefExoticComponent<SidebarGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export interface SidebarDividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
23
|
+
}
|
|
24
|
+
export declare const SidebarDivider: import("react").ForwardRefExoticComponent<SidebarDividerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Sidebar, NavItem } from "./Sidebar";
|
|
2
|
-
export type { SidebarProps, NavItemProps } from "./Sidebar";
|
|
1
|
+
export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
|
|
2
|
+
export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
|
|
@@ -34,8 +34,8 @@ export { Dialog, DialogHeader, DialogTitle, DialogBody, DialogFooter, } from "./
|
|
|
34
34
|
export type { DialogProps, DialogHeaderProps, DialogTitleProps, DialogBodyProps, DialogFooterProps, } from "./Dialog";
|
|
35
35
|
export { Divider } from "./Divider";
|
|
36
36
|
export type { DividerProps } from "./Divider";
|
|
37
|
-
export { Sidebar, NavItem } from "./Sidebar";
|
|
38
|
-
export type { SidebarProps, NavItemProps } from "./Sidebar";
|
|
37
|
+
export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
|
|
38
|
+
export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
|
|
39
39
|
export { TopBar } from "./TopBar";
|
|
40
40
|
export type { TopBarProps } from "./TopBar";
|
|
41
41
|
export { AppLayout } from "./Layout";
|