@mbao01/common 0.0.7 → 0.0.8

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type CheckboxProps } from "./types";
+import { getCheckboxClasses } from "./constants";
+import { cn } from "../../../utilities";
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, size, variant, ...props }, ref) => (
+    <input
+      ref={ref}
+      type="checkbox"
+      className={cn(getCheckboxClasses({ size, variant }), className)}
+      {...props}
+    />
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

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

@@ -0,0 +1,21 @@
+import { cva } from "../../../libs";
+
+export const getCheckboxClasses = cva("checkbox", {
+  variants: {
+    variant: {
+      primary: "checkbox-primary",
+      secondary: "checkbox-secondary",
+      accent: "checkbox-accent",
+      success: "checkbox-success",
+      warning: "checkbox-warning",
+      info: "checkbox-info",
+      error: "checkbox-error",
+    },
+    size: {
+      xs: "checkbox-xs",
+      sm: "checkbox-sm",
+      md: "checkbox-md",
+      lg: "checkbox-lg",
+    },
+  },
+});

package/src/components/Form/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

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

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

package/src/components/Form/Input/Input.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { type InputProps } from "./types";
+import { cn } from "../../../utilities";
+import { getInputClasses } from "./constants";
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size, variant, wide, outline, className, ...props }: InputProps, ref) => (
+    <input
+      ref={ref}
+      className={cn(
+        getInputClasses({ size, wide, variant, outline }),
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Input.displayName = "Input";

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

@@ -0,0 +1,37 @@
+import { cva } from "../../../libs";
+
+export const getInputClasses = cva(
+  "input rounded-md transition-all duration-100",
+  {
+    variants: {
+      variant: {
+        accent: "input-accent",
+        error: "input-error",
+        ghost: "input-ghost",
+        info: "input-info",
+        primary: "input-primary",
+        secondary: "input-secondary",
+        success: "input-success",
+        warning: "input-warning",
+      },
+      outline: {
+        true: "input-bordered",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "input-xs",
+        sm: "input-sm",
+        md: "input-md",
+        lg: "input-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+    ],
+  }
+);

package/src/components/Form/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from "./Input";

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

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

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

@@ -0,0 +1,120 @@
+"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 { cn } from "../../../utilities";
+import { Button } from "../../Button";
+import { Input } from "../Input";
+import { getPhoneButtonClasses, getPhoneInputClasses } from "./constants";
+import { getInputClasses } from "../Input/constants";
+import { getButtonClasses } from "../../Button/constants";
+
+const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
+  (
+    {
+      defaultValue,
+      className,
+      placeholder,
+      onChange,
+      inputProps,
+      buttonProps,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const {
+      inputValue,
+      handlePhoneValueChange,
+      inputRef,
+      country,
+      setCountry,
+    } = usePhoneInput({
+      value: String(defaultValue) ?? "+231",
+      defaultCountry: "lr",
+      forceDialCode: true,
+      inputRef: ref as MutableRefObject<HTMLInputElement | null>,
+    });
+
+    const options = defaultCountries.map((country) => ({
+      label: country[0],
+      value: country[1],
+    }));
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      handlePhoneValueChange(e);
+      onChange?.(e);
+    };
+
+    return (
+      <div className="join">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Popover.Trigger asChild>
+            <Button
+              role="combobox"
+              aria-expanded={open}
+              className={cn(
+                getPhoneButtonClasses(),
+                getButtonClasses(buttonProps)
+              )}
+            >
+              <FlagImage iso2={country.iso2} size="30px" />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content className="w-[200px] p-0">
+            <Command>
+              <Command.Input placeholder="Search country..." />
+              <Command.Empty>No country found.</Command.Empty>
+              <Command.List>
+                <Command.Group>
+                  {options.map((option) => (
+                    <Command.Item
+                      key={option.value}
+                      value={option.value}
+                      keywords={[option.label, option.value]}
+                      onSelect={(currentValue) => {
+                        setCountry(currentValue);
+                        setOpen(false);
+                      }}
+                      className={cn({
+                        "bg-base-300": country.iso2 === option.value,
+                      })}
+                    >
+                      <FlagImage iso2={option.value} size="20px" />
+                      <span className="truncate ml-2">{option.label}</span>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover>
+        <Input
+          type="text"
+          ref={inputRef}
+          value={inputValue}
+          pattern="^\+\d{1,4}\s\d{6,}$"
+          inputMode="numeric"
+          placeholder={placeholder ?? " "}
+          onChange={handleInputChange}
+          className={cn(
+            getPhoneInputClasses(),
+            getInputClasses(inputProps),
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Phone.displayName = "Phone";
+
+export { Phone };

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

@@ -0,0 +1,7 @@
+import { cva } from "../../../libs";
+
+export const getPhoneButtonClasses = cva("join-item justify-between px-2");
+
+export const getPhoneInputClasses = cva(
+  "input join-item input-bordered h-10 w-full rounded-md !rounded-r-md !pl-2 text-sm transition-all duration-100"
+);

package/src/components/Form/Phone/index.ts

@@ -0,0 +1 @@
+export { Phone } from "./Phone";

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

@@ -0,0 +1,12 @@
+import { type VariantProps } from "../../../libs";
+import { type InputProps } from "../Input/types";
+import { getInputClasses } from "../Input/constants";
+import { getButtonClasses } from "../../Button/constants";
+
+export type PhoneProps = Omit<
+  InputProps,
+  "type" | "size" | "label" | "inputMode"
+> & {
+  inputProps?: VariantProps<typeof getInputClasses>;
+  buttonProps?: VariantProps<typeof getButtonClasses>;
+};

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

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

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

@@ -0,0 +1,21 @@
+import { cva } from "../../../libs";
+
+export const getRadioClasses = cva("radio", {
+  variants: {
+    variant: {
+      primary: "radio-primary",
+      secondary: "radio-secondary",
+      accent: "radio-accent",
+      success: "radio-success",
+      warning: "radio-warning",
+      info: "radio-info",
+      error: "radio-error",
+    },
+    size: {
+      xs: "radio-xs",
+      sm: "radio-sm",
+      md: "radio-md",
+      lg: "radio-lg",
+    },
+  },
+});

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

@@ -0,0 +1 @@
+export { Radio } from "./Radio";

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { cva } from "../../../libs";
+
+export const getRangeClasses = cva("range", {
+  variants: {
+    variant: {
+      primary: "range-primary",
+      secondary: "range-secondary",
+      accent: "range-accent",
+      success: "range-success",
+      warning: "range-warning",
+      info: "range-info",
+      error: "range-error",
+      neutral: "range-neutral",
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-80",
+    },
+    wide: {
+      true: "w-full",
+    },
+    size: {
+      xs: "range-xs",
+      sm: "range-sm",
+      md: "range-md",
+      lg: "range-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+  },
+});

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

@@ -0,0 +1 @@
+export { Range } from "./Range";

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

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

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

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+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 { cn } from "../../../utilities";
+import {
+  getSelectContentClasses,
+  getSelectItemClasses,
+  getSelectLabelClasses,
+  getSelectSeparatorClasses,
+  getSelectTriggerClasses,
+  getSelectViewportClasses,
+} from "./constants";
+
+const Select = (
+  props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
+) => <SelectPrimitive.Root {...props} />;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, children, size, wide, variant, outline, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      getSelectTriggerClasses({ size, wide, variant, outline }),
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>((props, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1")}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>((props, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1")}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  SelectContentProps
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(getSelectContentClasses({ position }), className)}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(getSelectViewportClasses({ position }))}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>((props, ref) => (
+  <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>
+));
+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}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+Select.Group = SelectPrimitive.Group;
+Select.Value = SelectPrimitive.Value;
+Select.Trigger = SelectTrigger;
+Select.Content = SelectContent;
+Select.Label = SelectLabel;
+Select.Item = SelectItem;
+Select.Separator = SelectSeparator;
+Select.ScrollUpButton = SelectScrollUpButton;
+Select.ScrollDownButton = SelectScrollDownButton;
+
+export { Select };

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

@@ -0,0 +1,80 @@
+import { cva } from "../../../libs";
+
+export const getSelectTriggerClasses = cva(
+  "select flex items-center justify-between rounded-md text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+  {
+    variants: {
+      variant: {
+        primary: "select-primary",
+        secondary: "select-secondary",
+        accent: "select-accent",
+        success: "select-success",
+        warning: "select-warning",
+        info: "select-info",
+        error: "select-error",
+      },
+      outline: {
+        true: "select-bordered border border-input",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "select-xs",
+        sm: "select-sm",
+        md: "select-md",
+        lg: "select-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+    ],
+  }
+);
+
+export const getSelectItemClasses = cva(
+  "relative flex w-full cursor-pointer select-none items-center focus:bg-neutral focus:text-neutral-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "focus:bg-primary focus:text-primary-content",
+        secondary: "focus:bg-secondary focus:text-secondary-content",
+        accent: "focus:bg-accent focus:text-accent-content",
+        success: "focus:bg-success focus:text-success-content",
+        warning: "focus:bg-warning focus:text-warning-content",
+        info: "focus:bg-info focus:text-info-content",
+        error: "focus:bg-error focus:text-error-content",
+      },
+    },
+  }
+);
+
+export const getSelectLabelClasses = cva("px-2 py-1.5 text-sm font-semibold");
+
+export const getSelectSeparatorClasses = cva("-mx-1 my-1 h-px bg-muted");
+
+export const getSelectContentClasses = cva(
+  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      position: {
+        popper:
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "item-aligned": "",
+      },
+    },
+  }
+);
+
+export const getSelectViewportClasses = cva("p-1", {
+  variants: {
+    position: {
+      popper:
+        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+      "item-aligned": "",
+    },
+  },
+});

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

@@ -0,0 +1 @@
+export { Select } from "./Select";

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

@@ -0,0 +1,18 @@
+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
+> &
+  VariantProps<typeof getSelectTriggerClasses>;
+
+export type SelectItemProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Item
+> &
+  VariantProps<typeof getSelectTriggerClasses>;
+
+export type SelectContentProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Content
+> &
+  VariantProps<typeof getSelectContentClasses>;