@mbao01/common 0.0.41 → 0.0.43

package/src/components/Form/Phone/Phone.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import React, { MutableRefObject } from "react";
-import {
-  defaultCountries,
-  usePhoneInput,
-  FlagImage,
-} from "react-international-phone";
-import { type PhoneProps } from "./types";
-import { Popover } from "../../Popover";
-import { Command } from "../../Command";
+import { defaultCountries, FlagImage, usePhoneInput } from "react-international-phone";
 import { cn } from "../../../utilities";
 import { Button } from "../../Button";
+import { Command } from "../../Command";
+import { Popover } from "../../Popover";
 import { Input } from "../Input";
 import { getPhoneButtonClasses, getPhoneInputClasses } from "./constants";
+import { type PhoneProps } from "./types";
 
 const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
   (
@@ -31,13 +27,7 @@ const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
     ref
   ) => {
     const [open, setOpen] = React.useState(false);
-    const {
-      inputValue,
-      handlePhoneValueChange,
-      inputRef,
-      country,
-      setCountry,
-    } = usePhoneInput({
+    const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
       value: String(defaultValue) ?? "+231",
       defaultCountry: "lr",
       forceDialCode: true,
@@ -60,6 +50,7 @@ const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
           <Popover.Trigger asChild>
             <Button
               role="combobox"
+              aria-label="Select country code"
               aria-expanded={open}
               size={size}
               variant={variant}

package/src/components/Form/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type RadioProps } from "./types";
-import { getRadioClasses } from "./constants";
 import { cn } from "../../../utilities";
+import { getRadioClasses } from "./constants";
+import { type RadioProps } from "./types";
 
 const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   ({ className, size, variant, ...props }, ref) => (

package/src/components/Form/Radio/types.ts

@@ -1,8 +1,5 @@
 import { type VariantProps } from "../../../libs";
 import { getRadioClasses } from "./constants";
 
-export type RadioProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "size" | "ref" | "type"
-> &
+export type RadioProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
   VariantProps<typeof getRadioClasses>;

package/src/components/Form/Range/Range.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type RangeProps } from "./types";
-import { getRangeClasses } from "./constants";
 import { cn } from "../../../utilities";
+import { getRangeClasses } from "./constants";
+import { type RangeProps } from "./types";
 
 const Range = React.forwardRef<HTMLInputElement, RangeProps>(
   ({ className, size, variant, wide, disabled, ...props }, ref) => (
@@ -9,10 +9,7 @@ const Range = React.forwardRef<HTMLInputElement, RangeProps>(
       ref={ref}
       type="range"
       disabled={disabled}
-      className={cn(
-        getRangeClasses({ size, variant, wide, disabled }),
-        className
-      )}
+      className={cn(getRangeClasses({ size, variant, wide, disabled }), className)}
       {...props}
     />
   )

package/src/components/Form/Range/types.ts

@@ -1,8 +1,5 @@
 import { type VariantProps } from "../../../libs";
 import { getRangeClasses } from "./constants";
 
-export type RangeProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "size" | "ref" | "type"
-> &
+export type RangeProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
   VariantProps<typeof getRangeClasses>;

package/src/components/Form/Select/Select.tsx

@@ -1,17 +1,9 @@
 "use client";
 
 import * as React from "react";
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import type {
-  SelectContentProps,
-  SelectItemProps,
-  SelectTriggerProps,
-} from "./types";
+import type { SelectContentProps, SelectItemProps, SelectTriggerProps } from "./types";
 import { cn } from "../../../utilities";
 import {
   getSelectContentClasses,
@@ -22,9 +14,9 @@ import {
   getSelectViewportClasses,
 } from "./constants";
 
-const Select = (
-  props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
-) => <SelectPrimitive.Root {...props} />;
+const Select = (props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => (
+  <SelectPrimitive.Root {...props} />
+);
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -32,10 +24,7 @@ const SelectTrigger = React.forwardRef<
 >(({ className, children, size, wide, variant, outline, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(
-      getSelectTriggerClasses({ size, wide, variant, outline }),
-      className
-    )}
+    className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
     {...props}
   >
     {children}
@@ -69,8 +58,7 @@ const SelectScrollDownButton = React.forwardRef<
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
 ));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -84,9 +72,7 @@ const SelectContent = React.forwardRef<
       {...props}
     >
       <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(getSelectViewportClasses({ position }))}
-      >
+      <SelectPrimitive.Viewport className={cn(getSelectViewportClasses({ position }))}>
         {children}
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
@@ -99,42 +85,33 @@ const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >((props, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn(getSelectLabelClasses())}
-    {...props}
-  />
+  <SelectPrimitive.Label ref={ref} className={cn(getSelectLabelClasses())} {...props} />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  SelectItemProps
->(({ className, children, variant, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(getSelectItemClasses({ variant }), className)}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(
+  ({ className, children, variant, ...props }, ref) => (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(getSelectItemClasses({ variant }), className)}
+      {...props}
+    >
+      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+);
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >((props, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn(getSelectSeparatorClasses())}
-    {...props}
-  />
+  <SelectPrimitive.Separator ref={ref} className={cn(getSelectSeparatorClasses())} {...props} />
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 

package/src/components/Form/Select/types.ts

@@ -2,17 +2,11 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { type VariantProps } from "../../../libs";
 import { getSelectContentClasses, getSelectTriggerClasses } from "./constants";
 
-export type SelectTriggerProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Trigger
-> &
+export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
   VariantProps<typeof getSelectTriggerClasses>;
 
-export type SelectItemProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Item
-> &
+export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
   VariantProps<typeof getSelectTriggerClasses>;
 
-export type SelectContentProps = React.ComponentPropsWithoutRef<
-  typeof SelectPrimitive.Content
-> &
+export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
   VariantProps<typeof getSelectContentClasses>;

package/src/components/Form/Slider/Slider.tsx

@@ -11,33 +11,47 @@ import {
 } from "./constants";
 import { type SliderProps } from "./types";
 
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(({ className, size, variant, wide, disabled, name, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    name={name}
-    disabled={disabled}
-    className={cn(getSliderRootClasses({ wide, disabled }), className)}
-    data-testid={`${name}-slider-root`}
-    {...props}
-  >
-    <SliderPrimitive.Track
-      className={cn(getSliderTrackClasses({ size, variant }))}
-      data-testid={`${name}-slider-track`}
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  (
+    {
+      className,
+      size,
+      variant,
+      wide,
+      disabled,
+      name,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...props
+    },
+    ref
+  ) => (
+    <SliderPrimitive.Root
+      ref={ref}
+      name={name}
+      disabled={disabled}
+      className={cn(getSliderRootClasses({ wide, disabled }), className)}
+      data-testid={name ? `${name}-slider-root` : null}
+      {...props}
     >
-      <SliderPrimitive.Range
-        className={cn(getSliderClasses({ variant }))}
-        data-testid={`${name}-slider-range`}
+      <SliderPrimitive.Track
+        className={cn(getSliderTrackClasses({ size, variant }))}
+        data-testid={name ? `${name}-slider-track` : null}
+      >
+        <SliderPrimitive.Range
+          className={cn(getSliderClasses({ variant }))}
+          data-testid={name ? `${name}-slider-range` : null}
+        />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className={cn(getSliderThumbClasses({ size, variant }))}
+        data-testid={name ? `${name}-slider-thumb` : null}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
       />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
-      className={cn(getSliderThumbClasses({ size, variant }))}
-      data-testid={`${name}-slider-thumb`}
-    />
-  </SliderPrimitive.Root>
-));
+    </SliderPrimitive.Root>
+  )
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

package/src/components/Form/Slider/constants.ts

@@ -14,32 +14,29 @@ export const getSliderRootClasses = cva(
   }
 );
 
-export const getSliderTrackClasses = cva(
-  "relative h-2 w-full grow overflow-hidden rounded-full",
-  {
-    variants: {
-      variant: {
-        primary: "bg-neutral-content",
-        secondary: "bg-neutral-content",
-        accent: "bg-neutral-content",
-        success: "bg-neutral-content",
-        warning: "bg-neutral-content",
-        info: "bg-neutral-content",
-        error: "bg-neutral-content",
-        neutral: "bg-base-200",
-      },
-      size: {
-        xs: "h-0.5",
-        sm: "h-1",
-        md: "h-2",
-        lg: "h-3",
-      },
+export const getSliderTrackClasses = cva("relative h-2 w-full grow overflow-hidden rounded-full", {
+  variants: {
+    variant: {
+      primary: "bg-neutral-content",
+      secondary: "bg-neutral-content",
+      accent: "bg-neutral-content",
+      success: "bg-neutral-content",
+      warning: "bg-neutral-content",
+      info: "bg-neutral-content",
+      error: "bg-neutral-content",
+      neutral: "bg-base-200",
     },
-    defaultVariants: {
-      variant: "neutral",
+    size: {
+      xs: "h-0.5",
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3",
     },
-  }
-);
+  },
+  defaultVariants: {
+    variant: "neutral",
+  },
+});
 
 export const getSliderClasses = cva("absolute h-full", {
   variants: {

package/src/components/Form/Slider/types.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from "../../../libs";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import { type VariantProps } from "../../../libs";
 import {
   getSliderClasses,
   getSliderRootClasses,
@@ -7,9 +7,7 @@ import {
   getSliderTrackClasses,
 } from "./constants";
 
-export type SliderProps = React.ComponentPropsWithoutRef<
-  typeof SliderPrimitive.Root
-> &
+export type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> &
   VariantProps<typeof getSliderClasses> &
   VariantProps<typeof getSliderTrackClasses> &
   VariantProps<typeof getSliderThumbClasses> &

package/src/components/Form/Switch/Switch.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-
-import { type SwitchProps } from "./types";
-import { getSwitchClasses } from "./constants";
 import { cn } from "../../../utilities";
+import { getSwitchClasses } from "./constants";
+import { type SwitchProps } from "./types";
 
 const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ className, size, variant, ...props }, ref) => (

package/src/components/Form/Switch/types.ts

@@ -1,8 +1,5 @@
 import { type VariantProps } from "../../../libs";
 import { getSwitchClasses } from "./constants";
 
-export type SwitchProps = Omit<
-  React.HTMLProps<HTMLInputElement>,
-  "size" | "ref" | "type"
-> &
+export type SwitchProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
   VariantProps<typeof getSwitchClasses>;

package/src/components/Form/TextField/TextField.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { type TextFieldProps } from "./types";
 import { FormControl } from "../components/FormControl/FormControl";
 import { Input } from "../Input";
+import { type TextFieldProps } from "./types";
 
 export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
   ({ id, name, info, error, label, ...props }: TextFieldProps, ref) => {
-    const feedbackId = `${name}-information`;
+    const feedbackId = name ? `${name}-information` : undefined;
 
     return (
       <FormControl as="label" htmlFor={id}>

package/src/components/Form/Textarea/Textarea.tsx

@@ -1,17 +1,14 @@
 import * as React from "react";
-import { type TextareaProps } from "./types";
 import { cn } from "../../../utilities";
 import { getTextareaClasses } from "./constants";
+import { type TextareaProps } from "./types";
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ size, variant, wide, outline, className, ...props }, ref) => {
     return (
       <textarea
         ref={ref}
-        className={cn(
-          getTextareaClasses({ size, wide, variant, outline }),
-          className
-        )}
+        className={cn(getTextareaClasses({ size, wide, variant, outline }), className)}
         {...props}
       />
     );

package/src/components/Form/Textarea/constants.ts

@@ -1,48 +1,45 @@
 import { cva } from "../../../libs";
 
-export const getTextareaClasses = cva(
-  "textarea rounded-md transition-all duration-100",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        accent: "textarea-accent",
-        error: "textarea-error",
-        ghost: "textarea-ghost",
-        info: "textarea-info",
-        primary: "textarea-primary",
-        secondary: "textarea-secondary",
-        success: "textarea-success",
-        warning: "textarea-warning",
-      },
-      outline: {
-        true: "textarea-bordered",
-      },
-      wide: {
-        true: "w-full",
-      },
-      size: {
-        xs: "textarea-xs",
-        sm: "textarea-sm",
-        md: "textarea-md",
-        lg: "textarea-lg",
-      },
+export const getTextareaClasses = cva("textarea rounded-md transition-all duration-100", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      accent: "textarea-accent",
+      error: "textarea-error",
+      ghost: "textarea-ghost",
+      info: "textarea-info",
+      primary: "textarea-primary",
+      secondary: "textarea-secondary",
+      success: "textarea-success",
+      warning: "textarea-warning",
     },
-    compoundVariants: [
-      {
-        size: undefined,
-        className: "min-h-fit h-10",
-      },
-      {
-        variant: undefined,
-        outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
-      },
-    ],
-  }
-);
+    outline: {
+      true: "textarea-bordered",
+    },
+    wide: {
+      true: "w-full",
+    },
+    size: {
+      xs: "textarea-xs",
+      sm: "textarea-sm",
+      md: "textarea-md",
+      lg: "textarea-lg",
+    },
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "min-h-fit h-10",
+    },
+    {
+      variant: undefined,
+      outline: true,
+      className: "border-neutral-content",
+    },
+    {
+      variant: "default",
+      outline: true,
+      className: "border-base-content",
+    },
+  ],
+});

package/src/components/Form/components/FormControl/FormControl.tsx

@@ -1,8 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
 import type { As, FormControlProps } from "./types";
-import { getFormControlClasses } from "./constants";
 import { cn } from "../../../../utilities";
 import { Label } from "../Label";
+import { getFormControlClasses } from "./constants";
 
 export const FormControl = <T extends As>({
   as,

package/src/components/Form/components/Label/Label.tsx

@@ -1,14 +1,11 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import type { LabelProps, LabelTextProps } from "./types";
-import { Text } from "../../../Text";
 import { cn } from "../../../../utilities";
+import { Text } from "../../../Text";
 import { getLabelClasses } from "./constants";
 
 const Label = ({ className, ...props }: LabelProps) => (
-  <LabelPrimitive.Root
-    className={cn(getLabelClasses(), className)}
-    {...props}
-  />
+  <LabelPrimitive.Root className={cn(getLabelClasses(), className)} {...props} />
 );
 Label.displayName = LabelPrimitive.Root.displayName;
 

package/src/components/Form/components/Label/types.ts

@@ -1,11 +1,9 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { type VariantProps } from "../../../../libs";
-import { getLabelClasses } from "./constants";
 import { Text } from "../../../Text";
+import { getLabelClasses } from "./constants";
 
-export type LabelProps = React.ComponentPropsWithoutRef<
-  typeof LabelPrimitive.Root
-> &
+export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
   VariantProps<typeof getLabelClasses>;
 
 export type LabelTextProps = Omit<React.ComponentProps<typeof Text>, "as">;

package/src/components/HoverCard/HoverCard.tsx

@@ -1,14 +1,12 @@
 "use client";
 
+import { forwardRef } from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import { cn } from "../../utilities";
 import { getHoverCardContentClasses } from "./constants";
-import { forwardRef } from "react";
 import { HoverCardProps } from "./types";
 
-const HoverCard = (props: HoverCardProps) => (
-  <HoverCardPrimitive.Root {...props} />
-);
+const HoverCard = (props: HoverCardProps) => <HoverCardPrimitive.Root {...props} />;
 
 const HoverCardContent = forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,

package/src/components/HoverCard/types.ts

@@ -1,5 +1,3 @@
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-export type HoverCardProps = React.ComponentPropsWithoutRef<
-  typeof HoverCardPrimitive.Root
->;
+export type HoverCardProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>;

package/src/components/Loading/Loading.tsx

@@ -1,18 +1,9 @@
+import { cn } from "../../utilities";
 import { getLoadingClasses } from "./constants";
 import { type LoadingProps } from "./types";
-import { cn } from "../../utilities";
 
-export const Loading = ({
-  size,
-  intent,
-  variant,
-  className,
-  ...props
-}: LoadingProps) => {
+export const Loading = ({ size, intent, variant, className, ...props }: LoadingProps) => {
   return (
-    <span
-      className={cn(getLoadingClasses({ intent, size, variant }), className)}
-      {...props}
-    />
+    <span className={cn(getLoadingClasses({ intent, size, variant }), className)} {...props} />
   );
 };