@mbao01/common 0.5.2 → 0.6.0

package/src/components/Carousel/constants.ts

@@ -1,24 +1,25 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getCarouselContentClasses = cva("flex", {
-  variants: {
+  variants: createVariants({
     orientation: {
       horizontal: "-ml-4",
       vertical: "-mt-4 flex-col",
     },
-  },
+  }),
   defaultVariants: {
     orientation: "horizontal",
   },
 });
 
 export const getCarouselItemClasses = cva("min-w-0 shrink-0 grow-0 basis-full", {
-  variants: {
+  variants: createVariants({
     orientation: {
       horizontal: "pl-4",
       vertical: "pt-4",
     },
-  },
+  }),
   defaultVariants: {
     orientation: "horizontal",
   },
@@ -27,12 +28,12 @@ export const getCarouselItemClasses = cva("min-w-0 shrink-0 grow-0 basis-full",
 export const getCarouselNextClasses = cva(
   "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
   {
-    variants: {
+    variants: createVariants({
       orientation: {
         horizontal: "-right-12 top-1/2 -translate-y-1/2",
         vertical: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
       },
-    },
+    }),
     defaultVariants: {
       orientation: "horizontal",
     },
@@ -42,12 +43,12 @@ export const getCarouselNextClasses = cva(
 export const getCarouselPreviousClasses = cva(
   "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
   {
-    variants: {
+    variants: createVariants({
       orientation: {
         horizontal: "-left-12 top-1/2 -translate-y-1/2",
         vertical: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
       },
-    },
+    }),
     defaultVariants: {
       orientation: "horizontal",
     },

package/src/components/Center/Center.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getCenterClasses } from "./constants";
+import { type CenterProps } from "./types";
+
+export const Center = React.forwardRef<HTMLDivElement, CenterProps>(
+  ({ className, inline, axis, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getCenterClasses({ inline, axis }), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+Center.displayName = "Center";

package/src/components/Center/constants.ts

@@ -0,0 +1,20 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getCenterClasses = cva("", {
+  variants: createVariants({
+    inline: {
+      true: "inline-flex",
+      false: "flex",
+    },
+    axis: {
+      horizontal: "justify-center",
+      vertical: "items-center",
+      both: "justify-center items-center",
+    },
+  }),
+  defaultVariants: {
+    inline: false,
+    axis: "both",
+  },
+});

package/src/components/Center/index.ts

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

package/src/components/Center/types.ts

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

package/src/components/Chart/constants.ts

@@ -1,5 +1,6 @@
 import type { Theme } from "../../utilities";
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const THEMES = {
   light: "",
@@ -11,13 +12,13 @@ export const getChartClasses = cva(
 );
 
 export const getChartLegendContainerClasses = cva("flex items-center justify-center gap-4", {
-  variants: {
+  variants: createVariants({
     verticalAlign: {
       top: "pb-3",
       bottom: "pt-3",
       middle: "",
     },
-  },
+  }),
 });
 
 export const getChartLegendItemClasses = cva("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3");
@@ -31,24 +32,24 @@ export const getChartTooltipContainerClasses = cva(
 export const getChartTooltipItemClasses = cva(
   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-base-content",
   {
-    variants: {
+    variants: createVariants({
       indicator: {
         dot: "items-center",
         line: "",
         dashed: "",
       },
-    },
+    }),
   }
 );
 
 export const getChartTooltipItemLabelClasses = cva(
   "flex flex-1 justify-between leading-none items-center",
   {
-    variants: {
+    variants: createVariants({
       nestLabel: {
         true: "items-end",
       },
-    },
+    }),
   }
 );
 
@@ -57,7 +58,7 @@ export const getChartTooltipItemValueClasses = cva("font-mono font-medium tabula
 export const getChartTooltipItemIndicatorClasses = cva(
   "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
   {
-    variants: {
+    variants: createVariants({
       indicator: {
         dot: "h-2.5 w-2.5",
         line: "w-1",
@@ -66,7 +67,7 @@ export const getChartTooltipItemIndicatorClasses = cva(
       nestLabel: {
         true: "",
       },
-    },
+    }),
     compoundVariants: [
       {
         indicator: "dashed",

package/src/components/Code/Code.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getCodeClasses } from "./constants";
+import { getDataPrefix } from "./helper";
+import { type CodeProps } from "./types";
+
+const CodeBlock = ({ children, prefix, skip }: Pick<CodeProps, "children" | "prefix" | "skip">) => {
+  let customIndex = 0;
+
+  return React.Children.map(children, (child, index) => {
+    const props = (React.isValidElement(child) ? child.props : {}) as Partial<{
+      "data-prefix": string;
+      className: string;
+    }>;
+    const dataPrefix = getDataPrefix(prefix, skip ? customIndex : index);
+
+    if (skip) {
+      customIndex = props["data-prefix"] ? customIndex : customIndex + 1;
+    }
+
+    return (
+      <pre key={index} data-prefix={props["data-prefix"] ?? dataPrefix} className={props.className}>
+        <code>{child}</code>
+      </pre>
+    );
+  });
+};
+
+export const Code = React.forwardRef<HTMLDivElement, CodeProps>(
+  ({ className, inline, prefix, skip, colorScheme, children, ...props }, ref) => {
+    const Component = inline ? "code" : "div";
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(getCodeClasses({ inline, colorScheme }), className)}
+        {...props}
+      >
+        {inline ? (
+          children
+        ) : (
+          <CodeBlock prefix={prefix} skip={skip}>
+            {children}
+          </CodeBlock>
+        )}
+      </Component>
+    );
+  }
+);
+
+Code.displayName = "Code";

package/src/components/Code/constants.ts

@@ -0,0 +1,28 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getCodeClasses = cva("font-mono", {
+  variants: createVariants({
+    inline: {
+      true: "px-1.5 py-0.5 rounded bg-base-300 text-sm",
+      false: "mockup-code overflow-x-auto",
+    },
+    colorScheme: {
+      default: "",
+      primary: "bg-primary/10 text-primary",
+      secondary: "bg-secondary/10 text-secondary",
+      accent: "bg-accent/10 text-accent",
+    },
+  }),
+  compoundVariants: [
+    {
+      inline: false,
+      colorScheme: undefined,
+      className: "bg-base-200",
+    },
+  ],
+  defaultVariants: {
+    inline: true,
+    colorScheme: "default",
+  },
+});

package/src/components/Code/helper.ts

@@ -0,0 +1,10 @@
+import { CodeProps } from "./types";
+
+export const getDataPrefix = (prefix: CodeProps["prefix"], index: number) => {
+  if (prefix === "numeric") {
+    return index + 1;
+  } else if (prefix === "uppercase" || prefix === "lowercase") {
+    return String.fromCharCode(prefix === "uppercase" ? 65 : 97 + index);
+  }
+  return "";
+};

package/src/components/Code/index.ts

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

package/src/components/Code/types.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from "../../libs";
+import { getCodeClasses } from "./constants";
+
+export type CodeProps = React.HTMLAttributes<HTMLElement> &
+  VariantProps<typeof getCodeClasses> & {
+    skip?: boolean;
+    prefix?: "numeric" | "uppercase" | "lowercase" | "none";
+  };

package/src/components/Combobox/Combobox.tsx

@@ -16,11 +16,10 @@ export const Combobox = <T extends Item>({
   placeholder,
   getItemValue = (item: T) => item.value as string,
   getItemLabel = (item: T) => item.label as string,
+  onSelectItem,
 }: ComboboxProps<T>) => {
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState<string | number | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setItem] = React.useState<T | null>(null);
 
   const currentItem = items?.find((item) => getItemValue(item) === value);
 
@@ -49,8 +48,8 @@ export const Combobox = <T extends Item>({
                   value={getItemValue(item)}
                   onSelect={(currentValue) => {
                     setValue(currentValue === value ? null : currentValue);
-                    setItem(item);
                     setOpen(false);
+                    onSelectItem?.(item);
                   }}
                   className={cn(
                     {

package/src/components/Combobox/types.ts

@@ -8,6 +8,7 @@ export type ComboboxProps<T extends Item> = {
   emptyText?: string;
   getItemValue?: (item: T) => string;
   getItemLabel?: (item: T) => string;
+  onSelectItem?: (item: T) => void;
   classes?: Partial<{
     root: string;
     trigger: string;

package/src/components/Container/Container.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getContainerClasses } from "./constants";
+import { type ContainerProps } from "./types";
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size, center, padding, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(getContainerClasses({ size, center, padding }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Container.displayName = "Container";

package/src/components/Container/constants.ts

@@ -0,0 +1,31 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getContainerClasses = cva("", {
+  variants: createVariants({
+    size: {
+      xs: "max-w-xs",
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+    },
+    center: {
+      true: "mx-auto",
+    },
+    padding: {
+      true: "px-4 sm:px-6 lg:px-8",
+    },
+  }),
+  defaultVariants: {
+    size: "xl",
+    center: true,
+    padding: true,
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "max-w-full",
+    },
+  ],
+});

package/src/components/Container/index.ts

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

package/src/components/Container/types.ts

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

package/src/components/DatetimePicker/constants.ts

@@ -1,5 +1,6 @@
 import type { DateFormat, DatetimeFormatDefaults, InputPlaceholders, TimeFormat } from "./types";
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const DEFAULTS = [
   ["days", "months", "years"],
@@ -22,7 +23,7 @@ export const getDatetimeGridClasses = 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 [&:has(input:focus-within)]:outline-base-content/20
   `,
   {
-    variants: {
+    variants: createVariants({
       variant: {
         default: "border-0",
         accent: "border border-accent",
@@ -49,7 +50,7 @@ export const getDatetimeGridClasses = cva(
         md: "h-12 leading-loose px-4 text-sm",
         lg: "h-16 leading-loose px-5 text-lg",
       },
-    },
+    }),
     compoundVariants: [
       {
         size: undefined,
@@ -74,7 +75,7 @@ export const getDatetimeSeparatorClasses = cva("text-xs text-gray-400");
 export const getDatetimeInputClasses = cva(
   "min-w-8 p-1 inline tabular-nums h-fit border-none outline-hidden shadow-none select-none content-box caret-transparent min-w-8 text-center focus:outline-hidden focus:bg-base-content/20 focus-visible:ring-0 focus-visible:outline-hidden",
   {
-    variants: {
+    variants: createVariants({
       size: {
         xs: "max-h-4",
         sm: "max-h-6",
@@ -85,7 +86,7 @@ export const getDatetimeInputClasses = cva(
         years: "min-w-12",
         "am/pm": "bg-base-content/5",
       } as Record<DateFormat | TimeFormat, string>,
-    },
+    }),
     compoundVariants: [
       {
         size: "lg",

package/src/components/Dialog/Dialog.tsx

@@ -46,7 +46,7 @@ const DialogContent = React.forwardRef<
       className,
       children,
       closeProps,
-      variant = "dialog",
+      type = "dialog",
       showClose = true,
       side = "right",
       ...props
@@ -59,8 +59,8 @@ const DialogContent = React.forwardRef<
         ref={ref}
         className={cn(
           getDialogContentClasses({
-            variant,
-            side: variant === "sheet" ? side : undefined,
+            type,
+            side: type === "sheet" ? side : undefined,
           }),
           className
         )}

package/src/components/Dialog/constants.ts

@@ -1,4 +1,5 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getDialogOverlayClasses = cva(
   "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
@@ -7,8 +8,8 @@ export const getDialogOverlayClasses = cva(
 export const getDialogContentClasses = cva(
   "fixed z-50 gap-4 p-6 shadow-lg transition bg-base-100 w-full",
   {
-    variants: {
-      variant: {
+    variants: createVariants({
+      type: {
         dialog:
           "border duration-200 left-[50%] top-[50%] grid max-w-lg translate-x-[-50%] translate-y-[-50%] 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         sheet:
@@ -22,9 +23,9 @@ export const getDialogContentClasses = cva(
         right:
           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
-    },
+    }),
     defaultVariants: {
-      variant: "dialog",
+      type: "dialog",
     },
   }
 );

package/src/components/Dock/constants.ts

@@ -1,14 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getDockClasses = cva("dock", {
-  variants: {
-    size: {
-      xs: "dock-xs",
-      sm: "dock-sm",
-      md: "dock-md",
-      lg: "dock-lg",
-      xl: "dock-xl",
-    },
+  variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content border-accent",
       default: "bg-default text-default-content border-default",
@@ -24,7 +18,14 @@ export const getDockClasses = cva("dock", {
     outline: {
       true: "border bg-default",
     },
-  },
+    size: {
+      xs: "dock-xs",
+      sm: "dock-sm",
+      md: "dock-md",
+      lg: "dock-lg",
+      xl: "dock-xl",
+    },
+  }),
   compoundVariants: [
     { outline: true, variant: "accent", className: "text-accent" },
     { outline: true, variant: "default", className: "text-default" },
@@ -40,15 +41,15 @@ export const getDockClasses = cva("dock", {
 });
 
 export const getDockButtonClasses = cva("", {
-  variants: {
+  variants: createVariants({
     active: {
       true: "dock-active",
     },
-  },
+  }),
 });
 
 export const getDockIconClasses = cva("", {
-  variants: {
+  variants: createVariants({
     size: {
       xs: "size-3",
       sm: "size-4",
@@ -56,7 +57,7 @@ export const getDockIconClasses = cva("", {
       lg: "size-6",
       xl: "size-6",
     },
-  },
+  }),
 });
 
 export const getDockLabelClasses = cva("dock-label");

package/src/components/DragAndDrop/Draggable/constants.ts

@@ -1,6 +1,7 @@
 import type { DropAnimation } from "@dnd-kit/core";
 import { CSS } from "@dnd-kit/utilities";
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const DROP_ANIMATION_CONFIG: DropAnimation = {
   keyframes({ transform }) {
@@ -27,21 +28,21 @@ export const DROP_ANIMATION_CONFIG: DropAnimation = {
 export const getDraggableClasses = cva(
   "translate-x-(--translate-x) translate-y-(--translate-y) translate-z-0",
   {
-    variants: {
+    variants: createVariants({
       isDragging: {
         true: "transition-none z-10 cursor-grabbing",
       },
-    },
+    }),
   }
 );
 
 export const getDraggableRootClasses = cva("relative", {
-  variants: {
+  variants: createVariants({
     isDragging: {
       true: "",
     },
     isDragOverlay: {
       true: "",
     },
-  },
+  }),
 });

package/src/components/DragAndDrop/Droppable/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getDroppableClasses = cva("relative", {
-  variants: {
+  variants: createVariants({
     isDragging: {
       true: "",
     },
@@ -11,5 +12,5 @@ export const getDroppableClasses = cva("relative", {
     isEmpty: {
       true: "",
     },
-  },
+  }),
 });

package/src/components/DragAndDrop/Sortable/constants.ts

@@ -1,12 +1,13 @@
 import { cva } from "../../../libs";
+import { createVariants } from "../../../utilities";
 
 export const getSortableClasses = cva("", {
-  variants: {
+  variants: createVariants({
     isDragging: {
       true: "",
     },
     isSorting: {
       true: "",
     },
-  },
+  }),
 });

package/src/components/Empty/Empty.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { cn } from "../../utilities";
+import {
+  getEmptyClasses,
+  getEmptyDescriptionClasses,
+  getEmptyImageClasses,
+  getEmptyTitleClasses,
+} from "./constants";
+import { type EmptyProps } from "./types";
+
+export const Empty = React.forwardRef<HTMLDivElement, EmptyProps>(
+  ({ className, size, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getEmptyClasses({ size }), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+Empty.displayName = "Empty";
+
+export const EmptyImage = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn(getEmptyImageClasses(), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+EmptyImage.displayName = "EmptyImage";
+
+export const EmptyTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <h3 ref={ref} className={cn(getEmptyTitleClasses(), className)} {...props}>
+      {children}
+    </h3>
+  );
+});
+EmptyTitle.displayName = "EmptyTitle";
+
+export const EmptyDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <p ref={ref} className={cn(getEmptyDescriptionClasses(), className)} {...props}>
+      {children}
+    </p>
+  );
+});
+EmptyDescription.displayName = "EmptyDescription";
+
+export const EmptyActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("flex items-center gap-2", className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+EmptyActions.displayName = "EmptyActions";