@mbao01/common 0.0.5 → 0.0.6

package/src/components/Button/constants.ts

@@ -1,44 +1,40 @@
-import c from 'clsx';
-import type { ButtonSize, ButtonVariant } from './types';
+import { cva } from "../../libs";
 
-const BUTTON_SIZE = {
-  xs: c('btn-xs'),
-  sm: c('btn-sm'),
-  md: c('btn-md'),
-  lg: c('btn-lg'),
-} satisfies Record<ButtonSize, string>;
-
-const BUTTON_VARIANTS = {
-  accent: c('btn-accent'),
-  default: c('btn-default'),
-  error: c('btn-error'),
-  ghost: c('btn-ghost'),
-  info: c('btn-info'),
-  link: c('btn-link'),
-  neutral: c('btn-neutral'),
-  primary: c('btn-primary'),
-  secondary: c('btn-secondary'),
-  success: c('btn-success'),
-  warning: c('btn-warning'),
-} satisfies Record<ButtonVariant, string>;
-
-export const getButtonClasses = ({
-  size,
-  wide,
-  loading,
-  outline,
-  variant,
-}: {
-  size?: ButtonSize;
-  wide?: boolean;
-  loading?: boolean;
-  outline?: boolean;
-  variant?: ButtonVariant;
-}) => {
-  return c('btn', BUTTON_VARIANTS[variant!], BUTTON_SIZE[size!], {
-    'btn-outline': outline,
-    'btn-wide': wide,
-    'relative overflow-hidden': loading,
-    'min-h-fit h-10': !size,
-  });
-};
+export const getButtonClasses = cva("btn", {
+  variants: {
+    variant: {
+      accent: "btn-accent",
+      default: "btn-default",
+      error: "btn-error",
+      ghost: "btn-ghost",
+      info: "btn-info",
+      link: "btn-link",
+      neutral: "btn-neutral",
+      primary: "btn-primary",
+      secondary: "btn-secondary",
+      success: "btn-success",
+      warning: "btn-warning",
+    },
+    outline: {
+      true: "btn-outline",
+    },
+    wide: {
+      true: "btn-wide",
+    },
+    size: {
+      xs: "btn-xs",
+      sm: "btn-sm",
+      md: "btn-md",
+      lg: "btn-lg",
+    },
+    isLoading: {
+      true: "relative overflow-hidden",
+    },
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "min-h-fit h-10",
+    },
+  ],
+});

package/src/components/Button/types.ts

