@lindle/linoardo 1.0.18 → 1.0.20

package/dist/index.cjs

@@ -412,7 +412,15 @@ var Chip = React3.forwardRef(
         "aria-disabled": disabled || void 0,
         "aria-pressed": filter ? selected : void 0,
         "data-selected": selected || void 0,
-        className: tailwindMerge.twMerge(chipBaseClasses, sizeClass, pillClass, variantClass, cursorClass, selectedClass, className),
+        className: tailwindMerge.twMerge(
+          chipBaseClasses,
+          sizeClass,
+          pillClass,
+          variantClass,
+          cursorClass,
+          selectedClass,
+          className
+        ),
         onClick: interactive ? handleClick : void 0,
         onKeyDown: interactive ? handleKeyDown : onKeyDown,
         children: [
@@ -546,7 +554,16 @@ var ListItem = React3__namespace.forwardRef((props, ref) => {
         prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500", children: prepend }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 text-left", children: [
           overline && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500", children: overline }),
-          title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate font-medium text-gray-900", active ? accent.text : void 0), children: title }),
+          title && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: tailwindMerge.twMerge(
+                "truncate font-medium text-gray-900",
+                active ? accent.text : void 0
+              ),
+              children: title
+            }
+          ),
           subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle }),
           children
         ] }),
@@ -619,7 +636,10 @@ var List = React3__namespace.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React3__namespace.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React3__namespace.Children.map(
+        child.props.children,
+        enhanceChild
+      );
       if (nestedChildren !== child.props.children) {
         return React3__namespace.cloneElement(child, void 0, nestedChildren);
       }
@@ -633,7 +653,15 @@ var List = React3__namespace.forwardRef((props, ref) => {
       ...rest,
       ref,
       role: role ?? "list",
-      className: tailwindMerge.twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className),
+      className: tailwindMerge.twMerge(
+        listBaseClasses,
+        variantClass,
+        roundedClass,
+        dividerClass,
+        gapClass,
+        navClass,
+        className
+      ),
       children: resolvedChildren
     }
   );
@@ -819,13 +847,17 @@ var traverseNode = (node, value) => {
   if (!React3.isValidElement(node)) {
     return { node, changed: false };
   }
-  const { node: mappedChildren, changed: childrenChanged } = traverseNode(node.props.children, value);
-  const shouldInject = hasMarker(node.type);
+  const element = node;
+  const { node: mappedChildren, changed: childrenChanged } = traverseNode(
+    element.props.children,
+    value
+  );
+  const shouldInject = hasMarker(element.type);
   if (!shouldInject && !childrenChanged) {
     return { node, changed: false };
   }
   const injectedProps = shouldInject ? { [EXPANSION_PANEL_CONTEXT_PROP]: value } : void 0;
-  const cloned = mappedChildren === void 0 ? React3.cloneElement(node, injectedProps) : React3.cloneElement(node, injectedProps, mappedChildren);
+  const cloned = mappedChildren === void 0 ? React3.cloneElement(element, injectedProps) : React3.cloneElement(element, injectedProps, mappedChildren);
   return { node: cloned, changed: true };
 };
 var injectExpansionPanelContext = (children, value) => traverseNode(children, value).node;
@@ -916,8 +948,17 @@ var ExpansionPanelItemInner = (props) => {
   const densityPadding = densityClasses2[density] ?? densityClasses2.default;
   const disabledClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
   const titleClass = isExpanded ? accent.text : void 0;
-  const activeBorderClass = tailwindMerge.twMerge("border-l-2 border-transparent", isExpanded ? accent.border : void 0);
-  const defaultToggleIcon = /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200", "aria-hidden": true });
+  const activeBorderClass = tailwindMerge.twMerge(
+    "border-l-2 border-transparent",
+    isExpanded ? accent.border : void 0
+  );
+  const defaultToggleIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    "i",
+    {
+      className: "mdi mdi-chevron-down text-lg leading-none transition-transform duration-200",
+      "aria-hidden": true
+    }
+  );
   const hasContent = Boolean(children ?? text);
   const contentAnimationClass = isExpanded ? "pb-5 opacity-100" : "pb-0 opacity-0";
   const toggleIconNode = hideToggleIcon ? null : isExpanded && collapseIcon ? collapseIcon : expandIcon ?? defaultToggleIcon;
@@ -1120,7 +1161,13 @@ var ExpansionPanelInner = (props, forwardedRef) => {
     {
       ...rest,
       ref: forwardedRef,
-      className: tailwindMerge.twMerge("expansion-panel flex w-full flex-col text-gray-900", variantClass, shapeClass, layoutClass, className),
+      className: tailwindMerge.twMerge(
+        "expansion-panel flex w-full flex-col text-gray-900",
+        variantClass,
+        shapeClass,
+        layoutClass,
+        className
+      ),
       children: enhancedChildren
     }
   );
