linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/TimePicker/{TimePicker.js → TimePicker.jsx}

@@ -1,15 +1,4 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import LUIcon from "../Icons/LUIcon";
@@ -33,23 +21,34 @@ import { useCallback, useEffect, useState } from "react";
 import { pad } from "./utils";
 function MenuItemLabel(_a) {
     var label = _a.label;
-    return (_jsx("div", { className: "font-normal text-sm h-9 flex items-center justify-center text-gray-950", children: label }));
+    return (<div className="font-normal text-sm h-9 flex items-center justify-center text-gray-950">
+      {label}
+    </div>);
 }
 function MenuItem(_a) {
     var label = _a.label, data = _a.data, onClick = _a.onClick, activeItem = _a.activeItem, _b = _a.padZero, padZero = _b === void 0 ? false : _b, size = _a.size;
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(MenuItemLabel, { label: label }), _jsx("div", { className: cn("overflow-y-auto space-y-1 border-r border-gray-200 scrollbar-hide", timePickerMenuStyles.container[size]), children: data.map(function (item) {
-                    var isActive = activeItem === item;
-                    return (_jsx(Button, { onClick: function () { return onClick(item); }, variant: isActive ? "fill" : "ghost", color: isActive ? "light-blue" : "gray", size: "sm", className: cn("w-full", isActive
-                            ? "hover:bg-blue-100 hover:text-blue-600"
-                            : "text-gray-400 hover:text-gray-400", timePickerMenuStyles.buttonHeight[size]), shape: "rounded-none", children: padZero ? pad(item) : item }, item));
-                }) })] }));
+    return (<div className="flex flex-col">
+      <MenuItemLabel label={label}/>
+      <div className={cn("overflow-y-auto space-y-1 border-r border-gray-200 scrollbar-hide", timePickerMenuStyles.container[size])}>
+        {data.map(function (item) {
+            var isActive = activeItem === item;
+            return (<Button key={item} onClick={function () { return onClick(item); }} variant={isActive ? "fill" : "ghost"} color={isActive ? "light-blue" : "gray"} size="sm" className={cn("w-full", isActive
+                    ? "hover:bg-blue-100 hover:text-blue-600"
+                    : "text-gray-400 hover:text-gray-400", timePickerMenuStyles.buttonHeight[size])} shape="rounded-none">
+              {padZero ? pad(item) : item}
+            </Button>);
+        })}
+      </div>
+    </div>);
 }
 function PeriodButton(_a) {
     var onClick = _a.onClick, periodLabel = _a.periodLabel, activePeriod = _a.activePeriod, size = _a.size;
     var isActive = activePeriod === periodLabel;
-    return (_jsx(Button, { onClick: onClick, variant: isActive ? "fill" : "ghost", color: isActive ? "light-blue" : "gray", size: "sm", className: cn("w-full", isActive
+    return (<Button onClick={onClick} variant={isActive ? "fill" : "ghost"} color={isActive ? "light-blue" : "gray"} size="sm" className={cn("w-full", isActive
             ? "hover:bg-blue-100 hover:text-blue-600"
-            : "text-gray-400 hover:text-gray-400", timePickerMenuStyles.buttonHeight[size]), shape: "rounded-none", children: periodLabel }));
+            : "text-gray-400 hover:text-gray-400", timePickerMenuStyles.buttonHeight[size])} shape="rounded-none">
+      {periodLabel}
+    </Button>);
 }
 function TimePickerMenu(_a) {
     var onTimeSelect = _a.onTimeSelect, selectedTime = _a.selectedTime, _b = _a.size, size = _b === void 0 ? Default_TimePicker_Size : _b;
@@ -81,7 +80,17 @@ function TimePickerMenu(_a) {
             onTimeSelect("");
         }
     }, [hour, minute, period, formatTime, onTimeSelect]);
