@wellingtonhlc/shared-ui 0.29.1 → 0.29.2

package/dist/components/Sidebar.js

@@ -33,7 +33,7 @@ const ActionButton = forwardRef(function SidebarActionButton({ active = false, c
     return (_jsxs("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-open": isOpen, "data-sidebar-active": active ? 'true' : undefined, className: cn(sidebarButtonClasses(active, size, tone), showChevron && isOpen && 'pr-2', className), ...props, children: [_jsx("span", { className: cn('grid w-16 min-w-16 flex-none place-items-center transition-colors', size === 'compact' ? 'h-9' : 'h-11', active ? 'text-current' : 'text-current'), children: icon }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left font-medium whitespace-nowrap transition-opacity duration-[var(--duration-normal)]', size === 'compact' ? 'text-xs max-md:text-base' : 'text-[length:var(--font-size-compact)] max-md:text-base', isOpen ? 'opacity-100' : 'pointer-events-none w-0 opacity-0', labelClassName), children: label }), _jsx("span", { className: cn('flex-none place-items-center', isOpen ? 'grid' : 'hidden', size === 'compact' ? 'h-9 w-6' : 'h-11 w-7', showChevron && isOpen ? 'opacity-100' : 'opacity-0'), children: _jsx(ChevronIcon, { expanded: expanded }) })] }));
 });
 const SubActionButton = forwardRef(function SidebarSubActionButton({ active = false, className, isOpen, label, size = 'compact', title, type = 'button', ...props }, ref) {
-    return (_jsx("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn('focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9 text-xs' : 'h-11 min-h-11 text-[length:var(--font-size-compact)]', isOpen ? 'justify-start pl-14' : 'justify-center', subActionButtonTone(active, size), className), ...props, children: _jsx("span", { className: cn('truncate', isOpen ? 'opacity-100' : 'sr-only'), children: label }) }));
+    return (_jsx("button", { ref: ref, type: type, title: title ? (typeof label === 'string' && !isOpen ? label : undefined) : undefined, "data-sidebar-active": active ? 'true' : undefined, className: cn('focus-visible:ring-brand/35 flex w-full cursor-pointer items-center rounded-xl font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none', size === 'compact' ? 'h-9 min-h-9 text-xs' : 'h-11 min-h-11 text-[length:var(--font-size-compact)]', isOpen ? 'justify-start pl-16' : 'justify-center', subActionButtonTone(active, size), className), ...props, children: _jsx("span", { className: cn('truncate', isOpen ? 'opacity-100' : 'sr-only'), children: label }) }));
 });
 function NavGroup({ active = false, className, collapsible = false, defaultExpanded, icon, isOpen, items, subItemSize = 'compact', title, }) {
     const itemByKey = useMemo(() => new Map(items.map((item) => [item.key, item])), [items]);
@@ -92,7 +92,7 @@ function NavGroup({ active = false, className, collapsible = false, defaultExpan
     if (singleItem) {
         return (_jsx("li", { className: cn('w-full', className), children: _jsx(ActionButton, { active: singleItem.active, icon: singleItem.icon ?? icon, isOpen: isOpen, label: singleItem.label, onClick: handleSingleItemClick, title: singleItem.title, tone: "subtle" }) }));
     }
-    return (_jsxs("li", { className: cn('relative w-full', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(ActionButton, { active: groupActive, "aria-expanded": isOpen ? expanded : undefined, icon: icon, isOpen: isOpen, label: title, labelClassName: labelVisible ? 'opacity-100' : 'opacity-0', onClick: handleGroupClick, expanded: expanded, showChevron: collapsible && isOpen, tone: "subtle" }), isOpen ? (_jsx("div", { className: "grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-[var(--duration-normal)] ease-out data-[expanded=true]:grid-rows-[1fr] data-[expanded=true]:opacity-100", "data-expanded": expanded, children: _jsx("div", { className: "relative min-h-0 overflow-hidden", children: _jsx("ul", { className: "flex w-full flex-col", children: items.map((item, index) => (_jsxs("li", { className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: cn('bg-app-border absolute left-7 top-0 w-px', index === items.length - 1 ? 'h-1/2' : 'bottom-0') }), _jsx("span", { "aria-hidden": "true", className: "bg-app-border absolute left-7 top-1/2 h-px w-5" }), _jsx(SubActionButton, { active: item.active, "data-sidebar-item-key": item.key, isOpen: isOpen, label: item.label, onClick: handleItemSelect, size: subItemSize, title: item.title })] }, item.key))) }) }) })) : (_jsx(Flyout, { open: hovered, title: title, items: items, onItemSelect: handleItemSelect }))] }));
+    return (_jsxs("li", { className: cn('relative w-full', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(ActionButton, { active: groupActive, "aria-expanded": isOpen ? expanded : undefined, icon: icon, isOpen: isOpen, label: title, labelClassName: labelVisible ? 'opacity-100' : 'opacity-0', onClick: handleGroupClick, expanded: expanded, showChevron: collapsible && isOpen, tone: "subtle" }), isOpen ? (_jsx("div", { className: "grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-[var(--duration-normal)] ease-out data-[expanded=true]:grid-rows-[1fr] data-[expanded=true]:opacity-100", "data-expanded": expanded, children: _jsx("div", { className: "relative min-h-0 overflow-hidden", children: _jsx("ul", { className: "flex w-full flex-col", children: items.map((item, index) => (_jsxs("li", { className: "relative w-full", children: [_jsx("span", { "aria-hidden": "true", className: cn('bg-app-border absolute left-8 top-0 w-px', index === items.length - 1 ? 'h-1/2' : 'bottom-0') }), _jsx("span", { "aria-hidden": "true", className: "bg-app-border absolute left-8 top-1/2 h-px w-5" }), _jsx(SubActionButton, { active: item.active, "data-sidebar-item-key": item.key, isOpen: isOpen, label: item.label, onClick: handleItemSelect, size: subItemSize, title: item.title })] }, item.key))) }) }) })) : (_jsx(Flyout, { open: hovered, title: title, items: items, onItemSelect: handleItemSelect }))] }));
 }
 function Flyout({ items, onItemSelect, open, title }) {
     return (_jsxs("div", { className: "border-app-border bg-[var(--sidebar-flyout-background)] invisible pointer-events-none absolute left-[calc(100%+0.375rem)] top-0 z-[var(--z-flyout)] min-w-52 -translate-x-2 overflow-hidden rounded-xl border p-2 opacity-0 shadow-[var(--shadow-flyout)] transition-[opacity,transform,visibility] duration-[var(--duration-fast)] data-[open=true]:visible data-[open=true]:pointer-events-auto data-[open=true]:translate-x-0 data-[open=true]:opacity-100", "data-open": open, children: [_jsx("span", { "aria-hidden": "true", className: "absolute right-full top-0 h-full w-2.5" }), _jsx("p", { className: "text-foreground-muted mb-2 text-[length:var(--font-size-caption)] font-semibold uppercase tracking-[var(--letter-spacing-caps)]", children: title }), _jsx("div", { className: "flex max-h-[calc(100vh-5rem)] flex-col overflow-y-auto", children: items.map((item) => (_jsxs("button", { type: "button", "data-sidebar-item-key": item.key, onClick: onItemSelect, className: cn('group focus-visible:ring-brand/35 flex h-9 min-h-9 w-full cursor-pointer items-center gap-2 rounded-lg text-left text-xs font-medium leading-none transition-colors focus-visible:ring-2 focus-visible:outline-none', item.active

package/dist/styles.css

@@ -919,8 +919,8 @@ h2.react-datepicker__current-month {
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
-  .left-7 {
-    left: calc(var(--spacing) * 7);
+  .left-8 {
+    left: calc(var(--spacing) * 8);
   }
   .left-\[50\%\] {
     left: 50%;
@@ -2329,6 +2329,9 @@ h2.react-datepicker__current-month {
   .pl-14 {
     padding-left: calc(var(--spacing) * 14);
   }
+  .pl-16 {
+    padding-left: calc(var(--spacing) * 16);
+  }
   .text-center {
     text-align: center;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.29.1",
+    "version": "0.29.2",
     "private": false,
     "type": "module",
     "packageManager": "npm@11.12.1",