@lindle/linoardo 1.0.20 → 1.0.22

package/dist/index.cjs

@@ -30,17 +30,18 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var iconBaseClasses = {
   mdi: ["mdi"]
 };
+
+// src/Containment/Button/states.button.ts
 var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
-var blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
 var blackAndWhitePaletteClasses = {
-  solid: tailwindMerge.twMerge(blackAndWhiteVariantClass, "bg-black text-white"),
-  outline: blackAndWhiteVariantClass,
-  ghost: "bg-neutral-300 text-white",
-  text: blackAndWhiteVariantClass,
-  filled: "bg-black text-white",
-  underlined: tailwindMerge.twMerge(blackAndWhiteVariantClass, "b"),
-  rounded: blackAndWhiteVariantClass,
-  sharp: "bg-black text-white rounded-none"
+  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
+  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
+  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
+  rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
 };
 var paletteVariantClasses = {
   primary: {
@@ -136,7 +137,9 @@ var resolveIconClassName = (icon) => {
   }
   const [library, providedName] = icon;
   const normalizedLibrary = library.trim();
-  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
+    normalizedLibrary
+  ];
   const iconName = providedName.trim();
   if (!iconName) {
     return baseClasses.join(" ");
@@ -152,12 +155,19 @@ var sizeClasses = {
   "x-large": "px-7 py-3.5 text-xl"
 };
 var iconOnlySizeClasses = {
-  "x-small": "p-2 text-xs aspect-square",
+  "x-small": "p-0 text-xs aspect-square",
   small: "p-2.5 text-sm aspect-square",
   medium: "p-3 text-base aspect-square",
   large: "p-3.5 text-lg aspect-square",
   "x-large": "p-4 text-xl aspect-square"
 };
+var iconOnlyIconSizeClasses = {
+  "x-small": "text-sm",
+  small: "text-base",
+  medium: "text-lg",
+  large: "text-xl",
+  "x-large": "text-2xl"
+};
 var Button = React3__namespace.forwardRef(
   ({
     variant = "solid",
@@ -172,28 +182,34 @@ var Button = React3__namespace.forwardRef(
     children,
     disabled,
     onClick,
+    type,
+    as,
     ...rest
   }, ref) => {
+    const Component = as ?? "button";
     const variantClass = resolveVariantClass(variant, color);
     const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
+    const iconSizeClass = iconOnly ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium : void 0;
     const blockClass = block ? "w-full" : null;
+    const isNativeButton = Component === "button";
     const isDisabled = disabled || loading;
-    const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
+    const cursor = (onClick || type === "submit") && !isDisabled ? "cursor-pointer" : "cursor-default";
     const resolvedIconClass = resolveIconClassName(icon);
     const shouldRenderIcon = Boolean(resolvedIconClass && !loading);
     const isLoadingTextProvided = loadingText !== void 0 && loadingText !== null;
     const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
     const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
     const gapClass = hasDecorators ? "gap-2" : void 0;
-    const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
-    const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", resolvedIconClass) : void 0;
+    const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none", iconSizeClass) : void 0;
+    const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", iconSizeClass, resolvedIconClass) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      Component,
       {
         ...rest,
         ref,
         onClick,
-        disabled: isDisabled,
+        disabled: isNativeButton ? isDisabled : void 0,
+        "aria-disabled": !isNativeButton ? isDisabled : void 0,
         className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
         "data-loading": loading || void 0,
         "aria-busy": loading || void 0,
@@ -217,16 +233,15 @@ var chipSizeClasses = {
   large: "text-base px-5 py-2 min-h-[2.5rem]"
 };
 var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
-var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
 var blackAndWhitePaletteClasses2 = {
-  solid: blackAndWhiteChipVariantClass,
-  outline: blackAndWhiteChipVariantClass,
-  ghost: blackAndWhiteChipVariantClass,
-  text: blackAndWhiteChipVariantClass,
-  filled: blackAndWhiteChipVariantClass,
-  underlined: blackAndWhiteChipVariantClass,
-  rounded: blackAndWhiteChipVariantClass,
-  sharp: `${blackAndWhiteChipVariantClass} rounded-none`
+  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
+  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
+  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
+  rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
 };
 var paletteVariantClasses2 = {
   primary: {
@@ -1421,7 +1436,7 @@ var paddingClasses = {
 var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100";
 var variantClasses = {
   solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30",
-  outline: "rounded-2xl border border-gray-300 bg-white shadow-none dark:border-slate-700 dark:bg-slate-900",
+  outline: "rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900",
   text: "rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent",
   ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800",
   filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20",
@@ -1635,6 +1650,143 @@ function resolveItemContent(item, index, renderItem) {
   }
   return item;
 }
+var positionClasses = {
+  fixed: "fixed inset-x-0 top-0",
+  absolute: "absolute inset-x-0 top-0",
+  sticky: "sticky inset-x-0 top-0",
+  static: "static",
+  relative: "relative"
+};
+var colorClasses = {
+  primary: "bg-primary text-white",
+  surface: "bg-white text-gray-900 border-b border-gray-200",
+  muted: "bg-gray-50 text-gray-900 border-b border-gray-200",
+  dark: "bg-gray-900 text-white",
+  transparent: "bg-transparent text-inherit"
+};
+var AppBar = ({
+  title,
+  logo,
+  logoAlt = "Logo",
+  brandHref,
+  navigation = [],
+  actions,
+  position = "static",
+  color = "surface",
+  dense = false,
+  elevated = true,
+  contained = true,
+  titlePosition = "start",
+  className,
+  children,
+  ...rest
+}) => {
+  const [mobileOpen, setMobileOpen] = React3__namespace.useState(false);
+  const isDark = color === "primary" || color === "dark";
+  const isTransparent = color === "transparent";
+  const barClass = tailwindMerge.twMerge(
+    "app-bar z-40 w-full backdrop-blur-md",
+    positionClasses[position] ?? positionClasses.static,
+    colorClasses[color] ?? colorClasses.surface,
+    elevated && !isTransparent ? "shadow-sm shadow-black/10" : void 0,
+    "relative",
+    className
+  );
+  const innerClass = tailwindMerge.twMerge(
+    "mx-auto flex w-full items-center gap-4",
+    contained ? "max-w-6xl px-4 sm:px-6 lg:px-8" : "px-4",
+    dense ? "py-2.5" : "py-4"
+  );
+  const brandTextClass = isDark ? "text-white" : "text-gray-900";
+  const navBaseClass = tailwindMerge.twMerge(
+    "inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition focus-visible:outline-none",
+    isDark ? "hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/70" : "hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+  );
+  const navActiveClass = isDark ? "bg-white/15 text-white" : "bg-primary/10 text-primary";
+  const renderNavItem = (item, index) => {
+    const { href, label, active, onClick } = item;
+    const Component = href ? "a" : "button";
+    const resolvedHref = href && href.trim().length > 0 ? href : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        href: resolvedHref,
+        onClick,
+        className: tailwindMerge.twMerge(navBaseClass, active ? navActiveClass : void 0),
+        "aria-current": active ? "page" : void 0,
+        children: label
+      },
+      `${resolvedHref ?? "item"}-${index}`
+    );
+  };
+  const brandAlignClass = titlePosition === "center" ? "justify-self-center text-center" : titlePosition === "end" ? "justify-self-end text-right" : "justify-self-start";
+  const brandNode = title || logo ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex min-w-0 items-center gap-3", brandAlignClass), children: [
+    logo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-white/10 ring-1 ring-black/5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: logo,
+        alt: logoAlt,
+        className: "h-full w-full object-cover",
+        loading: "lazy",
+        decoding: "async"
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("text-base font-semibold leading-tight", brandTextClass), children: brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: brandHref, className: "hover:underline focus-visible:outline-none", children: title }) : title }) : null })
+  ] }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { ...rest, className: barClass, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerClass, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[auto_1fr_auto] items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        navigation.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Otev\u0159\xEDt navigaci",
+            className: tailwindMerge.twMerge(
+              "inline-flex h-10 w-10 items-center justify-center rounded-xl text-xl sm:hidden",
+              isDark ? "text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/60" : "text-gray-700 hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+            ),
+            "aria-expanded": mobileOpen,
+            onClick: () => setMobileOpen((open) => !open),
+            children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: mobileOpen ? "mdi mdi-close" : "mdi mdi-menu", "aria-hidden": true })
+          }
+        ) : null,
+        navigation.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden items-center gap-1 sm:flex", "aria-label": "Hlavni navigace", children: navigation.map(renderNavItem) }) : null
+      ] }),
+      brandNode,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center justify-end gap-2", children: [
+        children,
+        actions
+      ] })
+    ] }) }),
+    navigation.length > 0 && mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "absolute inset-x-0 top-full border-t border-gray-200/70 bg-white/95 p-3 shadow-lg shadow-gray-900/5 backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "aria-label": "Mobilni navigace", children: navigation.map((item, index) => {
+      const { href, label, active, onClick } = item;
+      const Component = href ? "a" : "button";
+      const resolvedHref = href && href.trim().length > 0 ? href : void 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Component,
+        {
+          href: resolvedHref,
+          onClick: (event) => {
+            onClick?.(event);
+            setMobileOpen(false);
+          },
+          className: tailwindMerge.twMerge(
+            "flex items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition",
+            active ? "bg-primary/10 text-primary" : "text-gray-800 hover:bg-gray-100"
+          ),
+          "aria-current": active ? "page" : void 0,
+          children: [
+            label,
+            active ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-circle-small text-primary", "aria-hidden": true }) : null
+          ]
+        },
+        `${resolvedHref ?? "mobile-item"}-${index}`
+      );
+    }) }) }) }) : null
+  ] });
+};
+AppBar.displayName = "AppBar";
+var AppBar_default = AppBar;
 var containerVariants = {
   solid: "bg-gradient-to-br from-primary via-primary/90 to-indigo-600 text-white shadow-2xl shadow-primary/30",
   outline: "border border-gray-200 bg-white text-gray-900",
@@ -1778,7 +1930,17 @@ var variantMap = {
   rounded: "bg-white text-gray-900 border border-gray-200 rounded-3xl shadow-md",
   sharp: "bg-white text-gray-900 border border-gray-200 rounded-none shadow"
 };
-var radiusMap = {
+var cardRadiusMap = {
+  solid: "rounded-2xl",
+  outline: "rounded-2xl",
+  text: "rounded-2xl",
+  ghost: "rounded-2xl",
+  filled: "rounded-3xl",
+  underlined: "rounded-t-2xl",
+  rounded: "rounded-3xl",
+  sharp: "rounded-none"
+};
+var avatarRadiusMap = {
   solid: "rounded-2xl",
   outline: "rounded-2xl",
   text: "rounded-2xl",
@@ -1789,13 +1951,26 @@ var radiusMap = {
   sharp: "rounded-none"
 };
 var isDarkVariant = (variant) => variant === "filled";
-var SocialIcons = ({ socials = [], dark }) => {
+var SocialIcons = ({
+  socials = [],
+  dark
+}) => {
   if (socials.length === 0) return null;
-  const iconBase = tailwindMerge.twMerge(
+  tailwindMerge.twMerge(
     "flex h-10 w-10 items-center justify-center rounded-full border text-lg transition",
     dark ? "border-white/30 text-white hover:bg-white/10" : "border-gray-200 text-gray-600 hover:border-primary/50 hover:text-primary"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, "aria-label": link.label ?? link.icon, className: iconBase, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("mdi", link.icon), "aria-hidden": true }) }, link.href)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => (
+    // <a
+    //   key={link.href}
+    //   href={link.href}
+    //   aria-label={link.label ?? link.icon}
+    //   className={iconBase}
+    // >
+    //   <i className={twMerge('mdi', link.icon)} aria-hidden />
+    // </a>
+    /* @__PURE__ */ jsxRuntime.jsx(Button_default, { iconOnly: true, icon: link.icon, variant: "rounded", size: "x-small" })
+  )) });
 };
 var Badges = ({ badges = [], dark }) => {
   if (badges.length === 0) return null;
@@ -1805,19 +1980,14 @@ var Badges = ({ badges = [], dark }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: badges.map((badge) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeBase, children: badge.label }, badge.label)) });
 };
