@hyphen/hyphen-components 4.6.0 → 4.7.1

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
 export type BadgeSize = 'sm' | 'md' | 'lg';
 export type BadgeVariant = 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'hyphen';
@@ -28,4 +28,4 @@ export interface BadgeProps {
      */
     [x: string]: any;
 }
-export declare const Badge: FC<BadgeProps>;
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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,8 @@
+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;
+export declare const BadgeTooltip: () => 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 */
 }