@@ -1,26 +1,8 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from "../../libs";
+import { type ButtonHTMLAttributes } from "react";
+import { getButtonClasses } from "./constants";
 
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
-export type ButtonVariant =
-  | 'default'
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'ghost'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error';
-
-export type ButtonProps = {
-  size?: ButtonSize;
-  wide?: boolean;
-  label: ReactNode;
-  loading?: boolean;
-  outline?: boolean;
-  variant?: ButtonVariant;
-  disabled?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof getButtonClasses> & {
+    as?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "p">;
+  };

package/src/components/Card/Card.tsx

@@ -1,5 +1,4 @@
-import c from "clsx";
-import {
+import type {
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
@@ -7,6 +6,8 @@ import {
   CardImageProps,
   CardProps,
 } from "./types";
+import { cn } from "../../utilities";
+import { getCardClasses } from "./constants";
 
 const Card = ({
   compact,
@@ -17,15 +18,8 @@ const Card = ({
   ...props
 }: CardProps) => (
   <div
-    className={c(
-      "card",
-      {
-        "card-bordered": bordered,
-        "card-compact": compact,
-        "card-normal": !compact,
-        "image-full": overlay,
-        "card-side": horizontal,
-      },
+    className={cn(
+      getCardClasses({ bordered, compact, horizontal, overlay }),
       className
     )}
     {...props}
@@ -33,15 +27,15 @@ const Card = ({
 );
 
 const CardHeader = ({ className, ...props }: CardHeaderProps) => (
-  <h3 className={c("card-title", className)} {...props} />
+  <h3 className={cn("card-title", className)} {...props} />
 );
 
 const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
-  <p className={c("text-sm text-muted-foreground", className)} {...props} />
+  <p className={cn("text-sm text-muted-foreground", className)} {...props} />
 );
 
 const CardContent = ({ className, ...props }: CardContentProps) => (
-  <div className={c("card-body p-6 pt-0", className)} {...props} />
+  <div className={cn("card-body p-6 pt-0", className)} {...props} />
 );
 
 const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
@@ -51,7 +45,7 @@ const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
 );
 
 const CardFooter = ({ className, ...props }: CardFooterProps) => (
-  <div className={c("card-actions", className)} {...props} />
+  <div className={cn("card-actions", className)} {...props} />
 );
 
 Card.Header = CardHeader;

package/src/components/Card/constants.ts

@@ -0,0 +1,22 @@
+import { cva } from "../../libs";
+
+export const getCardClasses = cva("card", {
+  variants: {
+    bordered: {
+      true: "card-bordered",
+    },
+    compact: {
+      true: "card-compact",
+      false: "card-normal",
+    },
+    horizontal: {
+      true: "card-side",
+    },
+    overlay: {
+      true: "image-full",
+    },
+  },
+  defaultVariants: {
+    compact: false,
+  },
+});

package/src/components/Card/types.ts

@@ -1,23 +1,9 @@
 import React from "react";
+import { type VariantProps } from "../../libs";
+import { getCardClasses } from "./constants";
 
-export type CardProps = {
-  /**
-   * applies smaller padding to the card.
-   */
-  compact?: boolean;
-  /**
-   * applies border to the card.
-   */
-  bordered?: boolean;
-  /**
-   * shows the card horizontally with image to the right or left of it.
-   */
-  horizontal?: boolean;
-  /**
-   * overlay is used to make the image full width with the content on top.
-   */
-  overlay?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getCardClasses>;
 
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;

package/src/components/Description/Description.tsx

@@ -1,26 +1,31 @@
-import c from "clsx";
 import type {
   DescriptionProps,
   DescriptionTermProps,
   DescriptionDetailProps,
 } from "./types";
+import { cn } from "../../utilities";
 
 const Description = (props: DescriptionProps) => {
   return <dl role="list" {...props} />;
 };
 
-const DescriptionTerm = (props: DescriptionTermProps) => {
+const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
   return (
     <dt
-      {...props}
       role="listitem"
-      className={c("mb-1 py-2 text-sm font-medium", props.className)}
+      className={cn("py-2 text-sm font-semibold", className)}
+      {...props}
     />
   );
 };
 
-const DescriptionDetail = (props: DescriptionDetailProps) => {
-  return <dd {...props} className={c("text-base", props.className)} />;
+const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {
+  return (
+    <dd
+      className={cn("text-base [&:not(:last-child)]:mb-1", className)}
+      {...props}
+    />
+  );
 };
 
 Description.Term = DescriptionTerm;

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,18 @@
+import { getLoadingClasses } from "./constants";
+import { type LoadingProps } from "./types";
+import { cn } from "../../utilities";
+
+export const Loading = ({
+  size,
+  intent,
+  variant,
+  className,
+  ...props
+}: LoadingProps) => {
+  return (
+    <span
+      className={cn(getLoadingClasses({ intent, size, variant }), className)}
+      {...props}
+    />
+  );
+};

package/src/components/Loading/constants.ts

@@ -0,0 +1,30 @@
+import { cva } from "../../libs";
+
+export const getLoadingClasses = cva("loading", {
+  variants: {
+    variant: {
+      spinner: "loading-spinner",
+      dots: "loading-dots",
+      ring: "loading-ring",
+      ball: "loading-ball",
+      bars: "loading-bars",
+      infinity: "loading-infinity",
+    },
+    intent: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      accent: "text-accent",
+      neutral: "text-neutral",
+      info: "text-info",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error",
+    },
+    size: {
+      xs: "loading-xs",
+      sm: "loading-sm",
+      md: "loading-md",
+      lg: "loading-lg",
+    },
+  },
+});

package/src/components/Loading/index.ts

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

package/src/components/Loading/types.ts

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

package/src/components/Skeleton/Skeleton.tsx

@@ -1,26 +1,22 @@
-import c from "clsx";
 import { type SkeletonProps } from "./types";
-import { getSkeletonSize } from "./constants";
+import { getSkeletonClasses } from "./constants";
+import { cn } from "../../utilities";
 
 export const Skeleton = ({
-  className,
   round,
   width,
   height,
+  variant,
+  className,
   ...props
 }: SkeletonProps) => {
   return (
     <div
-      {...props}
-      className={c(
-        "skeleton",
-        getSkeletonSize({ width, height }),
-        {
-          "rounded-md": !round,
-          "rounded-full": round,
-        },
+      className={cn(
+        getSkeletonClasses({ width, height, round, variant }),
         className
       )}
+      {...props}
     />
   );
 };

package/src/components/Skeleton/constants.ts

@@ -1,38 +1,40 @@
-import c from "clsx";
-import { Size } from "./types";
+import { cva } from "../../libs";
 
-const WIDTH_SIZES = {
-  2: c("w-2"),
-  4: c("w-4"),
-  8: c("w-8"),
-  12: c("w-12"),
-  16: c("w-16"),
-  24: c("w-24"),
-  32: c("w-32"),
-  48: c("w-48"),
-  64: c("w-64"),
-  full: c("w-full"),
-} satisfies Record<Size, string>;
-
-const HEIGHT_SIZES = {
-  2: c("h-2"),
-  4: c("h-4"),
-  8: c("h-8"),
-  12: c("h-12"),
-  16: c("h-16"),
-  24: c("h-24"),
-  32: c("h-32"),
-  48: c("h-48"),
-  64: c("h-64"),
-  full: c("h-full"),
-} satisfies Record<Size, string>;
-
-export const getSkeletonSize = ({
-  width,
-  height,
-}: {
-  width?: Size;
-  height?: Size;
-}) => {
-  return c(WIDTH_SIZES[width!] ?? "w-full", HEIGHT_SIZES[height!] ?? "h-4");
-};
+export const getSkeletonClasses = cva("skeleton", {
+  variants: {
+    variant: { pulse: "animate-pulse" },
+    width: {
+      2: "w-2",
+      4: "w-4",
+      8: "w-8",
+      12: "w-12",
+      16: "w-16",
+      24: "w-24",
+      32: "w-32",
+      48: "w-48",
+      64: "w-64",
+      full: "w-full",
+    },
+    height: {
+      2: "h-2",
+      4: "h-4",
+      8: "h-8",
+      12: "h-12",
+      16: "h-16",
+      24: "h-24",
+      32: "h-32",
+      48: "h-48",
+      64: "h-64",
+      full: "h-full",
+    },
+    round: {
+      true: "rounded-full",
+      false: "rounded-md",
+    },
+  },
+  defaultVariants: {
+    width: "full",
+    height: 4,
+    round: false,
+  },
+});

package/src/components/Skeleton/types.ts

@@ -1,8 +1,5 @@
-export type Size = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | "full";
+import { type VariantProps } from "../../libs";
+import { getSkeletonClasses } from "./constants";
 
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
-  width?: Size;
-  height?: Size;
-  round?: boolean;
-  className?: string;
-};
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getSkeletonClasses>;

package/src/components/Text/Text.tsx

@@ -1,12 +1,27 @@
-import c from 'clsx';
-import { createElement } from 'react';
-import { type TextProps } from './types';
-import { getTextClasses } from './constants';
+import React from "react";
+import { type TextProps } from "./types";
+import { getTextClasses } from "./constants";
+import { cn } from "../../utilities";
+import { Slot } from "@radix-ui/react-slot";
 
-export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
-  return createElement(
-    as,
-    { className: c(getTextClasses({ size, variant }), className) },
-    children
+export const Text = ({
+  as,
+  size,
+  variant,
+  children,
+  className,
+  ...props
+}: TextProps) => {
+  const Comp = as ? Slot : "span";
+  const SlotChild = as ? as : React.Fragment;
+
+  return (
+    <Comp
+      className={cn(getTextClasses({ size, variant }), className)}
+      {...props}
+    >
+      {/* slot merges it's prop into it's immediate child */}
+      <SlotChild>{children}</SlotChild>
+    </Comp>
   );
 };

package/src/components/Text/constants.ts

@@ -1,29 +1,27 @@
-import c from 'clsx';
-import type { TextSize, TextVariant } from './types';
+import { cva } from "../../libs";
 
-const TEXT_SIZE = {
-  xs: c('text-xs'),
-  sm: c('text-sm'),
-  base: c('text-base'),
-  lg: c('text-lg'),
-  xl: c('text-xl'),
-  '2xl': c('text-2xl'),
-  '3xl': c('text-3xl'),
-  '4xl': c('text-4xl'),
-  '5xl': c('text-5xl'),
-} satisfies Record<TextSize, string>;
-
-const TEXT_VARIANT = {
-  info: c('text-info'),
-  error: c('text-error'),
-  success: c('text-success'),
-  warning: c('text-warning'),
-  primary: c('text-primary'),
-  secondary: c('text-secondary'),
-  accent: c('text-accent'),
-  neutral: c('text-neutral'),
-} satisfies Record<TextVariant, string>;
-
-export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
-  return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
-};
+export const getTextClasses = cva("", {
+  variants: {
+    variant: {
+      info: "text-info",
+      error: "text-error",
+      success: "text-success",
+      warning: "text-warning",
+      primary: "text-primary",
+      secondary: "text-secondary",
+      accent: "text-accent",
+      neutral: "text-neutral",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+    },
+  },
+});

package/src/components/Text/types.ts

@@ -1,21 +1,10 @@
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+import { type VariantProps } from "../../libs";
+import { getTextClasses } from "./constants";
 
-export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
-
-export type TextVariant =
-  | 'info'
-  | 'error'
-  | 'success'
-  | 'warning'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'neutral';
-
-export type TextProps = {
-  as?: TextTag;
-  size?: TextSize;
-  variant?: TextVariant;
-  children: React.ReactNode;
-  className?: string;
-};
+export type TextProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getTextClasses> & {
+    as?: keyof Pick<
+      JSX.IntrinsicElements,
+      "h1" | "h2" | "h3" | "h4" | "h5" | "p"
+    >;
+  };

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,36 @@
-import c from 'clsx';
-import { getTooltipClasses } from './constants';
-import { type TooltipProps } from './types';
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { TooltipArrowProps, TooltipContentProps } from "./types";
+import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
+import { cn } from "../../utilities";
 
-export const Tooltip = ({
-  content,
-  children,
-  variant,
-  position,
-  className,
-  ...props
-}: TooltipProps) => {
-  return (
-    <div
-      {...props}
-      className={c(getTooltipClasses({ variant, position }), className)}
-      data-tip={content}
-    >
-      {children}
-    </div>
-  );
-};
+const Tooltip = (props: TooltipPrimitive.TooltipProps) => (
+  <TooltipPrimitive.Root {...props} />
+);
+
+const TooltipArrow = ({ className, variant, ...props }: TooltipArrowProps) => (
+  <TooltipPrimitive.Arrow
+    className={cn(getTooltipArrowClasses({ variant }), className)}
+    {...props}
+  />
+);
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, variant, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    className={cn(getTooltipContentClasses({ variant }), className)}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+Tooltip.Content = TooltipContent;
+Tooltip.Arrow = TooltipArrow;
+Tooltip.Portal = TooltipPrimitive.Portal;
+Tooltip.Provider = TooltipPrimitive.Provider;
+Tooltip.Trigger = TooltipPrimitive.Trigger;
+
+export { Tooltip };