@mbao01/common 0.0.7 → 0.0.8

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",
+      },
+    ],
+  }
+);

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

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

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

@@ -0,0 +1,8 @@
+import { type VariantProps } from "../../../libs";
+import { getTextareaClasses } from "./constants";
+
+export type TextareaProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size" | "ref"
+> &
+  VariantProps<typeof getTextareaClasses>;

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

@@ -0,0 +1,21 @@
+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";
+
+export const FormControl = <T extends As>({
+  as,
+  children,
+  className,
+  ...props
+}: FormControlProps<T>) => {
+  const SlotChild = !as || as === "label" ? Label : as;
+
+  return (
+    <Slot className={cn(getFormControlClasses(), className)} {...props}>
+      {/* slot merges it's prop into it's immediate child */}
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};

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

@@ -0,0 +1,3 @@
+import { cva } from "../../../../libs";
+
+export const getFormControlClasses = cva("form-control w-full");

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

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

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from "../../../../libs";
+import { getFormControlClasses } from "./constants";
+
+export type As = "div" | "span" | "label";
+
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+
+export type FormControlProps<T extends As> = (T extends "label"
+  ? React.LabelHTMLAttributes<HTMLLabelElement>
+  : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) &
+  VariantProps<typeof getFormControlClasses> & {
+    as?: T;
+  };

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

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type { LabelProps, LabelTextProps } from "./types";
+import { cn } from "../../../../utilities";
+import { getLabelClasses } from "./constants";
+
+const Label = ({ className, ...props }: LabelProps) => (
+  <LabelPrimitive.Root
+    className={cn(getLabelClasses(), className)}
+    {...props}
+  />
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const LabelText = ({ className, ...props }: LabelTextProps) => (
+  <span className={cn("label-text", className)} {...props}>
+    Pick the best fantasy franchise
+  </span>
+);
+
+Label.Text = LabelText;
+
+export { Label };

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

@@ -0,0 +1,3 @@
+import { cva } from "../../../../libs";
+
+export const getLabelClasses = cva("label");

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

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

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

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

package/src/components/Form/index.ts

@@ -0,0 +1,11 @@
+export { Input } from "./Input";
+export { Phone } from "./Phone";
+export { Radio } from "./Radio";
+export { Range } from "./Range";
+export { Select } from "./Select";
+export { Slider } from "./Slider";
+export { Checkbox } from "./Checkbox";
+export { Textarea } from "./Textarea";
+export { TextField } from "./TextField";
+export { Label } from "./components/Label";
+export { FormControl } from "./components/FormControl";

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { getPopoverContentClasses } from "./constants";
+import { cn } from "../../utilities";
+import { PopoverContentProps, PopoverProps } from "./types";
+
+const Popover = (props: PopoverProps) => <PopoverPrimitive.Root {...props} />;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(getPopoverContentClasses(), className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+Popover.Content = PopoverContent;
+Popover.Trigger = PopoverPrimitive.Trigger;
+
+export { Popover };

package/src/components/Popover/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getPopoverContentClasses = cva(
+  "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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"
+);

package/src/components/Popover/index.ts

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

package/src/components/Popover/types.ts

@@ -0,0 +1,12 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type VariantProps } from "../../libs";
+import { getPopoverContentClasses } from "./constants";
+
+export type PopoverProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Root
+>;
+
+export type PopoverContentProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> &
+  VariantProps<typeof getPopoverContentClasses>;

package/src/components/Text/Text.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { type TextProps } from "./types";
+import type { As, TextProps } from "./types";
 import { getTextClasses } from "./constants";
 import { cn } from "../../utilities";
 import { Slot } from "@radix-ui/react-slot";
 
-export const Text = ({
+export const Text = <T extends As>({
   as,
   size,
   variant,
   children,
   className,
   ...props
-}: TextProps) => {
+}: TextProps<T>) => {
   const Comp = as ? Slot : "span";
   const SlotChild = as ? as : React.Fragment;
 

package/src/components/Text/types.ts

@@ -1,10 +1,13 @@
 import { type VariantProps } from "../../libs";
 import { getTextClasses } from "./constants";
 
-export type TextProps = React.HTMLAttributes<HTMLSpanElement> &
+export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
+
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+
+export type TextProps<T extends As> = React.HTMLAttributes<
+  HTMLElement & AllowedElements[T]
+> &
   VariantProps<typeof getTextClasses> & {
-    as?: keyof Pick<
-      JSX.IntrinsicElements,
-      "h1" | "h2" | "h3" | "h4" | "h5" | "p"
-    >;
+    as?: As;
   };

package/src/index.ts

@@ -12,8 +12,15 @@ export * from "./components/Separator";
 export * from "./components/Text";
 
 /** data input */
+export * from "./components/Form";
+export * from "./components/Combobox";
 
 /** feedback */
 export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";
+
+/** composable */
+export * from "./components/Dialog";
+export * from "./components/Command";
+export * from "./components/Popover";