@mbao01/common 0.5.2 → 0.6.0

package/src/components/Empty/constants.ts

@@ -0,0 +1,30 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getEmptyClasses = cva(
+  "flex flex-col items-center justify-center text-center p-8 rounded-lg border-2 border-dashed border-base-content/20 bg-base-100/50",
+  {
+    variants: createVariants({
+      size: {
+        sm: "p-4 min-h-sm",
+        md: "p-8 min-h-md",
+        lg: "p-12 min-h-lg",
+        xl: "p-12 min-h-xl",
+      },
+    }),
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "p-8 h-full w-full",
+      },
+    ],
+  }
+);
+
+export const getEmptyImageClasses = cva(
+  "flex items-center justify-center w-20 h-20 rounded-full bg-base-200 mb-4 text-base-content/50"
+);
+
+export const getEmptyTitleClasses = cva("text-xl font-semibold mb-2");
+
+export const getEmptyDescriptionClasses = cva("text-base-content/60 max-w-sm mb-6");

package/src/components/Empty/index.ts

@@ -0,0 +1,2 @@
+export { Empty, EmptyImage, EmptyTitle, EmptyDescription, EmptyActions } from "./Empty";
+export type { EmptyProps } from "./types";

package/src/components/Empty/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getEmptyClasses } from "./constants";
+
+export type EmptyProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getEmptyClasses>;

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getFlexClasses } from "./constants";
+import { type FlexProps } from "./types";
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  ({ className, direction, align, justify, wrap, gap, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(getFlexClasses({ direction, align, justify, wrap, gap }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Flex.displayName = "Flex";

package/src/components/Flex/constants.ts

@@ -0,0 +1,51 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getFlexClasses = cva("flex", {
+  variants: createVariants({
+    direction: {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      col: "flex-col",
+      "col-reverse": "flex-col-reverse",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly",
+    },
+    wrap: {
+      wrap: "flex-wrap",
+      "wrap-reverse": "flex-wrap-reverse",
+      nowrap: "flex-nowrap",
+    },
+    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",
+    },
+  }),
+  defaultVariants: {
+    direction: "row",
+    align: "stretch",
+    justify: "start",
+  },
+});

package/src/components/Flex/index.ts

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

package/src/components/Flex/types.ts

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

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getFooterClasses, getFooterTitleClasses } from "./constants";
+import { type FooterProps, type FooterTitleProps } from "./types";
+
+export const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  ({ className, center, children, ...props }, ref) => {
+    return (
+      <footer ref={ref} className={cn(getFooterClasses({ center }), className)} {...props}>
+        {children}
+      </footer>
+    );
+  }
+);
+Footer.displayName = "Footer";
+
+export const FooterTitle = React.forwardRef<HTMLSpanElement, FooterTitleProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <span ref={ref} className={cn(getFooterTitleClasses(), className)} {...props}>
+        {children}
+      </span>
+    );
+  }
+);
+FooterTitle.displayName = "FooterTitle";

package/src/components/Footer/constants.ts

@@ -0,0 +1,12 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getFooterClasses = cva("footer p-10 bg-base-200 text-base-content", {
+  variants: createVariants({
+    center: {
+      true: "footer-center",
+    },
+  }),
+});
+
+export const getFooterTitleClasses = cva("footer-title");

package/src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer, FooterTitle } from "./Footer";
+export type { FooterProps, FooterTitleProps } from "./types";

package/src/components/Footer/types.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from "../../libs";
+import { getFooterClasses } from "./constants";
+
+export type FooterProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof getFooterClasses>;
+
+export type FooterTitleProps = React.HTMLAttributes<HTMLSpanElement>;

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

@@ -1,9 +1,10 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getCheckboxClasses = cva(
   "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:border-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         primary:
           "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content focus-visible:ring-primary",
@@ -31,19 +32,19 @@ export const getCheckboxClasses = cva(
         md: "rounded-md",
         lg: "rounded-lg",
       },
-    },
+    }),
   }
 );
 
 export const getCheckboxIndicatorClasses = cva("flex items-center justify-center text-current");
 
 export const getCheckboxIconClasses = cva("h-3.5 w-3.5", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "h-2.5 w-2.5",
       sm: "h-3 w-3",
       md: "h-4 w-4",
       lg: "h-6 w-6",
     },
