@mbao01/common 0.5.2 → 0.6.0

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

@@ -1,21 +1,22 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getSliderRootClasses = cva(
   "relative flex touch-none select-none items-center min-w-24",
   {
-    variants: {
+    variants: createVariants({
       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: {
+  variants: createVariants({
     variant: {
       primary: "bg-neutral-content",
       secondary: "bg-neutral-content",
@@ -32,14 +33,14 @@ export const getSliderTrackClasses = cva("relative h-2 w-full grow overflow-hidd
       md: "h-2",
       lg: "h-3",
     },
-  },
+  }),
   defaultVariants: {
     variant: "neutral",
   },
 });
 
 export const getSliderClasses = cva("absolute h-full", {
-  variants: {
+  variants: createVariants({
     variant: {
       primary: "bg-primary",
       secondary: "bg-secondary",
@@ -50,7 +51,7 @@ export const getSliderClasses = cva("absolute h-full", {
       error: "bg-error",
       neutral: "bg-base-content",
     },
-  },
+  }),
   defaultVariants: {
     variant: "neutral",
   },
@@ -59,7 +60,7 @@ export const getSliderClasses = cva("absolute h-full", {
 export const getSliderThumbClasses = cva(
   "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         primary: "border-primary bg-base-100",
         secondary: "border-secondary bg-base-100",
@@ -76,7 +77,7 @@ export const getSliderThumbClasses = cva(
         md: "h-5 w-5",
         lg: "h-7 w-7",
       },
-    },
+    }),
     defaultVariants: {
       variant: "neutral",
     },

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

@@ -1,7 +1,8 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getSwitchClasses = cva("toggle", {
-  variants: {
+  variants: createVariants({
     variant: {
       primary: "toggle-primary",
       secondary: "toggle-secondary",
@@ -17,5 +18,5 @@ export const getSwitchClasses = cva("toggle", {
       md: "toggle-md",
       lg: "toggle-lg",
     },
-  },
+  }),
 });

package/src/components/Form/TagsInput/TagsInput.tsx

@@ -264,7 +264,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
           tabIndex={0}
           onSelect={handleSelect}
           aria-label={ariaLabel}
-          disabled={disabled || disableInput}
+          disabled={disabled ?? disableInput}
           onKeyDown={handleKeyDown}
           onPaste={handlePaste}
           value={inputValue}

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

@@ -1,18 +1,19 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const SPLITTER_REGEX = /[\n#?=&\t,./-]+/; // used for identifying the split char and used with pasting
 
 export const FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g; // used for formatting the pasted element for the correct value format to be added
 
 export const getTagsClasses = cva("flex-wrap h-fit py-2 overflow-hidden", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
       sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
       md: "min-h-12 leading-loose px-4 text-sm",
       lg: "min-h-16 leading-loose px-5 text-lg",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,
@@ -24,28 +25,28 @@ export const getTagsClasses = cva("flex-wrap h-fit py-2 overflow-hidden", {
 export const getTagClasses = cva(
   "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-hidden",
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "px-0.5 [&>span]:max-w-20 rounded-sm",
         sm: "px-1",
         md: "px-1.5 [&>span]:max-w-28",
         lg: "px-2 [&>span]:max-w-32",
       },
-    },
+    }),
   }
 );
 
 export const getTagsInputClasses = cva(
   "outline-0 border-none h-5 min-w-fit shadow-none flex-1 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 placeholder:text-muted-foreground px-1",
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "h-3 leading-relaxed text-xs",
         sm: "h-4 leading-8 text-sm",
         md: "h-5 text-sm",
         lg: "h-6 text-lg",
       },
-    },
+    }),
   }
 );
 

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

@@ -1,7 +1,8 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getTextareaClasses = cva("textarea rounded-md transition-all duration-100", {
-  variants: {
+  variants: createVariants({
     variant: {
       default: "bg-transparent",
       accent: "textarea-accent",
@@ -25,7 +26,7 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
       md: "textarea-md",
       lg: "textarea-lg",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,

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

@@ -1,14 +1,15 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getValidatorClasses = cva("border-color-[unset] validator");
 
 export const getValidatorHintClasses = cva("validator-hint", {
-  variants: {
+  variants: createVariants({
     visible: {
       true: "block",
       false: "hidden",
     },
-  },
+  }),
   compoundVariants: [
     {
       visible: undefined,

package/src/components/Form/components/Field/Field.tsx

@@ -0,0 +1,81 @@
+import React, { useId } from "react";
+import { cn } from "../../../../utilities";
+import {
+  getFieldClasses,
+  getFieldDescriptionClasses,
+  getFieldErrorClasses,
+  getFieldLabelClasses,
+} from "./constants";
+import { FieldContext } from "./FieldContext";
+import { useField } from "./hooks";
+import {
+  type FieldDescriptionProps,
+  type FieldErrorProps,
+  type FieldLabelProps,
+  type FieldProps,
+} from "./types";
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, children, ...props }, ref) => {
+    const id = useId();
+    const inputId = `${id}-input`;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+
+    return (
+      <FieldContext.Provider value={{ id, inputId, descriptionId, errorId }}>
+        <div ref={ref} className={cn(getFieldClasses(), className)} {...props}>
+          {children}
+        </div>
+      </FieldContext.Provider>
+    );
+  }
+);
+Field.displayName = "Field";
+
+export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
+  ({ className, required, children, htmlFor, ...props }, ref) => {
+    const { inputId } = useField();
+    return (
+      <label
+        ref={ref}
+        htmlFor={htmlFor ?? inputId}
+        className={cn(getFieldLabelClasses({ required }), className)}
+        {...props}
+      >
+        <span className="label-text">{children}</span>
+      </label>
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+
+export const FieldDescription = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps>(
+  ({ className, children, ...props }, ref) => {
+    const { descriptionId } = useField();
+    return (
+      <p
+        ref={ref}
+        id={descriptionId}
+        className={cn(getFieldDescriptionClasses(), className)}
+        {...props}
+      >
+        {children}
+      </p>
+    );
+  }
+);
+FieldDescription.displayName = "FieldDescription";
+
+export const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { errorId } = useField();
+    if (!children) return null;
+    return (
+      <p ref={ref} id={errorId} className={cn(getFieldErrorClasses(), className)} {...props}>
+        {children}
+      </p>
+    );
+  }
+);
+FieldError.displayName = "FieldError";

package/src/components/Form/components/Field/FieldContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import type { FieldContextValue } from "./types";
+
+export const FieldContext = createContext<FieldContextValue | undefined>(undefined);

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

@@ -0,0 +1,20 @@
+import { cva } from "../../../../libs";
+import { createVariants } from "../../../../utilities";
+
+export const getFieldClasses = cva("form-control w-full", {
+  variants: createVariants({
+    // Add variants if needed, e.g. layout direction
+  }),
+});
+
+export const getFieldLabelClasses = cva("label", {
+  variants: createVariants({
+    required: {
+      true: "after:content-['*'] after:ml-0.5 after:text-error",
+    },
+  }),
+});
+
+export const getFieldDescriptionClasses = cva("label-text-alt text-base-content/70 mt-1");
+
+export const getFieldErrorClasses = cva("label-text-alt text-error mt-1");

package/src/components/Form/components/Field/hooks/index.ts

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

package/src/components/Form/components/Field/hooks/useField/index.ts

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

package/src/components/Form/components/Field/hooks/useField/useField.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FieldContext } from "../../FieldContext";
+
+export const useField = () => {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error("Field compound components must be used within a Field component");
+  }
+  return context;
+};

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

@@ -0,0 +1,2 @@
+export { Field, FieldLabel, FieldDescription, FieldError } from "./Field";
+export type { FieldProps, FieldLabelProps, FieldDescriptionProps, FieldErrorProps } from "./types";

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

@@ -0,0 +1,19 @@
+import { type VariantProps } from "../../../../libs";
+import { getFieldClasses, getFieldLabelClasses } from "./constants";
+
+export type FieldProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getFieldClasses>;
+
+export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> &
+  VariantProps<typeof getFieldLabelClasses>;
+
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+export type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+export type FieldContextValue = {
+  id: string;
+  inputId: string;
+  descriptionId: string;
+  errorId: string;
+};

package/src/components/Form/index.ts

@@ -6,6 +6,7 @@ export { Phone } from "./Phone";
 export { Radio } from "./Radio";
 export { Range } from "./Range";
 export { Select } from "./Select";
+export { NativeSelect } from "./NativeSelect";
 export { Slider } from "./Slider";
 export { Switch } from "./Switch";
 export { Checkbox, CheckboxControlled } from "./Checkbox";
@@ -14,4 +15,5 @@ export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";
 export { Validator } from "./Validator";
 export { Label } from "./components/Label";
+export { Field, FieldLabel, FieldDescription, FieldError } from "./components/Field";
 export { Fieldset } from "./components/Fieldset";

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getGridClasses, getGridItemClasses } from "./constants";
+import { type GridItemProps, type GridProps } from "./types";
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  ({ className, columns, rows, gap, flow, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(getGridClasses({ columns, rows, gap, flow }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Grid.displayName = "Grid";
+
+export const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ className, colSpan, rowSpan, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getGridItemClasses({ colSpan, rowSpan }), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+GridItem.displayName = "GridItem";

package/src/components/Grid/constants.ts

@@ -0,0 +1,84 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getGridClasses = cva("grid", {
+  variants: createVariants({
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6",
+      7: "grid-cols-7",
+      8: "grid-cols-8",
+      9: "grid-cols-9",
+      10: "grid-cols-10",
+      11: "grid-cols-11",
+      12: "grid-cols-12",
+    },
+    rows: {
+      1: "grid-rows-1",
+      2: "grid-rows-2",
+      3: "grid-rows-3",
+      4: "grid-rows-4",
+      5: "grid-rows-5",
+      6: "grid-rows-6",
+      7: "grid-rows-7",
+      8: "grid-rows-8",
+      9: "grid-rows-9",
+      10: "grid-rows-10",
+      11: "grid-rows-11",
+      12: "grid-rows-12",
+    },
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      5: "gap-5",
+      6: "gap-6",
+      8: "gap-8",
+      10: "gap-10",
+      12: "gap-12",
+      16: "gap-16",
+    },
+    flow: {
+      row: "grid-flow-row",
+      col: "grid-flow-col",
+      dense: "grid-flow-dense",
+      "row-dense": "grid-flow-row-dense",
+      "col-dense": "grid-flow-col-dense",
+    },
+  }),
+});
+
+export const getGridItemClasses = cva("", {
+  variants: createVariants({
+    colSpan: {
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12",
+      full: "col-span-full",
+    },
+    rowSpan: {
+      1: "row-span-1",
+      2: "row-span-2",
+      3: "row-span-3",
+      4: "row-span-4",
+      5: "row-span-5",
+      6: "row-span-6",
+      full: "row-span-full",
+    },
+  }),
+});

package/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export { Grid, GridItem } from "./Grid";
+export type { GridItemProps, GridProps } from "./types";

package/src/components/Grid/types.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "../../libs";
+import { getGridClasses, getGridItemClasses } from "./constants";
+
+export type GridProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getGridClasses>;
+
+export type GridItemProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getGridItemClasses>;

package/src/components/Header/Header.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getHeaderClasses } from "./constants";
+import { type HeaderProps } from "./types";
+
+export const Header = React.forwardRef<HTMLElement, HeaderProps>(
+  ({ className, position, children, ...props }, ref) => {
+    return (
+      <header ref={ref} className={cn(getHeaderClasses({ position }), className)} {...props}>
+        {children}
+      </header>
+    );
+  }
+);
+
+Header.displayName = "Header";
+
+export const HeaderStart = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("navbar-start", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+HeaderStart.displayName = "HeaderStart";
+
+export const HeaderCenter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("navbar-center", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+HeaderCenter.displayName = "HeaderCenter";
+
+export const HeaderEnd = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("navbar-end", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+HeaderEnd.displayName = "HeaderEnd";

package/src/components/Header/constants.ts

@@ -0,0 +1,18 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getHeaderClasses = cva(
+  "navbar bg-base-100 border-b border-base-200 sticky top-0 z-30 w-full",
+  {
+    variants: createVariants({
+      position: {
+        static: "static",
+        sticky: "sticky top-0",
+        fixed: "fixed top-0 left-0 right-0",
+      },
+    }),
+    defaultVariants: {
+      position: "sticky",
+    },
+  }
+);

package/src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header, HeaderStart, HeaderCenter, HeaderEnd } from "./Header";
+export type { HeaderProps } from "./types";

package/src/components/Header/types.ts

@@ -0,0 +1,4 @@
+import { type VariantProps } from "../../libs";
+import { getHeaderClasses } from "./constants";
+
+export type HeaderProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof getHeaderClasses>;

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getHeadingClasses } from "./constants";
+import { type HeadingProps } from "./types";
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ className, level, weight, as, children, ...props }, ref) => {
+    // Determine the element from 'as' prop or 'level' prop, default to h2
+    const Component = (as ?? (level ? `h${level}` : "h2")) as React.ElementType;
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(getHeadingClasses({ level, weight }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+Heading.displayName = "Heading";

package/src/components/Heading/constants.ts

@@ -0,0 +1,25 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getHeadingClasses = cva("", {
+  variants: createVariants({
+    level: {
+      1: "text-5xl",
+      2: "text-4xl",
+      3: "text-3xl",
+      4: "text-2xl",
+      5: "text-xl",
+      6: "text-lg",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold",
+    },
+  }),
+  defaultVariants: {
+    weight: "bold",
+  },
+});

package/src/components/Heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading";
+export type { HeadingProps } from "./types";

package/src/components/Heading/types.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "../../libs";
+import { getHeadingClasses } from "./constants";
+
+type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export type HeadingProps<T extends HeadingElement = HeadingElement> =
+  React.HTMLAttributes<HTMLHeadingElement> &
+    VariantProps<typeof getHeadingClasses> & {
+      as?: T;
+    };

package/src/components/Image/Image.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { cn } from "../../utilities";
+import { getImageClasses } from "./constants";
+import { type ImageProps } from "./types";
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ className, fit, radius, src, fallbackSrc, alt, onError, ...props }, ref) => {
+    const [imgSrc, setImgSrc] = useState(src);
+
+    const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      if (fallbackSrc && imgSrc !== fallbackSrc) {
+        setImgSrc(fallbackSrc);
+      }
+      onError?.(e);
+    };
+
+    return (
+      <img
+        ref={ref}
+        src={imgSrc}
+        alt={alt}
+        className={cn(getImageClasses({ fit, radius }), className)}
+        onError={handleError}
+        {...props}
+      />
+    );
+  }
+);
+
+Image.displayName = "Image";