@scripso-homepad/ui 0.4.34 → 0.4.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.34",
+  "version": "0.4.36",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/TableActionsMenu.tsx

@@ -31,6 +31,8 @@ export type TableActionsMenuProps = {
   triggerAriaLabel: string;
   className?: string;
   menuClassName?: string;
+  /** Optional custom trigger icon. Defaults to TableMoreIcon. */
+  triggerIcon?: ReactNode;
   /** Dropdown menu width in pixels. Defaults to 231. Ignored when menuFitContent is true. */
   menuWidth?: number;
   /** Size the menu to its content width instead of a fixed pixel width. Defaults to true so labels stay on one line. */
@@ -73,6 +75,7 @@ export function TableActionsMenu({
   triggerAriaLabel,
   className,
   menuClassName,
+  triggerIcon,
   menuWidth = MENU_WIDTH_PX,
   menuFitContent = true,
 }: TableActionsMenuProps) {
@@ -193,13 +196,27 @@ export function TableActionsMenu({
               item.onSelect();
             }}
             className={cn(
-              'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0',
+              'flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium transition-colors hover:bg-storm-gray-0',
               index > 0 && 'border-t border-storm-gray-50',
               item.disabled && 'cursor-not-allowed opacity-50',
+              item.tone === 'danger'
+                ? 'text-[#AE0011]'
+                : item.tone === 'success'
+                  ? 'text-green-600'
+                  : 'text-storm-gray-900',
             )}
           >
             {icon ? (
-              <span className="inline-flex size-5 shrink-0 items-center justify-center text-storm-gray-200">
+              <span
+                className={cn(
+                  'inline-flex size-5 shrink-0 items-center justify-center',
+                  item.tone === 'danger'
+                    ? 'text-[#AE0011]'
+                    : item.tone === 'success'
+                      ? 'text-green-600'
+                      : 'text-storm-gray-200',
+                )}
+              >
                 {icon}
               </span>
             ) : null}
@@ -215,7 +232,7 @@ export function TableActionsMenu({
       <TableActionButton
         ref={triggerRef}
         variant="menu"
-        icon={<TableMoreIcon className="size-5" />}
+        icon={triggerIcon ?? <TableMoreIcon className="size-5" />}
         ariaLabel={triggerAriaLabel}
         onClick={() => setOpen((current) => !current)}
         aria-expanded={open}

package/src/web/icons/SidebarCollapseIcon.tsx

@@ -0,0 +1,32 @@
+type SidebarCollapseIconProps = {
+  className?: string;
+  size?: number | string;
+  strokeWidth?: number | string;
+};
+
+/** Shown when the sidebar is open — click collapses it. */
+export function SidebarCollapseIcon({
+  className,
+  size = 20,
+  strokeWidth = 2,
+}: SidebarCollapseIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <path
+        d="M12.5 2.5V17.5M8.33333 12.5L5.83333 10L8.33333 7.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/SidebarExpandIcon.tsx

@@ -0,0 +1,32 @@
+type SidebarExpandIconProps = {
+  className?: string;
+  size?: number | string;
+  strokeWidth?: number | string;
+};
+
+/** Shown when the sidebar is closed — click expands it. */
+export function SidebarExpandIcon({
+  className,
+  size = 20,
+  strokeWidth = 2,
+}: SidebarExpandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <path
+        d="M12.5 2.5V17.5M6.66667 7.5L9.16667 10L6.66667 12.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/index.ts

@@ -23,6 +23,8 @@ export type { SidebarUserCardProps } from './layout/SidebarUserCard';
 
 export { BellIcon } from './icons/BellIcon';
 export { BuildingIcon } from './icons/BuildingIcon';
+export { SidebarCollapseIcon } from './icons/SidebarCollapseIcon';
+export { SidebarExpandIcon } from './icons/SidebarExpandIcon';
 export { TableMoreIcon } from './icons/TableMoreIcon';
 export { TableSortIcon } from './icons/TableSortIcon';
 export { TableMenuCheckIcon } from './icons/TableMenuCheckIcon';

package/src/web/layout/Sidebar.tsx

@@ -1,6 +1,8 @@
-import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 
+import { SidebarCollapseIcon } from '../icons/SidebarCollapseIcon';
+import { SidebarExpandIcon } from '../icons/SidebarExpandIcon';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { cn } from '../utils/cn';
 import { isNavItemActive } from './nav-active';
@@ -208,9 +210,9 @@ export function Sidebar({
           >
             {isDesktop ? (
               isExpanded ? (
-                collapseIcon ?? <PanelLeftClose size={20} strokeWidth={1.75} />
+                collapseIcon ?? <SidebarCollapseIcon />
               ) : (
-                expandIcon ?? <PanelLeftOpen size={20} strokeWidth={1.75} />
+                expandIcon ?? <SidebarExpandIcon />
               )
             ) : (
               closeIcon ?? <X size={20} strokeWidth={1.75} />