-    return (_jsxs("div", { className: "grid grid-cols-[124px_124px_124px]", children: [_jsx(MenuItem, { label: "Hour", data: hours, onClick: function (item) { return setHour(hour === item ? null : item); }, activeItem: hour, size: size }), _jsx(MenuItem, { label: "Minutes", data: minutes, onClick: function (item) { return setMinute(minute === item ? null : item); }, activeItem: minute, padZero: true, size: size }), _jsxs("div", { className: "flex flex-col", children: [_jsx(MenuItemLabel, { label: "AM/PM" }), _jsxs("div", { className: "space-y-1 h-full content-center -mt-6", children: [_jsx(PeriodButton, { onClick: function () { return setPeriod(period === "AM" ? null : "AM"); }, periodLabel: "AM", activePeriod: period, size: size }), _jsx(PeriodButton, { onClick: function () { return setPeriod(period === "PM" ? null : "PM"); }, periodLabel: "PM", activePeriod: period, size: size })] })] })] }));
+    return (<div className="grid grid-cols-[124px_124px_124px]">
+      <MenuItem label="Hour" data={hours} onClick={function (item) { return setHour(hour === item ? null : item); }} activeItem={hour} size={size}/>
+      <MenuItem label="Minutes" data={minutes} onClick={function (item) { return setMinute(minute === item ? null : item); }} activeItem={minute} padZero size={size}/>
+      <div className="flex flex-col">
+        <MenuItemLabel label="AM/PM"/>
+        <div className="space-y-1 h-full content-center -mt-6">
+          <PeriodButton onClick={function () { return setPeriod(period === "AM" ? null : "AM"); }} periodLabel="AM" activePeriod={period} size={size}/>
+          <PeriodButton onClick={function () { return setPeriod(period === "PM" ? null : "PM"); }} periodLabel="PM" activePeriod={period} size={size}/>
+        </div>
+      </div>
+    </div>);
 }
 export function TimePicker(_a) {
     var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_TimePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_TimePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_TimePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_TimePicker_Shape : _e, time = _a.time, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "Select time" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_TimePicker_Shadow : _h, triggerClassName = _a.triggerClassName, props = __rest(_a, ["className", "variant", "size", "color", "shape", "time", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "triggerClassName"]);
@@ -98,12 +107,27 @@ export function TimePicker(_a) {
         var displayHour = h % 12 || 12;
         return "".concat(displayHour, ":").concat(minutes, " ").concat(period);
     };
-    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("relative", triggerClassName), children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "time-picker-input", className: cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !time && "text-muted-foreground", open &&
-                                color === "default" &&
-                                "border-blue-600 ring-2 ring-blue-200", disabled && [
-                                variant === "filled" && "bg-gray-100",
-                                "border border-gray-300 cursor-not-allowed pointer-events-none opacity-50",
-                            ]), shape: inputVariantConfig.shape[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: _jsx("div", { className: cn("flex-grow flex items-center", paddingClass), children: time ? formatDisplayTime(time) : placeholder }) }), endIcon && (_jsx(LUIcon, { icon: endIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right) }))] }) }), _jsx(PopoverContent, __assign({ align: "start", className: cn("w-full p-0 bg-white", timePickerMenuStyles.shadow[shadow], className) }, props, { children: _jsx(TimePickerMenu, { onTimeSelect: function (selectedTime) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(selectedTime || null);
-                    }, selectedTime: time !== null && time !== void 0 ? time : null, size: size || Default_TimePicker_Size }) }))] }));
+    return (<Popover open={!disabled && open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <div className={cn("relative", triggerClassName)}>
+          {startIcon && (<LUIcon icon={startIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left)}/>)}
+          <Button color="light-gray" aria-expanded={open} data-slot="time-picker-input" className={cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !time && "text-muted-foreground", open &&
+            color === "default" &&
+            "border-blue-600 ring-2 ring-blue-200", disabled && [
+            variant === "filled" && "bg-gray-100",
+            "border border-gray-300 cursor-not-allowed pointer-events-none opacity-50",
+        ])} shape={inputVariantConfig.shape[shape]} disabled={disabled} tabIndex={disabled ? -1 : 0}>
+            <div className={cn("flex-grow flex items-center", paddingClass)}>
+              {time ? formatDisplayTime(time) : placeholder}
+            </div>
+          </Button>
+          {endIcon && (<LUIcon icon={endIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right)}/>)}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("w-full p-0 bg-white", timePickerMenuStyles.shadow[shadow], className)} {...props}>
+        <TimePickerMenu onTimeSelect={function (selectedTime) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedTime || null);
+        }} selectedTime={time !== null && time !== void 0 ? time : null} size={size || Default_TimePicker_Size}/>
+      </PopoverContent>
+    </Popover>);
 }

