@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/components/effect/GlassEffect.tsx

@@ -0,0 +1,221 @@
+/**
+ * GlassEffect — frosted glass overlay using SVG.
+ *
+ * Creates a frosted glass appearance by layering:
+ * 1. A blurred fractal noise texture (frosted glass refraction/caustics effect)
+ * 2. A subtle blue-tinted overlay
+ * 3. A white specular highlight at the top edge
+ * 4. A diagonal gradient border: white at corners, blue in middle
+ *
+ * Border radius is captured from the parent via ResizeObserver.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative rounded-xl overflow-hidden">
+ *   <BackgroundImage />
+ *   <GlassEffect />
+ *   <Content />
+ * </div>
+ * ```
+ */
+import { useEffect, useId, useRef, useState } from "react";
+import { useApplicationContext } from "../../context/context";
+
+export interface GlassEffectProps {
+  /** Border width style (default: "medium") */
+  showBorder?: boolean;
+}
+
+export function GlassEffect({ showBorder = true }: GlassEffectProps) {
+  const { currentColorScheme } = useApplicationContext();
+  const isDark = currentColorScheme === "dark";
+
+  const [dimensions, setDimensions] = useState(() => ({ width: 1, height: 1, borderRadius: "0" }));
+
+  const containerRef = useRef<SVGSVGElement>(null);
+
+  const id = useId();
+  const clipId = `${id}glassClip`;
+  const borderGradId = `${id}glassBorder`;
+
+  const strokeW = showBorder ? 1.5 : 0;
+
+  // Capture parent dimensions & border-radius
+  useEffect(() => {
+    const el = containerRef.current?.parentElement as HTMLElement;
+    if (!el) return;
+
+    const observe = () => {
+      setDimensions({
+        width: Math.max(1, el.offsetWidth),
+        height: Math.max(1, el.offsetHeight),
+        borderRadius: "0",
+      });
+    };
+
+    const ro = new ResizeObserver(observe);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  return (
+    <svg
+      ref={containerRef}
+      className="fabric-style-effect fabric-glassEffect overflow-hidden rounded-[inherit]"
+      style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}
+      viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+      preserveAspectRatio="none"
+    >
+      <defs>
+        {/* Base tint layer - subtle blue wash */}
+        <linearGradient id={`${id}glassBgBase`} x1="0" y1="0" x2="1" y2="1">
+          {isDark ? (
+            <>
+              <stop offset="0%" stopColor="rgba(180,220,255,0.03)" />
+              <stop offset="50%" stopColor="rgba(140,200,240,0.02)" />
+              <stop offset="100%" stopColor="rgba(120,180,230,0.025)" />
+            </>
+          ) : (
+            <>
+              <stop offset="0%" stopColor="rgba(200,235,255,0.20)" />
+              <stop offset="50%" stopColor="rgba(180,225,250,0.15)" />
+              <stop offset="100%" stopColor="rgba(160,215,245,0.18)" />
+            </>
+          )}
+        </linearGradient>
+
+        {/* Top-left light refraction - warm highlight */}
+        <radialGradient id={`${id}glassSpot1`} cx="15%" cy="10%" r="55%">
+          {isDark ? (
+            <>
+              <stop offset="0%" stopColor="rgba(255,255,255,0.04)" />
+              <stop offset="100%" stopColor="rgba(255,255,255,0)" />
+            </>
+          ) : (
+            <>
+              <stop offset="0%" stopColor="rgba(255,255,255,0.30)" />
+              <stop offset="100%" stopColor="rgba(255,255,255,0)" />
+            </>
+          )}
+        </radialGradient>
+
+        {/* Center iridescent sheen - cyan tint */}
+        <radialGradient id={`${id}glassSpot2`} cx="50%" cy="45%" r="50%">
+          {isDark ? (
+            <>
+              <stop offset="0%" stopColor="rgba(180,240,255,0.06)" />
+              <stop offset="100%" stopColor="rgba(180,240,255,0)" />
+            </>
+          ) : (
+            <>
+              <stop offset="0%" stopColor="rgba(220,250,255,0.15)" />
+              <stop offset="100%" stopColor="rgba(220,250,255,0)" />
+            </>
+          )}
+        </radialGradient>
+
+        {/* Bottom-right cool highlight */}
+        <radialGradient id={`${id}glassSpot3`} cx="85%" cy="90%" r="50%">
+          {isDark ? (
+            <>
+              <stop offset="0%" stopColor="rgba(160,220,255,0.05)" />
+              <stop offset="100%" stopColor="rgba(160,220,255,0)" />
+            </>
+          ) : (
+            <>
+              <stop offset="0%" stopColor="rgba(200,240,255,0.12)" />
+              <stop offset="100%" stopColor="rgba(200,240,255,0)" />
+            </>
+          )}
+        </radialGradient>
+
+        <linearGradient id={borderGradId} x1="0" y1="0" x2="1" y2="1">
+          {isDark ? (
+            <>
+              {/* Top-left white highlight */}
+              <stop offset="0%" stopColor="rgba(255,255,255,0.25)" />
+              <stop offset="15%" stopColor="rgba(255,255,255,0.15)" />
+              {/* Transition to blue - subtle */}
+              <stop offset="35%" stopColor="rgba(139,226,249,0.18)" />
+              <stop offset="50%" stopColor="rgba(139,226,249,0.15)" />
+              <stop offset="65%" stopColor="rgba(139,226,249,0.18)" />
+              {/* Transition back to white */}
+              <stop offset="85%" stopColor="rgba(255,255,255,0.15)" />
+              {/* Bottom-right white highlight */}
+              <stop offset="100%" stopColor="rgba(255,255,255,0.25)" />
+            </>
+          ) : (
+            <>
+              {/* Top-left white highlight */}
+              <stop offset="0%" stopColor="rgba(255,255,255,0.95)" />
+              <stop offset="15%" stopColor="rgba(255,255,255,0.75)" />
+              {/* Transition to blue */}
+              <stop offset="35%" stopColor="rgba(139,226,249,0.65)" />
+              <stop offset="50%" stopColor="rgba(139,226,249,0.50)" />
+              <stop offset="65%" stopColor="rgba(139,226,249,0.65)" />
+              {/* Transition back to white */}
+              <stop offset="85%" stopColor="rgba(255,255,255,0.75)" />
+              {/* Bottom-right white highlight */}
+              <stop offset="100%" stopColor="rgba(255,255,255,0.95)" />
+            </>
+          )}
+        </linearGradient>
+      </defs>
+
+      <g clipPath={`url(#${clipId})`}>
+        {/* Liquid glass background - layered gradients for iridescent effect */}
+        <rect
+          x="0"
+          y="0"
+          width={dimensions.width}
+          height={dimensions.height}
+          rx={dimensions.borderRadius}
+          ry={dimensions.borderRadius}
+          fill={`url(#${id}glassBgBase)`}
+        />
+        <rect
+          x="0"
+          y="0"
+          width={dimensions.width}
+          height={dimensions.height}
+          rx={dimensions.borderRadius}
+          ry={dimensions.borderRadius}
+          fill={`url(#${id}glassSpot1)`}
+        />
+        <rect
+          x="0"
+          y="0"
+          width={dimensions.width}
+          height={dimensions.height}
+          rx={dimensions.borderRadius}
+          ry={dimensions.borderRadius}
+          fill={`url(#${id}glassSpot2)`}
+        />
+        <rect
+          x="0"
+          y="0"
+          width={dimensions.width}
+          height={dimensions.height}
+          rx={dimensions.borderRadius}
+          ry={dimensions.borderRadius}
+          fill={`url(#${id}glassSpot3)`}
+        />
+        {/* Glass border — gradient with white highlight at top */}
+        {strokeW > 0 && (
+          <rect
+            x="0.5"
+            y="0.5"
+            width={dimensions.width - 1}
+            height={dimensions.height - 1}
+            rx={dimensions.borderRadius}
+            ry={dimensions.borderRadius}
+            fill="none"
+            stroke={`url(#${borderGradId})`}
+            strokeWidth={strokeW}
+            vectorEffect="non-scaling-stroke"
+          />
+        )}
+      </g>
+    </svg>
+  );
+}

package/src/components/effect/MatteEffect.tsx

@@ -0,0 +1,99 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useApplicationContext } from "../../context/context";
+
+/**
+ * MatteEffect component that applies a halftone/dither matte overlay effect.
+ * Creates a subtle textured appearance using alternating transparent and semi-transparent cells.
+ * The effect is applied as an absolute overlay with z-index 0.
+ * Border radius is inherited from the parent element.
+ * Use CSS `.fabric-style-effect ~ * { z-index: 1 }` to ensure siblings render above.
+ *
+ * @example
+ * ```tsx
+ * <div className="fabric-style-effect relative rounded-md">
+ *     <MatteEffect />
+ *     <Button>Click me</Button>
+ * </div>
+ * ```
+ */
+export function MatteEffect() {
+  const { currentColorScheme } = useApplicationContext();
+  const isDark = currentColorScheme === "dark";
+
+  // Pattern cell size
+  const cellSize = 1.5;
+  // Pattern opacity for subtle effect
+  const patternOpacity = 0.05;
+
+  // Generate SVG pattern for the matte/dither effect
+  // Creates a checkerboard-like pattern with alternating transparent and semi-transparent cells
+  const patternContent = isDark ? (
+    <>
+      {/* Base: transparent */}
+      <rect width={cellSize * 2} height={cellSize * 2} fill="transparent" />
+      {/* Alternating cells with dark overlay */}
+      <rect x={0} y={0} width={cellSize} height={cellSize} fill={`rgba(0, 0, 0, ${patternOpacity})`} />
+      <rect x={cellSize} y={cellSize} width={cellSize} height={cellSize} fill={`rgba(0, 0, 0, ${patternOpacity})`} />
+      {/* Subtle highlight cells for depth */}
+      <rect x={cellSize} y={0} width={cellSize} height={cellSize} fill={`rgba(255, 255, 255, ${patternOpacity * 0.3})`} />
+      <rect x={0} y={cellSize} width={cellSize} height={cellSize} fill={`rgba(255, 255, 255, ${patternOpacity * 0.3})`} />
+    </>
+  ) : (
+    <>
+      {/* Base: transparent */}
+      <rect width={cellSize * 2} height={cellSize * 2} fill="transparent" />
+      {/* Alternating cells with light overlay */}
+      <rect x={0} y={0} width={cellSize} height={cellSize} fill={`rgba(255, 255, 255, ${patternOpacity})`} />
+      <rect x={cellSize} y={cellSize} width={cellSize} height={cellSize} fill={`rgba(255, 255, 255, ${patternOpacity})`} />
+      {/* Subtle shadow cells for depth */}
+      <rect x={cellSize} y={0} width={cellSize} height={cellSize} fill={`rgba(0, 0, 0, ${patternOpacity * 0.3})`} />
+      <rect x={0} y={cellSize} width={cellSize} height={cellSize} fill={`rgba(0, 0, 0, ${patternOpacity * 0.3})`} />
+    </>
+  );
+
+  return (
+    <svg
+      className="fabric-style-effect fabric-matteEffect absolute inset-0 size-full overflow-hidden rounded-[inherit] z-0"
+      aria-hidden="true"
+    >
+      <defs>
+        <pattern
+          id="mattePattern"
+          width={cellSize * 2}
+          height={cellSize * 2}
+          patternUnits="userSpaceOnUse"
+          patternTransform={`rotate(${isDark ? 45 : -45})`}
+        >
+          {patternContent}
+        </pattern>
+      </defs>
+
+      {/* Matte overlay — single rect with pattern fill, no extra div */}
+      <rect width="100%" height="100%" fill="url(#mattePattern)" style={{ mixBlendMode: isDark ? "overlay" : "soft-light" }} />
+    </svg>
+  );
+}

