@ayasofyazilim/ui 0.0.1 → 0.0.2

package/src/custom/schema-form/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { lodash } from "@repo/ayasofyazilim-ui/lib/utils";
+import { lodash } from "@ayasofyazilim/ui/lib/utils";
 import { Form } from "@rjsf/shadcn";
 import { customizeValidator } from "@rjsf/validator-ajv8";
 import type { RJSFValidationError, FormValidation } from "@rjsf/utils";
@@ -104,7 +104,7 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
       schema = createDynamicSchema(
         schema,
         runtimeDependencyConfig,
-        formData as Record<string, unknown>
+        formData as Record<string, unknown>,
       );
     }
 
@@ -156,7 +156,7 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
 
       return filteredErrors;
     },
-    [formData, userTransformErrors]
+    [formData, userTransformErrors],
   );
 
   const combinedCustomValidate = useCallback(
@@ -165,29 +165,29 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
 
       if (runtimeDependencyConfig) {
         const runtimeValidator = createRuntimeValidator(
-          runtimeDependencyConfig
+          runtimeDependencyConfig,
         );
         validationErrors = runtimeValidator(
           formDataToValidate as Record<string, unknown>,
-          validationErrors as FormValidation<Record<string, unknown>>
+          validationErrors as FormValidation<Record<string, unknown>>,
         ) as FormValidation<T>;
       }
 
       if (userCustomValidate) {
         validationErrors = userCustomValidate(
           formDataToValidate,
-          validationErrors
+          validationErrors,
         );
       }
 
       return validationErrors;
     },
-    [runtimeDependencyConfig, userCustomValidate]
+    [runtimeDependencyConfig, userCustomValidate],
   );
 
   const memoizedWidgets = useMemo(
     () => lodash.merge(INTERNAL_WIDGETS, widgets),
-    [widgets]
+    [widgets],
   );
   const memoizedFields = useMemo(() => fields, [fields]);
   const memoizedTemplates = useMemo(() => {
@@ -196,14 +196,14 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
       templates,
       useTableForArrayFields
         ? { ArrayFieldItemTemplate, ArrayFieldTemplate }
-        : {}
+        : {},
     );
   }, [templates]);
 
   const handleSubmit = useCallback(
     (
       data: Parameters<NonNullable<typeof userOnSubmit>>[0],
-      event: React.FormEvent<HTMLFormElement>
+      event: React.FormEvent<HTMLFormElement>,
     ) => {
       if (!userOnSubmit) return;
 
@@ -213,14 +213,14 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
       if (fieldDependencies && cleanedFormData) {
         cleanedFormData = cleanHiddenFieldsFromFormData(
           cleanedFormData as Record<string, unknown>,
-          fieldDependencies
+          fieldDependencies,
         ) as T;
       }
 
       if (runtimeDependencyConfig && cleanedFormData) {
         cleanedFormData = cleanFormDataForSubmit(
           cleanedFormData as Record<string, unknown>,
-          runtimeDependencyConfig
+          runtimeDependencyConfig,
         ) as T;
       }
 
@@ -230,7 +230,7 @@ export function SchemaForm<T = any>(props: SchemaFormProps<T>) {
 
       userOnSubmit(submitData, event);
     },
-    [userOnSubmit, runtimeDependencyConfig, fieldDependencies]
+    [userOnSubmit, runtimeDependencyConfig, fieldDependencies],
   );
 
   return (

package/src/custom/schema-form/templates/description.tsx

@@ -2,7 +2,7 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-} from "@repo/ayasofyazilim-ui/components/tooltip";
+} from "@ayasofyazilim/ui/components/tooltip";
 import { DescriptionFieldProps } from "@rjsf/utils";
 import { InfoIcon, MessageCircleQuestion } from "lucide-react";
 

package/src/custom/schema-form/templates/submit.tsx