package/dist/src/components/TimePicker/TimePicker.stories.d.ts

@@ -3,13 +3,13 @@ import { TimePickerProps } from ".";
 declare const _default: Meta<TimePickerProps>;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimePickerProps>;
-export declare const WithLabel: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithLabelAndCaption: () => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
-export declare const ValidationStates: () => import("react/jsx-runtime").JSX.Element;
-export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
-export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
-export declare const Shadows: () => import("react/jsx-runtime").JSX.Element;
-export declare const PreselectedTime: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithLabel: () => import("react").JSX.Element;
+export declare const WithLabelAndCaption: () => import("react").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const Variants: () => import("react").JSX.Element;
+export declare const WithIcons: () => import("react").JSX.Element;
+export declare const ValidationStates: () => import("react").JSX.Element;
+export declare const Disabled: () => import("react").JSX.Element;
+export declare const Shapes: () => import("react").JSX.Element;
+export declare const Shadows: () => import("react").JSX.Element;
+export declare const PreselectedTime: () => import("react").JSX.Element;

package/dist/src/components/TimePicker/TimePicker.stories.jsx

@@ -0,0 +1,298 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { TimePicker } from "./TimePicker";
+import { inputVariantConfig } from "../Input/input";
+import { Body } from "../Typography/Body/body";
+import { Label } from "../Label/Label";
+import { Caption } from "../Typography/Caption/caption";
+import Tooltip from "../ToolTip/Tooltip";
+import LUIcon from "../Icons/LUIcon";
+import { Default_TimePicker_Variant, Default_TimePicker_Color, Default_TimePicker_Shape, Default_TimePicker_Size, timePickerMenuStyles, Default_TimePicker_Shadow, } from ".";
+import { useEffect, useState } from "react";
+export default {
+    title: "Components/TimePicker",
+    component: TimePicker,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.variant),
+            defaultValue: Default_TimePicker_Variant,
+        },
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.size),
+            defaultValue: Default_TimePicker_Size,
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.color),
+            defaultValue: Default_TimePicker_Color,
+            description: "Color variant of the trigger button",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(inputVariantConfig.shape),
+            defaultValue: Default_TimePicker_Shape,
+            description: "Shape variant of the trigger button (border radius)",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        time: {
+            control: "text",
+            description: "Time in 24-hour format (HH:MM).",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        placeholder: {
+            control: "text",
+            defaultValue: "Select time",
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false,
+        },
+        shadow: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(timePickerMenuStyles.shadow),
+            defaultValue: Default_TimePicker_Shadow,
+            description: "Shadow styling for the time picker menu when opened",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var _a;
+    var _b = useState((_a = args.time) !== null && _a !== void 0 ? _a : null), time = _b[0], setTime = _b[1];
+    useEffect(function () {
+        var _a;
+        setTime((_a = args.time) !== null && _a !== void 0 ? _a : null);
+    }, [args.time]);
+    return (<div className="w-full max-w-md">
+      <TimePicker {...args} time={time} onChange={setTime}/>
+    </div>);
+};
+export var Default = Template.bind({});
+Default.args = {
+    placeholder: "Select time",
+    variant: Default_TimePicker_Variant,
+    size: Default_TimePicker_Size,
+};
+export var WithLabel = function () {
+    var _a = useState(), time = _a[0], setTime = _a[1];
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Label variant="label-lg">Label</Label>
+          <Tooltip title="?">
+            <LUIcon variant="padded" size="md" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+        </div>
+        <TimePicker placeholder="Select time" time={time} onChange={setTime}/>
+      </div>
+    </div>);
+};
+export var WithLabelAndCaption = function () {
+    var _a = useState(), time = _a[0], setTime = _a[1];
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Label variant="label-lg">Label</Label>
+          <Tooltip title="?">
+            <LUIcon variant="padded" size="md" shape="rounded" icon="question" color="light-blue"/>
+          </Tooltip>
+        </div>
+        <TimePicker placeholder="Select time" time={time} onChange={setTime}/>
+        <Caption variant="sm">
+          Enter your application/validation/helper content here
+        </Caption>
+      </div>
+    </div>);
+};
+export var Sizes = function () {
+    var sizes = Object.keys(inputVariantConfig.size);
+    var _a = useState({}), times = _a[0], setTimes = _a[1];
+    var handleTimeChange = function (size, time) {
+        setTimes(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[size] = time, _a)));
+        });
+    };
+    return (<div className="space-y-4 w-full max-w-md">
+      {sizes.map(function (size) { return (<div key={size}>
+          <Body variant="body-sm-500" className="mb-2">
+            {size.charAt(0).toUpperCase() + size.slice(1)}
+          </Body>
+          <TimePicker size={size} placeholder="Select time" time={times[size]} onChange={function (time) { return handleTimeChange(size, time); }}/>
+        </div>); })}
+    </div>);
+};
+export var Variants = function () {
+    var variants = Object.keys(inputVariantConfig.variant);
+    var _a = useState({}), times = _a[0], setTimes = _a[1];
+    var handleTimeChange = function (variant, time) {
+        setTimes(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[variant] = time, _a)));
+        });
+    };
+    return (<div className="space-y-4 w-full max-w-md">
+      {variants.map(function (variant) { return (<div key={variant}>
+          <Body variant="body-sm-500" className="mb-2">
+            {variant.charAt(0).toUpperCase() + variant.slice(1)}
+          </Body>
+          <TimePicker variant={variant} placeholder="Select time" time={times[variant]} onChange={function (time) { return handleTimeChange(variant, time); }}/>
+        </div>); })}
+    </div>);
+};
+export var WithIcons = function () {
+    var _a = useState(), timeStart = _a[0], setTimeStart = _a[1];
+    var _b = useState(), timeBoth = _b[0], setTimeBoth = _b[1];
+    return (<div className="space-y-4 w-full max-w-md">
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          With Start Icon
+        </Body>
+        <TimePicker startIcon="plus" placeholder="Select time" time={timeStart} onChange={setTimeStart}/>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          With Both Icons
+        </Body>
+        <TimePicker startIcon="plus" endIcon="clock" placeholder="Select time" time={timeBoth} onChange={setTimeBoth}/>
+      </div>
+    </div>);
+};
+export var ValidationStates = function () {
+    var _a = useState(), timeDefault = _a[0], setTimeDefault = _a[1];
+    var _b = useState("14:02"), timeSuccess = _b[0], setTimeSuccess = _b[1];
+    var _c = useState(), timeWarning = _c[0], setTimeWarning = _c[1];
+    var _d = useState(), timeError = _d[0], setTimeError = _d[1];
+    return (<div className="space-y-4 w-full max-w-md">
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Default
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <TimePicker placeholder="Select time" time={timeDefault} onChange={setTimeDefault}/>
+          <Caption variant="sm">
+            Enter your application/validation/helper content here
+          </Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Success
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <TimePicker placeholder="Select time" color="success" time={timeSuccess} onChange={setTimeSuccess}/>
+          <Caption variant="sm">Correct time selected</Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Warning
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <TimePicker placeholder="Select time" color="warning" time={timeWarning} onChange={setTimeWarning}/>
+          <Caption variant="sm">Please verify the selected time</Caption>
+        </div>
+      </div>
+      <div>
+        <Body variant="body-sm-500" className="mb-2">
+          Error
+        </Body>
+        <div className="flex flex-col gap-1">
+          <Label variant="label-lg">Label</Label>
+          <TimePicker placeholder="Select time" color="danger" time={timeError} onChange={setTimeError}/>
+          <Caption variant="sm">Invalid time selection</Caption>
+        </div>
+      </div>
+    </div>);
+};
+export var Disabled = function () {
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <Label variant="label-lg">Label</Label>
+        <TimePicker placeholder="Select time" disabled={true}/>
+      </div>
+    </div>);
+};
+export var Shapes = function () {
+    var shapes = Object.keys(inputVariantConfig.shape);
+    var _a = useState({}), times = _a[0], setTimes = _a[1];
+    var handleTimeChange = function (shape, time) {
+        setTimes(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[shape] = time, _a)));
+        });
+    };
+    return (<div className="space-y-4 w-full max-w-md">
+      {shapes.map(function (shape) { return (<div key={shape}>
+          <Body variant="body-sm-500" className="mb-2">
+            {shape.charAt(0).toUpperCase() + shape.slice(1)}
+          </Body>
+          <TimePicker shape={shape} placeholder="Select time" time={times[shape]} onChange={function (time) { return handleTimeChange(shape, time); }}/>
+        </div>); })}
+    </div>);
+};
+export var Shadows = function () {
+    var shadows = Object.keys(timePickerMenuStyles.shadow);
+    var _a = useState({}), times = _a[0], setTimes = _a[1];
+    var handleTimeChange = function (shadow, time) {
+        setTimes(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[shadow] = time, _a)));
+        });
+    };
+    return (<div className="space-y-4 w-full max-w-md">
+      {shadows.map(function (shadow) { return (<div key={shadow}>
+          <Body variant="body-sm-500" className="mb-2">
+            {shadow !== "none" ? "With Shadow" : "Without Shadow"}
+          </Body>
+          <div className="flex flex-col gap-1">
+            <Label variant="label-lg">Label</Label>
+            <TimePicker placeholder="Select time" shadow={shadow} time={times[shadow]} onChange={function (time) { return handleTimeChange(shadow, time); }}/>
+          </div>
+        </div>); })}
+    </div>);
+};
+export var PreselectedTime = function () {
+    var _a = useState("14:02"), time = _a[0], setTime = _a[1];
+    return (<div className="w-full max-w-md">
+      <div className="flex flex-col gap-1">
+        <Label variant="label-lg">Label</Label>
+        <TimePicker time={time} onChange={setTime}/>
+        <Caption variant="sm">Preselected time: 2:02 PM</Caption>
+      </div>
+    </div>);
+};