@@ -1196,24 +1243,46 @@ var Dialog = React3__namespace.forwardRef((props, forwardedRef) => {
   ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     activator ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex", children: activator }) : null,
-    shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(containerBaseClasses, containerClassName), "data-state": state, "aria-hidden": !open, children: [
-      overlayNode,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ...rest,
-          ref: forwardedRef,
-          id,
-          role: roleProp,
-          tabIndex,
-          "aria-modal": ariaModal,
-          className: tailwindMerge.twMerge(panelBaseClasses, fullscreen ? "h-full w-full max-w-none rounded-none" : void 0, className),
-          style: resolvedStyle,
-          "data-state": state,
-          children
-        }
-      ) })
-    ] }) : null
+    shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: tailwindMerge.twMerge(containerBaseClasses, containerClassName),
+        "data-state": state,
+        "aria-hidden": !open,
+        children: [
+          overlayNode,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tailwindMerge.twMerge(
+                panelWrapperClasses,
+                fullscreen ? "h-full items-stretch" : "mx-auto"
+              ),
+              "data-state": state,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ...rest,
+                  ref: forwardedRef,
+                  id,
+                  role: roleProp,
+                  tabIndex,
+                  "aria-modal": ariaModal,
+                  className: tailwindMerge.twMerge(
+                    panelBaseClasses,
+                    fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
+                    className
+                  ),
+                  style: resolvedStyle,
+                  "data-state": state,
+                  children
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) : null
   ] });
 });
 Dialog.displayName = "Dialog";
@@ -1248,19 +1317,19 @@ var arrowPlacementClasses = {
   bottom: "left-1/2 bottom-full -translate-x-1/2 translate-y-1/2",
   "bottom-start": "left-4 bottom-full translate-y-1/2",
   "bottom-end": "right-4 bottom-full translate-y-1/2",
-  left: "right-full top-1/2 -translate-y-1/2 translate-x-1/2",
-  "left-start": "right-full top-4 translate-x-1/2",
-  "left-end": "right-full bottom-4 translate-x-1/2",
-  right: "left-full top-1/2 -translate-y-1/2 -translate-x-1/2",
-  "right-start": "left-full top-4 -translate-x-1/2",
-  "right-end": "left-full bottom-4 -translate-x-1/2"
+  left: "left-full top-1/2 -translate-y-1/2 -translate-x-1/2",
+  "left-start": "left-full top-4 -translate-x-1/2",
+  "left-end": "left-full bottom-4 -translate-x-1/2",
+  right: "right-full top-1/2 -translate-y-1/2 translate-x-1/2",
+  "right-start": "right-full top-4 translate-x-1/2",
+  "right-end": "right-full bottom-4 translate-x-1/2"
 };
 var ToolTip = React3__namespace.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
     placement = "top",
-    arrow = true,
+    arrow = false,
     disabled = false,
     persistent = false,
     showOnHover = true,
@@ -1301,25 +1370,45 @@ var ToolTip = React3__namespace.forwardRef((props, forwardedRef) => {
     }
     return classes.join(" ");
   })();
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge(wrapperBaseClasses, "group/tooltip", wrapperClassName), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex max-w-full", children: activator }),
-    shouldRenderTooltip ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ...rest,
-        ref: forwardedRef,
-        role: "tooltip",
-        id,
-        "aria-hidden": persistent || disabled ? void 0 : true,
-        className: tailwindMerge.twMerge(tooltipBaseClasses, placementClasses2[placement], visibilityClasses, pointerClasses, className),
-        style: resolvedStyle,
-        children: [
-          children,
-          arrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge(arrowBaseClasses, arrowPlacementClasses[placement]), "aria-hidden": true, "data-arrow": true })
-        ]
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: tailwindMerge.twMerge(wrapperBaseClasses, "group/tooltip", wrapperClassName),
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex max-w-full", children: activator }),
+        shouldRenderTooltip ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ...rest,
+            ref: forwardedRef,
+            role: "tooltip",
+            id,
+            "aria-hidden": persistent || disabled ? void 0 : true,
+            className: tailwindMerge.twMerge(
+              tooltipBaseClasses,
+              placementClasses2[placement],
+              visibilityClasses,
+              pointerClasses,
+              className
+            ),
+            style: resolvedStyle,
+            children: [
+              children,
+              arrow && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: tailwindMerge.twMerge(arrowBaseClasses, arrowPlacementClasses[placement]),
+                  "aria-hidden": true,
+                  "data-arrow": true
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
 });
 ToolTip.displayName = "ToolTip";
 var ToolTip_default = ToolTip;
@@ -1329,22 +1418,31 @@ var paddingClasses = {
   md: "p-4",
   lg: "p-6"
 };