package/src/components/effect/StyleEffect.tsx

@@ -0,0 +1,36 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useGlobals } from "../../context/context";
+import { GlassEffect } from "./GlassEffect";
+import { MatteEffect } from "./MatteEffect";
+
+export function StyleEffect({ showBorder }: { showBorder?: boolean }) {
+  const { styleEffect } = useGlobals();
+
+  const E = styleEffect === "glass" ? GlassEffect : MatteEffect;
+
+  return styleEffect ? <E showBorder={showBorder} /> : null;
+}

package/src/components/empty/EmptyContent.tsx

@@ -1,52 +1,54 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { isString } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { isValidElement } from "react";
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { cn } from "@react-fabric/utilities";
+import type { ChildrenProp, ColorUnion, CssProp, TestProps } from "../../types";
+import { getColor } from "../../utils";
 import { Icon } from "../icon/Icon";
 
-export interface EmptyContentProps
-  extends CssProp,
-    TestProps,
-    Partial<ChildrenProp> {
+export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
   /**
-   * empty title
+   * Title text or custom React element displayed above the message. When omitted, the title area is hidden.
    */
-  title?: string | JSX.Element;
+  title?: string | React.ReactElement;
   /**
-   * empty message
+   * Message text or custom React element describing the empty state. This is always rendered.
    */
-  message: string | JSX.Element;
+  message: string | React.ReactElement;
   /**
-   * content size
+   * Controls the font size scale of the component. "sm" reduces sizes for compact layouts, "md" uses default larger sizes.
    */
   size?: "sm" | "md";
   /**
-   * empty icon
+   * Icon displayed above the title. Accepts a string icon name (e.g., `"icon-[mdi--alert]"`) or a custom React element. Defaults to `"icon-[mdi-light--alert]"` when omitted.
    */
   icon?: string | React.ReactElement;
+  /**
+   * Color token applied to the icon. Defaults to `"tint"` when not provided.
+   */
+  iconColor?: ColorUnion;
 }
 
 const SizeMap: KeyValue = {
@@ -55,87 +57,46 @@ const SizeMap: KeyValue = {
   md: "1.125rem",
 };
 
-const DefaultIcon = () => (
-  <svg
-    version="1.1"
-    viewBox="0 0 512 512"
-    width="1em"
-    height="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      opacity="0.5"
-      fill="currentColor"
-      d="M106.1,296.01c-0.46,0-0.92-0.05-1.37-0.14c-0.45-0.09-0.89-0.22-1.31-0.4c-0.42-0.17-0.83-0.39-1.21-0.64c-0.38-0.26-0.74-0.55-1.06-0.87c-0.33-0.33-0.62-0.68-0.87-1.07c-0.26-0.38-0.47-0.78-0.65-1.21c-0.17-0.42-0.31-0.86-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.36c0-0.46,0.04-0.92,0.13-1.37s0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c0.32-0.33,0.68-0.62,1.06-0.87s0.79-0.47,1.21-0.65c0.42-0.17,0.86-0.31,1.31-0.4c0.9-0.18,1.83-0.18,2.73,0c0.45,0.09,0.89,0.23,1.31,0.4c0.43,0.18,0.83,0.4,1.21,0.65s0.74,0.54,1.07,0.87c0.32,0.32,0.61,0.68,0.87,1.06c0.25,0.38,0.47,0.79,0.64,1.21s0.31,0.86,0.4,1.31s0.14,0.91,0.14,1.37c0,0.45-0.05,0.91-0.14,1.36c-0.09,0.45-0.23,0.89-0.4,1.31c-0.17,0.43-0.39,0.83-0.64,1.21c-0.26,0.39-0.55,0.74-0.87,1.07c-0.33,0.32-0.69,0.61-1.07,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4S106.55,296.01,106.1,296.01z"
-    />
-    <path
-      opacity="0.5"
-      fill="currentColor"
-      d="M475.5,458.25H36.5c-8.78,0-16.58-4.58-20.86-12.24c-4.28-7.67-4.09-16.71,0.51-24.19l70.18-114.04c2.03-3.29,6.34-4.32,9.63-2.29c3.29,2.03,4.32,6.34,2.29,9.63L28.07,429.16c-1.91,3.1-1.99,6.84-0.21,10.02s5.01,5.07,8.64,5.07H475.5c3.64,0,6.87-1.9,8.64-5.07s1.7-6.92-0.21-10.02l-219.5-356.7c-1.84-3-4.92-4.71-8.43-4.71s-6.59,1.72-8.43,4.71L124.24,272.88c-2.03,3.29-6.34,4.32-9.63,2.29c-3.29-2.03-4.32-6.34-2.29-9.63L235.64,65.13C240.03,58,247.64,53.75,256,53.75s15.97,4.25,20.36,11.38l219.5,356.7c4.6,7.48,4.79,16.52,0.51,24.19C492.08,453.67,484.28,458.25,475.5,458.25z"
-    />
-    <path
-      opacity="0.5"
-      fill="currentColor"
-      d="M354.79,279.28c-1.85,0-3.65-0.75-4.95-2.05c-0.33-0.32-0.62-0.68-0.87-1.07c-0.26-0.37-0.47-0.78-0.65-1.2c-0.17-0.43-0.31-0.87-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.37c0-0.46,0.04-0.92,0.13-1.37c0.09-0.44,0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c1.62-1.63,4.04-2.37,6.31-1.91c0.45,0.09,0.89,0.22,1.31,0.4c0.43,0.17,0.83,0.39,1.21,0.64c0.39,0.25,0.74,0.55,1.06,0.87c0.33,0.32,0.62,0.68,0.88,1.06c0.25,0.38,0.46,0.79,0.64,1.21c0.18,0.42,0.31,0.87,0.4,1.31c0.09,0.45,0.14,0.91,0.14,1.37c0,0.46-0.05,0.92-0.14,1.37c-0.09,0.44-0.22,0.88-0.4,1.31c-0.18,0.42-0.39,0.83-0.64,1.2c-0.26,0.39-0.55,0.75-0.88,1.07c-0.32,0.32-0.67,0.61-1.06,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4C355.7,279.23,355.24,279.28,354.79,279.28z"
-    />
-    <path
-      opacity="0.5"
-      fill="currentColor"
-      d="M403.86,423.48H108.14c-10.56,0-20.31-5.72-25.46-14.94c-5.15-9.21-4.91-20.52,0.62-29.51l147.86-240.29c5.35-8.69,14.63-13.88,24.84-13.88s19.49,5.19,24.84,13.88l68.87,111.91c2.03,3.29,1,7.6-2.29,9.63c-3.29,2.02-7.6,1-9.63-2.29l-68.87-111.91c-2.78-4.52-7.61-7.22-12.91-7.22s-10.13,2.7-12.91,7.22L95.22,386.37c-2.88,4.67-3,10.55-0.32,15.34c2.68,4.79,7.75,7.77,13.24,7.77h295.72c5.49,0,10.56-2.98,13.24-7.77c2.68-4.79,2.55-10.67-0.32-15.34l-54.14-87.97c-2.03-3.29-1-7.6,2.29-9.63c3.29-2.02,7.61-1,9.63,2.29l54.14,87.97c5.53,8.99,5.77,20.3,0.62,29.51C424.17,417.76,414.42,423.48,403.86,423.48z"
-    />
-    <path
-      fill="currentColor"
-      d="M270.12,335.13h-28.24c-6.17,0-11.22-4.83-11.5-10.99l-0.5-11.01c-0.18-3.86,2.81-7.14,6.67-7.31 c3.85-0.21,7.14,2.81,7.31,6.67l0.4,8.64h23.49l5.23-114.15h-33.96l3.79,82.55c0.18,3.86-2.81,7.14-6.67,7.31 c-0.11,0.01-0.22,0.01-0.33,0.01c-3.72,0-6.81-2.93-6.99-6.68l-3.91-85.15c-0.14-3.13,1.01-6.22,3.17-8.48 c2.16-2.26,5.2-3.56,8.33-3.56h39.17c3.13,0,6.16,1.3,8.33,3.56c2.16,2.26,3.32,5.35,3.17,8.48l-5.46,119.12 C281.34,330.3,276.29,335.13,270.12,335.13z"
-    />
-    <path
-      fill="currentColor"
-      d="M268.47,394.55h-24.94c-4.83,0-9.39-2.12-12.5-5.81s-4.44-8.54-3.63-13.3l2.69-15.79 c1.34-7.89,8.13-13.61,16.13-13.61h19.56c8,0,14.78,5.73,16.13,13.61l2.69,15.79c0.81,4.76-0.51,9.61-3.63,13.3 S273.3,394.55,268.47,394.55z M246.22,360.04c-1.15,0-2.13,0.83-2.33,1.96l-2.69,15.79c-0.16,0.94,0.26,1.61,0.52,1.92 c0.26,0.31,0.85,0.84,1.8,0.84h24.94c0.95,0,1.54-0.53,1.8-0.84c0.26-0.31,0.68-0.98,0.52-1.92L268.11,362 c-0.19-1.14-1.17-1.96-2.33-1.96H246.22z"
-    />
-  </svg>
-);
-
-export const EmptyContent = ({
-  children,
-  title,
-  message,
-  icon,
-  className,
-  size,
-  ...test
-}: EmptyContentProps) => {
+/**
+ * Displays a message and optional icon to represent an empty state, such as when no data is available.
+ * Supports customizable title, message, icon, size, and action buttons via children.
+ * When no icon is provided, a default alert icon is shown.
+ *
+ * @example
+ * ```tsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   iconColor="tint-600"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Retry")}>Retry</Button>
+ * </EmptyContent>
+ * ```
+ */
+export function EmptyContent({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps) {
   return (
     <div
-      className={classNames(
-        "p-6 flex flex-col items-center area-content",
-        className,
-      )}
+      className={cn("p-6 flex flex-col items-center area-content", className)}
       style={
         size && {
-          fontSize: SizeMap[size],
+          fontSize: SizeMap[size] as string,
         }
       }
       {...test}
     >
-      <div className="leading-none" style={{ fontSize: "4em" }}>
-        {isString(icon) && <Icon icon={icon} />}
-        {isValidElement(icon) && icon}
-        {!icon && <DefaultIcon />}
+      <div className="leading-none opacity-80" style={{ fontSize: "2em", color: getColor(iconColor ?? "tint") }}>
+        <Icon icon={icon ?? "icon-[mdi-light--alert]"} />
       </div>
       {title && (
-        <p
-          className="font-medium text-center text-dimmed"
-          style={{ fontSize: "1.5em" }}
-        >
+        <div className="font-medium text-center text-dimmed" style={{ fontSize: "1.25em" }}>
           {title}
-        </p>
+        </div>
       )}
-      <p
-        className="font-medium text-center text-muted"
-        style={{ fontSize: "0.875em" }}
-      >
+      <div className="font-medium text-center text-muted" style={{ fontSize: "0.875em" }}>
         {message}
-      </p>
+      </div>
       <div className="flex gap-1 pt-6">{children}</div>
     </div>
   );
-};
+}