package/dist/src/components/Title/Title.d.ts

@@ -3,5 +3,5 @@ export interface TitleProps {
     className?: string;
     children?: React.ReactNode;
 }
-declare const Title: ({ className, children }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+declare const Title: ({ className, children }: TitleProps) => React.JSX.Element;
 export default Title;

package/dist/src/components/Title/{Title.js → Title.jsx}

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { Dummy_Title } from "../../utils/constants";
 import TitleStyles from "./Title.module.css";
 var Title = function (_a) {
     var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.children, children = _c === void 0 ? Dummy_Title : _c;
-    return (_jsx("h2", { className: "".concat(TitleStyles["main-title"], " ").concat(className), children: children }));
+    return (<h2 className={"".concat(TitleStyles["main-title"], " ").concat(className)}>{children}</h2>);
 };
 export default Title;

package/dist/src/components/Title/{Title.stories.js → Title.stories.jsx}

@@ -1,15 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Title } from "../../utils/constants";
 import Title from "./Title";
 export default {
@@ -41,7 +29,7 @@ export default {
         },
     },
 };
-var Template = function (args) { return _jsx(Title, __assign({}, args)); };
+var Template = function (args) { return <Title {...args}/>; };
 export var _Title = Template.bind({});
 _Title.args = {
     children: Dummy_Title,

package/dist/src/components/Title/{Title.test.js → Title.test.jsx}

@@ -1,25 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { Dummy_Title } from "../../utils/constants";
 import Title from "./Title";
 describe("Title Component", function () {
     it("renders with default props", function () {
-        render(_jsx(Title, {}));
+        render(<Title />);
         expect(screen.getByText(Dummy_Title)).toBeInTheDocument();
     });
     it("renders with custom children", function () {
         var customText = "Custom Title";
-        render(_jsx(Title, { children: customText }));
+        render(<Title>{customText}</Title>);
         expect(screen.getByText(customText)).toBeInTheDocument();
     });
     it("applies custom className", function () {
         var customClass = "custom-class";
-        render(_jsx(Title, { className: customClass }));
+        render(<Title className={customClass}/>);
         var titleElement = screen.getByText(Dummy_Title);
         expect(titleElement).toHaveClass("main-title custom-class");
     });
     it("renders without crashing", function () {
-        var container = render(_jsx(Title, {})).container;
+        var container = render(<Title />).container;
         expect(container).toBeDefined();
     });
 });

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

@@ -1,3 +1,3 @@
 import { ToolTipInterface } from "./type";
-declare const Tooltip: ({ title, className, children }: ToolTipInterface) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ title, className, children }: ToolTipInterface) => import("react").JSX.Element;
 export default Tooltip;