-  },
+  }),
 });

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

@@ -1,4 +1,5 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const DEFAULT_SIZE = 96;
 
@@ -7,26 +8,26 @@ export const getDatetimeCalendarTriggerClasses = cva(
   outline-hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
   `,
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "size-4 p-0 rounded-xs",
         sm: "size-6",
         md: "size-9",
         lg: "size-10",
       },
-    },
+    }),
   }
 );
 
 export const getDatetimeCalendarIconClasses = cva("", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "size-3",
       sm: "size-3",
       md: "size-5",
       lg: "size-6",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,
@@ -38,14 +39,14 @@ export const getDatetimeCalendarIconClasses = cva("", {
 export const getTimePickerClasses = cva(
   "border border-neutral-content bg-base-100 shadow-xs cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
   {
-    variants: {
+    variants: createVariants({
       selected: {
         true: "bg-primary border-primary text-primary-content hover:border-neutral-content hover:text-base-content",
       },
       suggested: {
         true: "bg-info border-info text-info-content hover:border-neutral-content hover:text-base-content",
       },
-    },
+    }),
   }
 );
 
@@ -60,14 +61,14 @@ export const getTimePickerScrollAreaClasses = cva(
 export const getNaturalLanguageInputClasses = cva(
   "flex-1 border-none bg-transparent outline-hidden ring-0 focus:outline-hidden focus:ring-0 focus-within:outline-hidden focus-within:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "h-4 px-1",
         sm: "h-6 px-1",
         md: "h-9 px-2",
         lg: "h-11 px-3",
       },
-    },
+    }),
     compoundVariants: [
       {
         size: undefined,

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

@@ -1,7 +1,8 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getInputClasses = cva("input rounded-md transition-all duration-100", {
-  variants: {
+  variants: createVariants({
     variant: {
       default: "bg-transparent",
       accent: "input-accent",
@@ -32,7 +33,7 @@ export const getInputClasses = cva("input rounded-md transition-all duration-100
     readOnly: {
       true: "cursor-not-allowed! bg-base-200!",
     },
-  },
+  }),
   compoundVariants: [
     {
       size: undefined,
@@ -49,12 +50,12 @@ export const getInputClasses = cva("input rounded-md transition-all duration-100
 export const getFloatingLabelClasses = cva("floating-label");
 
 export const getInputLabelClasses = cva("", {
-  variants: {
+  variants: createVariants({
     floating: {
       true: "",
       false: "label",
     },
-  },
+  }),
   compoundVariants: [
     {
       floating: undefined,
@@ -69,7 +70,7 @@ export const getInputCommonClasses = cva(
   [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2
    `,
   {
-    variants: {
+    variants: createVariants({
       variant: {
         default:
           "[&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
@@ -107,7 +108,7 @@ export const getInputCommonClasses = cva(
       readOnly: {
         true: "cursor-not-allowed! bg-base-200!",
       },
-    },
+    }),
     compoundVariants: [
       {
         size: undefined,

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

@@ -1,4 +1,5 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getMultiSelectClasses = cva("overflow-visible bg-transparent flex flex-col h-fit");
 
@@ -7,7 +8,7 @@ export const getMultiSelectTriggerClasses = cva("flex-wrap h-fit w-fit py-2 over
 export const getMultiSelectItemClasses = cva(
   "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
   {
-    variants: {
+    variants: createVariants({
       included: {
         true: "opacity-50 cursor-default",
       },
@@ -30,35 +31,35 @@ export const getMultiSelectItemClasses = cva(
         info: "aria-selected:bg-info aria-selected:text-info-content",
         error: "aria-selected:bg-error aria-selected:text-error-content",
       },
-    },
+    }),
   }
 );
 
 export const getMultiSelectListClasses = cva(
   "p-1 bg-base-100 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute shadow-md z-10 border border-muted top-1",
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "p-1",
         sm: "p-1.5",
         md: "p-2",
         lg: "p-3",
       },
-    },
+    }),
   }
 );
 
 export const getMultiSelectTagClasses = 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",
       },
-    },
+    }),
     compoundVariants: [
       {
         size: undefined,
@@ -69,12 +70,12 @@ export const getMultiSelectTagClasses = cva(
 );
 
 export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1 my-px", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "text-xs",
       sm: "text-sm",
-      md: "text-md",
+      md: "text-base",
       lg: "text-lg",
     },
-  },
+  }),
 });

