@mbao01/common 0.0.4 → 0.0.6

package/src/components/Button/Button.tsx

@@ -1,40 +1,54 @@
-import c from "clsx";
-import { getButtonClasses } from "./constants";
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { type ButtonProps } from "./types";
+import { getButtonClasses } from "./constants";
+import { Loading } from "../Loading";
+import { cn } from "../../utilities";
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      as,
+      className,
+      outline,
+      children,
+      isLoading,
+      variant,
+      size,
+      wide,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = as ? Slot : "button";
+    const SlotChild = as ? as : React.Fragment;
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          getButtonClasses({ size, wide, outline, variant, isLoading }),
+          className
+        )}
+        {...props}
+      >
+        {/* slot merges it's prop into it's immediate child */}
+        <SlotChild>
+          {children}
+          {isLoading ? (
+            <span
+              className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
+              data-testid="loading"
+            >
+              <Loading />
+            </span>
+          ) : null}
+        </SlotChild>
+      </Comp>
+    );
+  }
+);
 
-export const Button = (props: ButtonProps) => {
-  const {
-    className,
-    outline,
-    label,
-    disabled,
-    onClick,
-    loading,
-    variant,
-    size,
-    wide,
-    ...rest
-  } = props;
+Button.displayName = "Button";
 
-  return (
-    <button
-      {...rest}
-      onClick={onClick}
-      disabled={disabled}
-      className={c(
-        getButtonClasses({ size, wide, outline, variant, loading }),
-        className
-      )}
-    >
-      {label}
-      {loading ? (
-        <span
-          className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
-          data-testid="loading"
-        >
-          <span className="loading loading-spinner" />
-        </span>
-      ) : null}
-    </button>
-  );
-};
+export { Button };

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,14 +45,13 @@ 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} />
 );
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardDescription,
-  CardContent,
-  CardImage,
-};
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Description = CardDescription;
+Card.Image = CardImage;
+Card.Footer = CardFooter;
+
+export { Card };

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

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

package/src/components/Description/index.ts

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

package/src/components/Description/types.ts

@@ -0,0 +1,5 @@
+export type DescriptionProps = React.HTMLAttributes<HTMLDListElement>;
+
+export type DescriptionTermProps = React.HTMLAttributes<HTMLElement>;
+
+export type DescriptionDetailProps = React.HTMLAttributes<HTMLElement>;

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

@@ -0,0 +1,22 @@
+import { type SkeletonProps } from "./types";
+import { getSkeletonClasses } from "./constants";
+import { cn } from "../../utilities";
+
+export const Skeleton = ({
+  round,
+  width,
+  height,
+  variant,
+  className,
+  ...props
+}: SkeletonProps) => {
+  return (
+    <div
+      className={cn(
+        getSkeletonClasses({ width, height, round, variant }),
+        className
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Skeleton/constants.ts

@@ -0,0 +1,40 @@
+import { cva } from "../../libs";
+
+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/index.ts

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

package/src/components/Skeleton/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getSkeletonClasses } from "./constants";
+
+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"
+    >;
+  };