From e93810f3115751e3bcb1aa809039ba31f9b38d03 Mon Sep 17 00:00:00 2001
From: zaaakher <zakhermasri@gmail.com>
Date: Mon, 20 May 2024 00:13:39 +0300
Subject: [PATCH] chore: ability to show tooltip in `Radio` + new `HelperText`
 component

SIKKA-6908[closed]
SIKKA-6907[closed]
SIKKA-6906[closed]
SIKKA-6901[closed]
SIKKA-6904[closed]
---
 apps/docs/CHANGELOG.md                        |   7 ++
 apps/docs/package.json                        |   2 +-
 packages/components/CHANGELOG.md              |  14 +++
 .../blocks/auth/CodeConfirmation.tsx          |   2 +-
 .../components/elements/button/Button.tsx     |  21 ++--
 .../elements/dataTable/DataTable.tsx          |  28 +++++
 .../elements/datePicker/DatePicker.tsx        |  17 ++-
 .../elements/datePicker/DatePickerButton.tsx  |  16 ++-
 .../elements/helperText/HelperText.tsx        |  12 ++
 .../components/elements/helperText/index.ts   |   1 +
 packages/components/elements/input/Input.tsx  |   2 +-
 packages/components/elements/radio/Radio.tsx  | 110 +++++++++++++-----
 .../components/elements/skeleton/Skeleton.tsx |   6 +-
 packages/components/package.json              |   2 +-
 packages/storybook/CHANGELOG.md               |   7 ++
 packages/storybook/package.json               |   2 +-
 .../ElementsStories/DatePicker.stories.tsx    |  27 ++++-
 .../stories/ElementsStories/Radio.stories.tsx |  37 +++++-
 18 files changed, 248 insertions(+), 65 deletions(-)
 create mode 100644 packages/components/elements/helperText/HelperText.tsx
 create mode 100644 packages/components/elements/helperText/index.ts

diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
index 0281f199..84491963 100644
--- a/apps/docs/CHANGELOG.md
+++ b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.35.0
+
 ## 0.0.63
 
 ### Patch Changes
diff --git a/apps/docs/package.json b/apps/docs/package.json
index dd64f627..758af685 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c14c70d8..749d26b4 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @sikka/hawa
 
+## 0.35.0
+
+### Minor Changes
+
+- `CodeConfirmation` fix cancel button variant
+- `Button`: ability to pass `labelProps`
+- `Button`: adds `HelperText` and the ability to show/hide it with `showHelperText` prop
+- `DataTable` an X button in the search input to clear search
+- `DatePicker`: ability to pass `popoverContentProps`
+- `DatePickerButton`: additional customization with `buttonClassNames`
+- New component: `HerlperText`
+- `Input`: fix width issues
+- `Radio`: ability to pass `tooltip` and `tooltipContentProps` to a radio option
+
 ## 0.34.2
 
 ### Patch Changes
diff --git a/packages/components/blocks/auth/CodeConfirmation.tsx b/packages/components/blocks/auth/CodeConfirmation.tsx
index 90cc76aa..27a2c76a 100644
--- a/packages/components/blocks/auth/CodeConfirmation.tsx
+++ b/packages/components/blocks/auth/CodeConfirmation.tsx
@@ -139,7 +139,7 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
           )}
 
           <div className="hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2">
-            <Button variant="secondary">
+            <Button variant="outline">
               {props.texts?.cancel || "Cancel"}
             </Button>
             <Button isLoading={props.confirmLoading}>
diff --git a/packages/components/elements/button/Button.tsx b/packages/components/elements/button/Button.tsx
index 0d1762e7..ac98256c 100644
--- a/packages/components/elements/button/Button.tsx
+++ b/packages/components/elements/button/Button.tsx
@@ -3,7 +3,8 @@ import * as React from "react";
 import { cn } from "@util/index";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { Label } from "../label";
+import { HelperText } from "../helperText";
+import { Label, LabelProps } from "../label";
 import { Loading } from "../loading/Loading";
 
 const buttonVariants = cva(
@@ -37,10 +38,7 @@ const buttonVariants = cva(
         smallIcon: "hawa-h-7 hawa-w-7",
       },
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+    defaultVariants: { variant: "default", size: "default" },
   },
 );
 
@@ -51,6 +49,10 @@ export interface ButtonProps
   centered?: boolean;
   isLoading?: boolean;
   label?: string;
+  labelProps?: LabelProps;
+  /** The small red text under the input field to show validation.   */
+  helperText?: any;
+  showHelperText?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -64,21 +66,23 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       centered = true,
       isLoading,
       children,