-var AvatarFrame = ({
-  avatar,
-  size = "md",
-  ring,
-  radius
-}) => {
+var AvatarFrame = ({ avatar, size = "md", ring, radius }) => {
   const dimension = size === "lg" ? "h-28 w-28" : "h-20 w-20";
   const ringClass = ring ? "ring-4 ring-white/80 ring-offset-4 ring-offset-transparent" : "";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: tailwindMerge.twMerge(
-        "overflow-hidden bg-gradient-to-br from-primary/10 to-primary/30",
+        "overflow-hidden bg-linear-to-br from-primary/10 to-primary/30",
         radius,
         dimension,
         ringClass
@@ -1847,14 +2017,15 @@ var ProfileCard = ({
   ...rest
 }) => {
   const baseVariant = variantMap[variant] ?? variantMap.solid;
-  const radius = radiusMap[variant] ?? "rounded-2xl";
+  const cardRadius = cardRadiusMap[variant] ?? "rounded-2xl";
+  const avatarRadius = avatarRadiusMap[variant] ?? "rounded-2xl";
   const dark = isDarkVariant(variant);
   const muted = dark ? "text-white/70" : "text-gray-600";
   const accent = dark ? "text-white" : "text-gray-900";
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, radius }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, radius: avatarRadius }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-xl font-semibold", accent), children: name }),
           role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm font-medium", muted), children: role })
@@ -1866,9 +2037,9 @@ var ProfileCard = ({
     /* @__PURE__ */ jsxRuntime.jsx(SocialIcons, { socials, dark })
   ] });
   const spotlightContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-primary/20 blur-3xl" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/20 blur-3xl" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-6 md:flex-row md:items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius }),
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-2xl font-semibold", accent), children: name }),
         role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm font-medium uppercase tracking-wide", muted), children: role }),
