torch-glare 1.1.5 → 1.1.7

package/dist/src/shared/getDependenciesAndInstallNestedComponents.js

@@ -29,7 +29,7 @@ export function getDependenciesAndInstallNestedComponents(componentPath, install
         else if (moduleName &&
             moduleName.startsWith("../hooks") &&
             !installedDependencies.has(moduleName)) {
-            addHook(moduleName.slice(9) + ".tsx");
+            addHook(moduleName.slice(9) + ".ts");
         }
         // install required nested components
         else if (moduleName &&

package/dist/src/shared/getDependenciesAndInstallNestedComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"getDependenciesAndInstallNestedComponents.js","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC;;;;;GAKG;AAEH,MAAM,UAAU,yCAAyC,CACrD,aAAqB,EACrB,qBAAkC;IAElC,MAAM,gBAAgB,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,yCAAyC,CAAC;IAC9D,MAAM,qBAAqB,GAAG,IAAI,GAAG,EAAU,CAAC;IAEhD,IAAI,KAAK,CAAC;IACV,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAE5B,sCAAsC;QACtC,IAAI,UAAU,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtF,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,oCAAoC;aAC/B,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;YACjC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;QACzC,CAAC;QAED,oCAAoC;aAC/B,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;YACjC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QAC1C,CAAC;QACD,qCAAqC;aAChC,IACD,UAAU;YACV,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;gBACxB,CAAC,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QACtC,CAAC;QACD,0CAA0C;aACrC,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC;YACtC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAED,OAAO,qBAAqB,CAAC;AACjC,CAAC"}
+{"version":3,"file":"getDependenciesAndInstallNestedComponents.js","sourceRoot":"","sources":["../../../cli/src/shared/getDependenciesAndInstallNestedComponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC;;;;;GAKG;AAEH,MAAM,UAAU,yCAAyC,CACrD,aAAqB,EACrB,qBAAkC;IAElC,MAAM,gBAAgB,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,yCAAyC,CAAC;IAC9D,MAAM,qBAAqB,GAAG,IAAI,GAAG,EAAU,CAAC;IAEhD,IAAI,KAAK,CAAC;IACV,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAE5B,sCAAsC;QACtC,IAAI,UAAU,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtF,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,oCAAoC;aAC/B,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;YACjC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;QACzC,CAAC;QAED,oCAAoC;aAC/B,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;YACjC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;QACzC,CAAC;QACD,qCAAqC;aAChC,IACD,UAAU;YACV,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC;gBACxB,CAAC,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QACtC,CAAC;QACD,0CAA0C;aACrC,IACD,UAAU;YACV,UAAU,CAAC,UAAU,CAAC,eAAe,CAAC;YACtC,CAAC,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,EACxC,CAAC;YACC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;QACvC,CAAC;IACL,CAAC;IAED,OAAO,qBAAqB,CAAC;AACjC,CAAC"}

package/lib/components/BadgeField.tsx

@@ -3,6 +3,7 @@ import {
   forwardRef,
   InputHTMLAttributes,
   ReactNode,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -15,7 +16,6 @@ import { useClickOutside } from "../hooks/useClickOutside";
 import { Badge } from "./Badge";
 import { Tag, useTagSelection } from "../hooks/useTagSelection";
 
-
 interface Props
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
   size?: "XS" | "S" | "M"; // this is used to change the size style of the component
@@ -26,13 +26,12 @@ interface Props
   toolTipSide?: ToolTipSide;
   label?: string;
   required?: boolean;
-  theme?: Themes
-  actionButton?: ReactNode
-  tags: Tag[]
-  onValueChange?: (tags: Tag[]) => void
+  theme?: Themes;
+  actionButton?: ReactNode;
+  tags: Tag[];
+  onValueChange?: (tags: Tag[]) => void;
 }
 
-
 export const BadgeField = forwardRef<HTMLInputElement, Props>(
   (
     {
@@ -48,7 +47,6 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       actionButton,
       theme,
       tags,
-      onValueChange,
       children,
       ...props
     },
@@ -62,7 +60,8 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       if (
         !inputGroupRef?.current?.contains(e?.target as Node) &&
         !popoverContentRef?.current?.contains(e?.target as Node)
-      ) setIsPopoverOpen(false);
+      )
+        setIsPopoverOpen(false);
       else setIsPopoverOpen(true);
     });
 
@@ -79,7 +78,16 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       focusedPopoverIndex,
       isPopoverOpen,
       setIsPopoverOpen,
-    } = useTagSelection({ Tags: tags, onTagsChange: onValueChange, inputRef });
+      searchTags
+    } = useTagSelection({
+      Tags: tags,
+      onTagsChange: (e) => props.onChange?.({
+        target: {
+          value: e
+        }
+      } as any),
+      inputRef
+    });
 
     return (
       <Popover open={isPopoverOpen}>
@@ -88,8 +96,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
           open={errorMessage !== undefined}
           text={errorMessage}
         >
-          <PopoverTrigger asChild
-          >
+          <PopoverTrigger asChild>
             <Group
               error={errorMessage !== undefined}
               onTable={onTable}
@@ -102,44 +109,42 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
               onFocus={(e: any) => {
                 setDropDownListWidth(e.currentTarget.offsetWidth);
               }}
-              className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end h-fit items-center",
+              className={cn(
+                "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
                 {
                   "flex-wrap justify-start": isPopoverOpen,
+                  "h-fit": isPopoverOpen,
                 },
                 className
               )}
             >
-              {icon && (
-                <Icon  >
-                  {icon}
-                </Icon>
-              )}
+              {icon && <Icon>{icon}</Icon>}
 
-              {
-                selectedTagsStack.map((tag, index) => (
-                  <Badge
-                    key={tag.id}
-                    size={size}
-                    variant={tag.variant as any}
-                    label={tag.name}
-                    isSelected={true}
-                    onUnselect={() => handleUnselectTag(tag.id)}
-                    className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
-                    tabIndex={focusedTagIndex === index ? 0 : -1}
-                  />
-                ))
-              }
+              {selectedTagsStack.map((tag, index) => (
+                <Badge
+                  key={tag.id}
+                  size={size}
+                  variant={tag.variant as any}
+                  label={tag.name}
+                  isSelected={true}
+                  onUnselect={() => handleUnselectTag(tag.id)}
+                  className={
+                    focusedTagIndex === index ? "ring-2 ring-blue-500" : ""
+                  }
+                  tabIndex={focusedTagIndex === index ? 0 : -1}
+                />
+              ))}
 
               <Input
                 {...props}
+                value={searchTags}
                 onChange={(e) => {
-                  props.onChange?.(e)
-                  filterTagsBySearch(e.target.value)
+                  filterTagsBySearch(e.target.value);
                 }}
                 onFocus={(e) => {
-                  props.onFocus?.(e)
+                  props.onFocus?.(e);
                   setFocusedTagIndex(null);
-                  setIsPopoverOpen(true)
+                  setIsPopoverOpen(true);
                 }}
                 ref={inputRef}
                 className={cn(
@@ -151,13 +156,12 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                   }
                 )}
               />