+      labelProps,
+      showHelperText = false,
       ...props
     },
     ref,
   ) => {
     const Comp = "button";
 
-    // Determine the color for the HawaLoading component based on the variant
+    // Determine the color for the Loading component based on the variant
     const loadingColor =
       variant === "outline" || variant === "ghost" || variant === "neoBrutalism"
         ? "hawa-bg-primary"
         : "hawa-bg-primary-foreground";
 
     return (
-      <div className="flex flex-col">
-        {label && <Label className="hawa-mb-2">{label}</Label>}
+      <div className="hawa-flex hawa-flex-col hawa-gap-2">
+        {label && <Label {...labelProps}>{label}</Label>}
         <Comp
           className={cn(
             buttonVariants({ variant, size, className }),
@@ -102,6 +106,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             children
           )}
         </Comp>
+        {showHelperText && <HelperText helperText={props.helperText} />}
       </div>
     );
   },
diff --git a/packages/components/elements/dataTable/DataTable.tsx b/packages/components/elements/dataTable/DataTable.tsx
index 4421b130..b0e07884 100644
--- a/packages/components/elements/dataTable/DataTable.tsx
+++ b/packages/components/elements/dataTable/DataTable.tsx
@@ -148,12 +148,40 @@ export const DataTable = <DataProps extends {}>({
         <div className="hawa-flex hawa-flex-row hawa-items-center hawa-gap-4">
           {enableSearch && (
             <Input
+              inputProps={{ title: "" }}
               forceHideHelperText
               placeholder={props.texts?.searchPlaceholder}
               value={globalFilter ?? ""}
               onChange={(event: any) => setGlobalFilter(event.target.value)}
               margin="none"
               className="hawa-w-full md:hawa-max-w-sm"
+              endIconProps={{ className: "!hawa-end-2" }}
+              endIcon={
+                globalFilter ? (
+                  <Button
+                    onClick={() => setGlobalFilter("")}
+                    variant={"ghost"}
+                    size={"smallIcon"}
+                    aria-label="Clear Search"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="hawa-icon hawa-text-muted-foreground"
+                    >
+                      <path d="M18 6 6 18" />
+                      <path d="m6 6 12 12" />
+                    </svg>
+                  </Button>
+                ) : null
+              }
             />
           )}
           {enableHideColumns && (
diff --git a/packages/components/elements/datePicker/DatePicker.tsx b/packages/components/elements/datePicker/DatePicker.tsx
index 81f42f79..f6578ab8 100644
--- a/packages/components/elements/datePicker/DatePicker.tsx
+++ b/packages/components/elements/datePicker/DatePicker.tsx
@@ -1,8 +1,4 @@
 import * as React from "react";
-import {
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
@@ -12,16 +8,27 @@ import { PopoverRoot, PopoverContent, PopoverTrigger } from "../popover";
 type DatePickerProps = CalendarProps & {
   trigger: React.ReactNode;
   popoverTriggerProps?: PopoverPrimitive.PopoverTriggerProps;
+  popoverContentProps?: PopoverPrimitive.PopoverContentProps;
+  /**
+   * Make sure this is true when DatePickerButton has forceHideHelperText set to true
+   */
+  required?: boolean;
 };
 export const DatePicker: React.FC<DatePickerProps> = ({
   trigger,
   popoverTriggerProps,
+  popoverContentProps,
+  required,
   ...props
 }) => {
   return (
     <PopoverRoot>
       <PopoverTrigger {...popoverTriggerProps}>{trigger}</PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent
+        align={props.dir === "rtl" ? "end" : "start"}
+        sideOffset={required ? -16 : -4}
+        {...popoverContentProps}
+      >
         <Calendar {...props} />
       </PopoverContent>
     </PopoverRoot>
diff --git a/packages/components/elements/datePicker/DatePickerButton.tsx b/packages/components/elements/datePicker/DatePickerButton.tsx
index 41381051..02354bb8 100644
--- a/packages/components/elements/datePicker/DatePickerButton.tsx
+++ b/packages/components/elements/datePicker/DatePickerButton.tsx
@@ -1,28 +1,40 @@
-import { FC } from "react";
+import React, { FC } from "react";
 
 import { cn } from "@util/index";
 
 import { Button } from "../button";
+import { LabelProps } from "../label";
 
 type DatePickerButtonProps = {
   label?: string;
   value?: string | React.ReactNode;
   multiple?: boolean;
+  labelProps?: LabelProps;
+  /** The small red text under the input field to show validation.   */
+  helperText?: any;
+  showHelperText?: boolean;
+  buttonClassNames?: string;
 };
 export const DatePickerButton: FC<DatePickerButtonProps> = ({
   label,
   value,
   multiple,
+  buttonClassNames,
+  ...props
 }) => {
   return (
     <Button
       label={label}
+      labelProps={props.labelProps}
+      helperText={props.helperText}
+      showHelperText={props.showHelperText}
       variant={"outline"}
+      title={value as string}
       className={cn(
         "!hawa-w-full hawa-flex hawa-flex-row",
         multiple && "hawa-flex-row",
+        buttonClassNames,
       )}
-      title={value as string}
     >
       <span
         className={cn(
diff --git a/packages/components/elements/helperText/HelperText.tsx b/packages/components/elements/helperText/HelperText.tsx
new file mode 100644
index 00000000..d73aa0f1
--- /dev/null
+++ b/packages/components/elements/helperText/HelperText.tsx
@@ -0,0 +1,12 @@
+import { cn } from "@util/index";
+
+export const HelperText = ({ helperText }: { helperText: string }) => (
+  <p
+    className={cn(
+      "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+      helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0",
+    )}
+  >
+    {helperText}
+  </p>
+);
diff --git a/packages/components/elements/helperText/index.ts b/packages/components/elements/helperText/index.ts
new file mode 100644
index 00000000..f5ef62e9
--- /dev/null
+++ b/packages/components/elements/helperText/index.ts
@@ -0,0 +1 @@
+export * from "./HelperText";
\ No newline at end of file
diff --git a/packages/components/elements/input/Input.tsx b/packages/components/elements/input/Input.tsx
index 21e51d73..179cd8e2 100644
--- a/packages/components/elements/input/Input.tsx
+++ b/packages/components/elements/input/Input.tsx
@@ -115,7 +115,7 @@ export const Input = forwardRef<HTMLInputElement, TextFieldTypes>(
             </span>
           )}
           {props.isLoading ? (
-            <div className="hawa-pb-2">
+            <div className="hawa-pb-2 hawa-w-full">
               <Skeleton className="hawa-h-[40px] hawa-w-full" />
             </div>
           ) : (
diff --git a/packages/components/elements/radio/Radio.tsx b/packages/components/elements/radio/Radio.tsx
index 8abad5f0..e96fd2ec 100644
--- a/packages/components/elements/radio/Radio.tsx
+++ b/packages/components/elements/radio/Radio.tsx
@@ -1,9 +1,12 @@
 import React, { useState, FC, useRef, useEffect, forwardRef } from "react";
 
+import { PopoverContentProps } from "@radix-ui/react-popover";
 import { cn } from "@util/index";
 
 import { DirectionType, OrientationType } from "../../types/commonTypes";
 import { Label, LabelProps } from "../label/Label";
+import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover";
+import { Tooltip } from "../tooltip";
 
 export type RadioOptionsTypes = {
   value: any;
@@ -11,6 +14,8 @@ export type RadioOptionsTypes = {
   disabled?: any;
   sublabel?: any;
   icon?: any;
+  tooltip?: string;
+  tooltipContentProps?: PopoverContentProps;
 };
 
 type RadioTypes = {
@@ -49,9 +54,6 @@ export const Radio = forwardRef<HTMLInputElement, RadioTypes>(
     },
     ref,
   ) => {
-    const [selectedOption, setSelectedOption] = useState(
-      props.defaultValue || props.value,
-    );
     let activeTabStyle =
       "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
     let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all  hawa-bg-primary-foreground dark:hover:hawa-text-white
@@ -75,6 +77,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioTypes>(
     const [parentDirection, setParentDirection] = React.useState<string | null>(
       null,
     );
+    const [selectedOption, setSelectedOption] = useState(
+      props.defaultValue || props.value,
+    );
+    const [openTooltip, setOpenTooltip] = useState<number | null>(null);
+
     const parentRef = useRef<HTMLUListElement>(null);
 
     useEffect(() => {
@@ -94,6 +101,21 @@ export const Radio = forwardRef<HTMLInputElement, RadioTypes>(
         console.log("onChange was not provided");
       }
     };
+
+    const radio_option_tabs_styling = [
+      "hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
+      !props.disabled && "hawa-cursor-pointer",
+      orientation === "horizontal" &&
+        parentDirection === "ltr" &&
+        "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
+      orientation === "horizontal" &&
+        parentDirection === "rtl" &&
+        "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
+      orientation === "vertical" &&
+        "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+      tabSizeStyle[size],
+    ];
+
     switch (design) {
       case "tabs":
         return (
@@ -112,35 +134,59 @@ export const Radio = forwardRef<HTMLInputElement, RadioTypes>(
                 tabsContainerClassName,
               )}
             >
-              {props.options?.map((opt: any, o) => (
-                <li
-                  aria-current="page"
-                  onClick={() => {
-                    if (props.disabled) return;
-                    handleChange(opt);
-                  }}
-                  className={cn(
-                    "hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
-                    !props.disabled && "hawa-cursor-pointer",
-                    orientation === "horizontal" &&
-                      parentDirection === "ltr" &&
-                      "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
-                    orientation === "horizontal" &&
-                      parentDirection === "rtl" &&
-                      "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
-                    orientation === "vertical" &&
-                      "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
-                    tabSizeStyle[size],
-                    selectedOption === opt.value
-                      ? activeTabStyle
-                      : inactiveTabStyle,
-                  )}
-                  key={o}
-                >
-                  {opt.icon && opt.icon}
-                  {opt.label}
-                </li>
-              ))}
+              {props.options?.map((opt, o) => {
+                return opt.tooltip ? (
+                  <PopoverRoot
+                    key={o}
+                    open={o === openTooltip}
+                    onOpenChange={(bool) => setOpenTooltip(bool ? o : null)}
+                  >
+                    <PopoverTrigger
+                      onMouseEnter={() => setOpenTooltip(o)}
+                      onMouseLeave={() => setOpenTooltip(null)}
+                      asChild
+                    >
+                      <li
+                        aria-current="page"
+                        onClick={() => {
+                          if (props.disabled || opt.disabled) return;
+                          handleChange(opt);
+                        }}
+                        className={cn(
+                          ...radio_option_tabs_styling,
+                          selectedOption === opt.value
+                            ? activeTabStyle
+                            : inactiveTabStyle,
+                        )}
+                      >
+                        {opt.icon && opt.icon}
+                        {opt.label}
+                      </li>
+                    </PopoverTrigger>
+                    <PopoverContent {...opt.tooltipContentProps}>
+                      {opt.tooltip}
+                    </PopoverContent>
+                  </PopoverRoot>
+                ) : (
+                  <li
+                    key={o}
+                    aria-current="page"
+                    onClick={() => {
+                      if (props.disabled || opt.disabled) return;
+                      handleChange(opt);
+                    }}
+                    className={cn(
+                      ...radio_option_tabs_styling,
+                      selectedOption === opt.value
+                        ? activeTabStyle
+                        : inactiveTabStyle,
+                    )}
+                  >
+                    {opt.icon && opt.icon}
+                    {opt.label}
+                  </li>
+                );
+              })}
             </ul>
             {!forceHideHelperText && (
               <p
diff --git a/packages/components/elements/skeleton/Skeleton.tsx b/packages/components/elements/skeleton/Skeleton.tsx
index c663e563..ed77a4c6 100644
--- a/packages/components/elements/skeleton/Skeleton.tsx
+++ b/packages/components/elements/skeleton/Skeleton.tsx
@@ -20,13 +20,13 @@ function Skeleton({
     none: "hawa-rounded hawa-bg-muted",
     pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
     shimmer:
-      "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
+      "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10",
   };
   const fadeStyle = {
     bottom: "hawa-mask-fade-bottom",
     top: "hawa-mask-fade-top",
     right: "hawa-mask-fade-right",
-    left: "hawa-mask-fade-left "
+    left: "hawa-mask-fade-left ",
   };
 
   return (
@@ -36,7 +36,7 @@ function Skeleton({
         content &&
           "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
         fade && fadeStyle[fade],
-        className
+        className,
       )}
       {...props}
     >
diff --git a/packages/components/package.json b/packages/components/package.json
index 5593c506..5a90b9a4 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.34.8",
+  "version": "0.35.0",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
index 7ca22573..3ccbc4f5 100644
--- a/packages/storybook/CHANGELOG.md
+++ b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.85
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.35.0
+
 ## 0.26.84
 
 ### Patch Changes
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 1da4a0f4..f3acb36c 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.84",
+  "version": "0.26.85",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/packages/storybook/stories/ElementsStories/DatePicker.stories.tsx b/packages/storybook/stories/ElementsStories/DatePicker.stories.tsx
index 7c3dfe32..56143c22 100644
--- a/packages/storybook/stories/ElementsStories/DatePicker.stories.tsx
+++ b/packages/storybook/stories/ElementsStories/DatePicker.stories.tsx
@@ -3,11 +3,12 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { format, addDays } from "date-fns";
 import { arSA } from "date-fns/locale";
-import { Calendar as CalendarIcon } from "lucide-react";
 
-import { Button, Input, Label } from "@sikka/hawa/elements";
 import { CalendarValueType } from "@sikka/hawa/elements/calendar";
 import { DatePicker, DatePickerButton } from "@sikka/hawa/elements/datePicker";
+import { Input } from "@sikka/hawa/elements/input";
+
+import { setLocale } from "../../translations/i18n";
 
 const meta = {
   title: "Elements/DatePicker",
@@ -19,25 +20,41 @@ type Story = StoryObj<typeof DatePicker>;
 
 export const Default: Story = {
   name: "Single Date",
-  render: (args: any) => {
+  render: (args: any, globals: any) => {
+    const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+    const direction = locale === "ar" ? "rtl" : "ltr";
+    setLocale(locale);
     const [date, setDate] = React.useState<CalendarValueType["single"]>();
 
     return (
-      <div className="hawa-flex hawa-h-64 hawa-max-w-md hawa-flex-col hawa-gap-2">
+      <div
+        dir={direction}
+        className="hawa-flex  hawa-max-w-md hawa-flex-row hawa-gap-2"
+      >
         <DatePicker
           initialFocus
           mode="single"
           selected={date}
           onSelect={setDate}
-          locale={arSA}
+          required={true}
+          // locale={arSA}
+          dir={direction}
           numberOfMonths={1}
           trigger={
             <DatePickerButton
+              helperText="Helper text here"
+              showHelperText={false}
               value={date ? format(date, "PPP") : <span>Pick a date</span>}
               label="Date Picker"
+              buttonClassNames="hawa-bg-red-400 hawa-min-w-[200px]"
             />
           }
         />
+        <Input
+          label={"First Name"}
+          placeholder={"Fulan"}
+          helperText="Helper text here"
+        />
       </div>
     );
   },
diff --git a/packages/storybook/stories/ElementsStories/Radio.stories.tsx b/packages/storybook/stories/ElementsStories/Radio.stories.tsx
index ebff3f63..c548e97f 100644
--- a/packages/storybook/stories/ElementsStories/Radio.stories.tsx
+++ b/packages/storybook/stories/ElementsStories/Radio.stories.tsx
@@ -88,8 +88,27 @@ export const Tabs: Story = {
                 defaultValue="option2"
                 options={[
                   { label: `Option 1`, value: `option1` },
-                  { label: `Option 2`, value: `option2`, disabled: true },
-                  { label: `Option 3`, value: `option3` },
+                  {
+                    label: `Option 2`,
+                    value: `option2`,
+                    disabled: true,
+                    tooltip: "I'm disabled",
+                    tooltipContentProps: {
+                      side: "bottom",
+                      className: "hawa-p-2 hawa-text-[9px]",
+                    },
+                  },
+                  {
+                    label: `Option 5`,
+                    value: `option5`,
+                    disabled: true,
+                    tooltip: "I'm disabled",
+                  },
+                  {
+                    label: `Option 3`,
+                    value: `option3`,
+                    tooltip: "Hello World",
+                  },
                 ]}
                 {...args}
               />
@@ -107,7 +126,11 @@ export const Tabs: Story = {
                 options={[
                   { label: `Option 4`, value: `option4` },
                   { label: `Option 5`, value: `option5`, disabled: true },
-                  { label: `Option 6`, value: `option6` },
+                  {
+                    label: `Option 6`,
+                    value: `option6`,
+                    tooltip: "Hello World",
+                  },
                 ]}
                 {...args}
               />
@@ -178,7 +201,11 @@ export const Tabs: Story = {
                 options={[
                   { label: `Option 1`, value: `option1` },
                   { label: `Option 2`, value: `option2`, disabled: true },
-                  { label: `Option 3`, value: `option3` },
+                  {
+                    label: `Option 3`,
+                    value: `option3`,
+                    tooltip: "Hello World",
+                  },
                 ]}
                 {...args}
               />
@@ -249,7 +276,7 @@ export const Tabs: Story = {
         </div>
       </div>
 
-      <div className="hawa-max-w-xs">
+      <div className="hawa-max-w-xs hawa-mt-20">
         <div className="hawa-pb-4 hawa-text-center hawa-text-2xl hawa-font-bold">
           Disabled
         </div>