@mbao01/common 0.0.6 → 0.0.8

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>;

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

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../../utilities";
+import {
+  getSliderClasses,
+  getSliderRootClasses,
+  getSliderThumbClasses,
+  getSliderTrackClasses,
+} 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`}
+    >
+      <SliderPrimitive.Range
+        className={cn(getSliderClasses({ variant }))}
+        data-testid={`${name}-slider-range`}
+      />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      className={cn(getSliderThumbClasses({ size, variant }))}
+      data-testid={`${name}-slider-thumb`}
+    />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

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

@@ -0,0 +1,87 @@
+import { cva } from "../../../libs";
+
+export const getSliderRootClasses = cva(
+  "relative flex touch-none select-none items-center min-w-24",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-80",
+      },
+      wide: {
+        true: "w-full",
+      },
+    },
+  }
+);
+
+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",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+);
+
+export const getSliderClasses = cva("absolute h-full", {
+  variants: {
+    variant: {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      accent: "bg-accent",
+      success: "bg-success",
+      warning: "bg-warning",
+      info: "bg-info",
+      error: "bg-error",
+      neutral: "bg-base-content",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+  },
+});
+
+export const getSliderThumbClasses = cva(
+  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "border-primary bg-base-100",
+        secondary: "border-secondary bg-base-100",
+        accent: "border-accent bg-base-100",
+        success: "border-success bg-base-100",
+        warning: "border-warning bg-base-100",
+        info: "border-info bg-base-100",
+        error: "border-error bg-base-100",
+        neutral: "border-neutral-content bg-neutral",
+      },
+      size: {
+        xs: "h-4 w-4",
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-7 w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+);

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { type TextFieldProps } from "./types";
+import { FormControl } from "../components/FormControl/FormControl";
+import { Input } from "../Input";
+
+export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  ({ id, name, info, error, label, ...props }: TextFieldProps, ref) => {
+    const feedbackId = `${name}-information`;
+
+    return (
+      <FormControl as="label" htmlFor={id}>
+        {Boolean(label ?? info) && (
+          <div className="label">
+            <span className="label-text">{label}</span>
+            {info && <span className="label-text-alt">{info}</span>}
+          </div>
+        )}
+        <Input
+          id={id}
+          ref={ref}
+          name={name}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={feedbackId}
+          {...props}
+        />
+        {Boolean(error) && (
+          <div className="label">
+            <span className="label-text-alt text-red-500" id={feedbackId}>
+              {Array.isArray(error) ? error.join(", ") : error}
+            </span>
+          </div>
+        )}
+      </FormControl>
+    );
+  }
+);
+TextField.displayName = "TextField";

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

@@ -0,0 +1,5 @@
+import { cva } from "../../../libs";
+
+export const getTextFieldClasses = cva(
+  "h-10 w-full rounded-md text-sm transition-all duration-100"
+);

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

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

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import { type InputProps } from "../Input/types";
+
+export type TextFieldProps = InputProps & {
+  info?: ReactNode;
+  error?: string | string[] | null;
+};

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type TextareaProps } from "./types";
+import { cn } from "../../../utilities";
+import { getTextareaClasses } from "./constants";
+
+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
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

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

@@ -0,0 +1,37 @@
+import { cva } from "../../../libs";
+
+export const getTextareaClasses = cva(
+  "textarea rounded-md transition-all duration-100",
+  {
+    variants: {
+      variant: {
+        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",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+    ],
+  }
+);