@hyphen/hyphen-components 4.5.0 → 4.7.0

package/dist/components/Card/components/CardHeader/CardHeader.d.ts

@@ -6,8 +6,8 @@ export interface CardHeaderProps extends BoxProps {
      */
     title?: ReactNode;
     /**
-     * Description copy of the card
+     * Description of the card, or element below the title
      */
-    description?: string;
+    description?: ReactNode;
 }
 export declare const CardHeader: FC<CardHeaderProps>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortal, };

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;
+export declare const WithPortal: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 20 Jan 2025 18:32:29 GMT
+ * Generated on Wed, 29 Jan 2025 18:56:01 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -168,6 +168,12 @@
 
 .focus\:background-color-toast-error:focus { background: var(--color-background-toast-error); }
 
+.background-color-tooltip { background: var(--color-background-tooltip); }
+
+.hover\:background-color-tooltip:hover { background: var(--color-background-tooltip); }
+
+.focus\:background-color-tooltip:focus { background: var(--color-background-tooltip); }
+
 .background-color-brand-gradient { background: var(--color-background-brand-gradient); }
 
 .hover\:background-color-brand-gradient:hover { background: var(--color-background-brand-gradient); }
@@ -690,6 +696,12 @@
 
 .focus\:font-color-toast-error:focus { color: var(--color-font-toast-error); }
 
+.font-color-tooltip { color: var(--color-font-tooltip); }
+
+.hover\:font-color-tooltip:hover { color: var(--color-font-tooltip); }
+
+.focus\:font-color-tooltip:focus { color: var(--color-font-tooltip); }
+
 .font-color-placeholder { color: var(--color-font-placeholder); }
 
 .hover\:font-color-placeholder:hover { color: var(--color-font-placeholder); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 20 Jan 2025 18:32:29 GMT
+ * Generated on Wed, 29 Jan 2025 18:56:01 GMT
  */
 
 :root {
@@ -36,6 +36,7 @@
   --color-background-modal: #ffffff;
   --color-background-toast: #262626;
   --color-background-toast-error: #ef4444;
+  --color-background-tooltip: #262626;
   --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
   --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #fa0a64 100%);
   --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
@@ -196,6 +197,7 @@
   --color-font-button-danger-active: #ffffff;
   --color-font-toast: #f5f5f5;
   --color-font-toast-error: #ffffff;
+  --color-font-tooltip: #f5f5f5;
   --color-font-placeholder: #a3a3a3; /* Placeholder color for input fields */
   --color-font-brand-yellow: #ffd200;
   --color-font-brand-orange: #ff911e;
@@ -336,7 +338,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Mon, 20 Jan 2025 18:32:29 GMT
+ * Generated on Wed, 29 Jan 2025 18:56:01 GMT
  */
 
 :root.dark {
@@ -365,6 +367,7 @@
   --color-background-button-danger-active: #b91c1c;
   --color-background-modal: #262626;
   --color-background-toast: #f5f5f5;
+  --color-background-tooltip: #f5f5f5;
   --color-border-default: #525252;
   --color-border-subtle: #404040;
   --color-border-hover: #404040;
@@ -405,6 +408,7 @@
   --color-font-button-tertiary-hover: #ffffff;
   --color-font-button-tertiary-active: #ffffff;
   --color-font-toast: #404040;
+  --color-font-tooltip: #404040;
   --color-font-placeholder: #737373; /* Placeholder color for input fields */
 }