react-restyle-components 0.2.22 → 0.2.24

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.js

@@ -0,0 +1,271 @@
+import React from 'react';
+import { TooltipProvider } from '../../tooltip/tooltip.component';
+import { ButtonGroup } from './buttonGroup.component';
+import { Button } from '../button.component';
+import { BrowserRouter } from 'react-router-dom';
+const meta = {
+    title: 'Design System/Atoms/Button/ButtonGroup',
+    parameters: {
+        componentSubtitle: 'A container for grouping buttons together. Used when you want no space between buttons. Can also be used to create a split button using a Button and a DropdownMenu.',
+    },
+    component: ButtonGroup,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement(React.Fragment, null,
+            React.createElement(BrowserRouter, null,
+                React.createElement(TooltipProvider, null,
+                    React.createElement(Story, null))))),
+    ],
+};
+export default meta;
+/**
+ * At its simplest you can just wrap any `Button` elements in a `ButtonGroup`.
+ *
+ * All props for button scale, variant, etc stay on the Button.
+ * You should use the same scale for all buttons in a group but could mix and match variants and levels.
+ */
+export const Basic = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Button, { scale: "s" }, "Button 1"),
+            React.createElement(Button, { scale: "s" }, "Button 2"),
+            React.createElement(Button, { scale: "s" }, "Button 3"))),
+    },
+};
+/**
+ * If only a single `Button` is passed in, it will be visually the same as not wrapping in a `ButtonGroup`.
+ */
+export const BasicOneButton = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Button, { scale: "s" }, "Button 1"))),
+    },
+};
+/**
+ * To creat a split button you would add a `DropdownMenu` as the last child. Its trigger should be a `Button`.
+ */
+// export const SplitButton: Story = {
+//   args: {
+//     children: (
+//       <>
+//         <Button level="primary" scale="xs" variant="neutral">
+//           Button 1
+//         </Button>
+//         <DropdownMenu
+//           align="end"
+//           sideOffset={2}
+//           trigger={
+//             <Button
+//               level="primary"
+//               iconOnly={true}
+//               scale="xs"
+//               variant="neutral"
+//             >
+//               👇
+//             </Button>
+//           }
+//         >
+//           <DropdownMenuSection divider="none">
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 1
+//             </DropdownMenuButton>
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 2
+//             </DropdownMenuButton>
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 3
+//             </DropdownMenuButton>
+//           </DropdownMenuSection>
+//         </DropdownMenu>
+//       </>
+//     ),
+//   },
+// };
+/**
+ * ButtonGroups can be passed `orientation="vertical"` to stack buttons vertically.
+ */
+export const Vertical = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Button, { scale: "s" }, "Button 1"),
+            React.createElement(Button, { scale: "s" }, "Button 2"),
+            React.createElement(Button, { scale: "s" }, "Button 3"))),
+        orientation: 'vertical',
+    },
+};
+/**
+ * Vertical ButtonGroups can also contain a `DropdownMenu`.
+ */
+// export const VerticalWithDropdown: Story = {
+//   args: {
+//     children: (
+//       <>
+//         <Button scale="s">Button 1</Button>
+//         <DropdownMenu
+//           side="right"
+//           trigger={
+//             <Button scale="s" variant="accent">
+//               Open 👉
+//             </Button>
+//           }
+//         >
+//           <DropdownMenuSection divider="none">
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 1
+//             </DropdownMenuButton>
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 2
+//             </DropdownMenuButton>
+//             <DropdownMenuButton
+//               onClick={() => {
+//                 // noop
+//               }}
+//             >
+//               Item 3
+//             </DropdownMenuButton>
+//           </DropdownMenuSection>
+//         </DropdownMenu>
+//         <Button scale="s">Button 2</Button>
+//       </>
+//     ),
+//     orientation: 'vertical',
+//   },
+// };
+/**
+ * ButtonGroups also work with LinkButtons and ToggleButtons.
+ *
+ * However ToggleButton styling is not currently ideal as the divider is hard to see.
+ * Also note that ButtonGroup with ToggleButtons is not the same as a ToggleGroup. The former will allow multiple buttons to be active at once, whereas the latter will only allow one button to be active at a time.
+ */
+// export const PseudoButtons: Story = {
+//   args: {
+//     children: <></>,
+//   },
+//   render: () => (
+//     <>
+//       <ButtonGroup>
+//         <LinkButton Component={Link} to="#" scale="s">
+//           LinkButton 1
+//         </LinkButton>
+//         <LinkButton Component={Link} to="#" scale="s">
+//           LinkButton 2
+//         </LinkButton>
+//         <LinkButton Component={Link} to="#" scale="s" variant="danger">
+//           LinkButton 3
+//         </LinkButton>
+//       </ButtonGroup>
+//       <br />
+//       <ButtonGroup>
+//         <ToggleButton scale="s">ToggleButton 1</ToggleButton>
+//         <ToggleButton scale="s">ToggleButton 2</ToggleButton>
+//         <ToggleButton scale="s">ToggleButton 3</ToggleButton>
+//       </ButtonGroup>
+//     </>
+//   ),
+// };
+export const FillModes = {
+    args: {
+        children: React.createElement(React.Fragment, null),
+    },
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement("h1", null, "Hug"),
+        React.createElement("p", null, "By default the ToggleGroup will hug its contents vertically and horizontally. In most cases this is what you will want as the Design System mostly uses this approach."),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, null,
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("h1", null, "Orientation: horizontal"),
+        React.createElement("p", null, "But you can make it fill its parent and stretch out its children. Note that only the minimum amount of styles have been added. It is likely you will need to further customize your Buttons using className to suit your use case."),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { horizontalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("p", null, "Or vertically"),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { verticalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("p", null, "Or both"),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { verticalSizing: "fill", horizontalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("h1", null, "Orientation: vertical"),
+        React.createElement("p", null, "These also work vertically. Here is horizontal fill"),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { orientation: "vertical", horizontalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("p", null, "vertical"),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { orientation: "vertical", verticalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))),
+        React.createElement("p", null, "and both"),
+        React.createElement("div", { style: {
+                width: '400px',
+                height: '200px',
+                display: 'grid',
+                background: '#eee',
+            } },
+            React.createElement(ButtonGroup, { orientation: "vertical", verticalSizing: "fill", horizontalSizing: "fill" },
+                React.createElement(Button, { scale: "s" }, "Button 1"),
+                React.createElement(Button, { scale: "s" }, "Button 2"),
+                React.createElement(Button, { scale: "s" }, "Button 3"))))),
+};

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReactNode } from 'react';
+export declare const ButtonGroup: ({ children, orientation, horizontalSizing, verticalSizing, className, }: {
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical" | undefined;
+    horizontalSizing?: "fill" | "hug" | undefined;
+    verticalSizing?: "fill" | "hug" | undefined;
+    className?: string | undefined;
+}) => React.JSX.Element;

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import s from '../button.module.css';
+import clsx from 'clsx';
+export const ButtonGroup = ({ children, orientation = 'horizontal', horizontalSizing = 'hug', verticalSizing = 'hug', className, }) => (React.createElement("div", { className: clsx(s.group, s[`is${orientation}`], s[`ishorizontal${horizontalSizing}`], s[`isvertical${verticalSizing}`], className) }, children));