-var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors";
+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",
-  outline: "rounded-2xl border border-gray-300 bg-white shadow-none",
-  text: "rounded-2xl border border-transparent bg-transparent shadow-none",
-  ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none",
-  filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm",
-  underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none",
-  rounded: "rounded-3xl border border-gray-200 bg-white shadow-md",
-  sharp: "rounded-none border border-gray-200 bg-white shadow-md"
-};
-var CardRoot = React3.forwardRef(function Card({ className, children, variant = "solid", padding = "md", interactive = false, ...rest }, ref) {
+  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",
+  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",
+  underlined: "rounded-2xl border border-transparent border-b border-b-gray-200 shadow-none dark:border-transparent dark:border-b-slate-700 dark:bg-transparent",
+  rounded: "rounded-3xl border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25",
+  sharp: "rounded-none border border-gray-200 bg-white shadow-md dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/25"
+};
+var CardRoot = React3.forwardRef(function Card({
+  className,
+  children,
+  variant = "solid",
+  padding = "md",
+  interactive = false,
+  dividers = true,
+  ...rest
+}, ref) {
   const variantClass = variantClasses[variant] ?? variantClasses.solid;
   const paddingClass = paddingClasses[padding] ?? paddingClasses.md;
-  const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2" : void 0;
+  const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
   const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
+  const content = applyDividers(children, dividers);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1352,28 +1450,60 @@ var CardRoot = React3.forwardRef(function Card({ className, children, variant =
       ref,
       tabIndex: tabIndexValue,
       className: tailwindMerge.twMerge(cardBase, variantClass, paddingClass, interactiveClass, className),
-      children
+      children: content
     }
   );
 });
-var CardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ...rest,
-    className: tailwindMerge.twMerge("card-header mb-2 flex flex-col gap-1 border-b border-gray-100 pb-3", className)
+    className: tailwindMerge.twMerge(
+      "card-header mb-2 flex flex-col gap-1 pb-3",
+      dividers ? "border-b border-gray-100 dark:border-slate-800" : void 0,
+      className
+    )
   }
 );
 var CardBody = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tailwindMerge.twMerge("card-body flex flex-col gap-3", className) });
-var CardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = ({ className, dividers = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ...rest,
-    className: tailwindMerge.twMerge("card-footer mt-3 flex flex-wrap items-center gap-3 border-t border-gray-100 pt-3", className)
+    className: tailwindMerge.twMerge(
+      "card-footer mt-3 flex flex-wrap items-center gap-3 pt-3",
+      dividers ? "border-t border-gray-100 dark:border-slate-800" : void 0,
+      className
+    )
+  }
+);
+var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h3",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge(
+      "card-title text-lg font-semibold text-gray-900 dark:text-slate-50",
+      className
+    )
+  }
+);
+var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge(
+      "card-subtitle text-sm font-medium text-gray-600 dark:text-slate-300",
+      className
+    )
+  }
+);
+var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ...rest,
+    className: tailwindMerge.twMerge("card-text text-sm text-gray-700 dark:text-slate-200", className)
   }
 );