package/src/components/Form/NativeSelect/NativeSelect.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../../utilities";
+import { getNativeSelectClasses } from "./constants";
+import { type NativeSelectProps } from "./types";
+
+export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size, variant, outline, wide, nativeOptions, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          getNativeSelectClasses({ size, variant, outline, wide, nativeOptions }),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  }
+);
+
+NativeSelect.displayName = "NativeSelect";

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

@@ -0,0 +1,39 @@
+import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
+
+export const getNativeSelectClasses = cva("select", {
+  variants: createVariants({
+    nativeOptions: {
+      true: "appearance-none",
+    },
+    size: {
+      xs: "select-xs",
+      sm: "select-sm",
+      md: "select-md",
+      lg: "select-lg",
+      xl: "select-xl",
+    },
+    wide: {
+      true: "w-full",
+    },
+    outline: {
+      true: "select-bordered",
+    },
+    variant: {
+      default: "",
+      primary: "select-primary",
+      secondary: "select-secondary",
+      accent: "select-accent",
+      info: "select-info",
+      success: "select-success",
+      warning: "select-warning",
+      error: "select-error",
+      ghost: "select-ghost",
+      neutral: "select-neutral",
+    },
+  }),
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+});

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

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

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

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../../libs";
+import { getNativeSelectClasses } from "./constants";
+
+export type NativeSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> &
+  VariantProps<typeof getNativeSelectClasses>;

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

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

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

@@ -1,7 +1,8 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getRangeClasses = cva("range", {
-  variants: {
+  variants: createVariants({
     variant: {
       primary: "range-primary",
       secondary: "range-secondary",
@@ -24,7 +25,7 @@ export const getRangeClasses = cva("range", {
       md: "range-md",
       lg: "range-lg",
     },
-  },
+  }),
   defaultVariants: {
     variant: "neutral",
   },

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

@@ -1,9 +1,10 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getSelectTriggerClasses = cva(
   "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-100",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         default:
           "border border-base-content/20 [&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
@@ -28,7 +29,7 @@ export const getSelectTriggerClasses = cva(
         md: "select-md",
         lg: "select-lg",
       },
-    },
+    }),
     compoundVariants: [
       {
         size: undefined,
@@ -46,7 +47,7 @@ export const getSelectTriggerClasses = cva(
 export const getSelectItemClasses = cva(
   "relative flex w-full cursor-pointer select-none items-center focus:bg-base-300 focus:text-base-content rounded-xs py-1.5 pl-2 pr-8 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         default: "focus:bg-transparent focus:text-base-content",
         primary: "focus:bg-primary focus:text-primary-content",
@@ -58,21 +59,21 @@ export const getSelectItemClasses = cva(
         error: "focus:bg-error focus:text-error-content",
         ghost: "",
       },
-    },
+    }),
   }
 );
 
 export const getSelectLabelClasses = cva("px-2 py-1.5 text-sm font-semibold");
 
 export const getSelectValueClasses = cva("", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "text-xs",
       sm: "text-sm",
-      md: "text-md",
+      md: "text-base",
       lg: "text-lg",
     },
-  },
+  }),
 });
 
 export const getSelectSeparatorClasses = cva("-mx-1 my-1 h-px bg-muted");
@@ -80,35 +81,35 @@ 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-base-100 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: {
+    variants: createVariants({
       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: {
+  variants: createVariants({
     position: {
       popper:
         "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
       "item-aligned": "",
     },
-  },
+  }),
 });
 
 export const getFloatingLabelClasses = cva("floating-label");
 
 export const getLabelForSelectClasses = cva("", {
-  variants: {
+  variants: createVariants({
     floating: {
       true: "",
       false: "label",
     },
-  },
+  }),
   compoundVariants: [
     {
       floating: undefined,