package/lib/src/core-components/atoms/button/linkButton.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Wraps a provided Link component in our button styles.
+ * Assumes your chosen Router library uses a Link component that uses a `to` prop.
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<Omit<import("./Button.types").ButtonProps, "loading"> & {
+    to: string;
+    Component: React.ForwardRefExoticComponent<import("react-router/dist/development/fog-of-war-DU_DzpDb").s & React.RefAttributes<HTMLAnchorElement>>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;

package/lib/src/core-components/atoms/button/linkButton.component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import s from './button.module.css';
+import { Tooltip } from '../tooltip/tooltip.component';
+/**
+ * Wraps a provided Link component in our button styles.
+ * Assumes your chosen Router library uses a Link component that uses a `to` prop.
+ */
+export const LinkButton = forwardRef(({ to, tooltip, className, level = 'primary', variant = 'brand', scale = 'm', iconOnly = false, children, Component, focus = 'visible', ...args }, ref) => {
+    const linkClasses = clsx(s.button, s.linkButton, s[`button-level-${level}`], s[`button-theme-${variant}`], s[`button-size-${scale}`], iconOnly && s[`button-icon-only`], focus === 'focus' && [s.focus], focus === 'visible' && s[`focus-visible`], className);
+    const link = (React.createElement(Component, { ref: ref, className: linkClasses, ...args, to: to }, children));
+    if (tooltip) {
+        return (React.createElement(Tooltip, { content: tooltip, padding: "s" }, link));
+    }
+    else {
+        return link;
+    }
+});
+LinkButton.displayName = 'LinkButton';

package/lib/src/core-components/atoms/button/toggleButton.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * A checkbox styled to look like our Button, for a toggleable state UI component.
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("./Button.types").ButtonProps, "variant"> & {
+    labelClassName?: string | undefined;
+    contentClassName?: string | undefined;
+    active?: boolean | undefined;
+    variant?: "brand" | "accent" | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/lib/src/core-components/atoms/button/toggleButton.component.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import s from './button.module.css';
+import { Tooltip } from '../tooltip/tooltip.component';
+/**
+ * A checkbox styled to look like our Button, for a toggleable state UI component.
+ */
+export const ToggleButton = forwardRef(({ tooltip, onChange, labelClassName, contentClassName, active, disabled = false, children, level = 'primary', variant = 'brand', scale = 'm', iconOnly = false, focus = 'visible', loading = false, ...restProps }, ref) => {
+    const controlled = typeof active === 'undefined' ? {} : { checked: active };
+    const labelClassNames = clsx(disabled && s.isDisabled, s.label, contentClassName);
+    const childrenClassNames = clsx(s.button, s.toggleButton, s[`button-level-${level}`], s[`button-theme-${variant}`], s[`button-size-${scale}`], loading && s.loading, iconOnly && s[`button-icon-only`], labelClassName);
+    const checkboxClassNames = clsx(s.checkbox, s.visuallyHidden, focus === 'focus' && [s.focus], focus === 'visible' && s[`focus-visible`]);
+    const renderContent = (React.createElement("label", { className: labelClassNames },
+        React.createElement("input", { ref: ref, type: "checkbox", onChange: onChange, disabled: disabled || loading, ...controlled, ...restProps, className: checkboxClassNames }),
+        React.createElement("span", { className: childrenClassNames }, children)));
+    if (!tooltip) {
+        return renderContent;
+    }
+    return (React.createElement(Tooltip, { content: tooltip, padding: "s" }, renderContent));
+});
+ToggleButton.displayName = 'ToggleButton';

package/lib/src/core-components/atoms/icons/icons.component.js

@@ -26,7 +26,7 @@ export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onC
         return (React.createElement("div", { onClick: () => {
                 if (!isDisable)
                     onClick && onClick();
-            } }, !_.isEmpty(tooltip) ? (React.createElement(Tooltip, { tooltipText: tooltip },
+            } }, !_.isEmpty(tooltip) ? (React.createElement(Tooltip, { content: tooltip },
             React.createElement(ElementIcon, { ...iconProps }))) : (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading...") },
             React.createElement(ElementIcon, { ...iconProps })))));
     }

