@mbao01/common 0.9.0 → 0.9.1

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

@@ -0,0 +1,2 @@
+import { IconContainerProps } from './types';
+export declare const IconContainer: ({ variant, size, shape, shadow, outline, soft, raised, className, children, ...props }: IconContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export declare const getIconRaisedContainerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shadow?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    raised?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getIconContainerClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "rounded" | "circle" | "square" | null | undefined;
+    shadow?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+    outline?: boolean | null | undefined;
+    soft?: boolean | null | undefined;
+    raised?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export { IconContainer } from './IconContainer';

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

@@ -0,0 +1,3 @@
+import { VariantProps } from '../../libs';
+import { getIconContainerClasses } from './constants';
+export type IconContainerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getIconContainerClasses>;

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

@@ -1,6 +1,6 @@
 import { KPICardProps } from './types';
 declare const KPICard: {
-    ({ title, value, change, description, sparklineData, sparklineColor, sparklineFilled, icon, loading, className, ...props }: KPICardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, change, description, chart, icon, loading, className, ...props }: KPICardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { KPICard };

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

@@ -8,12 +8,8 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
     change?: number;
     /** Description text below value */
     description?: string;
-    /** Sparkline data points */
-    sparklineData?: number[];
-    /** Sparkline color */
-    sparklineColor?: string;
-    /** Whether sparkline is filled */
-    sparklineFilled?: boolean;
+    /** Inline chart element (e.g. Sparkline, MiniBarChart, MiniAreaChart, MiniDonutChart, MiniStackedBar) */
+    chart?: ReactNode;
     /** Icon to show in the card */
     icon?: ReactNode;
     /** Loading state */

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/Heading';
 export * from './components/Paragraph';
 /** utility & atoms */
 export * from './components/AspectRatio';
+export * from './components/IconContainer';
 export * from './components/Image';
 export * from './components/Spinner';
 /** data display */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",

package/src/components/IconContainer/IconContainer.tsx

@@ -0,0 +1,44 @@
+import { cn } from "../../utilities";
+import { getIconContainerClasses, getIconRaisedContainerClasses } from "./constants";
+import { type IconContainerProps } from "./types";
+
+export const IconContainer = ({
+  variant,
+  size,
+  shape,
+  shadow,
+  outline,
+  soft,
+  raised,
+  className,
+  children,
+  ...props
+}: IconContainerProps) => {
+  const content = raised ? (
+    <div className={getIconRaisedContainerClasses({ size, variant, shadow, raised })}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <div
+      className={cn(
+        getIconContainerClasses({
+          size,
+          soft,
+          shape,
+          variant,
+          outline,
+          raised,
+          shadow: raised ? "none" : shadow,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};

package/src/components/IconContainer/constants.ts

@@ -0,0 +1,112 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+const variants = createVariants({
+  variant: {
+    accent: "bg-accent text-accent-content",
+    default: "bg-base-200 text-base-content",
+    error: "bg-error text-error-content",
+    ghost: "bg-ghost text-ghost-content",
+    info: "bg-info text-info-content",
+    neutral: "bg-neutral text-neutral-content",
+    primary: "bg-primary text-primary-content",
+    secondary: "bg-secondary text-secondary-content",
+    success: "bg-success text-success-content",
+    warning: "bg-warning text-warning-content",
+  },
+  size: {
+    xs: "size-6 text-xs",
+    sm: "size-8 text-sm",
+    md: "size-10 text-base",
+    lg: "size-12 text-lg",
+    xl: "size-16 text-2xl",
+  },
+  shape: {
+    circle: "rounded-full",
+    square: "rounded-none",
+    rounded: "rounded-lg",
+  },
+  shadow: {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+  },
+  outline: {
+    true: "bg-transparent ring-2 ring-offset-2 ring-offset-base-100",
+  },
+  soft: {
+    true: "",
+  },
+  raised: {
+    true: "ring-3 ring-base-200 bg-base-200 [&>div]:bg-base-100 [&>div]:size-[inherit] [&>div]:rounded-[inherit]",
+  },
+});
+
+export const getIconRaisedContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants: createVariants({
+      variant: {
+        accent: "bg-accent text-accent",
+        default: "bg-base-200 text-base",
+        error: "bg-error text-error",
+        ghost: "bg-ghost text-ghost",
+        info: "bg-info text-info",
+        neutral: "bg-neutral text-neutral",
+        primary: "bg-primary text-primary",
+        secondary: "bg-secondary text-secondary",
+        success: "bg-success text-success",
+        warning: "bg-warning text-warning",
+      },
+      size: variants.size,
+      shadow: variants.shadow,
+      raised: {
+        true: "",
+      },
+    }),
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shadow: "md",
+    },
+  }
+);
+
+export const getIconContainerClasses = cva(
+  "inline-flex items-center justify-center shrink-0 [&>svg]:size-[1em]",
+  {
+    variants,
+    compoundVariants: [
+      // soft: pastel bg with colored icon
+      { variant: "accent", soft: true, class: "bg-accent/10 text-accent" },
+      { variant: "default", soft: true, class: "bg-base-200/50 text-base-content" },
+      { variant: "error", soft: true, class: "bg-error/10 text-error" },
+      { variant: "ghost", soft: true, class: "bg-base-100 text-base-content" },
+      { variant: "info", soft: true, class: "bg-info/10 text-info" },
+      { variant: "neutral", soft: true, class: "bg-neutral/10 text-neutral" },
+      { variant: "primary", soft: true, class: "bg-primary/10 text-primary" },
+      { variant: "secondary", soft: true, class: "bg-secondary/10 text-secondary" },
+      { variant: "success", soft: true, class: "bg-success/10 text-success" },
+      { variant: "warning", soft: true, class: "bg-warning/10 text-warning" },
+      // outline: variant dictates ring color and icon color
+      { variant: "accent", outline: true, class: "ring-accent text-accent" },
+      { variant: "default", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "error", outline: true, class: "ring-error text-error" },
+      { variant: "ghost", outline: true, class: "ring-base-300 text-base-content" },
+      { variant: "info", outline: true, class: "ring-info text-info" },
+      { variant: "neutral", outline: true, class: "ring-neutral text-neutral" },
+      { variant: "primary", outline: true, class: "ring-primary text-primary" },
+      { variant: "secondary", outline: true, class: "ring-secondary text-secondary" },
+      { variant: "success", outline: true, class: "ring-success text-success" },
+      { variant: "warning", outline: true, class: "ring-warning text-warning" },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shape: "circle",
+      shadow: "md",
+    },
+  }
+);

package/src/components/IconContainer/index.ts

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

package/src/components/IconContainer/types.ts

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

package/src/components/KPICard/KPICard.tsx

@@ -1,16 +1,14 @@
+import type { KPICardProps } from "./types";
 import { cn } from "../../utilities";
-import { Sparkline } from "../Sparkline";
+import { Skeleton } from "../Skeleton";
 import { TrendBadge } from "../TrendBadge";
-import type { KPICardProps } from "./types";
 
 const KPICard = ({
   title,
   value,
   change,
   description,
-  sparklineData,
-  sparklineColor,
-  sparklineFilled = true,
+  chart,
   icon,
   loading = false,
   className,
@@ -26,15 +24,15 @@ const KPICard = ({
         {...props}
       >
         <div className="flex items-center justify-between">
-          <span className="skeleton h-4 w-24 rounded" />
-          {icon && <span className="skeleton size-8 rounded-md" />}
+          <Skeleton className="h-4 w-24 rounded" />
+          {icon && <Skeleton className="size-8 rounded-md" />}
         </div>
-        <div className="mt-3 flex items-end justify-between gap-4">
+        <div className="mt-4 flex items-end justify-between gap-4">
           <div className="flex flex-col gap-1.5">
-            <span className="skeleton h-7 w-28 rounded" />
-            <span className="skeleton h-3.5 w-20 rounded" />
+            <Skeleton className="h-7 w-28 rounded" />
+            <Skeleton className="h-3.5 w-20 rounded" />
           </div>
-          <span className="skeleton h-8 w-20 rounded" />
+          <Skeleton className="h-8 w-20 rounded" />
         </div>
       </div>
     );
@@ -43,38 +41,30 @@ const KPICard = ({
   return (
     <div
       className={cn(
-        "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+        "w-full @container/kpicard overflow-hidden rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
         className
       )}
       {...props}
     >
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-base-content/60">{title}</span>
+        <span className="min-w-0 truncate text-sm font-medium text-base-content/60">{title}</span>
         {icon && (
-          <div className="flex size-8 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
             {icon}
           </div>
         )}
       </div>
       <div className="mt-3 flex items-end justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-2xl font-bold tracking-tight">{value}</span>
+        <div className="min-w-0 flex flex-col gap-1">
+          <span className="truncate text-2xl font-bold tracking-tight">{value}</span>
           <div className="flex items-center gap-2">
             {change !== undefined && <TrendBadge value={change} size="xs" />}
             {description && (
-              <span className="text-xs text-base-content/50">{description}</span>
+              <span className="truncate text-xs text-base-content/50">{description}</span>
             )}
           </div>
         </div>
-        {sparklineData && sparklineData.length >= 2 && (
-          <Sparkline
-            data={sparklineData}
-            color={sparklineColor ?? (change !== undefined && change >= 0 ? "oklch(0.7 0.2 150)" : "oklch(0.65 0.25 25)")}
-            filled={sparklineFilled}
-            width={80}
-            height={32}
-          />
-        )}
+        {chart && <div className="shrink-0 @max-[160px]/kpicard:hidden">{chart}</div>}
       </div>
     </div>
   );

package/src/components/KPICard/types.ts

@@ -9,12 +9,8 @@ export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
   change?: number;
   /** Description text below value */
   description?: string;
-  /** Sparkline data points */
-  sparklineData?: number[];
-  /** Sparkline color */
-  sparklineColor?: string;
-  /** Whether sparkline is filled */
-  sparklineFilled?: boolean;
+  /** Inline chart element (e.g. Sparkline, MiniBarChart, MiniAreaChart, MiniDonutChart, MiniStackedBar) */
+  chart?: ReactNode;
   /** Icon to show in the card */
   icon?: ReactNode;
   /** Loading state */

package/src/index.ts

@@ -24,6 +24,7 @@ export * from "./components/Paragraph";
 
 /** utility & atoms */
 export * from "./components/AspectRatio";
+export * from "./components/IconContainer";
 export * from "./components/Image";
 export * from "./components/Spinner";