@@ -4,8 +4,8 @@ import {
   SubmitButtonProps,
   UISchemaSubmitButtonOptions,
 } from "@rjsf/utils";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 export function SubmitButton(props: SubmitButtonProps) {
   const { uiSchema } = props;

package/src/custom/schema-form/utils/schemas.ts

@@ -5,7 +5,7 @@ import {
   FilterType,
   UiSchema,
 } from "../types";
-import { lodash } from "@repo/ayasofyazilim-ui/lib/utils";
+import { lodash } from "@ayasofyazilim/ui/lib/utils";
 
 /**
  *
@@ -69,7 +69,7 @@ export function createSchemaWithFilters<T = string>({
 
   const filterRecursive = (
     currentObj: GenericObjectType,
-    parentPath: string = ""
+    parentPath: string = "",
   ): void => {
     if (!currentObj.properties && !currentObj.items) return;
 
@@ -111,14 +111,14 @@ export function createSchemaWithFilters<T = string>({
             }
           }
         },
-        {} as GenericObjectType["properties"]
+        {} as GenericObjectType["properties"],
       );
 
       // Update or Remove 'required' array based on kept keys
       if (currentObj.required) {
         currentObj.required = lodash.intersection(
           currentObj.required,
-          keptKeys
+          keptKeys,
         );
         if (lodash.isEmpty(currentObj.required)) {
           delete currentObj.required;
@@ -136,7 +136,7 @@ export function createSchemaWithFilters<T = string>({
  */
 export function removeFieldsfromGenericSchema<T>(
   obj: T,
-  keysToRemove: string | string[]
+  keysToRemove: string | string[],
 ): T {
   const keysArray = lodash.castArray(keysToRemove);
 
@@ -153,7 +153,7 @@ export function removeFieldsfromGenericSchema<T>(
             result[key] = transform(val);
           }
         },
-        {} as Record<string, unknown>
+        {} as Record<string, unknown>,
       );
     }
 
@@ -223,7 +223,7 @@ function uiSchemaFromSchema({
         });
         return lodash.merge(acc, nested);
       },