package/lib/src/core-components/atoms/pdf/pdf-typography.components.js

@@ -4,7 +4,7 @@ Font.register({
     family: 'ArimaBold',
     fonts: [
         {
-            src: require('/src/library/assets/fonts/arima/arima-bold.ttf'),
+            src: '../../../library/assets/fonts/arima/arima-bold.ttf',
             fontStyle: 'normal',
             fontWeight: 'bold',
         },
@@ -12,7 +12,7 @@ Font.register({
 });
 Font.register({
     family: 'ArimaRegular',
-    src: require('/src/library/assets/fonts/arima/arima-regular.ttf'),
+    src: '../../../library/assets/fonts/arima/arima-regular.ttf',
 });
 export const PdfHeading = ({ fontWeight = 'bold', fontSize = 22, fontFamily = 'ArimaRegular', style, children, }) => {
     return (React.createElement(Text, { style: {

package/lib/src/core-components/atoms/tabs/tabs.component.d.ts

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { ReactNode, ReactElement } from 'react';
 import '../../../tc.css';
+interface TabProps {
+    label: string;
+    children: ReactNode;
+}
+export declare const Tab: ({ label, children }: TabProps) => React.JSX.Element;
 interface TabsProps {
+    tabsClass?: string;
     options: Array<{
         title: string;
         icon: string;
     }>;
     onSelect: (item: string) => void;
+    children?: ReactElement<TabProps> | ReactElement<TabProps>[];
 }
-export declare const Tabs: ({ options, onSelect }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ tabsClass, options, onSelect, children, }: TabsProps) => React.JSX.Element;
 export {};

package/lib/src/core-components/atoms/tabs/tabs.component.js

@@ -1,19 +1,24 @@
 import React, { useState } from 'react';
 import { Icon } from '../..';
 import '../../../tc.css';
-export const Tabs = ({ options, onSelect }) => {
+export const Tab = ({ label, children }) => {
+    return (React.createElement("div", { className: "flex", title: label }, children));
+};
+export const Tabs = ({ tabsClass = 'bg-blue-700', options, onSelect, children, }) => {
     const [selected, setSelected] = useState(options[0].title);
-    return (React.createElement("div", { className: "flex justify-center" },
-        React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "bg-orange1 rounded-md" },
-            React.createElement("div", { className: `inline-flex items-center justify-center p-3 border-b-2 gap-1 ${item.title == selected
-                    ? 'text-white font-bold md:text-md  border-primary active'
-                    : ' text-gray-200  md:text-md border-transparent'}`, onClick: () => {
+    const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
+    return (React.createElement("div", { className: "flex flex-col" },
+        React.createElement("ul", { className: "flex -mb-px text-sm font-medium text-center text-black cursor-pointer gap-1" }, options?.map((item, index) => (React.createElement("li", { key: index, className: `${tabsClass} rounded-md` },
+            React.createElement("div", { className: `inline-flex items-center justify-center p-2 border-b-2 gap-1 ${item.title == selected
+                    ? 'text-white font-bold   border-primary active'
+                    : ' text-gray-200   border-transparent'}`, onClick: () => {
                     setSelected(item.title);
                     onSelect(item.title);
                 } },
-                React.createElement(Icon, { nameIcon: item.icon, propsIcon: {
-                        color: item.title == selected ? '#ffffff' : '#000000',
+                React.createElement(Icon, { nameIcon: item?.icon, propsIcon: {
+                        color: item?.title == selected ? '#ffffff' : '#000000',
                         size: 24,
                     } }),
-                React.createElement("span", { className: "text-3md" }, item.title))))))));
+                React.createElement("span", { className: "text-md" }, item.title)))))),
+        React.createElement("div", { className: "flex" }, tabs[options?.findIndex((item) => item.title === selected)])));
 };

package/lib/src/core-components/atoms/tooltip/Tooltip.module.css

@@ -0,0 +1,44 @@
+:global .theme--dark {
+  --tooltip_bg: var(--Gl600);
+  --tooltip_color: var(--N50);
+}
+
+:global .theme--light {
+  --tooltip_bg: var(--N0);
+  --tooltip_color: var(--N600);
+}
+:where(.tooltip_content) {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--tooltip_color);
+  background-color: var(--tooltip_bg);
+  opacity: 1;
+  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.08));
+  max-width: min(500px, 90vw);
+  z-index: var(--tooltip-z-custom);
+  border-radius: 3px;
+}
+
+.tooltip_content.tooltip_padding_s {
+  padding: 4px;
+}
+.tooltip_content.tooltip_padding_m {
+  padding: 8px;
+}
+.tooltip_content.tooltip_padding_l {
+  padding: 12px;
+}
+.tooltip_content.tooltip_padding_xl {
+  padding: 16px;
+}
+.tooltip_content.tooltip_padding_custom {
+  padding: var(--tooltip_padding);
+}
+
+.tooltip_arrow {
+  fill: var(--tooltip_bg);
+}
+
+.tooltip_reset_button {
+  all: unset;
+}

package/lib/src/core-components/atoms/tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, padding, className, }: React.PropsWithChildren<import("./Tooltip.types").TooltipProps>) => React.JSX.Element;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        className?: string | undefined;
+        padding?: "s" | "xl" | "l" | "m" | "custom" | undefined;
+        delay?: number | undefined;
+        side?: "top" | "right" | "bottom" | "left" | undefined;
+        sideOffset?: number | undefined;
+        content?: React.ReactNode;
+        align?: "center" | "start" | "end" | undefined;
+        alignOffset?: number | undefined;
+        avoidCollisions?: boolean | undefined;
+        disabled?: boolean | undefined;
+        children?: React.ReactNode;
+    }>) => React.JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicExample: Story;
+export declare const Positions: Story;
+export declare const JSXContent: Story;
+export declare const JSXContentDifferentAlignments: Story;

package/lib/src/core-components/atoms/tooltip/Tooltip.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Button } from '../button/button.component';
+import { Tooltip, TooltipProvider } from './tooltip.component';
+import { Title, Subtitle, Primary, Controls, Stories } from '@storybook/blocks';
+// import {AxeIcon} from '../AxeIcon/AxeIcon';
+const meta = {
+    title: 'Design System/Atoms/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            page: () => (React.createElement(React.Fragment, null,
+                React.createElement(Title, null),
+                React.createElement(Subtitle, null),
+                React.createElement(Primary, null),
+                React.createElement(Controls, null),
+                React.createElement(Stories, null))),
+        },
+    },
+    decorators: [
+        (Story) => (React.createElement(TooltipProvider, null,
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const BasicExample = {
+    args: { children: '✏️', content: 'This is a tooltip' },
+};
+export const Positions = {
+    parameters: {
+        controls: { hideNoControlsWarning: true, exclude: ['content', 'position'] },
+        docs: {
+            description: {
+                story: 'Example shows the same `Tooltip` used for all 4 position.',
+            },
+        },
+    },
+    render: (args) => (React.createElement("div", { style: { padding: '100px', display: 'flex', gap: '12px' } },
+        React.createElement(Tooltip, { ...args, content: "top", side: "top" },
+            React.createElement("span", null, "\uD83D\uDC46")),
+        React.createElement(Tooltip, { ...args, content: "bottom", side: "bottom" },
+            React.createElement("span", null, "\uD83D\uDC47")),
+        React.createElement(Tooltip, { ...args, content: "left", side: "left" },
+            React.createElement("span", null, "\uD83D\uDC48")),
+        React.createElement(Tooltip, { ...args, content: "right", side: "right" },
+            React.createElement("span", null, "\uD83D\uDC49")))),
+};
+export const JSXContent = {
+    parameters: {
+        controls: { hideNoControlsWarning: true, include: [] },
+        docs: {
+            description: {
+                story: 'JSX tooltip for a button.',
+            },
+        },
+    },
+    render: () => (React.createElement("div", { style: { padding: '100px', display: 'flex', gap: '12px' } },
+        React.createElement(Tooltip, { side: "top", content: React.createElement(React.Fragment, null,
+                React.createElement(Button, { variant: "accent" }, "\u2728\u2728\u2728"),
+                ' ',
+                React.createElement(Button, { variant: "danger" }, "\u2728\u2728\u2728")) },
+            React.createElement("span", null, "Fancy Tooltip")))),
+};
+export const JSXContentDifferentAlignments = {
+    parameters: {
+        controls: { hideNoControlsWarning: true, include: [] },
+        docs: {
+            description: {
+                story: 'JSX tooltip for a button with all 3 alignments options and side set to top.',
+            },
+        },
+    },
+    render: () => (React.createElement("div", { style: { padding: '100px', display: 'flex', gap: '12px' } },
+        React.createElement(Tooltip, { side: "top", align: "start", content: React.createElement("span", null, "Tooltip") },
+            React.createElement(Button, { variant: "danger" }, "Align Start")),
+        React.createElement(Tooltip, { side: "top", align: "center", content: React.createElement("span", null, "Tooltip") },
+            React.createElement(Button, { variant: "danger" }, "Align Center")),
+        React.createElement(Tooltip, { side: "top", align: "end", content: React.createElement("span", null, "Tooltip") },
+            React.createElement(Button, { variant: "danger" }, "Align End")))),
+};
+// export const JsxAsTrigger: Story = {
+//   parameters: {
+//     controls: { exclude: ['children'] },
+//     docs: {
+//       description: {
+//         story:
+//           'The trigger you pass needs to be able to receive a ref and pass it to whichever DOM Node you plan to use for positioning your tooltip. It also needs to pass any arbitrary/unknown props onto the same DOM node, as our library will be passing on various required custom data-attributes to it. If your component cannot do this, a solution is to just wrap it in a div, span or other html element - eg `<div><MyComponent/></div>`.'
+//       }
+//     }
+//   },
+//   render: () => (
+//     <div style={{ width: 'max-content' }}>
+//       <Tooltip content={'🪓🪓🪓🪓🪓'}>
+//         <span>
+//           <AxeIcon axeCode={4} />
+//         </span>
+//       </Tooltip>
+//     </div>
+//   )
+// };

package/lib/src/core-components/atoms/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type TooltipProps = {
+    /** custom classname to pass to the tooltip element */
+    className?: string;
+    /** padding within the tooltip element*/
+    padding?: 's' | 'm' | 'l' | 'xl' | 'custom';
+    /** The delay (in ms) before showing the tooltip */
+    delay?: number;
+    /** Sets the preferred position relative to the trigger */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Space between the tooltip element and anchor element (arrow not included in calculation) */
+    sideOffset?: number;
+    /** Use this to set the content of the tooltip*/
+    content?: React.ReactNode;
+    /** Sets the preferred alignment relative to the trigger & position */
+    align?: 'start' | 'center' | 'end';
+    /**Space between alignment point and tooltip */
+    alignOffset?: number;
+    /** If set to true then in the case of collision finds the alternate ways by changing the position or aligment or both to properly display tooltip  */
+    avoidCollisions?: boolean;
+    /** Set true to prevent tooltip from displaying */
+    disabled?: boolean;
+};

package/lib/src/core-components/atoms/tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+export {};