@hyphen/hyphen-components 5.4.0 → 5.5.0

package/dist/components/Sidebar/Sidebar.d.ts

@@ -12,6 +12,7 @@ declare function useSidebar(): SidebarContextProps;
 declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     defaultOpen?: boolean | undefined;
     open?: boolean | undefined;
+    storageKey?: string | undefined;
     onOpenChange?: ((open: boolean) => void) | undefined;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
@@ -28,7 +29,7 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
 declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean | undefined;
     isActive?: boolean | undefined;
-    icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
+    icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "computer" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
     tooltip?: string | (Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) | undefined;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Jul 2025 16:27:29 GMT
+ * Generated on Fri, 11 Jul 2025 16:56:04 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -336,6 +336,12 @@
 
 .focus\:border-color-subtle:focus { border-color: var(--color-border-subtle); }
 
+.border-color-transparent { border-color: var(--color-border-transparent); }
+
+.hover\:border-color-transparent:hover { border-color: var(--color-border-transparent); }
+
+.focus\:border-color-transparent:focus { border-color: var(--color-border-transparent); }
+
 .border-color-hover { border-color: var(--color-border-hover); }
 
 .hover\:border-color-hover:hover { border-color: var(--color-border-hover); }
@@ -498,6 +504,18 @@
 
 .focus\:border-color-brand-dark-purple:focus { border-color: var(--color-border-brand-dark-purple); }
 
+.border-color-black { border-color: var(--color-border-black); }
+
+.hover\:border-color-black:hover { border-color: var(--color-border-black); }
+
+.focus\:border-color-black:focus { border-color: var(--color-border-black); }
+
+.border-color-white { border-color: var(--color-border-white); }
+
+.hover\:border-color-white:hover { border-color: var(--color-border-white); }
+
+.focus\:border-color-white:focus { border-color: var(--color-border-white); }
+
 .background-color-yellow { background-color: var(--color-brand-yellow); }
 
 .hover\:background-color-yellow:hover { background-color: var(--color-brand-yellow); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Jul 2025 16:27:29 GMT
+ * Generated on Fri, 11 Jul 2025 16:56:04 GMT
  */
 
 :root {
@@ -137,6 +137,7 @@
   --color-base-grey-900: #0a0a0a;
   --color-border-default: #d4d4d4;
   --color-border-subtle: #e5e5e5;
+  --color-border-transparent: rgba(0, 0, 0, 0);
   --color-border-hover: #a3a3a3;
   --color-border-active: #737373;
   --color-border-danger: #fca5a5;
@@ -164,6 +165,8 @@
   --color-border-brand-light-purple: #b47dff;
   --color-border-brand-medium-purple: #4b32aa;
   --color-border-brand-dark-purple: #1e1e5a;
+  --color-border-black: #000000;
+  --color-border-white: #ffffff;
   --color-brand-yellow: #ffd200;
   --color-brand-orange: #ff911e;
   --color-brand-magenta: #ff3278;
@@ -352,7 +355,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 07 Jul 2025 16:27:29 GMT
+ * Generated on Fri, 11 Jul 2025 16:56:04 GMT
  */
 
 :root.dark {
@@ -388,6 +391,7 @@
   --color-background-slider: #737373;
   --color-border-default: #525252;
   --color-border-subtle: #404040;
+  --color-border-transparent: transparent;
   --color-border-hover: #404040;
   --color-border-active: #262626;
   --color-border-danger: #fecaca;

package/dist/hyphen-components.cjs.development.js

@@ -4024,7 +4024,7 @@ var TooltipContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref, re
 });
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 
-var _excluded$3 = ["defaultOpen", "open", "onOpenChange", "className", "style", "children"],
+var _excluded$3 = ["defaultOpen", "open", "storageKey", "onOpenChange", "className", "style", "children"],
   _excluded2 = ["side", "collapsible", "className", "children"],
   _excluded3 = ["className", "onClick"],
   _excluded4 = ["className"],
@@ -4041,8 +4041,6 @@ var _excluded$3 = ["defaultOpen", "open", "onOpenChange", "className", "style",
   _excluded13 = ["className", "asChild"],
   _excluded14 = ["className"],
   _excluded15 = ["className"];
-var SIDEBAR_COOKIE_NAME = 'sidebar_expanded';
-var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = '16rem';
 var SIDEBAR_WIDTH_ICON = '44px';
 var SIDEBAR_KEYBOARD_SHORTCUT = '[';
@@ -4058,6 +4056,8 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$defaultOpen = _ref.defaultOpen,
     defaultOpen = _ref$defaultOpen === void 0 ? true : _ref$defaultOpen,
     openProp = _ref.open,
+    _ref$storageKey = _ref.storageKey,
+    storageKey = _ref$storageKey === void 0 ? 'sidebar_expanded' : _ref$storageKey,
     setOpenProp = _ref.onOpenChange,
     className = _ref.className,
     style = _ref.style,
@@ -4090,8 +4090,7 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       } else {
         _setOpen(newOpenState);
       }
-      // Set cookie only if state changes
-      document.cookie = SIDEBAR_COOKIE_NAME + "=" + newOpenState + "; path=/; max-age=" + SIDEBAR_COOKIE_MAX_AGE;
+      localStorage.setItem(storageKey, "" + newOpenState);
     }
   }, [setOpenProp, open]);
   // Toggle sidebar based on screen type