-              {
-                actionButton && (
-                  <Trilling className="py-0" > {/* Keep the ActionButton right aligned */}
-                    {actionButton}
-                  </Trilling>
-                )
-              }
+              {actionButton && (
+                <Trilling className="py-0">
+                  {/* Keep the ActionButton right aligned */}
+                  {actionButton}
+                </Trilling>
+              )}
             </Group>
           </PopoverTrigger>
         </Tooltip>
@@ -178,13 +182,16 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                   variant={tag.variant as any}
                   label={tag.name}
                   onClick={() => handleSelectTag(tag.id)}
-                  className={`outline-none  ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""} ${index !== 0 ? "mt-1" : ""}`}
+                  className={`outline-none  ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""
+                    } ${index !== 0 ? "mt-1" : ""}`}
                   tabIndex={focusedPopoverIndex === index ? 0 : -1}
                 />
               ))
             ) : (
               <div className="text-sm text-gray-500 py-1 px-2">
-                {tags.length === 0 ? "All tags selected" : "No matching tags found"}
+                {tags.length === 0
+                  ? "All tags selected"
+                  : "No matching tags found"}
               </div>
             )}
           </>

package/lib/components/Calendar.tsx

@@ -86,8 +86,8 @@ const Calendar = ({
         range_start: `rounded-l-[8px] bg-background-system-action-secondary-hover`,
         range_end: `rounded-r-[8px] bg-background-system-action-secondary-hover`,
         range_middle: `bg-background-system-action-secondary-hover [&_button]:!border-none [&_button]:!bg-transparent`,
-        weekdays: `text-content-presentation-global-highlight-darkback text-[12px]`,
-        week_number: `text-content-presentation-global-highlight-darkback text-[12px] px-1`,
+        weekdays: `text-content-presentation-global-primary text-[12px]`,
+        week_number: `text-content-presentation-global-primary text-[12px] px-1`,
         month_caption: `flex items-center justify-center`,
         caption_label: `text-content-presentation-global-primary text-[14px] pt-[2px]`,
         months: `flex items-end justify-center gap-4 flex-wrap`,

package/lib/components/DatePicker.tsx

@@ -1,14 +1,28 @@
-import React, { useState, forwardRef, ForwardedRef, HTMLAttributes, useEffect, cloneElement, isValidElement } from 'react';
-import { Popover, PopoverContent, PopoverTrigger } from './Popover';
-import { Calendar } from './Calendar';
-import { ActionButton } from './ActionButton';
-import Picker, { PickerValue } from 'torch-react-mobile-picker';
+import React, {
+    useState,
+    forwardRef,
+    ForwardedRef,
+    HTMLAttributes,
+    useEffect,
+    cloneElement,
+    isValidElement,
+    useRef,
+    Ref,
+} from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { Calendar } from "./Calendar";
+import { ActionButton } from "./ActionButton";
+import { DateRange } from "react-day-picker";
+import Picker from "torch-react-mobile-picker";
 
-import { applyTimeToDateValue, formatDateValueToString, TimePickerValue } from '../utils/dateFormat';
-import { InputField } from './InputField';
-import { DateRange } from 'react-day-picker';
+import {
+    applyTimeToDateValue,
+    formatDateValueToString,
+    TimePickerValue,
+} from "../utils/dateFormat";
+import { InputField } from "./InputField";
 
-export type CalendarProps = React.ComponentProps<typeof Calendar>
+export type CalendarProps = React.ComponentProps<typeof Calendar>;
 
 interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
     mode?: "single" | "multiple" | "range";
@@ -21,75 +35,96 @@ interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
     dateFormat?: string;
     calendarProps?: CalendarProps;
     timePicker?: boolean;
+    value?: any;
 }
 
-export const DatePicker = forwardRef(({
-    size = "M",
-    min,
-    max,
-    selected,
-    mode = "single",
-    onChange,
-    showWeekNumber = false,
-    captionLayout = "dropdown",
-    dateFormat = "yyyy/MM/dd",
-    calendarProps,
-    timePicker = false,
-    children,
-    ...props
-}: DatePickerProps, ref: ForwardedRef<HTMLInputElement>) => {
+export const DatePicker = forwardRef(
+    (
+        {
+            size = "M",
+            min,
+            max,
+            mode = "single",
+            onChange,
+            showWeekNumber = false,
+            captionLayout = "dropdown",
+            dateFormat = "yyyy/MM/dd",
+            calendarProps,
+            timePicker = false,
+            children,
+            value = new Date(),
+            ...props
+        }: DatePickerProps,
+        ref: ForwardedRef<HTMLInputElement>
+    ) => {
+        const initialDate =
+            mode == "multiple"
+                ? Array.isArray(value)
+                    ? value
+                    : [value]
+                : mode == "range"
+                    ? { from: value, to: value }
+                    : value;
+        const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(initialDate);
+        const [pickerValue, setPickerValue] = useState<TimePickerValue>({
+            hour: (date instanceof Date ? date.getHours() : 12).toString(),
+            minute: (date instanceof Date ? date.getMinutes() : 0)
+                .toString()
+                .padStart(2, "0"),
+            time: date instanceof Date && date.getHours() < 12 ? "AM" : "PM",
+        });
+        const [isOpen, setIsOpen] = useState(false);
+        const triggerRef = useRef<HTMLButtonElement>(null);
 
-    const fallbackDate = mode == "multiple" ? [new Date()] : mode == "range" ? { from: new Date(), to: new Date() } : new Date();
-    const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(selected || fallbackDate);
-    const [pickerValue, setPickerValue] = useState<TimePickerValue>({
-        hour: "12",
-        minute: "00",
-        time: "AM"
-    });
-    const [isOpen, setIsOpen] = useState(false);
+        // Call the onChange function when the date or picker value changes
+        useEffect(() => {
+            onChange?.({
+                target: {
+                    value: date,
+                },
+            } as any);
+        }, [date, pickerValue]);
 
-    // Call the onChange function when the date or picker value changes
-    useEffect(() => {
-        onChange?.({
-            target: {
-                value: date
-            }
-        } as any);
-    }, [date, pickerValue]);
-
-    // Disable body scroll when popover is open
-    useEffect(() => {
-        if (isOpen) {
-            // Save the current overflow style
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
+        // Disable body scroll when popover is open
+        useEffect(() => {
+            if (isOpen) {
+                // Save the current overflow style
+                const originalOverflow = document.body.style.overflow;
+                document.body.style.overflow = "hidden";
 
-            // Cleanup function to restore original overflow style
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
-        }
-    }, [isOpen]);
-    const formattedValue = formatDateValueToString(date, pickerValue, dateFormat);
+                // Cleanup function to restore original overflow style
+                return () => {
+                    document.body.style.overflow = originalOverflow;
+                };
+            }
+        }, [isOpen]);
+        const formattedValue = formatDateValueToString(
+            date,
+            pickerValue,
+            dateFormat
+        );
 
-    return (
-        <Popover onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild  >
-                {/* Clone the children element and pass the formatted value to the input element */}
-                {
-                    isValidElement(children) ?
+        return (
+            <Popover onOpenChange={setIsOpen}>
+                <PopoverTrigger ref={triggerRef} asChild>
+                    {/* Clone the children element and pass the formatted value to the input element */}
+                    {isValidElement(children) ? (
                         cloneElement(children as React.ReactElement<HTMLInputElement>, {
-                            value: (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
+                            value:
+                                (children as React.ReactElement<HTMLInputElement>).props
+                                    .value ?? formattedValue,
                             type: "input",
-                            readOnly: true
+                            readOnly: true,
                         })
-                        :
+                    ) : (
                         /* If the children is not a valid element, Show the default input */
                         <InputField
                             readOnly
                             type="input"
                             childrenSide={
-                                <ActionButton type='button' size={"M"}>
+                                <ActionButton type="button" size={"M"} onClick={() => {
+                                    triggerRef.current?.click();
+                                }}>
                                     <i className="ri-calendar-event-fill"></i>
                                 </ActionButton>
                             }
@@ -97,39 +132,41 @@ export const DatePicker = forwardRef(({
                             value={formattedValue}
                             ref={ref}
                         />
-                }
-            </PopoverTrigger >
-            <PopoverContent data-theme="dark" className='!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row'>
-                <Calendar
-                    {...calendarProps}
-                    captionLayout={captionLayout}
-                    showWeekNumber={showWeekNumber}
-                    mode={mode as any}
-                    selected={date as any}
-                    onSelect={(e: any) => {
-                        setDate(applyTimeToDateValue(e, pickerValue));
-                    }}
-                    min={mode != "single" ? min : undefined}
-                    max={mode != "single" ? max : undefined}
-                />
-                {timePicker && (
-                    <TimePicker
-                        value={pickerValue}
-                        onChange={(value: TimePickerValue) => {
-                            setPickerValue(value);
-                            setDate(applyTimeToDateValue(date, value));
+                    )}
+                </PopoverTrigger>
+                <PopoverContent
+                    data-theme="dark"
+                    className="!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row "
+                >
+                    <Calendar
+                        {...calendarProps}
+                        captionLayout={captionLayout}
+                        showWeekNumber={showWeekNumber}
+                        mode={mode as any}
+                        selected={date as any}
+                        onSelect={(e: any) => {
+                            setDate(applyTimeToDateValue(e, pickerValue));
                         }}
+                        min={mode != "single" ? min : undefined}
+                        max={mode != "single" ? max : undefined}
                     />
-                )}
-            </PopoverContent>
-        </Popover>
-    )
-});
+                    {timePicker && (
+                        <TimePicker
+                            value={pickerValue}
+                            onChange={(value: TimePickerValue) => {
+                                setPickerValue(value);
+                                setDate(applyTimeToDateValue(date, value));
+                            }}
+                        />
+                    )}
+                </PopoverContent>
+            </Popover>
+        );
+    }
+);
 
 DatePicker.displayName = "DatePicker";
 
-
-
 interface TimePickerProps {
     value: TimePickerValue;
     onChange: (value: TimePickerValue) => void;
@@ -137,7 +174,7 @@ interface TimePickerProps {
 
 const TimePicker = ({ value, onChange }: TimePickerProps) => {
     return (
-        <div className='relative w-full sm:w-[189px]'>
+        <div className="relative w-full sm:w-[189px]" data-theme="dark">
             <Picker
                 className="flex-1"
                 selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
@@ -147,11 +184,18 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                 }}
                 wheelMode="normal"
             >
-                <span className='absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]' >:</span>
+                <span className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]">
+                    :
+                </span>
                 <Picker.Column name="hour">
                     {Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => (
                         <Picker.Item key={hour + "hour"} value={hour}>
-                            <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]"> <p className='text-content-presentation-global-primary'>{hour}</p></div>
+                            <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]">
+                                {" "}
+                                <p className="text-content-presentation-global-primary">
+                                    {hour}
+                                </p>
+                            </div>
                         </Picker.Item>
                     ))}
                 </Picker.Column>
@@ -159,7 +203,7 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                     {Array.from({ length: 60 }, (_, i) => i).map((minute) => (
                         <Picker.Item key={minute + "minute"} value={minute}>
                             <div className="typography-display-small-semibold text-content-presentation-global-primary">
-                                {minute.toString().padStart(2, '0')}
+                                {minute.toString().padStart(2, "0")}
                             </div>
                         </Picker.Item>
                     ))}
@@ -167,11 +211,13 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                 <Picker.Column name="time">
                     {["AM", "PM"].map((time) => (
                         <Picker.Item key={time + "time"} value={time}>
-                            <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">{time}</div>
+                            <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">
+                                {time}
+                            </div>
                         </Picker.Item>
                     ))}
                 </Picker.Column>
             </Picker>
         </div>
-    )
-}
+    );
+};

package/lib/components/Input.tsx

@@ -45,13 +45,14 @@ export const Icon = ({ children, className }: IconProps) => {
 };
 
 
-interface TrillingProps {
+interface TrillingProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }
-export const Trilling = ({ children, className }: TrillingProps) => {
+export const Trilling = ({ children, className, ...props }: TrillingProps) => {
     return (
         <div
+            {...props}
             className={cn(
                 "flex items-center justify-center h-full gap-1 py-1",
                 className
@@ -96,7 +97,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 autoComplete="off"
                 className={cn(
                     // Base styles
-                    "typography-body-large-regular focus:pe-[30px]",
+                    "typography-body-large-regular",
                     "text-content-presentation-action-light-primary",
                     "bg-transparent",
                     "h-full",
@@ -183,8 +184,8 @@ export const GroupStyles = cva(
                 ],
             },
             size: {
-                S: ["h-[30px]", "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]"],
-                M: ["h-[40px]", "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]"],
+                S: ["h-[30px] min-h-[30px]", "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]"],
+                M: ["h-[40px] min-h-[40px]", "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]"],
             },
             error: {
                 true: [

package/lib/components/InputField.tsx

@@ -48,6 +48,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const [PopoverWidth, setPopoverWidth] = useState(0);
     const inputRef = useRef<HTMLInputElement>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
       if (!forwardedRef) return;
@@ -56,14 +57,14 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
     }, [forwardedRef]);
     // TODO: make the user input visible when input is focused
     return (
-      <Popover open={isPopoverOpen}>
+      <Popover onOpenChange={setIsPopoverOpen}>
         <Tooltip
           theme={theme}
           toolTipSide={toolTipSide}
           open={errorMessage !== undefined}
           text={errorMessage}
         >
-          <PopoverTrigger asChild>
+          <PopoverTrigger ref={triggerRef} asChild>
             <Group
               error={errorMessage !== undefined}
               onTable={onTable}
@@ -113,6 +114,9 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
               variant={variant}
               onOpenAutoFocus={(e: any) => e.preventDefault()}
               style={{ width: PopoverWidth }}
+              onClick={(e) => {
+                triggerRef.current?.click();
+              }}
             >
               {popoverChildren}
             </PopoverContent>

package/lib/components/LinkButton.tsx

@@ -1,4 +1,4 @@
-import React, { AnchorHTMLAttributes, HTMLAttributes, SVGProps } from "react";
+import React, { HTMLAttributes, SVGProps } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";

package/lib/components/RadioCard.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from "react";
 import { cn } from "../utils/cn";
-import { Radio, RadioGroup } from "./Radio";
+import { Radio } from "./Radio";
 import { Card, CardContent, CardDescription, CardHeader } from "./Card";
 
 

package/lib/components/SimpleSelect.tsx

@@ -91,7 +91,7 @@ const SimpleSelectValue = ({
                 onChange={handleInputChange}
                 className={cn([
                     "bg-transparent",
-                    "text-white",
+                    "text-content-system-global-primary",
                     "h-[24px]",
                     "border-none",
                     "outline-none",

package/lib/components/SlideDatePicker.tsx

@@ -1,10 +1,10 @@
-import { cloneElement, ComponentProps, forwardRef, isValidElement, useState, useEffect } from 'react';
+import { cloneElement, ComponentProps, forwardRef, isValidElement, useState, useEffect, useRef } from 'react';
 import { getDaysInMonth } from 'date-fns';
 import Picker from 'torch-react-mobile-picker';
 import { Popover, PopoverContent, PopoverTrigger } from './Popover';
 import { InputField } from './InputField';
 import { ActionButton } from './ActionButton';
-import { formatDateValueToString } from '@/utils/dateFormat';
+import { formatDateValueToString } from '../utils/dateFormat';
 
 function getDayArray(year: number, month: number): string[] {
   const dayCount = getDaysInMonth(new Date(year, month - 1));
@@ -15,9 +15,10 @@ interface SlideDatePickerProps extends Omit<ComponentProps<typeof InputField>, '
   onChange?: (e: any) => void;
   theme?: "dark" | "light" | "default";
   dateFormat?: string;
+  value?: any;
 }
 
-type SlideVlaues = {
+type SlideValues = {
   year: string,
   month: string,
   day: string,
@@ -32,22 +33,25 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
     onChange,
     dateFormat = "yyyy/MM/dd",
     children,
+    value = new Date(),
     ...props
   }, forwardedRef) => {
 
-  const today = new Date();
+  const today = value
   const defaultPickerValue = {
     year: String(today.getFullYear()),
-    month: String(today.getMonth() + 1).padStart(2, '0'),
-    day: String(today.getDate()).padStart(2, '0'),
-    hour: "00",
-    minute: "00",
-    time: "AM"
+    month: String(today.getMonth() + 1),
+    day: String(today.getDate()),
+    hour: String(today.getHours()),
+    minute: String(today.getMinutes()),
+    time: today.getHours() < 12 ? "AM" : "PM"
   };
 
-  const [pickerValue, setPickerValue] = useState<SlideVlaues>(defaultPickerValue);
-  const [date, setDate] = useState<Date>(new Date());
+  const [pickerValue, setPickerValue] = useState<SlideValues>(defaultPickerValue);
+  const [date, setDate] = useState<Date>(value);
   const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
   const currentYear = new Date().getFullYear();
   const years = Array.from({ length: 200 }, (_, i) => `${currentYear - 100 + i}`);
   const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, ''));
@@ -57,7 +61,7 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
     "July", "August", "September", "October", "November", "December",
   ];
 
-  const handlePickerChange = (newValue: SlideVlaues, key: string) => {
+  const handlePickerChange = (newValue: SlideValues, key: string) => {
     let { year, month, day, hour, minute, time } = newValue;
 
     if (key === 'year' || key === 'month') {
@@ -118,7 +122,7 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
 
   return (
     <Popover onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild data-theme={theme} className='w-full flex-1' >
+      <PopoverTrigger ref={triggerRef} asChild data-theme={theme} className='w-full flex-1' >
         {
           isValidElement(children) ?
             cloneElement(children as React.ReactElement<HTMLInputElement>, {
@@ -131,12 +135,14 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
             <InputField
               readOnly
               type="input"
+              {...props}
               childrenSide={
-                <ActionButton type='button' size={"M"}>
+                <ActionButton type='button' size={"M"} onClick={() => {
+                  triggerRef.current?.click();
+                }}>
                   <i className="ri-calendar-event-fill"></i>
                 </ActionButton>
               }
-              {...props}
               value={formattedValue}
               ref={forwardedRef}
             />

package/lib/components/Textarea.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { cn } from "../utils/cn";
 import { Label } from "./Label";
 import { cva, VariantProps } from "class-variance-authority";
-import { Input } from "./Input";
 
 // Define the styles for the textarea using cva
 const textareaStyles = cva(

package/lib/components/Toast.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Toaster as ToasterComponent, toast } from 'react-hot-toast'
+
+
+const Toaster = ({
+    position = 'top-left',
+    reverseOrder = false,
+    gutter = 8,
+    containerClassName = '',
+    containerStyle = {},
+    toastOptions = {},
+    ...props }: React.ComponentPropsWithoutRef<typeof ToasterComponent>) => {
+    return (
+        <ToasterComponent
+            position={position}
+            reverseOrder={reverseOrder}
+            gutter={gutter}
+            containerClassName={containerClassName}
+            containerStyle={containerStyle}
+            {...props}
+            toastOptions={{
+                // Define default options
+                className: '',
+                duration: 8000,
+                removeDelay: 1000,
+                style: {
+                    background: 'var(--background-presentation-state-information-secondary)',
+                    color: 'var(--content-presentation-global-primary)',
+                    borderRadius: '16px',
+                },
+
+                // Default options for specific types
+                success: {
+                    duration: 3000,
+                    style: {
+                        background: 'var(--background-presentation-state-success-secondary)',
+                        color: 'var(--content-presentation-global-primary)',
+                        borderRadius: '16px',
+                    },
+                    iconTheme: {
+                        primary: 'var(--background-presentation-state-success-primary)',
+                        secondary: 'var(--background-presentation-state-success-secondary)',
+                    },
+                },
+                error: {
+                    duration: 5000,
+                    style: {
+                        background: 'var(--background-presentation-state-negative-secondary)',
+                        color: 'var(--content-presentation-global-primary)',
+                        borderRadius: '16px',
+                    },
+                    iconTheme: {
+                        primary: 'var(--background-presentation-state-negative-primary)',
+                        secondary: 'var(--background-presentation-state-negative-secondary)',
+                    },
+                },
+                loading: {
+                    duration: 4000,
+                    style: {
+                        background: 'var(--background-presentation-state-warning-secondary)',
+                        color: 'var(--content-presentation-global-primary)',
+                        borderRadius: '16px',
+                    },
+                    iconTheme: {
+                        primary: 'var(--background-presentation-state-warning-primary)',
+                        secondary: 'var(--background-presentation-state-warning-secondary)',
+                    },
+                },
+                blank: {
+                    duration: 4000,
+                    style: {
+                        background: 'var(--background-presentation-state-information-secondary)',
+                        color: 'var(--content-presentation-global-primary)',
+                        borderRadius: '16px',
+                    },
+                    iconTheme: {
+                        primary: 'var(--background-presentation-state-information-primary)',
+                        secondary: 'var(--background-presentation-state-information-secondary)',
+                    },
+                },
+                ...toastOptions,
+            }}
+        />
+    )
+}
+
+export { Toaster, toast }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "license": "MIT",
   "files": [