package/dist/src/components/ToolTip/Tooltip.jsx

@@ -0,0 +1,18 @@
+import { Tooltip as ShadTooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+import { Body } from "../Typography/Body/body";
+var Tooltip = function (_a) {
+    var title = _a.title, className = _a.className, children = _a.children;
+    return (<TooltipProvider>
+      <ShadTooltip>
+        <TooltipTrigger asChild className={className}>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent>
+          <Body variant="body-md" className="text-center">
+            {title}
+          </Body>
+        </TooltipContent>
+      </ShadTooltip>
+    </TooltipProvider>);
+};
+export default Tooltip;

package/dist/src/components/ToolTip/{Tooltip.stories.js → Tooltip.stories.jsx}

@@ -1,15 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "./Tooltip";
 import { IconButton } from "../Button/IconButton/IconButton";
 export default {
@@ -17,10 +5,10 @@ export default {
     component: Tooltip,
     tags: ["autodocs"],
 };
-var Template = function (args) { return (_jsx(Tooltip, __assign({}, args))); };
+var Template = function (args) { return (<Tooltip {...args}></Tooltip>); };
 export var _ToolTip = Template.bind({});
 _ToolTip.args = {
-    children: _jsx(IconButton, { icon: "volume-high", shape: "rounded-full" }),
+    children: <IconButton icon="volume-high" shape="rounded-full"/>,
     title: "Tooltip",
 };
 _ToolTip.argTypes = {

package/dist/src/components/Typography/Body/{Body.stories.js → Body.stories.jsx}

@@ -1,15 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Dummy_Para } from "../../../utils/constants";
 import { Body, variant } from "../../../components/Typography/Body/body";
 export default {
@@ -17,7 +5,7 @@ export default {
     component: Body,
     tags: ["autodocs"],
 };
-var Template = function (args) { return _jsx(Body, __assign({}, args)); };
+var Template = function (args) { return <Body {...args}></Body>; };
 export var _Body = Template.bind({});
 _Body.args = {
     children: Dummy_Para,

package/dist/src/components/Typography/Body/body.d.ts

@@ -31,5 +31,5 @@ type BodyProps<T extends AllowedTags = "p"> = {
     className?: string;
     children?: React.ReactNode;
 } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className"> & VariantProps<typeof bodyVariants>;
-declare function Body<T extends AllowedTags = "p">({ as, className, variant, children, ...props }: BodyProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Body<T extends AllowedTags = "p">({ as, className, variant, children, ...props }: BodyProps<T>): React.JSX.Element;
 export { Body, bodyVariants };

package/dist/src/components/Typography/Body/{body.js → body.jsx}

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 export var variant = {
@@ -56,6 +45,8 @@ var bodyVariants = cva("!leading-normal m-0", {
 function Body(_a) {
     var as = _a.as, className = _a.className, variant = _a.variant, children = _a.children, props = __rest(_a, ["as", "className", "variant", "children"]);
     var Tag = as || "p";
-    return (_jsx(Tag, __assign({ className: cn(bodyVariants({ variant: variant }), className) }, props, { children: children })));
+    return (<Tag className={cn(bodyVariants({ variant: variant }), className)} {...props}>
+      {children}
+    </Tag>);
 }
 export { Body, bodyVariants };