@lateralus-ai/shipping-ui 2.0.0-dev.14 → 2.0.0-dev.16
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/index.cjs +12 -12
- package/dist/index.esm.js +1353 -1361
- package/dist/patterns/Sidebar/sidebar-styles.d.ts +2 -1
- package/package.json +1 -1
- package/src/patterns/Sidebar/CollapsibleNavGroup.tsx +0 -1
- package/src/patterns/Sidebar/SidebarAction.tsx +16 -11
- package/src/patterns/Sidebar/SidebarEntry.tsx +1 -3
- package/src/patterns/Sidebar/sidebar-styles.ts +2 -1
|
@@ -15,7 +15,8 @@ export declare const sidebarSectionShellCollapsed = "relative box-border flex w-
|
|
|
15
15
|
export declare const sidebarUnreadOverlay = "pointer-events-none absolute left-0 top-0 size-6";
|
|
16
16
|
/** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
|
|
17
17
|
export declare const sidebarUnreadDot = "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
|
|
18
|
-
|
|
18
|
+
/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
|
|
19
|
+
export declare const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
|
|
19
20
|
export declare const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
|
|
20
21
|
export declare const sidebarSectionLabelClass = "min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]";
|
|
21
22
|
/** Figma sidebar icon buttons — transparent idle, grey hover (no white fill). */
|
package/package.json
CHANGED
|
@@ -4,8 +4,10 @@ import { cn } from "../../utils/cn";
|
|
|
4
4
|
import {
|
|
5
5
|
sidebarLinkActive,
|
|
6
6
|
sidebarLinkIdle,
|
|
7
|
-
sidebarRowClass,
|
|
8
7
|
sidebarRowInteractiveHover,
|
|
8
|
+
sidebarSectionIconClass,
|
|
9
|
+
sidebarSectionShell,
|
|
10
|
+
sidebarSectionShellCollapsed,
|
|
9
11
|
} from "./sidebar-styles";
|
|
10
12
|
|
|
11
13
|
export type SidebarActionProps = {
|
|
@@ -32,20 +34,23 @@ export const SidebarAction = ({
|
|
|
32
34
|
type="button"
|
|
33
35
|
onClick={onClick}
|
|
34
36
|
aria-label={label}
|
|
35
|
-
className={
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
),
|
|
37
|
+
className={cn(
|
|
38
|
+
collapsed ? sidebarSectionShellCollapsed : sidebarSectionShell,
|
|
39
|
+
"cursor-pointer text-left",
|
|
40
|
+
active ? sidebarLinkActive : sidebarLinkIdle,
|
|
41
|
+
!active && sidebarRowInteractiveHover,
|
|
42
|
+
!collapsed && "gap-2",
|
|
43
|
+
className,
|
|
43
44
|
)}
|
|
44
45
|
data-active={active}
|
|
45
46
|
data-collapsed={collapsed}
|
|
46
47
|
>
|
|
47
|
-
{icon && <span className=
|
|
48
|
-
{!collapsed &&
|
|
48
|
+
{icon && <span className={sidebarSectionIconClass}>{icon}</span>}
|
|
49
|
+
{!collapsed && (
|
|
50
|
+
<span className="min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]">
|
|
51
|
+
{label}
|
|
52
|
+
</span>
|
|
53
|
+
)}
|
|
49
54
|
</button>
|
|
50
55
|
);
|
|
51
56
|
|
|
@@ -75,9 +75,7 @@ export const SidebarEntry = ({
|
|
|
75
75
|
/>
|
|
76
76
|
|
|
77
77
|
<div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 text-caption-2">
|
|
78
|
-
{icon &&
|
|
79
|
-
<span className="shrink-0 px-1 py-0.5 [&>svg]:size-4">{icon}</span>
|
|
80
|
-
)}
|
|
78
|
+
{icon && <span className="shrink-0 [&>svg]:size-4">{icon}</span>}
|
|
81
79
|
<span className="truncate">{label}</span>
|
|
82
80
|
</div>
|
|
83
81
|
|
|
@@ -30,7 +30,8 @@ export const sidebarUnreadOverlay =
|
|
|
30
30
|
export const sidebarUnreadDot =
|
|
31
31
|
"absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
/** Icon + label row inside a section shell — no extra inset (shell already has p-2). */
|
|
34
|
+
export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2";
|
|
34
35
|
|
|
35
36
|
export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
|
|
36
37
|
|