-      {}
+      {},
     );
 
     Object.assign(uiSchema[name], {
@@ -244,7 +244,7 @@ function uiSchemaFromSchema({
 
     if (object.enum) {
       uiSchemaItem["ui:enumNames"] = object.enum.map(
-        (key: string) => resources[`${constantKey}.${key}`] || key
+        (key: string) => resources[`${constantKey}.${key}`] || key,
       );
       uiSchemaItem["ui:options"] = {
         label: true,
@@ -282,7 +282,7 @@ function filterUndefinedAndEmpty<T>(obj: T): FilteredObject<T> {
         acc[key] = filteredValue;
       }
     },
-    {}
+    {},
   );
 
   return result as FilteredObject<T>;

package/src/custom/schema-form/widgets/boolean.tsx

@@ -1,7 +1,7 @@
-import { Checkbox } from "@repo/ayasofyazilim-ui/components/checkbox";
-import { Label } from "@repo/ayasofyazilim-ui/components/label";
-import { Switch } from "@repo/ayasofyazilim-ui/components/switch";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Checkbox } from "@ayasofyazilim/ui/components/checkbox";
+import { Label } from "@ayasofyazilim/ui/components/label";
+import { Switch } from "@ayasofyazilim/ui/components/switch";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 import { WidgetProps } from "@rjsf/utils";
 import { ReactNode } from "react";
 
@@ -62,7 +62,7 @@ function BooleanWrapper({
       data-wrapper="boolean"
       className={cn(
         "flex items-center gap-2 h-9 px-2 border rounded-md shadow-xs",
-        className
+        className,
       )}
     >
       {children}

package/src/custom/schema-form/widgets/combobox.tsx

@@ -2,8 +2,8 @@ import { ChevronsUpDown } from "lucide-react";
 import { WidgetProps } from "@rjsf/utils";
 import { CheckIcon } from "lucide-react";
 import { Dispatch, ReactNode, SetStateAction, useState } from "react";
-import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Badge } from "@ayasofyazilim/ui/components/badge";
+import { Button } from "@ayasofyazilim/ui/components/button";
 import {
   Command,
   CommandEmpty,
@@ -11,19 +11,19 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@repo/ayasofyazilim-ui/components/command";
+} from "@ayasofyazilim/ui/components/command";
 import {
   Drawer,
   DrawerContent,
   DrawerTrigger,
-} from "@repo/ayasofyazilim-ui/components/drawer";
+} from "@ayasofyazilim/ui/components/drawer";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@repo/ayasofyazilim-ui/components/popover";
-import { useMediaQuery } from "@repo/ayasofyazilim-ui/hooks/use-media-query";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+} from "@ayasofyazilim/ui/components/popover";
+import { useMediaQuery } from "@ayasofyazilim/ui/hooks/use-media-query";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 type BadgeOptions = { className?: string; showValue?: boolean; label?: string };
 
@@ -54,7 +54,7 @@ export function CustomCombobox<T>(props: CustomComboboxProps<T>) {
   const [open, setOpen] = useState(false);
   const fieldValue = value || defaultValue;
   const fieldValueDisplayName = list?.find(
-    (x) => x[selectIdentifier] === fieldValue
+    (x) => x[selectIdentifier] === fieldValue,
   )?.[selectLabel];
   const DesktopContent = (
     <Popover open={open} onOpenChange={setOpen} modal>
@@ -73,7 +73,7 @@ export function CustomCombobox<T>(props: CustomComboboxProps<T>) {
             "text-muted-foreground w-full justify-between font-normal shadow-xs hover:bg-white overflow-hidden",
             fieldValueDisplayName && "text-foreground",
             disabled &&
-              "disabled:pointer-events-auto hover:bg-background hover:text-muted-foreground"
+              "disabled:pointer-events-auto hover:bg-background hover:text-muted-foreground",
           )}
         >
           <span className="truncate has-[role=dialog]:max-w-xs">
@@ -101,7 +101,7 @@ export function CustomCombobox<T>(props: CustomComboboxProps<T>) {
           variant="outline"
           className={cn(
             "text-muted-foreground w-full justify-between font-normal shadow-xs hover:bg-white",
-            fieldValueDisplayName && "text-black"
+            fieldValueDisplayName && "text-black",
           )}
         >
           {fieldValueDisplayName
@@ -147,7 +147,7 @@ function List<T>({
         const filterResult = list?.find(
           (i) =>
             (i[selectIdentifier] as string).toString()?.toLocaleLowerCase() ===
-            value.toLocaleLowerCase()
+            value.toLocaleLowerCase(),
         )?.[selectLabel] as string;
         if (
           value.includes(search) ||
@@ -175,11 +175,11 @@ function List<T>({
                     ? item[selectIdentifier] === value
                       ? undefined
                       : item[selectIdentifier]
-                    : item[selectIdentifier]
+                    : item[selectIdentifier],
                 );
                 if (onValueChange)
                   onValueChange(
-                    list.find((i) => i[selectIdentifier] === value)
+                    list.find((i) => i[selectIdentifier] === value),
                   );
                 setOpen(false);
               }}

package/src/custom/schema-form/widgets/date.tsx

@@ -1,4 +1,4 @@
-import { DatePicker } from "@repo/ayasofyazilim-ui/custom/date-picker";
+import { DatePicker } from "@ayasofyazilim/ui/custom/date-picker";
 import { WidgetProps } from "@rjsf/utils";
 
 export const DateWidget = (props: WidgetProps) => {

package/src/custom/schema-form/widgets/email.tsx

@@ -1,5 +1,5 @@
-import { EmailInput } from "@repo/ayasofyazilim-ui/custom/email-input";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { EmailInput } from "@ayasofyazilim/ui/custom/email-input";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 import { WidgetProps } from "@rjsf/utils";
 import { useState } from "react";
 

package/src/custom/schema-form/widgets/password.tsx

@@ -1,5 +1,5 @@
 import { WidgetProps } from "@rjsf/utils";
-import { PasswordInput } from "@repo/ayasofyazilim-ui/custom/password-input";
+import { PasswordInput } from "@ayasofyazilim/ui/custom/password-input";
 
 export const PasswordInputWidget = (props: WidgetProps) => {
   const {

package/src/custom/schema-form/widgets/phone.tsx

@@ -3,12 +3,12 @@
 import {
   PhoneInput,
   PhoneInputProps,
-} from "@repo/ayasofyazilim-ui/custom/phone-input";
+} from "@ayasofyazilim/ui/custom/phone-input";
 import { WidgetProps } from "@rjsf/utils";
 
 export function CustomPhoneFieldWithParse<T>(
   props: Partial<Omit<WidgetProps<T>, "onChange" | "id">> &
-    Omit<PhoneInputProps, "required" | "defaultValue" | "id">
+    Omit<PhoneInputProps, "required" | "defaultValue" | "id">,
 ) {
   const required = props.required || props.uiSchema?.["ui:required"];
   return (
@@ -23,7 +23,7 @@ export function CustomPhoneFieldWithParse<T>(
 export const PhoneWithParseWidget = CustomPhoneFieldWithParse;
 
 export const PhoneWithValueWidget = function CustomPhoneFieldWithValue(
-  props: WidgetProps & { defaultCountry?: string }
+  props: WidgetProps & { defaultCountry?: string },
 ) {
   const { onChange, uiSchema } = props;
   const required = uiSchema?.["ui:required"] || props.required;

package/src/custom/schema-form/widgets/select.tsx

@@ -11,9 +11,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@repo/ayasofyazilim-ui/components/select";
-import { Selectable } from "@repo/ayasofyazilim-ui/custom/selectable";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+} from "@ayasofyazilim/ui/components/select";
+import { Selectable } from "@ayasofyazilim/ui/custom/selectable";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 /** The `SelectWidget` is a widget for rendering dropdowns.
  *  It is typically used with string properties constrained with enum options.
@@ -57,12 +57,12 @@ export function SelectWidget<
         label,
         disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
       };
-    }
+    },
   );
   const cnClassName = cn(
     "w-full",
     { "border-destructive": rawErrors.length > 0 },
-    className
+    className,
   );
   return !multiple ? (
     <Select

package/src/custom/schema-form/widgets/selectable.tsx

@@ -1,11 +1,11 @@
 import {
   Selectable,
   SelectableProps,
-} from "@repo/ayasofyazilim-ui/custom/selectable";
+} from "@ayasofyazilim/ui/custom/selectable";
 import { WidgetProps } from "@rjsf/utils";
 
 export function CustomSelectableWidget<T>(
-  selectableProps: Omit<SelectableProps<T>, "onChange">
+  selectableProps: Omit<SelectableProps<T>, "onChange">,
 ) {
   const { getKey } = selectableProps;
 

package/src/custom/schema-form/widgets/string-array.tsx

@@ -1,17 +1,17 @@
-import { ButtonProps } from "@repo/ayasofyazilim-ui/components/button";
+import { ButtonProps } from "@ayasofyazilim/ui/components/button";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
   InputGroupText,
-} from "@repo/ayasofyazilim-ui/components/input-group";
+} from "@ayasofyazilim/ui/components/input-group";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@repo/ayasofyazilim-ui/components/tooltip";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+} from "@ayasofyazilim/ui/components/tooltip";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 import { WidgetProps } from "@rjsf/utils";
 import { PlusIcon, Trash2Icon } from "lucide-react";
 import { useCallback, useState } from "react";
@@ -52,7 +52,7 @@ interface StringArrayWidgetConfig {
   renderItem?: (
     value: string,
     index: number,
-    onRemove: () => void
+    onRemove: () => void,
   ) => React.ReactNode;
   emptyState?: React.ReactNode;
   placeholder?: string;
@@ -149,21 +149,21 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
           onAdd(finalValue);
         }
       },
-      [currentValues, props]
+      [currentValues, props],
     );
 
     const handleRemove = useCallback(
       (index: number) => {
         const valueToRemove = currentValues[index];
         const newValues = currentValues.filter(
-          (_: string, i: number) => i !== index
+          (_: string, i: number) => i !== index,
         );
         props.onChange(newValues);
         if (onRemove) {
           onRemove(valueToRemove, index);
         }
       },
-      [currentValues, props, onRemove]
+      [currentValues, props, onRemove],
     );
 
     const isDisabled = disabled || props.disabled;
@@ -174,7 +174,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
         className={cn(
           "p-1.5",
           currentValues.length === 0 && "p-0",
-          classNames.container
+          classNames.container,
         )}
       >
         <InputGroupAddon
@@ -183,7 +183,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
             "flex-col gap-1.5",
             maxHeight,
             "overflow-auto p-0",
-            classNames.listContainer || ""
+            classNames.listContainer || "",
           )}
         >
           {currentValues.length === 0 && emptyState
@@ -197,14 +197,14 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
                   <InputGroupText
                     className={cn(
                       "bg-accent relative w-full overflow-hidden pl-2 pr-1 min-h-8 h-8 rounded-md",
-                      classNames.listItem || ""
+                      classNames.listItem || "",
                     )}
                     key={`${value}-${index}`}
                   >
                     <span
                       className={cn(
                         "truncate text-ellipsis",
-                        classNames.listItemText || ""
+                        classNames.listItemText || "",
                       )}
                     >
                       {value}
@@ -212,7 +212,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
                     <InputGroupButton
                       className={cn(
                         "rounded-md ml-auto",
-                        classNames.removeButton || ""
+                        classNames.removeButton || "",
                       )}
                       variant={buttonVariants.remove}
                       size={buttonSizes.remove}
@@ -231,7 +231,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
           className={cn(
             "p-0 justify-between",
             currentValues.length === 0 && "pr-1.5 ",
-            classNames.inputContainer || ""
+            classNames.inputContainer || "",
           )}
         >
           <Tooltip open={!!error}>
@@ -241,7 +241,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
                   className={cn(
                     "pl-2",
                     error && "text-destructive",
-                    classNames.input || ""
+                    classNames.input || "",
                   )}
                   placeholder={placeholder || props.options.placeholder}
                   value={inputValue}
@@ -269,7 +269,7 @@ export function CustomStringArrayWidget(config: StringArrayWidgetConfig = {}) {
                   variant={buttonVariants.add}
                   className={cn(
                     "rounded-md ml-auto",
-                    classNames.addButton || ""
+                    classNames.addButton || "",
                   )}
                   size={buttonSizes.add}
                   onClick={() => handleValue(inputValue)}

package/src/custom/schema-form/widgets/url.tsx

@@ -4,8 +4,8 @@ import {
   InputGroupAddon,
   InputGroupInput,
   InputGroupText,
-} from "@repo/ayasofyazilim-ui/components/input-group";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+} from "@ayasofyazilim/ui/components/input-group";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 import { WidgetProps } from "@rjsf/utils";
 
 export const URLInputWidget = (props: WidgetProps) => {

package/src/custom/section-layout-v2.tsx

@@ -8,9 +8,9 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import { Skeleton } from "@ayasofyazilim/ui/components/skeleton";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 export interface ISection {
   children?: React.ReactNode;
@@ -53,7 +53,7 @@ export function SectionLayoutNavbar({
         "flex gap-4 text-sm text-center md:text-left p-3 ",
         vertical
           ? "flex-col border-b md:border-b-0 md:border-r overflow-auto min-w-full md:min-w-60 items-center md:items-start"
-          : "flex-col md:flex-row border-b"
+          : "flex-col md:flex-row border-b",
       )}
     >
       {sections.map((section) => (
@@ -65,7 +65,7 @@ export function SectionLayoutNavbar({
             section.disabled
               ? "cursor-not-allowed opacity-50"
               : "cursor-pointer",
-            section.className
+            section.className,
           )}
           data-active={activeSectionId === section.id}
           href={section.link || "#"}
@@ -148,7 +148,7 @@ export function SectionLayout({
   vertical,
 }: ISectionLayoutProps) {
   const [activeSectionId, setActiveSectionId] = useState(
-    defaultActiveSectionId || sections?.[0]?.id
+    defaultActiveSectionId || sections?.[0]?.id,
   );
   useEffect(() => {
     if (linkElement && defaultActiveSectionId) {
@@ -157,7 +157,7 @@ export function SectionLayout({
   }, [defaultActiveSectionId]);
   const contextValue = useMemo(
     () => ({ activeSectionId: activeSectionId || "" }),
-    [activeSectionId]
+    [activeSectionId],
   );
   return (
     <SectionLayoutContext.Provider value={contextValue}>
@@ -194,7 +194,7 @@ export const SectionLayoutSkeleton = ({ vertical }: { vertical?: boolean }) => (
         "flex gap-4 text-sm text-center md:text-left p-5 ",
         vertical
           ? "flex-col border-b md:border-b-0 md:border-r min-w-full md:min-w-60 items-center md:items-start"
-          : "flex-col md:flex-row border-b"
+          : "flex-col md:flex-row border-b",
       )}
     >
       <Skeleton className="h-6 w-full bg-gray-200" />

package/src/custom/select-tabs.tsx

@@ -8,8 +8,8 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 const variants = {
   default:

package/src/custom/stepper.tsx

@@ -8,8 +8,8 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
 
 export interface ISeparatorProps {
   vertical?: boolean;
@@ -131,7 +131,7 @@ export const StepperHeader = ({
     `flex gap-5 justify-between relative mb-10 ${
       vertical ? "flex-col items-center w-2/12" : "w-full"
     }`,
-    containerClassName
+    containerClassName,
   );
   const activeItemClass = cn("bg-primary text-white", activeItemClassName);
   const inactiveItemClass = cn("bg-zinc-200 text-black", inactiveItemClassName);
@@ -217,7 +217,7 @@ export default function Stepper({
       vertical,
       stepsLength,
     }),
-    [nextButtonText, previousButtonText, onIndexChange, vertical, stepsLength]
+    [nextButtonText, previousButtonText, onIndexChange, vertical, stepsLength],
   );
   const filteredChildren = React.Children.toArray(children)?.[activeTabIndex];
   return (