@hyddenlabs/hydn-ui 0.0.1-alpha.34

package/dist/index.cjs

@@ -0,0 +1,3121 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var iconsReact = require('@tabler/icons-react');
+var reactRouterDom = require('react-router-dom');
+var reactDom = require('react-dom');
+
+// src/components/forms/button/button.tsx
+function Button({
+  children,
+  onClick,
+  ariaLabel,
+  disabled = false,
+  type = "button",
+  className = "",
+  icon,
+  iconPosition = "left",
+  variant = "neutral",
+  style = "solid",
+  size = "md",
+  rounded = "default",
+  loading = false,
+  fullWidth = false,
+  wide = false,
+  active = false
+}) {
+  const isIconOnly = icon && !children;
+  if (isIconOnly && !ariaLabel) {
+    console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
+  }
+  const solidVariantClasses = {
+    neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
+    primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
+    accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
+    info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
+    success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
+    warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
+    error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
+  };
+  const outlineVariantClasses = {
+    neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
+    primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
+    secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
+    accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
+    info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
+    success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
+    warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
+    error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
+  };
+  const ghostVariantClasses = {
+    neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
+    primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
+    secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
+    accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
+    info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
+    success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
+    warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
+    error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
+  };
+  const softVariantClasses = {
+    neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
+    primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
+    secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
+    accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
+    info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
+    success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
+    warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
+    error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
+  };
+  const linkVariantClasses = {
+    neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
+    primary: "bg-transparent text-primary underline-offset-4 hover:underline",
+    secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
+    accent: "bg-transparent text-accent underline-offset-4 hover:underline",
+    info: "bg-transparent text-info underline-offset-4 hover:underline",
+    success: "bg-transparent text-success underline-offset-4 hover:underline",
+    warning: "bg-transparent text-warning underline-offset-4 hover:underline",
+    error: "bg-transparent text-destructive underline-offset-4 hover:underline"
+  };
+  const getStyleClasses = () => {
+    const variantKey = variant;
+    switch (style) {
+      case "outline":
+        return `${outlineVariantClasses[variantKey]} active:scale-95`;
+      case "ghost":
+        return ghostVariantClasses[variantKey];
+      case "link":
+        return linkVariantClasses[variantKey];
+      case "soft":
+        return softVariantClasses[variantKey];
+      case "solid":
+      default:
+        return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
+    }
+  };
+  const sizeClasses = {
+    xs: "h-6 px-2 text-xs min-h-6",
+    sm: "h-8 px-3 text-sm min-h-8",
+    md: "h-10 px-4 text-base min-h-10",
+    lg: "h-12 px-6 text-lg min-h-12",
+    xl: "h-14 px-8 text-xl min-h-14"
+  };
+  const roundedClasses = {
+    default: "rounded-md",
+    pill: "rounded-full",
+    square: "rounded-none aspect-square",
+    circle: "rounded-full aspect-square"
+  };
+  const displayIcon = loading ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      }
+    )
+  ] }) : icon;
+  const styleClasses = getStyleClasses();
+  const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
+  const activeClasses = active ? "active:scale-95" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type,
+      onClick,
+      "aria-label": ariaLabel,
+      disabled: disabled || loading,
+      className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+      children: [
+        displayIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
+        children,
+        displayIcon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
+      ]
+    }
+  );
+}
+Button.displayName = "Button";
+var button_default = Button;
+function Input({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  type = "text",
+  className = "",
+  ariaLabel,
+  id,
+  name,
+  required = false,
+  size = "md",
+  validationState = "default"
+}) {
+  const sizeClasses = {
+    sm: "h-8 px-3 py-1.5 text-sm",
+    md: "h-10 px-3 py-2 text-sm",
+    lg: "h-12 px-4 py-3 text-base"
+  };
+  const validationClasses = {
+    default: "border-input focus:border-ring",
+    error: "border-destructive focus:border-destructive",
+    success: "border-success focus:border-success",
+    warning: "border-warning focus:border-warning"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      required,
+      "aria-invalid": validationState === "error",
+      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`
+    }
+  );
+}
+Input.displayName = "Input";
+var input_default = Input;
+function Checkbox({
+  checked,
+  onChange,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "checkbox",
+      checked,
+      onChange,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      className: `h-4 w-4 rounded border-2 border-input bg-background text-primary transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary hover:border-ring cursor-pointer ${className}`
+    }
+  );
+}
+Checkbox.displayName = "Checkbox";
+var checkbox_default = Checkbox;
+function Radio({
+  checked,
+  onChange,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name,
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "radio",
+      checked,
+      onChange,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      value,
+      className: `w-4 h-4 text-primary border-2 border-input bg-background transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted/50 checked:bg-primary checked:border-primary hover:border-ring cursor-pointer ${className}`
+    }
+  );
+}
+Radio.displayName = "Radio";
+var radio_default = Radio;
+function Select({
+  value,
+  onChange,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name,
+  children,
+  required = false,
+  size = "md",
+  validationState = "default"
+}) {
+  const sizeClasses = {
+    sm: "h-8 px-3 py-1.5 text-sm",
+    md: "h-10 px-3 py-2 text-sm pr-10",
+    lg: "h-12 px-4 py-3 text-base pr-10"
+  };
+  const validationClasses = {
+    default: "border-input focus:border-ring",
+    error: "border-destructive focus:border-destructive",
+    success: "border-success focus:border-success",
+    warning: "border-warning focus:border-warning"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      value,
+      onChange,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      required,
+      "aria-invalid": validationState === "error",
+      className: `flex w-full rounded-lg border bg-background shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%208l4%204%204-4%22%2F%3E%3C%2Fsvg%3E')] bg-[length:1.5em] bg-[right_0.5rem_center] bg-no-repeat ${sizeClasses[size]} ${validationClasses[validationState]} ${className}`,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+var select_default = Select;
+function SelectItem({ value, disabled = false, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("option", { value, disabled, children });
+}
+SelectItem.displayName = "SelectItem";
+var select_item_default = SelectItem;
+function Textarea({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name,
+  rows = 3,
+  required = false,
+  validationState = "default"
+}) {
+  const validationClasses = {
+    default: "border-input focus:border-ring",
+    error: "border-destructive focus:border-destructive",
+    success: "border-success focus:border-success",
+    warning: "border-warning focus:border-warning"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      rows,
+      required,
+      "aria-invalid": validationState === "error",
+      className: `flex min-h-[80px] w-full rounded-lg border bg-background px-3 py-2 text-sm shadow-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 resize-y ${validationClasses[validationState]} ${className}`
+    }
+  );
+}
+Textarea.displayName = "Textarea";
+var textarea_default = Textarea;
+function Switch({
+  checked = false,
+  onChange,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name,
+  size = "md",
+  variant
+}) {
+  const handleChange = (e) => {
+    onChange?.(e.target.checked);
+  };
+  const sizeStyles = {
+    xs: {
+      container: "h-4 w-8",
+      handle: "h-3 w-3",
+      padding: "p-0.5",
+      translate: checked ? "translate-x-4" : "translate-x-0"
+    },
+    sm: {
+      container: "h-5 w-10",
+      handle: "h-4 w-4",
+      padding: "p-0.5",
+      translate: checked ? "translate-x-5" : "translate-x-0"
+    },
+    md: {
+      container: "h-6 w-12",
+      handle: "h-5 w-5",
+      padding: "p-0.5",
+      translate: checked ? "translate-x-6" : "translate-x-0"
+    },
+    lg: {
+      container: "h-7 w-14",
+      handle: "h-6 w-6",
+      padding: "p-0.5",
+      translate: checked ? "translate-x-7" : "translate-x-0"
+    },
+    xl: {
+      container: "h-8 w-16",
+      handle: "h-7 w-7",
+      padding: "p-0.5",
+      translate: checked ? "translate-x-8" : "translate-x-0"
+    }
+  };
+  const getVariantColors = () => {
+    if (!checked) {
+      return "bg-input border-input";
+    }
+    switch (variant) {
+      case "secondary":
+        return "bg-secondary border-secondary";
+      case "accent":
+        return "bg-accent border-accent";
+      case "success":
+        return "bg-success border-success";
+      case "warning":
+        return "bg-warning border-warning";
+      case "info":
+        return "bg-info border-info";
+      case "error":
+        return "bg-destructive border-destructive";
+      case "neutral":
+        return "bg-neutral border-neutral";
+      case "primary":
+      default:
+        return "bg-primary border-primary";
+    }
+  };
+  const styles = sizeStyles[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: `relative inline-flex ${styles.container} ${styles.padding} items-center rounded-full border transition-all duration-200 cursor-pointer ${disabled ? "opacity-30 cursor-not-allowed" : ""} ${getVariantColors()} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            checked,
+            onChange: handleChange,
+            disabled,
+            "aria-label": ariaLabel,
+            id,
+            name,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `inline-block ${styles.handle} rounded-full bg-background shadow-sm transition-transform duration-200 ${styles.translate}`
+          }
+        )
+      ]
+    }
+  );
+}
+Switch.displayName = "Switch";
+var switch_default = Switch;
+function Slider({
+  value = 50,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name
+}) {
+  const handleChange = (e) => {
+    onChange?.(Number(e.target.value));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "range",
+      value,
+      onChange: handleChange,
+      min,
+      max,
+      step,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      className: `w-full h-2 bg-muted/30 rounded-lg appearance-none cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted/40 ${className}`,
+      style: {
+        background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) ${(value - min) / (max - min) * 100}%, hsl(var(--muted) / 0.3) 100%)`
+      }
+    }
+  );
+}
+Slider.displayName = "Slider";
+var slider_default = Slider;
+function ButtonGroup({
+  children,
+  className = "",
+  variant = "default",
+  orientation = "horizontal"
+}) {
+  const baseClasses = "inline-flex";
+  const orientationClasses = orientation === "horizontal" ? "flex-row" : "flex-col";
+  let variantClasses = "";
+  if (variant === "separated") {
+    variantClasses = "gap-2";
+  } else if (orientation === "horizontal") {
+    variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:last-child)]:border-r-0";
+  } else {
+    variantClasses = "[&>button]:rounded-none [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:not(:last-child)]:border-b-0";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${baseClasses} ${orientationClasses} ${variantClasses} ${className}`, children });
+}
+ButtonGroup.displayName = "ButtonGroup";
+var button_group_default = ButtonGroup;
+function RadioGroup({
+  children,
+  name: _name,
+  label,
+  orientation = "vertical",
+  className = ""
+}) {
+  const orientationClasses = orientation === "horizontal" ? "flex flex-row gap-4" : "flex flex-col gap-2";
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "text-sm font-medium text-foreground mb-2", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: orientationClasses, role: "radiogroup", children })
+  ] });
+}
+RadioGroup.displayName = "RadioGroup";
+var radio_group_default = RadioGroup;
+function Text({
+  children,
+  variant = "body",
+  size,
+  weight = "semibold",
+  // elevated default weight
+  className = "",
+  noMargin = false
+}) {
+  const variantClasses = {
+    body: "text-foreground",
+    muted: "text-muted-foreground",
+    small: "text-muted-foreground"
+  };
+  const sizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  const weightClasses = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  const defaultSizes = {
+    body: "lg",
+    // bigger default body text
+    muted: "base",
+    // muted still readable
+    small: "sm"
+    // small bumped up slightly
+  };
+  const finalSize = size || defaultSizes[variant];
+  const margin = noMargin ? "" : "mb-4";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: `${variantClasses[variant]} ${sizeClasses[finalSize]} ${weightClasses[weight]} ${margin} ${className}`,
+      children
+    }
+  );
+}
+Text.displayName = "Text";
+var text_default = Text;
+function Stack({
+  children,
+  className = "",
+  direction = "vertical",
+  spacing = "md",
+  align = "stretch",
+  justify
+}) {
+  const spacingClasses = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around"
+  };
+  const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
+  const justifyClass = justify ? justifyClasses[justify] : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-component": "Stack",
+      className: `flex ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
+      children
+    }
+  );
+}
+Stack.displayName = "Stack";
+var stack_default = Stack;
+function FormField({
+  children,
+  label,
+  htmlFor,
+  error,
+  helperText,
+  required = false,
+  className = "",
+  validationState = "default"
+}) {
+  const effectiveValidationState = error ? "error" : validationState;
+  const childWithValidation = react.isValidElement(children) ? react.cloneElement(children, {
+    validationState: effectiveValidationState
+  }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, children: /* @__PURE__ */ jsxRuntime.jsxs(text_default, { variant: "body", size: "sm", noMargin: true, className: "font-medium", children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }) }),
+    childWithValidation,
+    error && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "body", size: "sm", noMargin: true, className: "text-destructive", children: error }),
+    !error && helperText && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", size: "sm", noMargin: true, children: helperText })
+  ] });
+}
+FormField.displayName = "FormField";
+var form_field_default = FormField;
+function InputGroup({ children, prefix, suffix, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-stretch ${className}`, children: [
+    prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-3 bg-muted border border-r-0 border-input rounded-l-md", children: prefix }),
+    children,
+    suffix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-3 bg-muted border border-l-0 border-input rounded-r-md", children: suffix })
+  ] });
+}
+InputGroup.displayName = "InputGroup";
+var input_group_default = InputGroup;
+function Nav({ children, className = "", ariaLabel = "Main navigation" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: `flex items-center ${className}`, children });
+}
+Nav.displayName = "Nav";
+var nav_default = Nav;
+function Container({
+  children,
+  className = "",
+  size = "lg",
+  padding = "lg",
+  align = "center"
+}) {
+  const sizeClasses = {
+    sm: "max-w-screen-sm",
+    md: "max-w-screen-md",
+    lg: "max-w-screen-lg",
+    xl: "max-w-screen-xl",
+    full: "max-w-full"
+  };
+  const paddingClasses = {
+    none: "",
+    sm: "py-6",
+    md: "py-8",
+    lg: "py-12",
+    xl: "py-16"
+  };
+  const alignClasses = {
+    start: "mr-auto",
+    center: "mx-auto",
+    end: "ml-auto"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-4 ${sizeClasses[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${className}`, children });
+}
+Container.displayName = "Container";
+var container_default = Container;
+function Navbar({
+  brand,
+  children,
+  sticky = true,
+  className = "",
+  actions,
+  size = "xl",
+  appearance = "solid",
+  border = "none",
+  disableMobileMenu = false
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = react.useState(false);
+  const appearanceClasses = {
+    solid: "bg-background",
+    blur: "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+    transparent: "bg-transparent"
+  };
+  const borderClasses = {
+    none: "",
+    bottom: "border-b border-border",
+    top: "border-t border-border",
+    both: "border-y border-border"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: `${sticky ? "sticky top-0 z-50" : ""} ${appearanceClasses[appearance]} ${borderClasses[border]} ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { padding: "none", size, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between h-16", children: [
+          brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: brand }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex md:items-center md:space-x-6 md:flex-1 md:ml-10", children }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${disableMobileMenu ? "flex" : "hidden md:flex"} items-center space-x-4`, children: actions }),
+          !disableMobileMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            button_default,
+            {
+              variant: "neutral",
+              style: "ghost",
+              size: "sm",
+              icon: mobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMenu2, { size: 24 }),
+              ariaLabel: "Toggle menu",
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen)
+            }
+          ) })
+        ] }),
+        !disableMobileMenu && mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden py-4 space-y-3 border-t border-border", children: [
+          children,
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 border-t border-border space-y-2", children: actions })
+        ] })
+      ] })
+    }
+  );
+}
+Navbar.displayName = "Navbar";
+var navbar_default = Navbar;
+function NavbarBrand({ children, href, external = false, onClick, className = "" }) {
+  const content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-lg md:text-xl font-bold ${className}`, children });
+  const linkClassName = "no-underline text-foreground hover:text-primary transition-colors";
+  if (href) {
+    if (external) {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: content });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, className: linkClassName, children: content });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: linkClassName, children: content });
+  }
+  return content;
+}
+NavbarBrand.displayName = "NavbarBrand";
+var navbar_brand_default = NavbarBrand;
+function NavbarLink({ href, children, external = false, className = "", end = false }) {
+  const baseClassName = `block md:inline-block py-2 md:py-0 font-medium transition-colors no-underline ${className}`;
+  if (external) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: `${baseClassName} text-foreground hover:text-primary`,
+        children
+      }
+    );
+  }
+  if (href.startsWith("#")) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: `${baseClassName} text-foreground hover:text-primary`, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactRouterDom.NavLink,
+    {
+      to: href,
+      end,
+      className: ({ isActive }) => `${baseClassName} ${isActive ? "text-primary font-semibold border-b-2 border-primary" : "text-foreground hover:text-primary"}`,
+      children
+    }
+  );
+}
+NavbarLink.displayName = "NavbarLink";
+var navbar_link_default = NavbarLink;
+function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
+  const [activeTab, setActiveTab] = react.useState(defaultTab || tabs[0]?.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b-2 border-border/50", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": activeTab === tab.id,
+        "aria-controls": `panel-${tab.id}`,
+        id: `tab-${tab.id}`,
+        onClick: () => setActiveTab(tab.id),
+        className: `px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 relative ${activeTab === tab.id ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
+        children: tab.label
+      },
+      tab.id
+    )) }),
+    tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `panel-${tab.id}`,
+        "aria-labelledby": `tab-${tab.id}`,
+        hidden: activeTab !== tab.id,
+        className: "pt-6",
+        children: tab.content
+      },
+      tab.id
+    ))
+  ] });
+}
+Tabs.displayName = "Tabs";
+var tabs_default = Tabs;
+function Dropdown({ trigger, children, className = "" }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }
+    return void 0;
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "bg-transparent border-0 p-0 cursor-pointer outline-none",
+        type: "button",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-0 mt-2 bg-popover text-popover-foreground border border-border rounded-lg shadow-xl z-50 min-w-[180px] animate-scaleIn",
+        onClick: () => setIsOpen(false),
+        onKeyDown: (e) => e.key === "Enter" && setIsOpen(false),
+        role: "menu",
+        tabIndex: -1,
+        children
+      }
+    )
+  ] });
+}
+Dropdown.displayName = "Dropdown";
+var dropdown_default = Dropdown;
+function Breadcrumbs({ items, separator = "/", className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const key = item.href || item.label;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-primary hover:text-primary/80 hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring rounded px-1 -mx-1",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: isLast ? "text-foreground font-medium" : "text-muted-foreground", children: item.label }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-2 text-muted-foreground select-none", "aria-hidden": "true", children: separator })
+    ] }, key);
+  }) }) });
+}
+Breadcrumbs.displayName = "Breadcrumbs";
+var breadcrumbs_default = Breadcrumbs;
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = ""
+}) {
+  const getPageNumbers = () => {
+    const pages = [];
+    const leftSibling = Math.max(currentPage - siblingCount, 1);
+    const rightSibling = Math.min(currentPage + siblingCount, totalPages);
+    if (leftSibling > 2) {
+      pages.push(1, "...");
+    } else {
+      for (let i = 1; i < leftSibling; i++) {
+        pages.push(i);
+      }
+    }
+    for (let i = leftSibling; i <= rightSibling; i++) {
+      pages.push(i);
+    }
+    if (rightSibling < totalPages - 1) {
+      pages.push("...", totalPages);
+    } else {
+      for (let i = rightSibling + 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Pagination", className, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex items-center space-x-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
+        "aria-label": "Previous page",
+        children: "\u2190"
+      }
+    ) }),
+    getPageNumbers().map((page, index) => {
+      const key = typeof page === "number" ? `page-${page}` : `ellipsis-${index}`;
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: typeof page === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onPageChange(page),
+          className: `px-3 py-2 rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring ${page === currentPage ? "bg-primary text-primary-foreground border-primary shadow-sm" : "border-border hover:bg-accent hover:text-accent-foreground hover:border-accent"}`,
+          "aria-label": `Page ${page}`,
+          "aria-current": page === currentPage ? "page" : void 0,
+          children: page
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-muted-foreground", children: "..." }) }, key);
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
+        "aria-label": "Next page",
+        children: "\u2192"
+      }
+    ) })
+  ] }) });
+}
+Pagination.displayName = "Pagination";
+var pagination_default = Pagination;
+function Sidebar({ children, className = "", width = "16rem" }) {
+  const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: `bg-muted border-r border-border ${widthClass || ""} ${className}`,
+      style: !widthClass ? { width } : void 0,
+      "aria-label": "Sidebar navigation",
+      children
+    }
+  );
+}
+Sidebar.displayName = "Sidebar";
+var sidebar_default = Sidebar;
+function Stepper({
+  steps,
+  currentStep,
+  className = "",
+  orientation = "horizontal",
+  onStepClick,
+  clickable = false
+}) {
+  const getStepStatus = (index) => {
+    const step = steps[index];
+    if (step.status) return step.status;
+    if (index < currentStep) return "completed";
+    if (index === currentStep) return "current";
+    return "pending";
+  };
+  const renderStep = (step, index) => {
+    const status = getStepStatus(index) || "pending";
+    const isClickable = clickable && status !== "pending";
+    const statusStyles = {
+      pending: {
+        circle: "bg-muted text-muted-foreground border-2 border-muted",
+        title: "text-muted-foreground",
+        description: "text-muted-foreground"
+      },
+      current: {
+        circle: "bg-primary text-primary-foreground border-2 border-primary",
+        title: "text-foreground font-semibold",
+        description: "text-muted-foreground"
+      },
+      completed: {
+        circle: "bg-success text-success-foreground border-2 border-success",
+        title: "text-foreground",
+        description: "text-muted-foreground"
+      },
+      error: {
+        circle: "bg-destructive text-destructive-foreground border-2 border-destructive",
+        title: "text-destructive",
+        description: "text-destructive"
+      }
+    };
+    const styles = statusStyles[status];
+    const handleClick = () => {
+      if (isClickable && onStepClick) {
+        onStepClick(index);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (isClickable && onStepClick && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onStepClick(index);
+      }
+    };
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `flex-1 flex flex-col items-center ${isClickable ? "cursor-pointer" : ""}`,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          role: isClickable ? "button" : void 0,
+          tabIndex: isClickable ? 0 : void 0,
+          "aria-label": isClickable ? `Go to step ${index + 1}: ${step.title}` : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center w-full", children: [
+              index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `h-0.5 flex-1 ${status === "completed" || status === "current" ? "bg-success" : "bg-muted"}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `
+                relative z-10 flex items-center justify-center
+                w-10 h-10 rounded-full transition-colors
+                ${styles.circle}
+              `,
+                  children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-0.5 flex-1 ${status === "completed" ? "bg-success" : "bg-muted"}` })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-sm ${styles.title}`, children: [
+                step.title,
+                step.optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: "(Optional)" })
+              ] }),
+              step.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-xs mt-1 ${styles.description}`, children: step.description })
+            ] })
+          ]
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex gap-4 ${index < steps.length - 1 ? "pb-8" : ""} ${isClickable ? "cursor-pointer" : ""}`,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        "aria-label": isClickable ? `Go to step ${index + 1}: ${step.title}` : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `
+              flex items-center justify-center
+              w-10 h-10 rounded-full transition-colors flex-shrink-0
+              ${styles.circle}
+            `,
+                children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { className: "w-5 h-5" }) : step.icon ? step.icon : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+              }
+            ),
+            index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-0.5 flex-1 mt-2 ${status === "completed" ? "bg-success" : "bg-muted"}` })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-base ${styles.title}`, children: [
+              step.title,
+              step.optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "(Optional)" })
+            ] }),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-sm mt-1 ${styles.description}`, children: step.description })
+          ] })
+        ]
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        ${orientation === "horizontal" ? "flex items-start" : "flex flex-col"}
+        ${className}
+      `,
+      children: steps.map((step, index) => renderStep(step, index))
+    }
+  );
+}
+Stepper.displayName = "Stepper";
+var stepper_default = Stepper;
+function Toast({ message, children, type = "info", onClose, className = "" }) {
+  const typeClasses = {
+    info: "bg-info text-info-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground",
+    error: "bg-destructive text-destructive-foreground"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "polite",
+      className: `fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg ${typeClasses[type]} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: children || message }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: "ml-4 font-bold", "aria-label": "Close", children: "\xD7" })
+      ]
+    }
+  );
+}
+Toast.displayName = "Toast";
+var toast_default = Toast;
+function Tooltip({
+  children,
+  content,
+  position = "top",
+  variant = "default",
+  open = false,
+  usePortal = false,
+  className = ""
+}) {
+  const [showTooltip, setShowTooltip] = react.useState(false);
+  const [tooltipPosition, setTooltipPosition] = react.useState({ top: 0, left: 0 });
+  const triggerRef = react.useRef(null);
+  const isVisible = open || showTooltip;
+  react.useEffect(() => {
+    if (usePortal && isVisible && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const positions = {
+        top: {
+          top: rect.top - 8,
+          left: rect.left + rect.width / 2
+        },
+        bottom: {
+          top: rect.bottom + 8,
+          left: rect.left + rect.width / 2
+        },
+        left: {
+          top: rect.top + rect.height / 2,
+          left: rect.left - 8
+        },
+        right: {
+          top: rect.top + rect.height / 2,
+          left: rect.right + 8
+        }
+      };
+      setTooltipPosition(positions[position]);
+    }
+  }, [usePortal, isVisible, position]);
+  const variantClasses = {
+    default: "bg-popover text-popover-foreground",
+    primary: "bg-primary text-primary-foreground",
+    secondary: "bg-secondary text-secondary-foreground",
+    accent: "bg-accent text-accent-foreground",
+    info: "bg-blue-500 text-white",
+    success: "bg-green-500 text-white",
+    warning: "bg-yellow-500 text-gray-900",
+    error: "bg-red-500 text-white",
+    neutral: "bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-900"
+  };
+  const arrowColorClasses = {
+    default: "before:border-popover",
+    primary: "before:border-primary",
+    secondary: "before:border-secondary",
+    accent: "before:border-accent",
+    info: "before:border-blue-500",
+    success: "before:border-green-500",
+    warning: "before:border-yellow-500",
+    error: "before:border-red-500",
+    neutral: "before:border-gray-700 dark:before:border-gray-300"
+  };
+  const portalPositionClasses = {
+    top: "-translate-x-1/2 -translate-y-full before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
+    bottom: "-translate-x-1/2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
+    left: "-translate-x-full -translate-y-1/2 before:left-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-r-transparent",
+    right: "-translate-y-1/2 before:right-full before:top-1/2 before:-translate-y-1/2 before:border-t-transparent before:border-b-transparent before:border-l-transparent"
+  };
+  const absolutePositionClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2 before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-transparent before:border-r-transparent before:border-b-transparent",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2 before:left-1/2 before:-translate-x-1/2 before:bottom-full before:border-l-transparent before:border-r-transparent before:border-t-transparent",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2 before:top-1/2 before:-translate-y-1/2 before:left-full before:border-t-transparent before:border-b-transparent before:border-r-transparent",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2 before:top-1/2 before:-translate-y-1/2 before:right-full before:border-t-transparent before:border-b-transparent before:border-l-transparent"
+  };
+  const positionClasses = usePortal ? portalPositionClasses : absolutePositionClasses;
+  const tooltipContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `
+        ${usePortal ? "fixed" : "absolute"}
+        z-[9999]
+        px-3 py-2
+        text-sm font-medium
+        rounded-lg
+        shadow-lg
+        whitespace-nowrap
+        pointer-events-none
+        transition-opacity duration-200
+        ${variantClasses[variant]}
+        ${positionClasses[position]}
+        ${arrowColorClasses[variant]}
+        ${isVisible ? "opacity-100 visible" : "opacity-0 invisible"}
+        before:content-['']
+        before:absolute
+        before:border-4
+        before:border-solid
+      `,
+      style: usePortal ? {
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`
+      } : void 0,
+      role: "tooltip",
+      "aria-hidden": !isVisible,
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: triggerRef,
+      className: `group relative inline-flex ${usePortal ? "" : "w-full"} ${className}`,
+      "data-position": position,
+      onMouseEnter: () => !open && setShowTooltip(true),
+      onMouseLeave: () => !open && setShowTooltip(false),
+      onFocus: () => !open && setShowTooltip(true),
+      onBlur: () => !open && setShowTooltip(false),
+      children: [
+        children,
+        usePortal && isVisible ? reactDom.createPortal(tooltipContent, document.body) : !usePortal && tooltipContent
+      ]
+    }
+  );
+}
+Tooltip.displayName = "Tooltip";
+var tooltip_default = Tooltip;
+function Modal({ isOpen, onClose, children, className = "", ariaLabel }) {
+  react.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.body.style.overflow = "";
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }
+    return void 0;
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return (
+    // Backdrop: fixed overlay, centered grid, semi-transparent black background
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[999] grid place-items-center bg-black/40 backdrop-blur-sm p-4 overflow-y-auto overscroll-contain",
+        onClick: onClose,
+        onKeyDown: (e) => e.key === "Escape" && onClose(),
+        role: "button",
+        "aria-label": ariaLabel || "Close modal",
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `relative w-11/12 max-w-2xl max-h-[calc(100vh-5em)] bg-card text-card-foreground rounded-2xl border border-border shadow-2xl p-6 ${className}`,
+            role: "dialog",
+            "aria-modal": "true",
+            children
+          }
+        )
+      }
+    )
+  );
+}
+Modal.displayName = "Modal";
+var modal_default = Modal;
+function Dialog({ isOpen, onClose, title, children, actions, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(modal_default, { isOpen, onClose, ariaLabel: title, className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-6 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-foreground", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children }),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end gap-3 pt-2", children: actions })
+  ] }) });
+}
+Dialog.displayName = "Dialog";
+var dialog_default = Dialog;
+function DeleteDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title = "Confirm Deletion",
+  description,
+  itemName,
+  isLoading = false,
+  confirmText = "Delete",
+  cancelText = "Cancel",
+  className = ""
+}) {
+  const defaultDescription = itemName ? `Are you sure you want to delete "${itemName}"? This action cannot be undone.` : "Are you sure you want to delete this item? This action cannot be undone.";
+  const finalDescription = description || defaultDescription;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog_default,
+    {
+      isOpen,
+      onClose,
+      title,
+      className,
+      actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button_default,
+          {
+            onClick: onClose,
+            disabled: isLoading,
+            className: "bg-muted hover:bg-muted/80 text-muted-foreground",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 16 }),
+            children: cancelText
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button_default,
+          {
+            onClick: onConfirm,
+            disabled: isLoading,
+            className: "bg-destructive hover:bg-destructive/90 text-destructive-foreground",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTrash, { size: 16 }),
+            children: isLoading ? "Deleting..." : confirmText
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground", children: finalDescription })
+    }
+  );
+}
+DeleteDialog.displayName = "DeleteDialog";
+var delete_dialog_default = DeleteDialog;
+function Popover({ trigger, children, content, position = "bottom", className = "" }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const popoverRef = react.useRef(null);
+  const triggerContent = children || trigger;
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }
+    return void 0;
+  }, [isOpen]);
+  const positionClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative inline-block ${className}`, ref: popoverRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "bg-transparent border-0 p-0 cursor-pointer",
+        type: "button",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        children: triggerContent
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute min-w-[200px] bg-popover text-popover-foreground border border-border rounded-lg shadow-xl p-4 z-50 animate-scaleIn ${positionClasses[position]}`,
+        role: "tooltip",
+        children: content
+      }
+    )
+  ] });
+}
+Popover.displayName = "Popover";
+var popover_default = Popover;
+function Alert({ children, type = "info", dismissible = false, onClose, className = "" }) {
+  const typeClasses = {
+    info: "bg-info/10 text-info-foreground border-info/30",
+    success: "bg-success/10 text-success-foreground border-success/30",
+    warning: "bg-warning/10 text-warning-foreground border-warning/30",
+    error: "bg-destructive/10 text-destructive-foreground border-destructive/30"
+  };
+  const iconClasses = {
+    info: "text-info",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-destructive"
+  };
+  const icons = {
+    info: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    success: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    warning: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+        clipRule: "evenodd"
+      }
+    ) }),
+    error: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+        clipRule: "evenodd"
+      }
+    ) })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: `p-4 border rounded-lg flex items-start gap-3 ${typeClasses[type]} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses[type], children: icons[type] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-sm", children }),
+    dismissible && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-ring rounded p-0.5",
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    )
+  ] });
+}
+Alert.displayName = "Alert";
+var alert_default = Alert;
+function Spinner({ size = "md", variant = "primary", className = "", speed, ...props }) {
+  const sizeClasses = {
+    sm: "w-4 h-4 border-2",
+    md: "w-8 h-8 border-2",
+    lg: "w-12 h-12 border-4"
+  };
+  const variantTopBorder = {
+    primary: "border-t-primary",
+    accent: "border-t-accent",
+    secondary: "border-t-secondary",
+    neutral: "border-t-neutral"
+  }[variant];
+  const duration = speed ? `[animation-duration:${speed}]` : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      "data-variant": variant,
+      className: `inline-block border-muted ${variantTopBorder} rounded-full animate-spin ${duration} ${sizeClasses[size]} ${className}`,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+var spinner_default = Spinner;
+function ProgressBar({
+  value,
+  max = 100,
+  showLabel = false,
+  variant = "default",
+  className = ""
+}) {
+  const percentage = Math.min(value / max * 100, 100);
+  const variantClasses = {
+    default: "bg-primary",
+    success: "bg-success",
+    warning: "bg-warning",
+    error: "bg-destructive"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: `h-full transition-all duration-500 ease-out rounded-full ${variantClasses[variant]}`,
+        style: { width: `${percentage}%` }
+      }
+    ) }),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground mt-2 text-right font-medium", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+}
+ProgressBar.displayName = "ProgressBar";
+var progress_bar_default = ProgressBar;
+function Skeleton({ variant = "text", width, height, className = "", ...props }) {
+  const variantClasses = {
+    text: "rounded h-4",
+    circular: "rounded-full",
+    rectangular: "rounded-md"
+  };
+  const style = {
+    width: width || (variant === "circular" ? "40px" : "100%"),
+    height: height || (variant === "circular" ? "40px" : void 0)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `bg-muted animate-pulse ${variantClasses[variant]} ${className}`,
+      style,
+      "aria-busy": "true",
+      "aria-live": "polite",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+Skeleton.displayName = "Skeleton";
+var skeleton_default = Skeleton;
+function Badge({ children, variant = "default", size = "md", className = "", ...props }) {
+  const variantClasses = {
+    default: "bg-muted text-muted-foreground border border-border",
+    primary: "bg-primary/10 text-primary border border-primary/20",
+    success: "bg-success/10 text-success border border-success/20",
+    warning: "bg-warning/10 text-warning border border-warning/20",
+    error: "bg-destructive/10 text-destructive border border-destructive/20"
+  };
+  const sizeClasses = {
+    sm: "px-2 py-0.5 text-xs",
+    md: "px-2.5 py-0.5 text-xs font-semibold",
+    lg: "px-3 py-1 text-sm font-semibold"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `inline-flex items-center font-medium rounded-full transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+Badge.displayName = "Badge";
+var badge_default = Badge;
+function StatusLabel({
+  children,
+  status = "info",
+  size = "md",
+  variant = "filled",
+  className = ""
+}) {
+  const statusConfig = {
+    active: {
+      filled: "bg-success/10 text-success border-success/20",
+      outlined: "bg-transparent text-success border-success",
+      dot: "bg-success"
+    },
+    inactive: {
+      filled: "bg-muted text-muted-foreground border-border",
+      outlined: "bg-transparent text-muted-foreground border-muted-foreground",
+      dot: "bg-muted-foreground"
+    },
+    pending: {
+      filled: "bg-warning/10 text-warning border-warning/20",
+      outlined: "bg-transparent text-warning border-warning",
+      dot: "bg-warning"
+    },
+    success: {
+      filled: "bg-success/10 text-success border-success/20",
+      outlined: "bg-transparent text-success border-success",
+      dot: "bg-success"
+    },
+    error: {
+      filled: "bg-destructive/10 text-destructive border-destructive/20",
+      outlined: "bg-transparent text-destructive border-destructive",
+      dot: "bg-destructive"
+    },
+    warning: {
+      filled: "bg-warning/10 text-warning border-warning/20",
+      outlined: "bg-transparent text-warning border-warning",
+      dot: "bg-warning"
+    },
+    info: {
+      filled: "bg-primary/10 text-primary border-primary/20",
+      outlined: "bg-transparent text-primary border-primary",
+      dot: "bg-primary"
+    }
+  };
+  const sizeClasses = {
+    sm: {
+      container: "px-2 py-0.5 text-xs gap-1.5",
+      dot: "w-1.5 h-1.5"
+    },
+    md: {
+      container: "px-2.5 py-0.5 text-sm gap-2",
+      dot: "w-2 h-2"
+    },
+    lg: {
+      container: "px-3 py-1 text-base gap-2",
+      dot: "w-2.5 h-2.5"
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center font-medium rounded-full border ${statusConfig[status][variant]} ${sizeClasses[size].container} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full ${statusConfig[status].dot} ${sizeClasses[size].dot}` }),
+        children
+      ]
+    }
+  );
+}
+StatusLabel.displayName = "StatusLabel";
+var status_label_default = StatusLabel;
+function Avatar({ src, alt = "", fallback, size = "md", className = "" }) {
+  const sizeClasses = {
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+    xl: "w-16 h-16 text-lg"
+  };
+  let content;
+  if (src) {
+    content = /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full h-full object-cover" });
+  } else if (fallback) {
+    content = fallback;
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsx("span", { children: alt.charAt(0).toUpperCase() });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium overflow-hidden ${sizeClasses[size]} ${className}`,
+      children: content
+    }
+  );
+}
+Avatar.displayName = "Avatar";
+var avatar_default = Avatar;
+function EmptyState({ title, description, icon, action, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col items-center justify-center text-center py-12 ${className}`, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground mb-4", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-6 max-w-sm", children: description }),
+    action
+  ] });
+}
+EmptyState.displayName = "EmptyState";
+var empty_state_default = EmptyState;
+function List({ children, className = "", ordered = false }) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { className: `divide-y divide-gray-200 ${className}`, children });
+}
+function ListItem({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: `py-3 ${className}`, children });
+}
+function Table({
+  children,
+  className = "",
+  striped = false,
+  bordered = false,
+  hoverable = false,
+  compact = false,
+  caption,
+  ...props
+}) {
+  const baseClasses = "w-full text-sm text-left";
+  const stripedClasses = striped ? "striped" : "";
+  const borderedClasses = bordered ? "border border-border" : "";
+  const compactClasses = compact ? "table-compact" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-x-auto rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        className: `${baseClasses} ${stripedClasses} ${borderedClasses} ${compactClasses} ${className}`,
+        ...props,
+        children: [
+          caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        .striped tbody tr:nth-child(even) {
+          background-color: hsl(var(--muted) / 0.3);
+        }
+        ${hoverable ? `
+        table tbody tr:hover {
+          background-color: hsl(var(--muted) / 0.5);
+        }
+        ` : ""}
+        .table-compact td,
+        .table-compact th {
+          padding: 0.5rem;
+        }
+      ` })
+  ] });
+}
+function TableHeader({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: `text-xs text-muted-foreground uppercase bg-muted/50 ${className}`, ...props, children });
+}
+function TableBody({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `divide-y divide-border ${className}`, ...props, children });
+}
+function TableFooter({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { className: `text-xs font-semibold text-foreground bg-muted/30 ${className}`, ...props, children });
+}
+function TableRow({ children, className = "", selected = false, ...props }) {
+  const selectedClasses = selected ? "bg-primary/10" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: `${selectedClasses} ${className}`, ...props, children });
+}
+function TableHeadCell({
+  children,
+  className = "",
+  align = "left",
+  scope = "col",
+  ...props
+}) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { scope, className: `px-6 py-3 font-medium ${alignClasses[align]} ${className}`, ...props, children });
+}
+function TableCell({ children, className = "", align = "left", ...props }) {
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses[align]} ${className}`, ...props, children });
+}
+function useTable({ data, initialSort, pageSize = 10 }) {
+  const [sortConfig, setSortConfig] = react.useState(
+    initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
+  );
+  const [currentPage, setCurrentPage] = react.useState(1);
+  const [selectedRows, setSelectedRows] = react.useState(/* @__PURE__ */ new Set());
+  const sortedData = react.useMemo(() => {
+    if (!sortConfig) return data;
+    const sorted = [...data].sort((a, b) => {
+      const aValue = a[sortConfig.key];
+      const bValue = b[sortConfig.key];
+      if (aValue === bValue) return 0;
+      if (aValue == null) return 1;
+      if (bValue == null) return -1;
+      if (aValue < bValue) {
+        return sortConfig.direction === "asc" ? -1 : 1;
+      }
+      return sortConfig.direction === "asc" ? 1 : -1;
+    });
+    return sorted;
+  }, [data, sortConfig]);
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const currentData = sortedData.slice(startIndex, endIndex);
+  const handleSort = (key) => {
+    let direction = "asc";
+    if (sortConfig?.key === key) {
+      if (sortConfig.direction === "asc") {
+        direction = "desc";
+      } else if (sortConfig.direction === "desc") {
+        direction = null;
+      }
+    }
+    setSortConfig(direction ? { key, direction } : null);
+    setCurrentPage(1);
+  };
+  const nextPage = () => {
+    setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+  };
+  const prevPage = () => {
+    setCurrentPage((prev) => Math.max(prev - 1, 1));
+  };
+  const canNextPage = currentPage < totalPages;
+  const canPrevPage = currentPage > 1;
+  const toggleRow = (index) => {
+    setSelectedRows((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  const toggleAll = () => {
+    if (selectedRows.size === currentData.length) {
+      setSelectedRows(/* @__PURE__ */ new Set());
+    } else {
+      const allIndices = currentData.map((_, idx) => startIndex + idx);
+      setSelectedRows(new Set(allIndices));
+    }
+  };
+  const isRowSelected = (index) => selectedRows.has(index);
+  const isAllSelected = currentData.length > 0 && currentData.every((_, idx) => selectedRows.has(startIndex + idx));
+  const clearSelection = () => setSelectedRows(/* @__PURE__ */ new Set());
+  return {
+    currentData,
+    sortedData,
+    sortConfig,
+    handleSort,
+    currentPage,
+    totalPages,
+    setCurrentPage,
+    nextPage,
+    prevPage,
+    canNextPage,
+    canPrevPage,
+    selectedRows,
+    toggleRow,
+    toggleAll,
+    isRowSelected,
+    isAllSelected,
+    clearSelection
+  };
+}
+function DataTable({
+  data,
+  columns,
+  className = "",
+  striped = true,
+  bordered = false,
+  hoverable = true,
+  compact = false,
+  stickyHeader = false,
+  sortable = true,
+  paginated = false,
+  pageSize = 10,
+  selectable = false,
+  onRowClick,
+  onSelectionChange,
+  emptyMessage = "No data available",
+  emptyIcon,
+  initialSort
+}) {
+  const tableOptions = {
+    data,
+    initialSort,
+    pageSize
+  };
+  const {
+    currentData,
+    sortedData,
+    sortConfig,
+    handleSort,
+    currentPage,
+    totalPages,
+    nextPage,
+    prevPage,
+    canNextPage,
+    canPrevPage,
+    selectedRows,
+    toggleRow,
+    toggleAll,
+    isRowSelected,
+    isAllSelected
+  } = useTable(tableOptions);
+  const displayData = paginated ? currentData : sortedData;
+  const handleToggleRow = (index) => {
+    toggleRow(index);
+    if (onSelectionChange) {
+      const newSelection = new Set(selectedRows);
+      if (newSelection.has(index)) {
+        newSelection.delete(index);
+      } else {
+        newSelection.add(index);
+      }
+      onSelectionChange(Array.from(newSelection));
+    }
+  };
+  const handleToggleAll = () => {
+    toggleAll();
+    if (onSelectionChange) {
+      if (isAllSelected) {
+        onSelectionChange([]);
+      } else {
+        const startIndex = (currentPage - 1) * pageSize;
+        const allIndices = displayData.map((_, idx) => startIndex + idx);
+        onSelectionChange(allIndices);
+      }
+    }
+  };
+  const renderSortIcon = (columnKey) => {
+    if (!sortable) return null;
+    const isSorted = sortConfig?.key === columnKey;
+    if (!isSorted) {
+      return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSelector, { className: "w-4 h-4 ml-1 text-muted-foreground" });
+    }
+    if (sortConfig?.direction === "asc") {
+      return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronUp, { className: "w-4 h-4 ml-1 text-primary" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronDown, { className: "w-4 h-4 ml-1 text-primary" });
+  };
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(empty_state_default, { title: emptyMessage, icon: emptyIcon, className: "py-12" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: stickyHeader ? "overflow-auto max-h-[600px]" : "", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { striped, bordered, hoverable, compact, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsxRuntime.jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
+        columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHeadCell,
+          {
+            align: column.align,
+            className: column.width ? `w-[${column.width}]` : "",
+            children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handleSort(column.key),
+                className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
+                type: "button",
+                children: [
+                  column.label,
+                  renderSortIcon(column.key)
+                ]
+              }
+            ) : column.label
+          },
+          String(column.key)
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: displayData.map((row, rowIndex) => {
+        const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
+        const isSelected = isRowSelected(actualIndex);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TableRow,
+          {
+            selected: isSelected,
+            onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
+            className: onRowClick ? "cursor-pointer" : "",
+            children: [
+              selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                checkbox_default,
+                {
+                  checked: isSelected,
+                  onChange: () => handleToggleRow(actualIndex),
+                  ariaLabel: `Select row ${actualIndex + 1}`
+                }
+              ) }),
+              columns.map((column) => {
+                const value = row[column.key];
+                const content = column.render ? column.render(value, row, actualIndex) : String(value ?? "");
+                return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { align: column.align, children: content }, String(column.key));
+              })
+            ]
+          },
+          actualIndex
+        );
+      }) })
+    ] }) }),
+    paginated && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages,
+        " (",
+        data.length,
+        " total rows)"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(button_default, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
+        /* @__PURE__ */ jsxRuntime.jsx(button_default, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
+      ] })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
+var data_table_default = DataTable;
+function Chip({
+  children,
+  className = "",
+  variant = "default",
+  size = "md",
+  onRemove,
+  icon,
+  disabled = false,
+  clickable = false,
+  onClick
+}) {
+  const sizeClasses = {
+    sm: "text-xs px-2 py-1 gap-1",
+    md: "text-sm px-3 py-1.5 gap-1.5",
+    lg: "text-base px-4 py-2 gap-2"
+  };
+  const variantClasses = {
+    default: "bg-muted text-muted-foreground",
+    primary: "bg-primary/10 text-primary",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+    error: "bg-destructive/10 text-destructive"
+  };
+  const interactiveClasses = clickable && !disabled ? "cursor-pointer hover:opacity-80 active:opacity-60 transition-opacity" : "";
+  const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
+  const handleClick = (e) => {
+    if (!disabled && clickable && onClick) {
+      onClick(e);
+    }
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    if (!disabled && onRemove) {
+      onRemove(e);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `
+        inline-flex items-center justify-center
+        rounded-full font-medium
+        ${sizeClasses[size]}
+        ${variantClasses[variant]}
+        ${interactiveClasses}
+        ${disabledClasses}
+        ${className}
+      `,
+      onClick: handleClick,
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable && !disabled ? 0 : void 0,
+      onKeyDown: clickable && !disabled ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.(e);
+        }
+      } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 flex items-center", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
+        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleRemove,
+            disabled,
+            className: `
+            flex-shrink-0 flex items-center justify-center
+            rounded-full hover:bg-black/10 dark:hover:bg-white/10
+            transition-colors
+            ${size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5"}
+            ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
+          `,
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { className: size === "sm" ? "w-2.5 h-2.5" : size === "md" ? "w-3 h-3" : "w-3.5 h-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+Chip.displayName = "Chip";
+var chip_default = Chip;
+function TimelineItem({
+  children,
+  className = "",
+  icon,
+  iconColor = "default",
+  title,
+  subtitle,
+  timestamp,
+  isLast = false
+}) {
+  const iconColorClasses = {
+    default: "bg-muted text-muted-foreground",
+    primary: "bg-primary text-primary-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground",
+    error: "bg-destructive text-destructive-foreground"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `
+            flex items-center justify-center
+            w-8 h-8 rounded-full
+            flex-shrink-0
+            ${iconColorClasses[iconColor]}
+          `,
+          children: icon || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-current" })
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0.5 flex-1 bg-border mt-2" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 ${!isLast ? "pb-8" : ""}`, children: [
+      (title || timestamp) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 mb-1", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-foreground", children: title }),
+        timestamp && /* @__PURE__ */ jsxRuntime.jsx("time", { className: "text-sm text-muted-foreground whitespace-nowrap", children: timestamp })
+      ] }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-2", children: subtitle }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground", children })
+    ] })
+  ] });
+}
+function Timeline({ children, className = "", position = "left" }) {
+  const positionClasses = {
+    left: "",
+    center: "mx-auto max-w-2xl",
+    right: "ml-auto max-w-2xl"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${positionClasses[position]} ${className}`, children });
+}
+Timeline.displayName = "Timeline";
+var timeline_default = Timeline;
+function Grid({
+  children,
+  className = "",
+  itemSize = "md",
+  maxCols,
+  gap = "md",
+  responsive,
+  alignItems = "stretch",
+  justifyItems = "stretch"
+}) {
+  const itemSizeValues = {
+    xs: "150px",
+    sm: "200px",
+    md: "250px",
+    lg: "300px",
+    xl: "350px",
+    "2xl": "400px"
+  };
+  const gapClasses = {
+    none: "gap-0",
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8",
+    "2xl": "gap-12"
+  };
+  const alignItemsClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyItemsClasses = {
+    start: "justify-items-start",
+    center: "justify-items-center",
+    end: "justify-items-end",
+    stretch: "justify-items-stretch"
+  };
+  const responsiveClasses = responsive ? Object.entries(responsive).map(([breakpoint, cols]) => {
+    const breakpointPrefix = breakpoint === "sm" ? "sm:" : breakpoint === "md" ? "md:" : breakpoint === "lg" ? "lg:" : "xl:";
+    return `${breakpointPrefix}grid-cols-${cols}`;
+  }).join(" ") : "";
+  const minWidth = itemSizeValues[itemSize];
+  const gridStyle = !responsive ? {
+    gridTemplateColumns: maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        grid
+        ${!responsive ? "" : responsiveClasses}
+        ${gapClasses[gap]}
+        ${alignItemsClasses[alignItems]}
+        ${justifyItemsClasses[justifyItems]}
+        ${className}
+      `.trim(),
+      style: gridStyle,
+      children
+    }
+  );
+}
+Grid.displayName = "Grid";
+var grid_default = Grid;
+function Heading({ children, level = 1, className = "", noMargin = false }) {
+  const levelClasses = {
+    1: "text-4xl font-bold",
+    2: "text-3xl font-bold",
+    3: "text-2xl font-semibold",
+    4: "text-xl font-semibold",
+    5: "text-lg font-medium",
+    6: "text-base font-medium"
+  };
+  const marginClasses = {
+    1: "mb-4",
+    2: "mb-3",
+    3: "mb-3",
+    4: "mb-2",
+    5: "mb-2",
+    6: "mb-2"
+  };
+  const margin = noMargin ? "" : marginClasses[level];
+  return react.createElement(
+    `h${level}`,
+    {
+      className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
+    },
+    children
+  );
+}
+Heading.displayName = "Heading";
+var heading_default = Heading;
+function PricingTable({ title, description, children, columns = 3, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { size: "xl", children: [
+    (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 md:mb-16 max-w-3xl mx-auto", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl text-muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(grid_default, { itemSize: "lg", maxCols: columns, gap: "lg", className: "items-stretch", children })
+  ] }) });
+}
+PricingTable.displayName = "PricingTable";
+var pricing_table_default = PricingTable;
+function Card({
+  children,
+  className = "",
+  variant = "default",
+  size = "md",
+  hoverable = false,
+  imagePosition = "top",
+  centered = false,
+  compact = false,
+  ...props
+}) {
+  const variantClasses = {
+    default: "bg-card text-card-foreground border border-border shadow-md",
+    bordered: "bg-card text-card-foreground border-2 border-border",
+    ghost: "bg-transparent",
+    filled: "bg-muted text-foreground"
+  };
+  const sizeClasses = {
+    xs: "w-36",
+    sm: "w-64",
+    md: "w-96",
+    lg: "w-[28rem]",
+    xl: "w-[32rem]"
+  };
+  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
+  const imagePositionClasses = {
+    top: "flex-col",
+    bottom: "flex-col-reverse",
+    side: "flex-row",
+    overlay: "relative"
+  };
+  const centerClasses = centered ? "text-center items-center" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        rounded-2xl
+        overflow-hidden
+        ${variantClasses[variant]}
+        ${size !== "md" ? sizeClasses[size] : "max-w-full"}
+        ${hoverClasses}
+        ${imagePositionClasses[imagePosition]}
+        ${centerClasses}
+        ${compact ? "p-4" : ""}
+        ${imagePosition === "side" ? "flex" : "flex"}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      ...props,
+      children
+    }
+  );
+}
+Card.displayName = "Card";
+var card_default = Card;
+function CardHeader({ children, className = "", bordered = true, padding = "md" }) {
+  const paddingClasses = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        card-header
+        flex items-center justify-between gap-3
+        ${paddingClasses[padding]}
+        ${bordered ? "border-b border-border" : ""}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardHeader.displayName = "CardHeader";
+var card_header_default = CardHeader;
+function CardFooter({
+  children,
+  className = "",
+  bordered = true,
+  padding = "md",
+  align = "start"
+}) {
+  const paddingClasses = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8"
+  };
+  const alignClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        card-footer
+        flex items-center gap-1
+        ${paddingClasses[padding]}
+        ${bordered ? "border-t border-border" : ""}
+        ${alignClasses[align]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardFooter.displayName = "CardFooter";
+var card_footer_default = CardFooter;
+function PricingTier({
+  name,
+  price,
+  period = "/month",
+  description,
+  features,
+  ctaLabel,
+  ctaOnClick,
+  featured = false,
+  badge,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    card_default,
+    {
+      className: `relative flex flex-col h-full p-6 ${featured ? "border-2 border-primary shadow-lg scale-105" : "border border-border"} ${className}`,
+      children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(badge_default, { variant: "primary", children: badge }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(card_header_default, { className: "text-center border-none bg-transparent px-0 pt-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 3, className: "text-2xl font-bold mb-2", children: name }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-5xl font-bold", children: price }),
+          period && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted ml-2", children: period })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-3 py-6", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            iconsReact.IconCheck,
+            {
+              size: 20,
+              className: `flex-shrink-0 mt-0.5 ${feature.included ? "text-success" : "text-muted opacity-30"}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: `text-sm ${feature.included ? "text-foreground" : "text-muted line-through"}`, children: feature.label })
+        ] }, index)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(card_footer_default, { className: "border-none bg-transparent px-0 pb-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          button_default,
+          {
+            variant: featured ? "primary" : "neutral",
+            style: featured ? void 0 : "outline",
+            className: "w-full",
+            size: "lg",
+            onClick: ctaOnClick,
+            children: ctaLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
+PricingTier.displayName = "PricingTier";
+var pricing_tier_default = PricingTier;
+function CodeBlock({ code, className = "", showCopy = true }) {
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative group ${className}`, children: [
+    showCopy && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(
+      button_default,
+      {
+        variant: "neutral",
+        style: "ghost",
+        size: "sm",
+        onClick: handleCopy,
+        className: "text-xs bg-background/80 hover:bg-background",
+        children: copied ? "\u2713 Copied" : "Copy"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `bg-muted/50 border rounded-lg p-4 overflow-x-auto text-sm ${showCopy ? "pr-24" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-foreground", children: code }) })
+  ] });
+}
+CodeBlock.displayName = "CodeBlock";
+var code_block_default = CodeBlock;
+function Divider({ orientation = "horizontal", className = "", ...props }) {
+  const orientationClasses = orientation === "horizontal" ? "w-full h-px" : "h-full w-px";
+  return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: `border-0 bg-border ${orientationClasses} ${className}`, "aria-orientation": orientation, ...props });
+}
+Divider.displayName = "Divider";
+var divider_default = Divider;
+function Drawer({ isOpen, onClose, children, position = "right", className = "" }) {
+  react.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.body.style.overflow = "";
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }
+    return void 0;
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const positionClasses = {
+    left: "left-0 top-0 h-full w-80 animate-slideInLeft",
+    right: "right-0 top-0 h-full w-80 animate-slideInRight",
+    top: "top-0 left-0 w-full h-80 animate-slideInTop",
+    bottom: "bottom-0 left-0 w-full h-80 animate-slideInBottom"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-40 animate-fadeIn border-none p-0 m-0 cursor-default",
+        onClick: onClose,
+        "aria-label": "Close drawer",
+        type: "button"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        className: `fixed bg-card text-card-foreground border border-border shadow-2xl z-50 ${positionClasses[position]} ${className}`,
+        role: "dialog",
+        "aria-modal": "true",
+        tabIndex: -1,
+        children
+      }
+    )
+  ] });
+}
+Drawer.displayName = "Drawer";
+var drawer_default = Drawer;
+function Page({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: `min-h-screen bg-background ${className}`, children });
+}
+Page.displayName = "Page";
+var page_default = Page;
+function AccordionItem({ title, children, defaultOpen = false }) {
+  const [isOpen, setIsOpen] = react.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "w-full flex items-center justify-between py-4 px-2 text-left hover:bg-accent hover:text-accent-foreground transition-colors",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: `w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-4 text-muted-foreground", children })
+  ] });
+}
+function Accordion({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `divide-y divide-gray-200 ${className}`, children });
+}
+Accordion.displayName = "Accordion";
+var accordion_default = Accordion;
+function Hero({
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  children,
+  className = "",
+  backgroundGradient = true,
+  centered = true,
+  size = "lg"
+}) {
+  const sizeClasses = {
+    sm: "py-12",
+    md: "py-16",
+    lg: "py-20 md:py-24"
+  };
+  const titleSizes = {
+    sm: "text-3xl md:text-4xl",
+    md: "text-4xl md:text-5xl",
+    lg: "text-4xl md:text-5xl lg:text-6xl"
+  };
+  const descriptionSizes = {
+    sm: "text-base md:text-lg",
+    md: "text-lg md:text-xl",
+    lg: "text-xl md:text-2xl"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: `${sizeClasses[size]} ${backgroundGradient ? "bg-gradient-to-b from-primary/10 via-primary/5 to-background" : "bg-background"} ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center" : "", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-bold mb-4 md:mb-6`, children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: `${descriptionSizes[size]} mb-6 md:mb-8 ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`, children: description }),
+        (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
+          primaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+            button_default,
+            {
+              size: "lg",
+              variant: primaryAction.variant || "primary",
+              style: primaryAction.style,
+              onClick: primaryAction.onClick,
+              loading: primaryAction.loading,
+              children: primaryAction.label
+            }
+          ),
+          secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+            button_default,
+            {
+              size: "lg",
+              variant: secondaryAction.variant || "neutral",
+              style: secondaryAction.style || "outline",
+              onClick: secondaryAction.onClick,
+              loading: secondaryAction.loading,
+              children: secondaryAction.label
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children })
+      ] }) })
+    }
+  );
+}
+Hero.displayName = "Hero";
+var hero_default = Hero;
+function FeatureSection({
+  title,
+  description,
+  features,
+  columns = 3,
+  centered = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { size: "xl", children: [
+    (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `mb-12 md:mb-16 ${centered ? "text-center" : ""} ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`,
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl", children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(grid_default, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center" : "", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-lg md:rounded-xl bg-primary/10 text-primary mb-4 md:mb-6 ${centered ? "" : "mr-auto"}`,
+          children: feature.icon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 3, className: "text-xl font-semibold mb-2 md:mb-3", children: feature.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm md:text-base", children: feature.description })
+    ] }, index)) })
+  ] }) });
+}
+FeatureSection.displayName = "FeatureSection";
+var feature_section_default = FeatureSection;
+function Link2({
+  children,
+  href,
+  external = false,
+  variant = "default",
+  underline = "hover",
+  size = "md",
+  display = "inline",
+  className = ""
+}) {
+  const variantClasses = {
+    default: "text-primary hover:text-primary/80",
+    muted: "text-muted-foreground hover:text-foreground",
+    secondary: "text-secondary hover:text-secondary/80",
+    inherit: "text-inherit hover:opacity-80"
+  };
+  const underlineClasses = {
+    hover: "hover:underline",
+    always: "underline",
+    none: "no-underline"
+  };
+  const sizeClasses = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg"
+  };
+  const displayClasses = {
+    inline: "inline",
+    block: "block"
+  };
+  const linkClassName = [
+    variantClasses[variant],
+    underlineClasses[underline],
+    sizeClasses[size],
+    displayClasses[display],
+    "cursor-pointer transition-colors",
+    className
+  ].filter(Boolean).join(" ");
+  if (external) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("a", { href, className: linkClassName, target: "_blank", rel: "noopener noreferrer", children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "inline-block w-4 h-4 ml-1",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, className: linkClassName, children });
+}
+Link2.displayName = "Link";
+var link_default = Link2;
+function Footer({ sections, copyright, social, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `border-t border-border bg-muted/20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs(container_default, { children: [
+    sections && sections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsxRuntime.jsx(grid_default, { itemSize: "xs", maxCols: 4, gap: "lg", children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-foreground mb-4", children: section.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        link_default,
+        {
+          href: link.href,
+          external: link.external,
+          className: "text-sm text-muted hover:text-foreground transition-colors",
+          children: link.label
+        }
+      ) }, linkIndex)) })
+    ] }, index)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
+        children: [
+          copyright && /* @__PURE__ */ jsxRuntime.jsx(text_default, { variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
+          social && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-4", children: social })
+        ]
+      }
+    )
+  ] }) });
+}
+Footer.displayName = "Footer";
+var footer_default = Footer;
+function LeftNavLayout({
+  nav,
+  children,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  showToggle = true,
+  className = "",
+  navClassName = "",
+  contentClassName = "",
+  navWidth = "16rem",
+  navWidthCollapsed = "4.5rem",
+  mobileCollapsible = true,
+  mobileMenuOpen: controlledMobileMenuOpen,
+  onMobileMenuOpenChange,
+  embedded = false
+}) {
+  const [internalCollapsed, setInternalCollapsed] = react.useState(false);
+  const [internalMobileMenuOpen, setInternalMobileMenuOpen] = react.useState(false);
+  const navRef = react.useRef(null);
+  const scrollPosRef = react.useRef(0);
+  const contentRef = react.useRef(null);
+  const location = reactRouterDom.useLocation();
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = (value) => {
+    if (onCollapsedChange) {
+      onCollapsedChange(value);
+    } else {
+      setInternalCollapsed(value);
+    }
+  };
+  const mobileMenuOpen = controlledMobileMenuOpen ?? internalMobileMenuOpen;
+  const setMobileMenuOpen = (value) => {
+    if (onMobileMenuOpenChange) {
+      onMobileMenuOpenChange(value);
+    } else {
+      setInternalMobileMenuOpen(value);
+    }
+  };
+  const toggleCollapsed = () => setCollapsed(!collapsed);
+  const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen);
+  react.useEffect(() => {
+    if (navRef.current) {
+      navRef.current.scrollTop = scrollPosRef.current;
+    }
+  }, [children]);
+  react.useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = 0;
+      requestAnimationFrame(() => {
+        if (contentRef.current) {
+          contentRef.current.scrollTop = 0;
+        }
+      });
+    }
+    window.scrollTo({ top: 0 });
+  }, [location.pathname]);
+  const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex min-h-screen bg-background";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${containerClasses} ${className}`, children: [
+    mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-40 lg:hidden bg-background/80", onClick: toggleMobileMenu, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        className: `
+          ${embedded ? "relative flex flex-col h-full" : "fixed lg:fixed top-0 lg:top-16 left-0 z-40 lg:z-10 h-screen lg:h-[calc(100vh-4rem)]"}
+          flex flex-col
+          bg-background
+          transition-all duration-300 ease-in-out
+          ${!embedded && mobileCollapsible && !mobileMenuOpen ? "-translate-x-full lg:translate-x-0" : "translate-x-0"}
+          ${collapsed ? navWidthCollapsed === "4.5rem" ? "w-[4.5rem]" : "" : navWidth === "16rem" ? "w-64" : ""}
+          overflow-visible
+          ${navClassName}
+        `,
+        style: !collapsed && navWidth !== "16rem" || collapsed && navWidthCollapsed !== "4.5rem" ? {
+          width: collapsed ? navWidthCollapsed : navWidth
+        } : void 0,
+        "aria-label": "Main navigation",
+        children: [
+          showToggle && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `
+            flex items-center justify-between
+            px-4 py-3 border-b border-border
+            ${collapsed ? "justify-center" : ""}
+          `,
+              children: [
+                !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: "Navigation" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: toggleCollapsed,
+                    className: "\n                hidden lg:flex items-center justify-center\n                w-8 h-8 rounded\n                text-foreground/70 hover:text-foreground\n                hover:bg-muted\n                transition-colors\n                focus:outline-none focus:ring-2 focus:ring-ring\n              ",
+                    "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    type: "button",
+                    children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronLeft, { size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "nav",
+            {
+              ref: navRef,
+              className: "flex-1 overflow-y-auto overflow-x-visible scrollbar-thin",
+              "data-collapsed": collapsed,
+              onScroll: (e) => {
+                scrollPosRef.current = e.currentTarget.scrollTop;
+              },
+              children: nav
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex-1 flex flex-col min-w-0 ${!embedded ? "transition-[margin-left] duration-300 ease-in-out" : ""} ${!embedded && collapsed ? navWidthCollapsed === "4.5rem" ? "lg:ml-[4.5rem]" : "" : !embedded && navWidth === "16rem" ? "lg:ml-64" : ""}`,
+        style: !embedded && (collapsed && navWidthCollapsed !== "4.5rem" || !collapsed && navWidth !== "16rem") ? {
+          marginLeft: window.innerWidth >= 1024 ? collapsed ? navWidthCollapsed : navWidth : "0"
+        } : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("main", { ref: contentRef, className: `flex-1 overflow-auto ${embedded ? "h-60" : ""} ${contentClassName}`, children })
+      }
+    )
+  ] });
+}
+LeftNavLayout.displayName = "LeftNavLayout";
+var left_nav_layout_default = LeftNavLayout;
+function LeftNavItem({
+  icon,
+  children,
+  active = false,
+  className = "",
+  badge,
+  href = "#",
+  title,
+  preventNavigation = false
+}) {
+  const navRef = react.useRef(null);
+  const [isCollapsed, setIsCollapsed] = react.useState(() => {
+    if (typeof window !== "undefined") {
+      const navElement = document.querySelector("nav[data-collapsed]");
+      return navElement?.getAttribute("data-collapsed") === "true";
+    }
+    return false;
+  });
+  react.useEffect(() => {
+    const checkCollapsed = () => {
+      const navElement2 = navRef.current?.closest("nav");
+      if (navElement2) {
+        setIsCollapsed(navElement2.getAttribute("data-collapsed") === "true");
+      }
+    };
+    checkCollapsed();
+    const navElement = navRef.current?.closest("nav");
+    if (navElement) {
+      const observer = new MutationObserver(checkCollapsed);
+      observer.observe(navElement, {
+        attributes: true,
+        attributeFilter: ["data-collapsed"]
+      });
+      return () => observer.disconnect();
+    }
+    return void 0;
+  }, []);
+  const itemTitle = title || (typeof children === "string" ? children : void 0);
+  const navLink = /* @__PURE__ */ jsxRuntime.jsxs(
+    reactRouterDom.NavLink,
+    {
+      ref: navRef,
+      to: href,
+      onClick: (e) => {
+        if (preventNavigation) {
+          e.preventDefault();
+        }
+      },
+      className: ({ isActive }) => `
+        group relative flex items-center gap-3
+        px-3 py-2.5 rounded-lg
+        mx-2
+        [nav[data-collapsed='true']_&]:mx-2
+        [nav[data-collapsed='true']_&]:px-0
+        [nav[data-collapsed='true']_&]:w-12
+        [nav[data-collapsed='true']_&]:justify-center
+        text-sm font-medium
+        transition-colors duration-200
+        focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-card
+        ${isActive || active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground hover:bg-muted hover:text-foreground"}
+        ${className}
+      `,
+      "aria-current": active ? "page" : void 0,
+      "aria-label": itemTitle,
+      end: true,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "\n          flex-1 truncate\n          [nav[data-collapsed='true']_&]:hidden\n        ",
+            children
+          }
+        ),
+        badge && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "\n            flex-shrink-0\n            [nav[data-collapsed='true']_&]:hidden\n          ",
+            children: badge
+          }
+        )
+      ]
+    }
+  );
+  if (!isCollapsed) {
+    return navLink;
+  }
+  const tooltipContent = typeof children === "string" ? children : itemTitle || "Menu Item";
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip_default, { content: tooltipContent, position: "right", variant: "default", usePortal: true, className: "w-full block", children: navLink });
+}
+LeftNavItem.displayName = "LeftNavItem";
+var left_nav_item_default = LeftNavItem;
+function LeftNavSection({ children, label, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `py-2 ${className}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "h3",
+      {
+        className: "\n            px-5 mb-2 mt-2\n            text-xs font-semibold uppercase tracking-wider\n            text-muted-foreground\n            [nav[data-collapsed='true']_&]:hidden\n          ",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border mx-3 mt-2", "aria-hidden": "true" })
+  ] });
+}
+LeftNavSection.displayName = "LeftNavSection";
+var left_nav_section_default = LeftNavSection;
+function Code({ children, block = false, variant = "default", className = "" }) {
+  const variantClasses = {
+    default: "bg-muted text-foreground",
+    primary: "text-primary",
+    muted: "text-muted-foreground"
+  };
+  const baseClasses = `font-mono ${variantClasses[variant]}`;
+  if (block) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: `${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`, children });
+}
+Code.displayName = "Code";
+var code_default = Code;
+var ThemeContext = react.createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "hydn-theme",
+  themes = ["light", "dark"]
+}) {
+  const [theme, setThemeState] = react.useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      return stored && themes.includes(stored) ? stored : defaultTheme;
+    }
+    return defaultTheme;
+  });
+  react.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(...themes);
+    root.classList.add(theme);
+  }, [theme, themes]);
+  const setTheme = react.useCallback(
+    (newTheme) => {
+      if (themes.includes(newTheme)) {
+        localStorage.setItem(storageKey, newTheme);
+        setThemeState(newTheme);
+      } else {
+        console.warn(`Theme "${newTheme}" is not in availableThemes. Add it to the themes prop.`);
+      }
+    },
+    [themes, storageKey]
+  );
+  const value = react.useMemo(
+    () => ({
+      theme,
+      setTheme,
+      availableThemes: themes
+    }),
+    [theme, themes, setTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function ColorModeToggle({ className = "" }) {
+  const { theme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+  const getIcon = () => {
+    if (theme === "dark") {
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      }
+    ) });
+  };
+  const getLabel = () => {
+    return `Switch to ${theme === "light" ? "dark" : "light"} theme`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: toggleTheme,
+      className: `p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer ${className}`,
+      "aria-label": getLabel(),
+      title: getLabel(),
+      children: getIcon()
+    }
+  );
+}
+ColorModeToggle.displayName = "ColorModeToggle";
+var color_mode_toggle_default = ColorModeToggle;
+
+exports.Accordion = accordion_default;
+exports.AccordionItem = AccordionItem;
+exports.Alert = alert_default;
+exports.Avatar = avatar_default;
+exports.Badge = badge_default;
+exports.Breadcrumbs = breadcrumbs_default;
+exports.Button = button_default;
+exports.ButtonGroup = button_group_default;
+exports.Card = card_default;
+exports.CardFooter = card_footer_default;
+exports.CardHeader = card_header_default;
+exports.Checkbox = checkbox_default;
+exports.Chip = chip_default;
+exports.Code = code_default;
+exports.CodeBlock = code_block_default;
+exports.ColorModeToggle = color_mode_toggle_default;
+exports.Container = container_default;
+exports.DataTable = data_table_default;
+exports.DeleteDialog = delete_dialog_default;
+exports.Dialog = dialog_default;
+exports.Divider = divider_default;
+exports.Drawer = drawer_default;
+exports.Dropdown = dropdown_default;
+exports.EmptyState = empty_state_default;
+exports.FeatureSection = feature_section_default;
+exports.Footer = footer_default;
+exports.FormField = form_field_default;
+exports.Grid = grid_default;
+exports.Heading = heading_default;
+exports.Hero = hero_default;
+exports.Input = input_default;
+exports.InputGroup = input_group_default;
+exports.LeftNavItem = left_nav_item_default;
+exports.LeftNavLayout = left_nav_layout_default;
+exports.LeftNavSection = left_nav_section_default;
+exports.Link = link_default;
+exports.List = List;
+exports.ListItem = ListItem;
+exports.Modal = modal_default;
+exports.Nav = nav_default;
+exports.Navbar = navbar_default;
+exports.NavbarBrand = navbar_brand_default;
+exports.NavbarLink = navbar_link_default;
+exports.Page = page_default;
+exports.Pagination = pagination_default;
+exports.Popover = popover_default;
+exports.PricingTable = pricing_table_default;
+exports.PricingTier = pricing_tier_default;
+exports.ProgressBar = progress_bar_default;
+exports.Radio = radio_default;
+exports.RadioGroup = radio_group_default;
+exports.Select = select_default;
+exports.SelectItem = select_item_default;
+exports.Sidebar = sidebar_default;
+exports.Skeleton = skeleton_default;
+exports.Slider = slider_default;
+exports.Spinner = spinner_default;
+exports.Stack = stack_default;
+exports.StatusLabel = status_label_default;
+exports.Stepper = stepper_default;
+exports.Switch = switch_default;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHeadCell = TableHeadCell;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.Tabs = tabs_default;
+exports.Text = text_default;
+exports.Textarea = textarea_default;
+exports.ThemeProvider = ThemeProvider;
+exports.Timeline = timeline_default;
+exports.TimelineItem = TimelineItem;
+exports.Toast = toast_default;
+exports.Tooltip = tooltip_default;
+exports.useTable = useTable;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map