@@ -1879,7 +2050,7 @@ var ProfileCard = ({
     ] })
   ] });
   const splitContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-[auto,1fr] md:items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-2xl font-semibold", accent), children: name }),
@@ -1902,7 +2073,7 @@ var ProfileCard = ({
       className: tailwindMerge.twMerge(
         "profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl",
         baseVariant,
-        radius,
+        cardRadius,
         className
       ),
       children: layoutMap[layout] ?? layoutMap.classic
@@ -1960,7 +2131,7 @@ var Input = ({
   const variantClasses3 = {
     solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
     sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-    outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-transparent dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+    outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
     text: "rounded-none border-0 border-b border-transparent px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
     ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
     filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
@@ -2082,16 +2253,16 @@ function generateString(length = 5) {
   }
   return result;
 }
-var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900";
+var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
 var variantClasses2 = {
-  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent",
-  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15",
-  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25",
-  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent",
-  rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm"
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
+  text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
+  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
+  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
 };
 var sizeClasses2 = {
   "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
@@ -2173,7 +2344,7 @@ var Select = ({
   const shouldRenderPlaceholder = !multiple && placeholderText !== void 0;
   const labelShouldFloat = hasValue || isFocused;
   const labelLeftClass = "left-3";
-  const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90";
+  const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
   const handleFocus = (event) => {
     if (hidePlaceholderUntilFocus) setIsFocused(true);
     onFocus?.(event);
@@ -2209,13 +2380,13 @@ var Select = ({
         ]
       }
     ),
-    !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
+    !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
         htmlFor: selectId,
         className: tailwindMerge.twMerge(
-          "absolute transition-all duration-150 pointer-events-none text-gray-700",
+          "absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
           labelLeftClass,
           labelShouldFloat ? [
             "top-0 text-xs px-1",
@@ -2507,7 +2678,7 @@ var sizeClasses3 = {
   large: "text-lg",
   "x-large": "text-2xl"
 };
-var colorClasses = {
+var colorClasses2 = {
   primary: "text-primary",
   neutral: "text-gray-700",
   info: "text-sky-600",
@@ -2539,11 +2710,521 @@ var Icon = ({ className, icon, size, color, ...rest }) => {
   }
   const classBase = "mdi";
   const sizeClass = size ? sizeClasses3[size] ?? sizeClasses3.medium : void 0;
-  const colorClass = color ? colorClasses[color] ?? colorClasses.primary : void 0;
+  const colorClass = color ? colorClasses2[color] ?? colorClasses2.primary : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx("i", { ...rest, className: tailwindMerge.twMerge(classBase, iconValue, sizeClass, colorClass, className) });
 };
 var Icon_default = Icon;
+var placementClasses3 = {
+  topLeft: "top-4 left-4 items-start",
+  topRight: "top-4 right-4 items-end",
+  bottomLeft: "bottom-4 left-4 items-start",
+  bottomRight: "bottom-4 right-4 items-end"
+};
+var typeIconMap = {
+  info: "mdi-information-outline",
+  success: "mdi-check-circle-outline",
+  warning: "mdi-alert-outline",
+  error: "mdi-close-circle-outline"
+};
+var typeAccentMap = {
+  info: "bg-sky-50 text-sky-600",
+  success: "bg-emerald-50 text-emerald-600",
+  warning: "bg-amber-50 text-amber-700",
+  error: "bg-red-50 text-red-600"
+};
+var typeTone = {
+  info: {
+    bg: "bg-sky-50",
+    text: "text-sky-900",
+    border: "border-sky-200",
+    iconBg: "bg-sky-100",
+    iconText: "text-sky-600"
+  },
+  success: {
+    bg: "bg-emerald-50",
+    text: "text-emerald-900",
+    border: "border-emerald-200",
+    iconBg: "bg-emerald-100",
+    iconText: "text-emerald-600"
+  },
+  warning: {
+    bg: "bg-amber-50",
+    text: "text-amber-900",
+    border: "border-amber-200",
+    iconBg: "bg-amber-100",
+    iconText: "text-amber-700"
+  },
+  error: {
+    bg: "bg-red-50",
+    text: "text-red-900",
+    border: "border-red-200",
+    iconBg: "bg-red-100",
+    iconText: "text-red-600"
+  }
+};
+var resolveVariantClass3 = (variant, type) => {
+  const tone = type ? typeTone[type] : void 0;
+  switch (variant) {
+    case "filled":
+      return tailwindMerge.twMerge(
+        tone?.bg ?? "bg-primary/10",
+        tone?.text ?? "text-primary",
+        "border border-transparent shadow-none"
+      );
+    case "outline":
+      return tailwindMerge.twMerge(
+        "bg-white/90",
+        tone?.text ?? "text-gray-900",
+        tone?.border ?? "border-primary/20",
+        "border-[1.5px]"
+      );
+    case "ghost":
+      return tailwindMerge.twMerge(
+        "bg-transparent shadow-none border border-transparent",
+        tone?.text ?? "text-gray-900"
+      );
+    case "solid":
+    default:
+      return "bg-white/95 text-gray-900 border border-gray-200";
+  }
+};
+var resolveIconClassName4 = (icon) => {
+  if (!icon) return void 0;
+  if (typeof icon === "string") {
+    const trimmed = icon.trim();
+    if (!trimmed) return void 0;
+    if (trimmed.includes(" ")) return trimmed;
+    const normalized2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+    return `mdi ${normalized2}`;
+  }
+  const [library, iconName] = icon;
+  const normalized = iconName?.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
+  return `mdi ${library} ${normalized}`.trim();
+};
+var resolveIconNode = (icon, fallbackClassName) => {
+  if (React3__namespace.isValidElement(icon)) return icon;
+  const iconClassName = resolveIconClassName4(icon) ?? fallbackClassName;
+  if (!iconClassName) return null;
+  const hasBase = iconClassName.split(" ").some((token) => token.trim() === "mdi");
+  const hasGlyph = iconClassName.includes("mdi-");
+  const finalClassName = hasBase && hasGlyph ? iconClassName : `mdi ${iconClassName}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsx("i", { className: finalClassName, "aria-hidden": true });
+};
+var NotificationCard = ({ item }) => {
+  const {
+    key,
+    message,
+    description,
+    icon,
+    closeIcon,
+    closable = true,
+    btn,
+    onClick,
+    className,
+    style,
+    role = "status",
+    type,
+    variant = "solid",
+    ...rest
+  } = item;
+  const hasMessage = message !== void 0 && message !== null;
+  const hasDescription = description !== void 0 && description !== null;
+  const hasContent = hasMessage || hasDescription;
+  const accentClass = type ? typeAccentMap[type] : void 0;
+  const iconNode = resolveIconNode(icon, type ? `mdi ${typeIconMap[type]}` : void 0);
+  const closeIconNode = resolveIconNode(closeIcon, "mdi mdi-close");
+  const variantClass = resolveVariantClass3(variant, type);
+  const toneIconBg = type ? typeTone[type]?.iconBg : void 0;
+  const toneIconText = type ? typeTone[type]?.iconText : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      ...rest,
+      role,
+      className: tailwindMerge.twMerge(
+        "pointer-events-auto flex w-88 max-w-[calc(100vw-2.5rem)] gap-3 rounded-2xl p-4 shadow-xl ring-1 ring-black/5 backdrop-blur-sm transition hover:-translate-y-0.5 hover:shadow-2xl focus:outline-none",
+        "dark:border-gray-800 dark:bg-gray-900/95 dark:text-gray-50 dark:ring-white/5",
+        variantClass,
+        className
+      ),
+      style,
+      onClick,
+      children: [
+        iconNode ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(
+              "mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-xl",
+              toneIconBg ?? accentClass ?? "bg-primary/10",
+              toneIconText ?? "text-primary"
+            ),
+            children: iconNode
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          hasContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            hasMessage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] font-semibold leading-5 text-gray-900 dark:text-white", children: message }) : null,
+            hasDescription ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-gray-600 dark:text-gray-300", children: description }) : null
+          ] }) : null,
+          btn ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1 text-sm", children: btn }) : null
+        ] }),
+        closable ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Zav\u0159\xEDt upozorn\u011Bn\xED",
+            className: "-mr-1 -mt-1 h-8 w-8 shrink-0 rounded-full text-gray-500 transition hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white",
+            onClick: (event) => {
+              event.stopPropagation();
+              item.onClose?.();
+            },
+            children: closeIconNode
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var Notification = ({
+  items = [],
+  placement = "topRight",
+  gap = 12,
+  containerClassName,
+  className,
+  ...rest
+}) => {
+  if (!items.length) return null;
+  const grouped = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const resolvedKey = item.key ?? `notification-${item.message ?? Math.random()}`;
+    const resolvedPlacement = item.placement ?? placement;
+    const group = grouped.get(resolvedPlacement) ?? [];
+    group.push({ ...item, key: resolvedKey });
+    grouped.set(resolvedPlacement, group);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from(grouped.entries()).map(([groupPlacement, groupItems]) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tailwindMerge.twMerge(
+        "pointer-events-none fixed z-70 flex w-full max-w-[24rem] flex-col",
+        placementClasses3[groupPlacement],
+        containerClassName,
+        className
+      ),
+      style: { gap: `${gap}px` },
+      ...rest,
+      children: groupItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NotificationCard, { item }, item.key))
+    },
+    groupPlacement
+  )) });
+};
+var Notification_default = Notification;
+var clampPercent = (value) => {
+  if (value === void 0 || value === null || Number.isNaN(value)) {
+    return 0;
+  }
+  return Math.min(100, Math.max(0, value));
+};
+var statusIconMap = {
+  success: "mdi mdi-check",
+  exception: "mdi mdi-alert"
+};
+var strokeColorByStatus = {
+  normal: "rgb(99 102 241)",
+  active: "rgb(99 102 241)",
+  success: "rgb(16 185 129)",
+  exception: "rgb(239 68 68)"
+};
+var trailColorDefault = "rgb(229 231 235)";
+var resolveStroke = (status, strokeColor, gradientId) => {
+  if (!strokeColor) {
+    return { color: strokeColorByStatus[status] };
+  }
+  if (typeof strokeColor === "string") {
+    return { color: strokeColor };
+  }
+  const id = gradientId ?? `progress-gradient-${Math.random().toString(16).slice(2)}`;
+  return {
+    color: `url(#${id})`,
+    gradient: { id, from: strokeColor.from, to: strokeColor.to },
+    cssGradient: `linear-gradient(90deg, ${strokeColor.from}, ${strokeColor.to})`
+  };
+};
+var resolveRotation = (gapPosition) => {
+  switch (gapPosition) {
+    case "bottom":
+      return 90;
+    case "left":
+      return 180;
+    case "right":
+      return 0;
+    case "top":
+    default:
+      return -90;
+  }
+};
+var buildGradientId = (strokeColor) => {
+  if (strokeColor && typeof strokeColor !== "string") {
+    const from = strokeColor.from.replace(/\W+/g, "");
+    const to = strokeColor.to.replace(/\W+/g, "");
+    return `progress-gradient-${from}-${to}`;
+  }
+  return void 0;
+};
+var InfoNode = ({ status, percent, successPercent, format }) => {
+  const iconClass = status === "success" || status === "exception" ? statusIconMap[status] : void 0;
+  const content = typeof format === "function" ? format(percent, successPercent) : iconClass ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconClass, "aria-hidden": true }) : `${Math.round(percent)}%`;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: content });
+};
+var renderSteps = (percent, steps, status, strokeStyle, trailColor, height) => {
+  const filled = Math.round(percent / 100 * steps);
+  const stepStyle = height ? { height } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center gap-1", style: stepStyle, children: Array.from({ length: steps }).map((_, idx) => {
+    const isFilled = idx < filled;
+    const resolvedStyle = {
+      ...isFilled ? strokeStyle : { backgroundColor: trailColor ?? trailColorDefault },
+      height
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: tailwindMerge.twMerge(
+          "flex-1 rounded-full",
+          isFilled ? void 0 : "bg-gray-200 dark:bg-gray-800",
+          status === "active" && isFilled ? "animate-pulse" : void 0
+        ),
+        style: resolvedStyle
+      },
+      idx
+    );
+  }) });
+};
+var LineProgress = ({
+  percent,
+  status,
+  successPercent,
+  format,
+  showInfo = true,
+  strokeWidth,
+  trailColor,
+  strokeColor,
+  success,
+  size = "default",
+  steps,
+  className,
+  style,
+  ...rest
+}) => {
+  const height = strokeWidth ?? (size === "small" ? 6 : size === "large" ? 12 : 8);
+  const gradientId = buildGradientId(strokeColor);
+  const { color, gradient, cssGradient } = resolveStroke(status, strokeColor, gradientId);
+  const stepStrokeStyle = gradient ? { backgroundImage: cssGradient } : { backgroundColor: color };
+  const lineStyle = {
+    height,
+    backgroundColor: trailColor ?? trailColorDefault
+  };
+  const barStyle = {
+    width: `${percent}%`,
+    height,
+    backgroundColor: color,
+    background: gradient ? cssGradient : color
+  };
+  const successWidth = successPercent ? Math.min(successPercent, percent) : 0;
+  const successColor = success?.strokeColor ?? "rgb(16 185 129)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-full items-center gap-3", className), style, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-hidden rounded-full", style: lineStyle, children: typeof steps === "number" && steps > 1 ? renderSteps(percent, steps, status, stepStrokeStyle, trailColor, height) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tailwindMerge.twMerge(
+            "h-full rounded-full transition-[width] duration-300 ease-out",
+            status === "active" ? "animate-pulse" : void 0
+          ),
+          style: barStyle
+        }
+      ),
+      successWidth > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-out",
+          style: { width: `${successWidth}%`, height, backgroundColor: successColor }
+        }
+      ) : null
+    ] }) }),
+    showInfo ? /* @__PURE__ */ jsxRuntime.jsx(InfoNode, { status, percent, successPercent, format }) : null
+  ] });
+};
+var CircleProgress = ({
+  percent,
+  status,
+  successPercent,
+  format,
+  showInfo = true,
+  strokeWidth,
+  trailColor,
+  strokeColor,
+  success,
+  width = 120,
+  type,
+  gapDegree,
+  gapPosition = "top",
+  className,
+  style,
+  ...rest
+}) => {
+  const stroke = strokeWidth ?? 10;
+  const radius = (width - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const gap = type === "dashboard" ? gapDegree ?? 75 : gapDegree ?? 0;
+  const perimeter = circumference - gap / 360 * circumference;
+  const dashOffsetBase = gap / 360 * circumference / 2;
+  const dashArray = `${perimeter} ${circumference}`;
+  const gradientId = buildGradientId(strokeColor);
+  const { color, gradient } = resolveStroke(status, strokeColor, gradientId);
+  const rotation = resolveRotation(gapPosition);
+  const successColor = success?.strokeColor ?? "rgb(16 185 129)";
+  const progressDashOffset = (100 - percent) / 100 * perimeter + dashOffsetBase;
+  const successDashOffset = (100 - successPercent) / 100 * perimeter + dashOffsetBase;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("inline-flex flex-col items-center justify-center", className), style, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", style: { width, height: width }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width,
+        height: width,
+        viewBox: `0 0 ${width} ${width}`,
+        className: "absolute inset-0 overflow-visible",
+        style: { transform: `rotate(${rotation}deg)` },
+        children: [
+          gradient ? /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradient.id, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: gradient.from }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: gradient.to })
+          ] }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: width / 2,
+              cy: width / 2,
+              r: radius,
+              strokeWidth: stroke,
+              stroke: trailColor ?? trailColorDefault,
+              fill: "none",
+              strokeDasharray: dashArray,
+              strokeDashoffset: dashOffsetBase,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: width / 2,
+              cy: width / 2,
+              r: radius,
+              strokeWidth: stroke,
+              stroke: color,
+              fill: "none",
+              strokeDasharray: dashArray,
+              strokeDashoffset: progressDashOffset,
+              strokeLinecap: "round",
+              className: tailwindMerge.twMerge(status === "active" ? "animate-[spin_3s_linear_infinite]" : void 0)
+            }
+          ),
+          successPercent > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: width / 2,
+              cy: width / 2,
+              r: radius,
+              strokeWidth: stroke,
+              stroke: successColor,
+              fill: "none",
+              strokeDasharray: dashArray,
+              strokeDashoffset: successDashOffset,
+              strokeLinecap: "round"
+            }
+          ) : null
+        ]
+      }
+    ),
+    showInfo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(InfoNode, { status, percent, successPercent, format }) }) }) : null
+  ] }) });
+};
+var Progress = (props) => {
+  const toNumber2 = (value) => {
+    if (typeof value === "string") {
+      const parsed = Number.parseFloat(value);
+      return Number.isFinite(parsed) ? parsed : void 0;
+    }
+    return value;
+  };
+  const {
+    percent: rawPercent = 0,
+    success,
+    status: providedStatus,
+    type = "line",
+    showInfo = true,
+    format,
+    strokeWidth,
+    trailColor,
+    strokeColor,
+    width,
+    size,
+    steps,
+    gapDegree,
+    gapPosition,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const percent = clampPercent(toNumber2(rawPercent));
+  const successPercent = clampPercent(toNumber2(success?.percent));
+  const status = providedStatus ?? (percent >= 100 ? "success" : "normal");
+  const resolvedClassName = tailwindMerge.twMerge("min-w-[200px]", className);
+  if (type === "circle" || type === "dashboard") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CircleProgress,
+      {
+        ...restProps,
+        type,
+        percent,
+        successPercent,
+        success,
+        status,
+        showInfo,
+        className: resolvedClassName,
+        format,
+        strokeWidth,
+        trailColor,
+        strokeColor,
+        width,
+        gapDegree,
+        gapPosition,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LineProgress,
+    {
+      percent,
+      successPercent,
+      success,
+      status,
+      showInfo,
+      className: resolvedClassName,
+      format,
+      strokeWidth,
+      trailColor,
+      strokeColor,
+      size,
+      steps,
+      style,
+      ...restProps
+    }
+  );
+};
+var Progress_default = Progress;
 
+exports.AppBar = AppBar_default;
 exports.Button = Button_default;
 exports.Card = Card_default;
 exports.Chip = Chip_default;
@@ -2557,7 +3238,9 @@ exports.List = List_default;
 exports.ListItem = Item_default;
 exports.Masonry = Masonry_default;
 exports.Menu = Menu_default;
+exports.Notification = Notification_default;
 exports.ProfileCard = ProfileCard_default;
+exports.Progress = Progress_default;
 exports.Select = Select_default;
 exports.Slider = Slider_default;
 exports.Switch = Switch_default;