@mbao01/common 0.0.5 → 0.0.7

package/src/components/Avatar/index.ts

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

package/src/components/Avatar/types.ts

@@ -0,0 +1,25 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps } from "../../libs";
+import {
+  getAvatarClasses,
+  getAvatarFallbackClasses,
+  getAvatarImageClasses,
+} from "./constants";
+
+export type AvatarProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+  "asChild" | "size"
+> &
+  VariantProps<typeof getAvatarClasses>;
+
+export type AvatarImageProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,
+  "asChild"
+> &
+  VariantProps<typeof getAvatarImageClasses>;
+
+export type AvatarFallbackProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,
+  "asChild"
+> &
+  VariantProps<typeof getAvatarFallbackClasses>;

package/src/components/Badge/Badge.tsx

@@ -1,28 +1,18 @@
-import c from "clsx";
+import { cn } from "../../utilities";
 import { getBadgeClasses } from "./constants";
 import { type BadgeProps } from "./types";
 
 export const Badge = ({
   size,
   outline,
-  variant = "ghost",
-  children,
+  variant,
   className,
   ...props
 }: BadgeProps) => {
   return (
     <span
+      className={cn(getBadgeClasses({ size, variant, outline }), className)}
       {...props}
-      className={c(
-        getBadgeClasses({ size, variant }),
-        {
-          "badge-outline": outline,
-          "text-base-200": !["ghost", "neutral"].includes(variant),
-        },
-        className
-      )}
-    >
-      {children}
-    </span>
+    />
   );
 };

package/src/components/Badge/constants.ts

@@ -1,31 +1,29 @@
-import c from "clsx";
-import type { BadgeSize, BadgeVariant } from "./types";
+import { cva } from "../../libs";
 
-const BADGE_SIZE = {
-  xs: c("badge-xs"),
-  sm: c("badge-sm"),
-  md: c("badge-md"),
-  lg: c("badge-lg"),
-} satisfies Record<BadgeSize, string>;
-
-const BADGE_VARIANTS = {
-  accent: c("badge-accent"),
-  error: c("badge-error"),
-  ghost: c("badge-ghost"),
-  info: c("badge-info"),
-  neutral: c("badge-neutral"),
-  primary: c("badge-primary"),
-  secondary: c("badge-secondary"),
-  success: c("badge-success"),
-  warning: c("badge-warning"),
-} satisfies Record<BadgeVariant, string>;
-
-export const getBadgeClasses = ({
-  size,
-  variant,
-}: {
-  size?: BadgeSize;
-  variant?: BadgeVariant;
-}) => {
-  return c("badge", BADGE_VARIANTS[variant!], BADGE_SIZE[size!]);
-};
+export const getBadgeClasses = cva("badge", {
+  variants: {
+    variant: {
+      accent: "badge-accent",
+      error: "badge-error",
+      ghost: "badge-ghost",
+      info: "badge-info",
+      neutral: "badge-neutral",
+      primary: "badge-primary",
+      secondary: "badge-secondary",
+      success: "badge-success",
+      warning: "badge-warning",
+    },
+    outline: {
+      true: "badge-outline",
+    },
+    size: {
+      xs: "badge-xs",
+      sm: "badge-sm",
+      md: "badge-md",
+      lg: "badge-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "ghost",
+  },
+});

package/src/components/Badge/types.ts

@@ -1,18 +1,5 @@
-export type BadgeSize = "xs" | "sm" | "md" | "lg";
+import { type VariantProps } from "../../libs";
+import { getBadgeClasses } from "./constants";
 
-export type BadgeVariant =
-  | "neutral"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "ghost"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
-
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-  size?: BadgeSize;
-  outline?: boolean;
-  variant?: BadgeVariant;
-};
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getBadgeClasses>;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,13 @@
+import type { BreadcrumbProps, BreadcrumbsProps } from "./types";
+
+export const Breadcrumbs = (props: BreadcrumbsProps) => {
+  return (
+    <div className="breadcrumbs -ml-1 w-fit px-1 text-sm">
+      <ul {...props} />
+    </div>
+  );
+};
+
+export const Breadcrumb = (props: BreadcrumbProps) => {
+  return <li {...props} />;
+};

package/src/components/Breadcrumbs/index.ts

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

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,3 @@
+export type BreadcrumbProps = React.HTMLAttributes<HTMLLIElement>;
+
+export type BreadcrumbsProps = React.HTMLAttributes<HTMLUListElement>;

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,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/Progress/Progress.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type ProgressProps } from "./types";
+import { cn } from "../../utilities";
+import { getProgressClasses, getProgressIndicatorClasses } from "./constants";
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, max = 100, variant, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    max={max}
+    value={value}
+    className={cn(getProgressClasses({ variant }), className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(getProgressIndicatorClasses({ variant }))}
+      style={{
+        transform: `translateX(-${
+          (100 * (max - Math.max(Math.min(value ?? 0, max), 0))) / max
+        }%)`,
+      }}
+    />
+  </ProgressPrimitive.Root>
+));
+
+Progress.displayName = ProgressPrimitive.Root.displayName;

package/src/components/Progress/constants.ts

@@ -0,0 +1,49 @@
+import { cva } from "../../libs";
+
+export const getProgressClasses = cva(
+  "relative h-2 w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent/20",
+        base: "bg-base-content/20",
+        error: "bg-error/20",
+        ghost: "bg-ghost/20",
+        info: "bg-info/20",
+        link: "bg-link/20",
+        neutral: "bg-neutral/20",
+        primary: "bg-primary/20",
+        secondary: "bg-secondary/20",
+        success: "bg-success/20",
+        warning: "bg-warning/20",
+      },
+    },
+    defaultVariants: {
+      variant: "base",
+    },
+  }
+);
+
+export const getProgressIndicatorClasses = cva(
+  "h-full w-full flex-1 transition-all",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent",
+        base: "bg-base-content",
+        error: "bg-error",
+        ghost: "bg-ghost",
+        info: "bg-info",
+        link: "bg-link",
+        neutral: "bg-neutral",
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        success: "bg-success",
+        warning: "bg-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "base",
+    },
+  }
+);