-var CardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ...rest, className: tailwindMerge.twMerge("card-title text-lg font-semibold text-gray-900", className) });
-var CardSubtitle = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-subtitle text-sm font-medium text-gray-600", className) });
-var CardText = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: tailwindMerge.twMerge("card-text text-sm text-gray-700", className) });
 var CardMedia = ({ className, rounded = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "img",
   {
@@ -1399,6 +1529,388 @@ var Card2 = Object.assign(CardRoot, {
   Actions: CardActions
 });
 var Card_default = Card2;
+function applyDividers(children, dividers) {
+  return React3.Children.map(children, (child) => {
+    if (!React3.isValidElement(child)) return child;
+    if (isDividerSection(child)) {
+      return React3.cloneElement(child, { dividers: child.props.dividers ?? dividers });
+    }
+    if (hasNestedChildren(child)) {
+      return React3.cloneElement(child, {
+        children: applyDividers(child.props.children, dividers)
+      });
+    }
+    return child;
+  });
+}
+function isDividerSection(element) {
+  return element.type === CardHeader || element.type === CardFooter;
+}
+function hasNestedChildren(element) {
+  const props = element.props;
+  return "children" in props;
+}
+var masonryBaseClass = "masonry-grid w-full";
+var itemBaseClass = "masonry-item block break-inside-avoid";
+var MasonryBase = (props, ref) => {
+  const {
+    items,
+    renderItem,
+    getKey,
+    column = 2,
+    columnWidth,
+    maxColumn,
+    gutter = 16,
+    className,
+    itemClassName,
+    itemStyle,
+    children,
+    style,
+    role = "list",
+    ...rest
+  } = props;
+  const resolvedGutter = toCssLength(gutter);
+  const columnCount = resolveColumnCount(column, maxColumn, Boolean(columnWidth));
+  const layoutStyle = {
+    columnGap: resolvedGutter,
+    columnCount,
+    columnWidth: columnWidth ? toCssLength(columnWidth) : void 0,
+    columnFill: "balance",
+    ...style
+  };
+  const wrapItem = (content, key) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tailwindMerge.twMerge(itemBaseClass, itemClassName),
+      style: { breakInside: "avoid", marginBottom: resolvedGutter, width: "100%", ...itemStyle },
+      children: content
+    },
+    key
+  );
+  const renderedItems = items && items.length ? items.map((item, index) => {
+    const content = resolveItemContent(item, index, renderItem);
+    return wrapItem(content, resolveItemKey(item, index, getKey));
+  }) : React3__namespace.Children.map(children, (child, index) => wrapItem(child, resolveChildKey(child, index))) ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ref, role, className: tailwindMerge.twMerge(masonryBaseClass, className), style: layoutStyle, children: renderedItems });
+};
+var Masonry = React3__namespace.forwardRef(MasonryBase);
+Masonry.displayName = "Masonry";
+var Masonry_default = Masonry;
+function toCssLength(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function normalizeColumns(value) {
+  if (value === void 0) return void 0;
+  if (!Number.isFinite(value)) return void 0;
+  return Math.max(1, Math.floor(value));
+}
+function resolveColumnCount(column, maxColumn, hasColumnWidth) {
+  const normalizedMax = normalizeColumns(maxColumn);
+  if (hasColumnWidth) {
+    return normalizedMax;
+  }
+  const normalizedColumn = normalizeColumns(column);
+  if (normalizedColumn && normalizedMax) {
+    return Math.min(normalizedColumn, normalizedMax);
+  }
+  return normalizedColumn ?? normalizedMax;
+}
+function resolveItemKey(item, index, getKey) {
+  if (getKey) return getKey(item, index);
+  if (React3__namespace.isValidElement(item) && item.key != null) {
+    return item.key;
+  }
+  return index;
+}
+function resolveChildKey(child, index) {
+  if (React3__namespace.isValidElement(child) && child.key != null) {
+    return child.key;
+  }
+  return index;
+}
+function resolveItemContent(item, index, renderItem) {
+  if (renderItem) {
+    return renderItem(item, index);
+  }
+  return item;
+}
+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",
+  text: "bg-transparent text-gray-900",
+  ghost: "bg-primary/5 text-gray-900 border border-primary/10",
+  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/40",
+  underlined: "border-b-4 border-primary/70 bg-white text-gray-900",
+  rounded: "rounded-3xl border border-gray-100 bg-white text-gray-900 shadow-xl",
+  sharp: "rounded-none border border-gray-200 bg-white text-gray-900 shadow"
+};
+var frameRadii = {
+  solid: "rounded-3xl",
+  outline: "rounded-2xl",
+  text: "rounded-2xl",
+  ghost: "rounded-2xl",
+  filled: "rounded-3xl",
+  underlined: "rounded-2xl",
+  rounded: "rounded-3xl",
+  sharp: "rounded-none"
+};
+var badgeVariants = {
+  solid: "bg-white/10 text-white border border-white/20",
+  outline: "bg-primary/10 text-primary border border-primary/20",
+  text: "bg-primary/10 text-primary border border-primary/20",
+  ghost: "bg-primary/15 text-primary border border-primary/25",
+  filled: "bg-white/10 text-white border border-white/20",
+  underlined: "bg-primary/10 text-primary border border-primary/20",
+  rounded: "bg-primary/10 text-primary border border-primary/20",
+  sharp: "bg-primary/10 text-primary border border-primary/20"
+};
+var Hero = ({
+  title,
+  description,
+  eyebrow,
+  actions = [],
+  stats = [],
+  logos = [],
+  image,
+  variant = "solid",
+  className,
+  ...rest
+}) => {
+  const containerClass = tailwindMerge.twMerge(
+    "hero-block relative isolate overflow-hidden",
+    containerVariants[variant] ?? containerVariants.solid,
+    className
+  );
+  const badgeClass = tailwindMerge.twMerge(
+    "inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+    badgeVariants[variant] ?? badgeVariants.solid
+  );
+  const isDark = variant === "solid" || variant === "filled";
+  const subdued = isDark ? "text-white/80" : "text-gray-600";
+  const statMuted = isDark ? "text-white/70" : "text-gray-500";
+  const actionPrimary = isDark ? "bg-white text-gray-900 hover:bg-white/90 focus-visible:outline-white/70" : "bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary/50";
+  const actionSecondary = isDark ? "border border-white/40 text-white hover:bg-white/10 focus-visible:outline-white/60" : "border border-gray-300 text-gray-900 hover:border-primary/60 hover:text-primary focus-visible:outline-primary/50";
+  const frameRadius = frameRadii[variant] ?? "rounded-2xl";
+  const frameDecoration = isDark ? "border-white/10 bg-white/10 shadow-2xl shadow-black/20" : "border-gray-200 bg-white shadow-2xl shadow-gray-200/60";
+  const renderAction = (action, index) => {
+    const { href, label, onClick, variant: actionVariant = "primary" } = action;
+    const Component = href ? "a" : "button";
+    const resolvedClass = actionVariant === "secondary" ? tailwindMerge.twMerge("bg-white/70", actionSecondary) : tailwindMerge.twMerge("shadow-lg shadow-primary/25", actionPrimary);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        href,
+        onClick,
+        className: tailwindMerge.twMerge(
+          "inline-flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold transition focus-visible:outline  focus-visible:outline-offset-2",
+          resolvedClass
+        ),
+        children: label
+      },
+      `${label}-${index}`
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { ...rest, className: containerClass, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-24 top-10 h-64 w-64 rounded-full bg-primary/15 blur-3xl" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-10 h-80 w-80 rounded-full bg-primary/20 blur-3xl" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-6xl flex-col gap-12 px-6 py-16 lg:px-10 lg:py-24", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeClass, children: eyebrow }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: tailwindMerge.twMerge(
+                "text-4xl font-semibold leading-tight sm:text-5xl",
+                isDark ? "text-white" : "text-gray-900"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-lg leading-relaxed", subdued), children: description }),
+          actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions.map(renderAction) }),
+          stats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-6 sm:grid-cols-3", children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: tailwindMerge.twMerge("text-3xl font-semibold", isDark ? "text-white" : "text-gray-900"), children: stat.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: tailwindMerge.twMerge("text-sm font-medium", statMuted), children: stat.label })
+          ] }, stat.label)) })
+        ] }),
+        image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("relative overflow-hidden backdrop-blur", frameDecoration, frameRadius), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: image.src,
+              alt: image.alt ?? "",
+              className: tailwindMerge.twMerge("h-full w-full object-cover", frameRadius),
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/30 via-transparent to-transparent" })
+        ] }) })
+      ] }),
+      logos.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-6 lg:items-center lg:gap-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("text-sm font-semibold tracking-wide", subdued), children: "Duveruji nam" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-4 opacity-80", children: logos.map((logo) => /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: logo.src,
+            alt: logo.alt ?? "",
+            className: "h-8 w-auto grayscale transition hover:grayscale-0",
+            loading: "lazy"
+          },
+          logo.src
+        )) })
+      ] })
+    ] })
+  ] });
+};
+Hero.displayName = "Hero";
+var Hero_default = Hero;
+var variantMap = {
+  solid: "bg-white text-gray-900 border border-gray-200 shadow-lg shadow-gray-200/60",
+  outline: "bg-white text-gray-900 border border-gray-300",
+  text: "bg-transparent text-gray-900",
+  ghost: "bg-slate-50 text-gray-900 border border-slate-100",
+  filled: "bg-slate-900 text-white shadow-2xl shadow-slate-900/30",
+  underlined: "bg-white text-gray-900 border-b-4 border-primary/70",
+  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 = {
+  solid: "rounded-2xl",
+  outline: "rounded-2xl",
+  text: "rounded-2xl",
+  ghost: "rounded-2xl",
+  filled: "rounded-3xl",
+  underlined: "rounded-2xl",
+  rounded: "rounded-3xl",
+  sharp: "rounded-none"
+};
+var isDarkVariant = (variant) => variant === "filled";
+var SocialIcons = ({ socials = [], dark }) => {
+  if (socials.length === 0) return null;
+  const iconBase = 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)) });
+};
+var Badges = ({ badges = [], dark }) => {
+  if (badges.length === 0) return null;
+  const badgeBase = tailwindMerge.twMerge(
+    "inline-flex items-center rounded-full px-3 py-1 mb-2 text-xs font-semibold",
+    dark ? "bg-white/10 text-white border border-white/20" : "bg-primary/10 text-primary border border-primary/15"
+  );
+  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
+}) => {
+  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",
+        radius,
+        dimension,
+        ringClass
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: avatar.src,
+          alt: avatar.alt ?? "",
+          className: tailwindMerge.twMerge("h-full w-full object-cover", radius),
+          loading: "lazy"
+        }
+      )
+    }
+  );
+};
+var ProfileCard = ({
+  name,
+  role,
+  description,
+  avatar,
+  socials,
+  badges,
+  layout = "classic",
+  variant = "solid",
+  className,
+  ...rest
+}) => {
+  const baseVariant = variantMap[variant] ?? variantMap.solid;
+  const radius = radiusMap[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.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 })
+        ] })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm leading-relaxed", muted), children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(Badges, { badges, dark })
+    ] }),
+    /* @__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.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.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 }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm leading-relaxed", muted), children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badges, { badges, dark }),
+        /* @__PURE__ */ jsxRuntime.jsx(SocialIcons, { socials, dark })
+      ] })
+    ] })
+  ] });
+  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.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 }),
+        role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm font-medium", muted), children: role })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm leading-relaxed", muted), children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(Badges, { badges, dark }),
+      /* @__PURE__ */ jsxRuntime.jsx(SocialIcons, { socials, dark })
+    ] })
+  ] });
+  const layoutMap = {
+    classic: content,
+    split: splitContent,
+    spotlight: spotlightContent
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      ...rest,
+      className: tailwindMerge.twMerge(
+        "profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl",
+        baseVariant,
+        radius,
+        className
+      ),
+      children: layoutMap[layout] ?? layoutMap.classic
+    }
+  );
+};
+ProfileCard.displayName = "ProfileCard";
+var ProfileCard_default = ProfileCard;
 
 // src/Form/Input/states.input.ts
 var resolveIconClassName3 = (icon) => {
@@ -1426,37 +1938,49 @@ var resolveIconClassName3 = (icon) => {
   const classes = [...baseClasses, normalizedName];
   return Array.from(new Set(classes)).join(" ");
 };
-
-// src/utils/helpers/randomStr.ts
-var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-function generateString(length = 5) {
-  let result = "";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
 var Input = ({
   variant = "outline",
+  size = "medium",
   success,
   error,
   warn,
   icon,
   className,
   wrapperClassName,
+  label,
   ...props
 }) => {
-  const classBase = "input-base px-3 py-2 focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full";
-  const 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 px-0 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 px-0 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent",
-    rounded: "rounded-full px-4 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm"
+  const { placeholder, onFocus, onBlur, ...inputProps } = props;
+  const reactId = React3__namespace.default.useId();
+  const hasLabel = Boolean(label);
+  const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder;
+  const [isFocused, setIsFocused] = React3__namespace.default.useState(false);
+  const classBase = "input-base focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed w-full text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400";
+  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",
+    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",
+    underlined: "rounded-none border-0 border-b border-gray-300 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",
+    rounded: "rounded-full px-4 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"
+  };
+  const sizeClasses4 = {
+    "x-small": { paddingNoIcon: "px-2 py-2", paddingWithIcon: "pl-8 pr-2 py-2", text: "text-xs" },
+    small: {
+      paddingNoIcon: "px-2.5 py-2.5",
+      paddingWithIcon: "pl-9 pr-2.5 py-2.5",
+      text: "text-sm"
+    },
+    medium: { paddingNoIcon: "px-3 py-3", paddingWithIcon: "pl-10 pr-3 py-3", text: "text-base" },
+    large: {
+      paddingNoIcon: "px-3.5 py-3.5",
+      paddingWithIcon: "pl-11 pr-3.5 py-3.5",
+      text: "text-lg"
+    },
+    "x-large": { paddingNoIcon: "px-4 py-4", paddingWithIcon: "pl-12 pr-4 py-4", text: "text-xl" }
   };
   const status = error ? { tone: "error", message: error } : warn ? { tone: "warn", message: warn } : success ? { tone: "success", message: success } : void 0;
   const statusClasses = {
@@ -1465,24 +1989,81 @@ var Input = ({
     success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400"
   };
   const statusMessageClasses = {
-    error: "text-red-600",
-    warn: "text-amber-600",
-    success: "text-emerald-600"
+    error: "text-red-600 dark:text-red-300",
+    warn: "text-amber-600 dark:text-amber-300",
+    success: "text-emerald-600 dark:text-emerald-300"
   };
-  const variantClass = variantClasses2[variant] ?? variantClasses2.outline;
+  const variantClass = variantClasses3[variant] ?? variantClasses3.outline;
   const toneClass = status ? statusClasses[status.tone] : void 0;
-  const prependIconClass = resolveIconClassName3(icon);
-  const prependPadding = prependIconClass ? "pl-10" : void 0;
-  const inputName = props.name || generateString();
+  let prependIconClass = resolveIconClassName3(icon);
+  const sizeConfig = sizeClasses4[size] ?? sizeClasses4.medium;
+  const sizeClass = [
+    prependIconClass ? sizeConfig.paddingWithIcon : sizeConfig.paddingNoIcon,
+    sizeConfig.text
+  ].join(" ");
+  const inputName = inputProps.name || reactId;
+  const basePlaceholder = placeholder ?? (hasLabel ? " " : void 0);
+  const placeholderValue = hidePlaceholderUntilFocus ? isFocused ? placeholder : " " : basePlaceholder;
+  const placeholderClass = hidePlaceholderUntilFocus ? "placeholder-transparent focus:placeholder-gray-500 focus:dark:placeholder-gray-400" : void 0;
+  const labelLeftClass = prependIconClass ? "left-10" : "left-3";
+  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);
+  };
+  const handleBlur = (event) => {
+    if (hidePlaceholderUntilFocus) setIsFocused(false);
+    onBlur?.(event);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-      prependIconClass && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("pointer-events-none absolute left-3 ", prependIconClass), "aria-hidden": true }),
+      prependIconClass && /* @__PURE__ */ jsxRuntime.jsx(
+        "i",
+        {
+          className: tailwindMerge.twMerge(
+            "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+            status?.tone && statusMessageClasses[status?.tone] || "",
+            prependIconClass
+          ),
+          "aria-hidden": true
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
-          ...props,
-          className: tailwindMerge.twMerge(classBase, variantClass, toneClass, prependPadding, className),
-          name: inputName
+          ...inputProps,
+          id: inputName,
+          name: inputName,
+          placeholder: placeholderValue,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          className: tailwindMerge.twMerge(
+            "peer",
+            classBase,
+            variantClass,
+            toneClass,
+            sizeClass,
+            placeholderClass,
+            className
+          )
+        }
+      ),
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: inputName,
+          className: tailwindMerge.twMerge(
+            "absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
+            labelLeftClass,
+            // Floated state: center label's vertical middle on the top border line
+            "top-0 -translate-y-2/3 text-xs px-1",
+            labelBgDefault,
+            // focus state mirrors floated state (keeps center on border)
+            "peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:px-1 peer-focus:bg-white/90 peer-focus:text-gray-600 dark:peer-focus:bg-slate-900 dark:peer-focus:text-gray-300",
+            // when input is empty (placeholder shown) -> center label inside input
+            "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:bg-transparent peer-placeholder-shown:text-gray-500 dark:peer-placeholder-shown:text-gray-400"
+          ),
+          children: label
         }
       )
     ] }),
