@mbao01/common 0.0.5 → 0.0.7

package/README.md

@@ -23,8 +23,7 @@ export default {
     ...
   ],
   "plugins": [
-    require("@mbao01/common/plugin"), // -> import the library plugin
-    ...
+    ...require("@mbao01/common/plugin"), // -> import the library plugin
   ]
 }
 ```

package/dist/types/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./types";
+declare const Avatar: {
+    ({ className, size, status, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+    Image: {
+        ({ className, ring, shape, variant, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string | undefined;
+    };
+    Fallback: {
+        ({ className, size, ring, shape, variant, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string | undefined;
+    };
+};
+export { Avatar };

package/dist/types/components/Avatar/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const getAvatarClasses: (props?: ({
+    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    status?: "online" | "offline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getAvatarImageClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    shape?: "circle" | "round" | "hexagon" | "triangle" | "television" | null | undefined;
+    ring?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getAvatarFallbackClasses: (props?: ({
+    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    shape?: "circle" | "round" | "hexagon" | "triangle" | "television" | null | undefined;
+    ring?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Avatar/index.d.ts

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

package/dist/types/components/Avatar/types.d.ts

@@ -0,0 +1,6 @@
+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/dist/types/components/Badge/Badge.d.ts

@@ -1,2 +1,2 @@
 import { type BadgeProps } from "./types";
-export declare const Badge: ({ size, outline, variant, children, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ size, outline, variant, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Badge/constants.d.ts

@@ -1,5 +1,5 @@
-import type { BadgeSize, BadgeVariant } from "./types";
-export declare const getBadgeClasses: ({ size, variant, }: {
-    size?: BadgeSize | undefined;
-    variant?: BadgeVariant | undefined;
-}) => string;
+export declare const getBadgeClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    outline?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Badge/types.d.ts

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

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbProps, BreadcrumbsProps } from "./types";
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumb: (props: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Breadcrumbs/index.d.ts

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

package/dist/types/components/Breadcrumbs/types.d.ts

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

package/dist/types/components/Button/Button.d.ts

@@ -1,2 +1,11 @@
-import { type ButtonProps } from "./types";
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    outline?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    isLoading?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    as?: "a" | "span" | "p" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/types/components/Button/constants.d.ts

@@ -1,8 +1,7 @@
-import type { ButtonSize, ButtonVariant } from './types';
-export declare const getButtonClasses: ({ size, wide, loading, outline, variant, }: {
-    size?: ButtonSize | undefined;
-    wide?: boolean | undefined;
-    loading?: boolean | undefined;
-    outline?: boolean | undefined;
-    variant?: ButtonVariant | undefined;
-}) => string;
+export declare const getButtonClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    outline?: boolean | null | undefined;
+    wide?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    isLoading?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Button/types.d.ts

@@ -1,12 +1,6 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-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>;
+import { type VariantProps } from "../../libs";
+import { type ButtonHTMLAttributes } from "react";
+import { getButtonClasses } from "./constants";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof getButtonClasses> & {
+    as?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "p">;
+};

package/dist/types/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
+import type { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
 declare const Card: {
     ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
     Header: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Card/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getCardClasses: (props?: ({
+    bordered?: boolean | null | undefined;
+    compact?: boolean | null | undefined;
+    horizontal?: boolean | null | undefined;
+    overlay?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Card/types.d.ts

@@ -1,22 +1,7 @@
 import React from "react";
-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>;
+import { type VariantProps } from "../../libs";
+import { getCardClasses } from "./constants";
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getCardClasses>;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/types/components/Description/Description.d.ts

@@ -1,7 +1,7 @@
 import type { DescriptionProps, DescriptionTermProps, DescriptionDetailProps } from "./types";
 declare const Description: {
     (props: DescriptionProps): import("react/jsx-runtime").JSX.Element;
-    Term: (props: DescriptionTermProps) => import("react/jsx-runtime").JSX.Element;
-    Detail: (props: DescriptionDetailProps) => import("react/jsx-runtime").JSX.Element;
+    Term: ({ className, ...props }: DescriptionTermProps) => import("react/jsx-runtime").JSX.Element;
+    Detail: ({ className, ...props }: DescriptionDetailProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { Description };

package/dist/types/components/Loading/Loading.d.ts

@@ -0,0 +1,2 @@
+import { type LoadingProps } from "./types";
+export declare const Loading: ({ size, intent, variant, className, ...props }: LoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Loading/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const getLoadingClasses: (props?: ({
+    variant?: "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity" | null | undefined;
+    intent?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Loading/index.d.ts

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

package/dist/types/components/Loading/types.d.ts

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

package/dist/types/components/Progress/Progress.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+export declare const Progress: React.ForwardRefExoticComponent<Omit<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & import("class-variance-authority").VariantProps<(props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Progress/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getProgressClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getProgressIndicatorClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Progress/index.d.ts

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

package/dist/types/components/Progress/types.d.ts

@@ -0,0 +1,4 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type VariantProps } from "../../libs";
+import { getProgressClasses } from "./constants";
+export type ProgressProps = Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "asChild"> & VariantProps<typeof getProgressClasses>;

package/dist/types/components/Separator/Separator.d.ts

@@ -0,0 +1,2 @@
+import { type SeparatorProps } from "./types";
+export declare const Separator: ({ className, orientation, decorative, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Separator/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getSeparatorClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Separator/index.d.ts

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

package/dist/types/components/Separator/types.d.ts

@@ -0,0 +1,2 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;

package/dist/types/components/Skeleton/Skeleton.d.ts

@@ -1,2 +1,2 @@
 import { type SkeletonProps } from "./types";
-export declare const Skeleton: ({ className, round, width, height, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ round, width, height, variant, className, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Skeleton/constants.d.ts

@@ -1,5 +1,6 @@
-import { Size } from "./types";
-export declare const getSkeletonSize: ({ width, height, }: {
-    width?: Size | undefined;
-    height?: Size | undefined;
-}) => string;
+export declare const getSkeletonClasses: (props?: ({
+    variant?: "pulse" | null | undefined;
+    width?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
+    height?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
+    round?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Skeleton/types.d.ts

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

package/dist/types/components/Text/Text.d.ts

@@ -1,4 +1,2 @@
-import { type TextProps } from './types';
-export declare const Text: ({ as, size, variant, children, className }: TextProps) => import("react").DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
+import { type TextProps } from "./types";
+export declare const Text: ({ as, size, variant, children, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Text/constants.d.ts

@@ -1,5 +1,4 @@
-import type { TextSize, TextVariant } from './types';
-export declare const getTextClasses: ({ size, variant }: {
-    size?: TextSize | undefined;
-    variant?: TextVariant | undefined;
-}) => string;
+export declare const getTextClasses: (props?: ({
+    variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "lg" | "base" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Text/types.d.ts

@@ -1,10 +1,5 @@
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-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;
+import { type VariantProps } from "../../libs";
+import { getTextClasses } from "./constants";
+export type TextProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof getTextClasses> & {
+    as?: keyof Pick<JSX.IntrinsicElements, "h1" | "h2" | "h3" | "h4" | "h5" | "p">;
 };

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,14 @@
-import { type TooltipProps } from './types';
-export declare const Tooltip: ({ content, children, variant, position, className, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { TooltipArrowProps } from "./types";
+declare const Tooltip: {
+    (props: TooltipPrimitive.TooltipProps): import("react/jsx-runtime").JSX.Element;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & TooltipPrimitive.TooltipContentProps & import("class-variance-authority").VariantProps<(props?: ({
+        variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: ({ className, variant, ...props }: TooltipArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Portal: React.FC<TooltipPrimitive.TooltipPortalProps>;
+    Provider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+    Trigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Tooltip };

package/dist/types/components/Tooltip/constants.d.ts

@@ -1,5 +1,6 @@
-import type { TooltipPosition, TooltipVariant } from "./types";
-export declare const getTooltipClasses: ({ variant, position, }: {
-    variant?: TooltipVariant | undefined;
-    position?: TooltipPosition | undefined;
-}) => string;
+export declare const getTooltipContentClasses: (props?: ({
+    variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getTooltipArrowClasses: (props?: ({
+    variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Tooltip/types.d.ts

@@ -1,10 +1,5 @@
-import { type ReactNode } from 'react';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
-export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {
-    content: string;
-    children: ReactNode;
-    variant?: TooltipVariant;
-    position?: TooltipPosition;
-    className?: string;
-};
+import { type VariantProps } from "../../libs";
+import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+export type TooltipArrowProps = React.HTMLAttributes<React.ElementRef<typeof TooltipPrimitive.Arrow>> & TooltipPrimitive.TooltipArrowProps & VariantProps<typeof getTooltipArrowClasses>;
+export type TooltipContentProps = React.HTMLAttributes<React.ElementRef<typeof TooltipPrimitive.Content>> & TooltipPrimitive.TooltipContentProps & VariantProps<typeof getTooltipContentClasses>;

package/dist/types/index.d.ts

@@ -1,11 +1,16 @@
 /** actions */
 export * from "./components/Button";
+export * from "./components/Breadcrumbs";
 /** data display */
+export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Description";
+export * from "./components/Progress";
+export * from "./components/Separator";
 export * from "./components/Text";
 /** data input */
 /** feedback */
+export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";

package/dist/types/libs/cva.d.ts

@@ -0,0 +1 @@
+export { cva, type VariantProps } from "class-variance-authority";

package/dist/types/libs/index.d.ts

@@ -0,0 +1 @@
+export { cva, type VariantProps } from "./cva";

package/dist/types/utilities/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/utilities/getSubpaths/getSubpaths.d.ts

@@ -0,0 +1,6 @@
+export declare const getSubpaths: (pathname: string, pathLabels?: Record<string, string> | undefined, includeRoot?: boolean) => {
+    href: {
+        pathname: string;
+    };
+    label: string;
+}[];

package/dist/types/utilities/getSubpaths/index.d.ts

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

package/dist/types/utilities/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from "./cn";
+export { getSubpaths } from "./getSubpaths";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -20,7 +20,9 @@
         "default": "./src/index.ts"
       }
     },
+    "./libs": "./src/libs/index.ts",
     "./plugin": "./plugin.js",
+    "./utilities": "./src/utilities/index.ts",
     "./vitest/setup": "./vitest-setup.ts",
     "./vitest/config": "./vitest.config.ts",
     "./styles": "./src/stylesheets/index.css"
@@ -58,8 +60,17 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "daisyui": "^4.6.2"
+    "daisyui": "^4.6.2",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
@@ -102,10 +113,9 @@
     "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "@heroicons/react": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "d40fb1867ee09180de85ab18ffe74c4436e43413"
+  "gitHead": "5a26b3e951c2b2a1a6cf5cb597129bc25a336a2d"
 }

package/plugin.js

@@ -1,3 +1 @@
-const daisyui = require("daisyui");
-
-module.exports = daisyui;
+module.exports = [require("daisyui"), require("tailwindcss-animate")];

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getAvatarClasses,
+  getAvatarImageClasses,
+  getAvatarFallbackClasses,
+} from "./constants";
+
+const Avatar = ({ className, size, status, ...props }: AvatarProps) => (
+  <AvatarPrimitive.Root
+    className={cn(getAvatarClasses({ size, status }), className)}
+    {...props}
+  />
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = ({
+  className,
+  ring,
+  shape,
+  variant,
+  ...props
+}: AvatarImageProps) => (
+  <AvatarPrimitive.Image
+    className={cn(getAvatarImageClasses({ ring, shape, variant }), className)}
+    {...props}
+  />
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = ({
+  className,
+  size,
+  ring,
+  shape,
+  variant,
+  ...props
+}: AvatarFallbackProps) => (
+  <AvatarPrimitive.Fallback
+    className={cn(
+      getAvatarFallbackClasses({ ring, size, shape, variant }),
+      className
+    )}
+    {...props}
+  />
+);
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+Avatar.Image = AvatarImage;
+Avatar.Fallback = AvatarFallback;
+
+export { Avatar };

package/src/components/Avatar/constants.ts

@@ -0,0 +1,69 @@
+import { cva } from "../../libs";
+
+export const getAvatarClasses = cva("avatar", {
+  variants: {
+    size: {
+      4: "w-4 h-4",
+      8: "w-8 h-8",
+      12: "w-12 h-12",
+      16: "w-16 h-16",
+      24: "w-24 h-24",
+      32: "w-32 h-32",
+      48: "w-48 h-48",
+      64: "w-64 h-64",
+    },
+    status: {
+      online: "online",
+      offline: "offline",
+    },
+  },
+});
+
+const classesConfig = {
+  variants: {
+    variant: {
+      accent: "bg-accent text-accent-content ring-accent",
+      default: "bg-default text-default-content ring-default",
+      error: "bg-error text-error-content ring-error",
+      ghost: "bg-ghost text-ghost-content ring-ghost",
+      info: "bg-info text-info-content ring-info",
+      neutral: "bg-neutral text-neutral-content ring-neutral",
+      primary: "bg-primary text-primary-content ring-primary",
+      secondary: "bg-secondary text-secondary-content ring-secondary",
+      success: "bg-success text-success-content ring-success",
+      warning: "bg-warning text-warning-content ring-warning",
+    },
+    shape: {
+      round: "rounded",
+      circle: "rounded-full",
+      hexagon: "mask mask-hexagon",
+      triangle: "mask mask-triangle",
+      television: "mask mask-squircle",
+    },
+    ring: {
+      true: "ring ring-offset-base-100 ring-offset-2",
+    },
+  },
+};
+
+export const getAvatarImageClasses = cva("", classesConfig);
+
+export const getAvatarFallbackClasses = cva(
+  "flex items-center justify-center w-full",
+  {
+    ...classesConfig,
+    variants: {
+      ...classesConfig.variants,
+      size: {
+        4: "text-[4px]",
+        8: "text-base",
+        12: "text-lg",
+        16: "text-xl",
+        24: "text-2xl",
+        32: "text-3xl",
+        48: "text-4xl",
+        64: "text-5xl",
+      },
+    },
+  }
+);