@@ -1490,8 +2071,170 @@ var Input = ({
   ] });
 };
 var Input_default = Input;
+
+// src/utils/helpers/randomStr.ts
+var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function generateString(length = 5) {
+  let result = "";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  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 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"
+};
+var sizeClasses2 = {
+  "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
+  small: { padding: "pl-2.5 pr-9 py-2.5", text: "text-sm" },
+  medium: { padding: "pl-3 pr-10 py-3", text: "text-base" },
+  large: { padding: "pl-3.5 pr-11 py-3.5", text: "text-lg" },
+  "x-large": { padding: "pl-4 pr-12 py-4", text: "text-xl" }
+};
+var normalizeOption = (option) => {
+  if (typeof option === "string") {
+    return { label: option, value: option };
+  }
+  return option;
+};
+var Select = ({
+  options,
+  label,
+  placeholder,
+  variant = "outline",
+  size = "medium",
+  className,
+  wrapperClassName,
+  id,
+  name,
+  multiple,
+  onFocus,
+  onBlur,
+  onChange,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const selectId = id || name || generateString();
+  const selectName = name || selectId;
+  const variantClass = variantClasses2[variant] ?? variantClasses2.outline;
+  const sizeConfig = sizeClasses2[size] ?? sizeClasses2.medium;
+  const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
+  const normalizedOptions = options.map(normalizeOption);
+  const hasLabel = Boolean(label);
+  const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
+  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;
+  const placeholderText = placeholder ?? (hasLabel ? " " : void 0);
+  const [isFocused, setIsFocused] = React3__namespace.default.useState(false);
+  const [hasValue, setHasValue] = React3__namespace.default.useState(() => {
+    const initial = value ?? defaultValue;
+    if (initial === void 0 || initial === null) return false;
+    if (multiple) {
+      if (Array.isArray(initial)) return initial.length > 0;
+      return String(initial).length > 0;
+    }
+    if (Array.isArray(initial)) {
+      if (initial.length === 0) return false;
+      return String(initial[0]).length > 0;
+    }
+    return String(initial).length > 0;
+  });
+  const isControlled = value !== void 0;
+  React3__namespace.default.useEffect(() => {
+    if (!isControlled) return;
+    if (value === void 0 || value === null) {
+      setHasValue(false);
+      return;
+    }
+    if (multiple) {
+      if (Array.isArray(value)) {
+        setHasValue(value.length > 0);
+      } else {
+        setHasValue(String(value).length > 0);
+      }
+      return;
+    }
+    if (Array.isArray(value)) {
+      setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);
+      return;
+    }
+    setHasValue(String(value).length > 0);
+  }, [isControlled, multiple, value]);
+  const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? " " : placeholderText;
+  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 handleFocus = (event) => {
+    if (hidePlaceholderUntilFocus) setIsFocused(true);
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    if (hidePlaceholderUntilFocus) setIsFocused(false);
+    onBlur?.(event);
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== "";
+      setHasValue(nextHasValue);
+    }
+    onChange?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ...props,
+        id: selectId,
+        name: selectName,
+        multiple,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        className: tailwindMerge.twMerge("peer", baseClass, variantClass, sizeClass, className),
+        children: [
+          shouldRenderPlaceholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: props.required, hidden: hasValue, children: placeholderOptionLabel }),
+          normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, `${selectId}-${option.value}-${index}`))
+        ]
+      }
+    ),
+    !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 }) }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: selectId,
+        className: tailwindMerge.twMerge(
+          "absolute transition-all duration-150 pointer-events-none text-gray-700",
+          labelLeftClass,
+          labelShouldFloat ? [
+            "top-0 text-xs px-1",
+            isFocused ? "-translate-y-1/2 text-gray-600" : "-translate-y-2/3",
+            labelBgDefault
+          ].join(" ") : "top-1/2 -translate-y-1/2 text-sm text-gray-500"
+        ),
+        children: label
+      }
+    )
+  ] }) });
+};
+var Select_default = Select;
 var paletteValues = {
-  primary: { fill: "var(--color-primary, #6366f1)", ring: "rgba(99, 102, 241, 0.28)", thumbBorder: "#6366f1" },
+  primary: {
+    fill: "var(--color-primary, #6366f1)",
+    ring: "rgba(99, 102, 241, 0.28)",
+    thumbBorder: "#6366f1"
+  },
   neutral: { fill: "#4b5563", ring: "rgba(75, 85, 99, 0.28)", thumbBorder: "#4b5563" },
   info: { fill: "#0284c7", ring: "rgba(2, 132, 199, 0.28)", thumbBorder: "#0284c7" },
   success: { fill: "#059669", ring: "rgba(5, 150, 105, 0.24)", thumbBorder: "#059669" },
@@ -1501,9 +2244,19 @@ var paletteValues = {
   bw: { fill: "#000000", ring: "rgba(0, 0, 0, 0.26)", thumbBorder: "#000000" }
 };
 var sizeTokens = {
-  small: { trackHeight: "0.375rem", thumbSize: "1.1rem", trackClass: "h-1.5", valueClass: "text-xs" },
+  small: {
+    trackHeight: "0.375rem",
+    thumbSize: "1.1rem",
+    trackClass: "h-1.5",
+    valueClass: "text-xs"
+  },
   medium: { trackHeight: "0.5rem", thumbSize: "1.25rem", trackClass: "h-2", valueClass: "text-sm" },
-  large: { trackHeight: "0.6rem", thumbSize: "1.4rem", trackClass: "h-[0.65rem]", valueClass: "text-base" }
+  large: {
+    trackHeight: "0.6rem",
+    thumbSize: "1.4rem",
+    trackClass: "h-[0.65rem]",
+    valueClass: "text-base"
+  }
 };
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var toNumber = (value, fallback) => {
@@ -1690,57 +2443,106 @@ var Switch = React3.forwardRef(
     const sizeThumbClass = thumbSizes[size] ?? thumbSizes.medium;
     const thumbShiftClass = thumbTranslate[size] ?? thumbTranslate.medium;
     const pointerClass = disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer";
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: tailwindMerge.twMerge("flex items-center gap-3 select-none", pointerClass, wrapperClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ...rest,
-            type: "checkbox",
-            ref,
-            checked: currentChecked,
-            onChange: handleChange,
-            disabled,
-            className: "peer sr-only"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: tailwindMerge.twMerge(
-              "block rounded-full border border-transparent transition-all duration-200",
-              sizeTrackClass,
-              currentChecked ? paletteTrack.active : paletteTrack.inactive,
-              disabled && "bg-gray-200",
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
-              focusClass,
-              className
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: tailwindMerge.twMerge("flex items-center gap-3 select-none", pointerClass, wrapperClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...rest,
+                type: "checkbox",
+                ref,
+                checked: currentChecked,
+                onChange: handleChange,
+                disabled,
+                className: "peer sr-only"
+              }
             ),
-            "aria-hidden": true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: tailwindMerge.twMerge(
-                  "absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
-                  sizeThumbClass,
-                  currentChecked && thumbShiftClass,
-                  currentChecked && thumbActive,
-                  disabled && "border-gray-300"
+                  "block rounded-full border border-transparent transition-all duration-200",
+                  sizeTrackClass,
+                  currentChecked ? paletteTrack.active : paletteTrack.inactive,
+                  disabled && "bg-gray-200",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
+                  focusClass,
+                  className
+                ),
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: tailwindMerge.twMerge(
+                      "absolute left-0.5 top-0.5 rounded-full bg-white shadow-md border border-gray-200 transition-transform duration-200",
+                      sizeThumbClass,
+                      currentChecked && thumbShiftClass,
+                      currentChecked && thumbActive,
+                      disabled && "border-gray-300"
+                    )
+                  }
                 )
               }
             )
-          }
-        )
-      ] }),
-      (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
-      ] })
-    ] });
+          ] }),
+          (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: tailwindMerge.twMerge("flex flex-col leading-tight", labelClassName), children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: label }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600", children: description })
+          ] })
+        ]
+      }
+    );
   }
 );
 Switch.displayName = "Switch";
 var Switch_default = Switch;
+var sizeClasses3 = {
+  "x-small": "text-xs",
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg",
+  "x-large": "text-2xl"
+};
+var colorClasses = {
+  primary: "text-primary",
+  neutral: "text-gray-700",
+  info: "text-sky-600",
+  success: "text-emerald-600",
+  warning: "text-amber-600",
+  danger: "text-red-600",
+  surface: "text-gray-900",
+  bw: "text-black"
+};
+var Icon = ({ className, icon, size, color, ...rest }) => {
+  const normalizeMdiName = (value) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+    if (trimmed.includes(" ")) {
+      return trimmed;
+    }
+    return trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+  };
+  let iconValue = "";
+  if (typeof icon === "string") {
+    iconValue = normalizeMdiName(icon);
+  } else if (Array.isArray(icon)) {
+    const [group, name] = icon;
+    if (group === "mdi") {
+      iconValue = normalizeMdiName(name);
+    }
+  }
+  const classBase = "mdi";
+  const sizeClass = size ? sizeClasses3[size] ?? sizeClasses3.medium : void 0;
+  const colorClass = color ? colorClasses[color] ?? colorClasses.primary : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("i", { ...rest, className: tailwindMerge.twMerge(classBase, iconValue, sizeClass, colorClass, className) });
+};
+var Icon_default = Icon;
 
 exports.Button = Button_default;
 exports.Card = Card_default;
@@ -1748,10 +2550,15 @@ exports.Chip = Chip_default;
 exports.Dialog = Dialog_default;
 exports.ExpansionPanel = ExpansionPanel_default;
 exports.ExpansionPanelItem = ExpansionPanelItem_default;
+exports.Hero = Hero_default;
+exports.Icon = Icon_default;
 exports.Input = Input_default;
 exports.List = List_default;
 exports.ListItem = Item_default;
+exports.Masonry = Masonry_default;
 exports.Menu = Menu_default;
+exports.ProfileCard = ProfileCard_default;
+exports.Select = Select_default;
 exports.Slider = Slider_default;
 exports.Switch = Switch_default;
 exports.ToolTip = ToolTip_default;