@proyecto-viviana/ui 0.1.1 → 0.1.3

package/dist/index.jsx

@@ -0,0 +1,1533 @@
+// src/button/Button.tsx
+import { splitProps, mergeProps as solidMergeProps } from "solid-js";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
+function Button(props) {
+  const defaultProps = {
+    variant: "primary",
+    buttonStyle: "fill",
+    size: "md"
+  };
+  const merged = solidMergeProps(defaultProps, props);
+  const [local, headlessProps] = splitProps(merged, [
+    "children",
+    "variant",
+    "buttonStyle",
+    "size",
+    "fullWidth",
+    "staticColor",
+    "class"
+  ]);
+  const getClassName = (renderProps) => {
+    const classList = [
+      "vui-button",
+      `vui-button--${local.buttonStyle}`,
+      `vui-button--${local.variant}`,
+      `vui-button--${local.size}`
+    ];
+    if (renderProps.isPressed) {
+      classList.push("is-pressed");
+    }
+    if (local.fullWidth) {
+      classList.push("vui-button--full-width");
+    }
+    if (local.class) {
+      classList.push(local.class);
+    }
+    return classList.join(" ");
+  };
+  return <HeadlessButton
+    {...headlessProps}
+    class={getClassName}
+    data-variant={local.variant}
+    data-style={local.buttonStyle}
+    data-static-color={local.staticColor || void 0}
+  >
+      {local.children}
+    </HeadlessButton>;
+}
+
+// src/badge/index.tsx
+import { Show } from "solid-js";
+var variantStyles = {
+  primary: "bg-primary-500 text-white",
+  secondary: "bg-bg-300 text-primary-300",
+  accent: "bg-accent-300 text-black",
+  success: "bg-success-400 text-white",
+  warning: "bg-warning-400 text-black",
+  danger: "bg-danger-400 text-white"
+};
+var sizeStyles = {
+  sm: "w-5 h-5 text-xs",
+  md: "w-7 h-7 text-xs",
+  lg: "w-9 h-9 text-sm"
+};
+function Badge(props) {
+  const variant = () => props.variant ?? "accent";
+  const size = () => props.size ?? "md";
+  return <div
+    class={`flex items-center justify-center rounded-full border-b border-white font-semibold ${variantStyles[variant()]} ${sizeStyles[size()]} ${props.class ?? ""}`}
+  >
+      <Show when={props.count !== void 0} fallback={props.children}>
+        <span>{props.count}</span>
+      </Show>
+    </div>;
+}
+
+// src/alert/index.tsx
+import { Show as Show2 } from "solid-js";
+var variantStyles2 = {
+  info: "bg-primary-700 text-primary-200 border border-primary-500",
+  success: "bg-success-600 text-success-100 border border-success-400",
+  warning: "bg-warning-600 text-warning-100 border border-warning-400",
+  error: "bg-danger-600 text-danger-100 border border-danger-400"
+};
+function Alert(props) {
+  const variant = () => props.variant ?? "info";
+  return <div
+    class={`flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${variantStyles2[variant()]} ${props.class ?? ""}`}
+    role="alert"
+  >
+      <div class="flex items-center gap-3 flex-1">
+        <Show2 when={props.title}>
+          <span class="font-semibold font-jost">{props.title}</span>
+          <span class="opacity-50">|</span>
+        </Show2>
+        <div class="flex-1">{props.children}</div>
+        <Show2 when={props.dismissible}>
+          <button
+    class="hover:opacity-70 transition-opacity ml-2"
+    onClick={props.onDismiss}
+    aria-label="Dismiss"
+  >
+            ✕
+          </button>
+        </Show2>
+      </div>
+    </div>;
+}
+
+// src/avatar/index.tsx
+import { Show as Show3 } from "solid-js";
+var sizeStyles2 = {
+  xs: { container: "w-6 h-6", text: "text-xs", indicator: "w-1.5 h-1.5" },
+  sm: { container: "w-8 h-8", text: "text-sm", indicator: "w-2 h-2" },
+  md: { container: "w-10 h-10", text: "text-base", indicator: "w-2.5 h-2.5" },
+  lg: { container: "w-14 h-14", text: "text-lg", indicator: "w-3 h-3" },
+  xl: { container: "w-20 h-20", text: "text-xl", indicator: "w-4 h-4" }
+};
+function Avatar(props) {
+  const size = () => props.size ?? "md";
+  const styles = () => sizeStyles2[size()];
+  const initials = () => {
+    if (props.fallback) return props.fallback.slice(0, 2).toUpperCase();
+    if (props.alt) return props.alt.slice(0, 2).toUpperCase();
+    return "?";
+  };
+  return <div class={`relative inline-block ${props.class ?? ""}`}>
+      <div
+    class={`${styles().container} rounded-full overflow-hidden bg-bg-200 flex items-center justify-center ring-2 ring-accent/50`}
+  >
+        <Show3
+    when={props.src}
+    fallback={<span class={`${styles().text} font-medium text-primary-300`}>
+              {initials()}
+            </span>}
+  >
+          <img
+    src={props.src}
+    alt={props.alt ?? "Avatar"}
+    class="w-full h-full object-cover"
+  />
+        </Show3>
+      </div>
+      <Show3 when={props.online !== void 0}>
+        <span
+    class={`absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${props.online ? "bg-success-400" : "bg-bg-light"}`}
+  />
+      </Show3>
+    </div>;
+}
+function AvatarGroup(props) {
+  return <div class="flex -space-x-2">
+      {props.children}
+    </div>;
+}
+
+// src/switch/index.tsx
+import { createSignal, createEffect } from "solid-js";
+
+// src/switch/ToggleSwitch.tsx
+import { splitProps as splitProps2, mergeProps as solidMergeProps2 } from "solid-js";
+import { ToggleSwitch as HeadlessToggleSwitch } from "@proyecto-viviana/solidaria-components";
+var sizeStyles3 = {
+  sm: {
+    track: "h-5 w-9",
+    thumb: "h-4 w-4",
+    translate: "translate-x-4"
+  },
+  md: {
+    track: "h-6 w-11",
+    thumb: "h-5 w-5",
+    translate: "translate-x-5"
+  },
+  lg: {
+    track: "h-7 w-14",
+    thumb: "h-6 w-6",
+    translate: "translate-x-7"
+  }
+};
+function ToggleSwitch(props) {
+  const defaultProps = {
+    size: "md"
+  };
+  const merged = solidMergeProps2(defaultProps, props);
+  const [local, headlessProps] = splitProps2(merged, [
+    "size",
+    "class",
+    "children"
+  ]);
+  const size = () => sizeStyles3[local.size];
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  return <HeadlessToggleSwitch
+    {...headlessProps}
+    class={getClassName}
+  >
+      {(renderProps) => <>
+          <span
+    class={[
+      "relative rounded-full transition-colors duration-200",
+      "focus-within:ring-2 focus-within:ring-accent-300 focus-within:ring-offset-2 focus-within:ring-offset-bg-400",
+      size().track,
+      renderProps.isSelected ? "bg-accent" : "bg-bg-300",
+      renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+    ].join(" ")}
+  >
+            <span
+    class={[
+      "absolute top-0.5 left-0.5 rounded-full bg-white shadow transition-transform duration-200",
+      size().thumb,
+      renderProps.isSelected ? size().translate : "translate-x-0"
+    ].join(" ")}
+  />
+          </span>
+          {local.children && <span class="text-primary-200">{local.children}</span>}
+        </>}
+    </HeadlessToggleSwitch>;
+}
+
+// src/switch/index.tsx
+function TabSwitch(props) {
+  const [leftSelected, setLeftSelected] = createSignal(
+    props.value ? props.value === props.options[0]?.value : true
+  );
+  createEffect(() => {
+    if (props.value !== void 0) {
+      setLeftSelected(props.value === props.options[0]?.value);
+    }
+  });
+  const toggle = () => {
+    const newLeftSelected = !leftSelected();
+    setLeftSelected(newLeftSelected);
+    const newValue = newLeftSelected ? props.options[0]?.value : props.options[1]?.value;
+    if (newValue) {
+      props.onChange?.(newValue);
+    }
+  };
+  const leftSelectedStyle = "left-0 w-[142px] border-l-2";
+  const rightSelectedStyle = "left-[142px] w-[108px] border-r-2";
+  const textSelected = "font-extrabold text-primary-300";
+  const textUnselected = "font-medium text-primary-600 tracking-wider";
+  return <div
+    onClick={toggle}
+    class={`relative bg-bg-400 rounded-full w-[250px] cursor-pointer ${props.class ?? ""}`}
+  >
+      <div
+    class={`${leftSelected() ? leftSelectedStyle : rightSelectedStyle} transition-all duration-500 ease-in-out z-0 absolute bg-primary-600 rounded-full h-8 border-accent-300`}
+  />
+      <div class="flex z-10 h-8 justify-around">
+        <button
+    type="button"
+    class={`${leftSelected() ? textSelected : textUnselected} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`}
+  >
+          <span>{props.options[0]?.label ?? "TENDENCIAS"}</span>
+        </button>
+        <button
+    type="button"
+    class={`${leftSelected() ? textUnselected : textSelected} transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`}
+  >
+          <span>{props.options[1]?.label ?? "\xDALTIMOS"}</span>
+        </button>
+      </div>
+    </div>;
+}
+
+// src/checkbox/index.tsx
+import { splitProps as splitProps3, mergeProps as solidMergeProps3, Show as Show4 } from "solid-js";
+import {
+  Checkbox as HeadlessCheckbox,
+  CheckboxGroup as HeadlessCheckboxGroup
+} from "@proyecto-viviana/solidaria-components";
+var sizeStyles4 = {
+  sm: {
+    box: "h-4 w-4",
+    icon: "h-3 w-3",
+    label: "text-sm"
+  },
+  md: {
+    box: "h-5 w-5",
+    icon: "h-3.5 w-3.5",
+    label: "text-base"
+  },
+  lg: {
+    box: "h-6 w-6",
+    icon: "h-4 w-4",
+    label: "text-lg"
+  }
+};
+function CheckIcon(props) {
+  return <svg
+    class={props.class}
+    viewBox="0 0 12 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+      <path
+    d="M1 5L4.5 8.5L11 1"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+    </svg>;
+}
+function IndeterminateIcon(props) {
+  return <svg
+    class={props.class}
+    viewBox="0 0 12 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+      <path
+    d="M1 1H11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  />
+    </svg>;
+}
+function Checkbox(props) {
+  const defaultProps = {
+    size: "md"
+  };
+  const merged = solidMergeProps3(defaultProps, props);
+  const [local, headlessProps] = splitProps3(merged, [
+    "size",
+    "class",
+    "children"
+  ]);
+  const size = () => sizeStyles4[local.size];
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  return <HeadlessCheckbox
+    {...headlessProps}
+    class={getClassName}
+  >
+      {(renderProps) => {
+    const boxClasses = () => {
+      const base = "relative flex items-center justify-center rounded border-2 transition-all duration-200";
+      const sizeClass = size().box;
+      let colorClass;
+      if (renderProps.isDisabled) {
+        colorClass = "border-bg-300 bg-bg-200";
+      } else if (renderProps.isSelected || renderProps.isIndeterminate) {
+        colorClass = "border-accent bg-accent";
+      } else {
+        colorClass = "border-primary-600 bg-transparent hover:border-accent-300";
+      }
+      const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+      const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
+      return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(" ");
+    };
+    const iconClasses = () => {
+      const base = "text-white transition-opacity duration-200";
+      const sizeClass = size().icon;
+      const visibilityClass = renderProps.isSelected || renderProps.isIndeterminate ? "opacity-100" : "opacity-0";
+      return [base, sizeClass, visibilityClass].filter(Boolean).join(" ");
+    };
+    const labelClasses = () => {
+      const base = "text-primary-200";
+      const sizeClass = size().label;
+      const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+      return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
+    };
+    return <>
+            <span class={boxClasses()}>
+              <Show4
+      when={!renderProps.isIndeterminate}
+      fallback={<IndeterminateIcon class={iconClasses()} />}
+    >
+                <CheckIcon class={iconClasses()} />
+              </Show4>
+            </span>
+            <Show4 when={local.children}>
+              <span class={labelClasses()}>{local.children}</span>
+            </Show4>
+          </>;
+  }}
+    </HeadlessCheckbox>;
+}
+function CheckboxGroup(props) {
+  const [local, headlessProps] = splitProps3(props, [
+    "class",
+    "children",
+    "label",
+    "description",
+    "errorMessage"
+  ]);
+  const getClassName = (renderProps) => {
+    const base = "flex flex-col gap-2";
+    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  const renderChildren = (renderProps) => <>
+      <Show4 when={local.label}>
+        <span class="text-sm font-medium text-primary-200">{local.label}</span>
+      </Show4>
+      <div class="flex flex-col gap-2">
+        {local.children}
+      </div>
+      <Show4 when={local.description && !renderProps.isInvalid}>
+        <span class="text-sm text-primary-400">{local.description}</span>
+      </Show4>
+      <Show4 when={local.errorMessage && renderProps.isInvalid}>
+        <span class="text-sm text-danger-400">{local.errorMessage}</span>
+      </Show4>
+    </>;
+  return <HeadlessCheckboxGroup
+    {...headlessProps}
+    class={getClassName}
+    children={renderChildren}
+  />;
+}
+
+// src/radio/index.tsx
+import { Show as Show5, createContext, useContext, splitProps as splitProps4 } from "solid-js";
+import {
+  RadioGroup as HeadlessRadioGroup,
+  Radio as HeadlessRadio
+} from "@proyecto-viviana/solidaria-components";
+var RadioSizeContext = createContext("md");
+var sizeStyles5 = {
+  sm: {
+    circle: "h-4 w-4",
+    dot: "h-2 w-2",
+    label: "text-sm"
+  },
+  md: {
+    circle: "h-5 w-5",
+    dot: "h-2.5 w-2.5",
+    label: "text-base"
+  },
+  lg: {
+    circle: "h-6 w-6",
+    dot: "h-3 w-3",
+    label: "text-lg"
+  }
+};
+function RadioGroup(props) {
+  const [local, headlessProps] = splitProps4(props, [
+    "size",
+    "class",
+    "label",
+    "description",
+    "errorMessage",
+    "children"
+  ]);
+  const size = local.size ?? "md";
+  const customClass = local.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "flex gap-2";
+    const orientationClass = renderProps.orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col";
+    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+    return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const renderChildren = (renderProps) => <>
+      <Show5 when={local.label}>
+        <span class="text-primary-200 font-medium mb-1">{local.label}</span>
+      </Show5>
+      {typeof local.children === "function" ? local.children(renderProps) : local.children}
+      <Show5 when={local.description && !renderProps.isInvalid}>
+        <span class="text-primary-400 text-sm">{local.description}</span>
+      </Show5>
+      <Show5 when={local.errorMessage && renderProps.isInvalid}>
+        <span class="text-danger-400 text-sm">{local.errorMessage}</span>
+      </Show5>
+    </>;
+  return <RadioSizeContext.Provider value={size}>
+      <HeadlessRadioGroup
+    {...headlessProps}
+    class={getClassName}
+    data-size={size}
+    children={renderChildren}
+  />
+    </RadioSizeContext.Provider>;
+}
+function Radio(props) {
+  const sizeFromContext = useContext(RadioSizeContext);
+  const size = () => sizeStyles5[sizeFromContext];
+  const customClass = props.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "inline-flex items-center gap-2 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    return [base, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const { class: _, children, ...headlessProps } = props;
+  return <HeadlessRadio
+    {...headlessProps}
+    class={getClassName}
+  >
+      {(renderProps) => {
+    const circleClasses = () => {
+      const base = "relative flex items-center justify-center rounded-full border-2 transition-all duration-200";
+      const sizeClass = size().circle;
+      let colorClass;
+      if (renderProps.isDisabled) {
+        colorClass = "border-bg-300 bg-bg-200";
+      } else if (renderProps.isSelected) {
+        colorClass = "border-accent bg-transparent";
+      } else {
+        colorClass = "border-primary-600 bg-transparent hover:border-accent-300";
+      }
+      const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+      const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
+      return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(" ");
+    };
+    const dotClasses = () => {
+      const base = "rounded-full bg-accent transition-all duration-200";
+      const sizeClass = size().dot;
+      const visibilityClass = renderProps.isSelected ? "scale-100 opacity-100" : "scale-0 opacity-0";
+      return [base, sizeClass, visibilityClass].filter(Boolean).join(" ");
+    };
+    const labelClasses = () => {
+      const base = "text-primary-200";
+      const sizeClass = size().label;
+      const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
+      return [base, sizeClass, disabledClass].filter(Boolean).join(" ");
+    };
+    const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
+    return <>
+            <span class={circleClasses()}>
+              <span class={dotClasses()} />
+            </span>
+            <Show5 when={resolvedChildren}>
+              <span class={labelClasses()}>{resolvedChildren}</span>
+            </Show5>
+          </>;
+  }}
+    </HeadlessRadio>;
+}
+
+// src/dialog/index.tsx
+import { Show as Show6 } from "solid-js";
+
+// src/custom/chip/index.tsx
+var variantStyles3 = {
+  primary: "bg-primary-700 text-primary-200 shadow-primary-chip",
+  secondary: "bg-primary-600 text-primary-100 hover:bg-primary-500",
+  accent: "bg-accent text-white",
+  outline: "bg-transparent border border-primary-500 text-primary-300"
+};
+function Chip(props) {
+  const variant = () => props.variant ?? "primary";
+  return <button
+    class={`flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles3[variant()]} ${props.class ?? ""}`}
+    onClick={props.onClick}
+  >
+      {props.icon && <span class="mr-1.5">{props.icon}</span>}
+      <span>{props.text}</span>
+    </button>;
+}
+
+// src/dialog/index.tsx
+function Dialog(props) {
+  return <div class={`flex flex-col w-full max-w-[540px] ${props.class ?? ""}`}>
+      <span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent">
+        {props.title}
+      </span>
+      <div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800">
+        <div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600">
+          <div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4">
+            <Show6 when={props.subtitle}>
+              <span class="text-base font-normal text-primary-300">
+                {props.subtitle}
+              </span>
+            </Show6>
+          </div>
+        </div>
+      </div>
+      <div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300">
+        <div class="flex flex-1 flex-col p-4">
+          <div class="text-lg text-gray-100">{props.children}</div>
+          <Show6 when={props.primaryAction || props.secondaryAction}>
+            <div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">
+              <Show6 when={props.secondaryAction}>
+                <Button variant="primary" buttonStyle="outline" onPress={props.secondaryAction.onClick}>
+                  {props.secondaryAction.label}
+                </Button>
+              </Show6>
+              <Show6 when={props.primaryAction}>
+                <Button variant="primary" onPress={props.primaryAction.onClick}>
+                  {props.primaryAction.label}
+                </Button>
+              </Show6>
+            </div>
+          </Show6>
+        </div>
+      </div>
+      <Show6 when={props.tags && props.tags.length > 0}>
+        <div class="relative bottom-4 right-4 w-full">
+          <div class="flex flex-row justify-end gap-2 pr-4">
+            {props.tags.map((tag) => <Chip variant="primary" text={tag} />)}
+          </div>
+        </div>
+      </Show6>
+    </div>;
+}
+
+// src/icon/icons/GitHubIcon.tsx
+function GitHubIcon(props) {
+  return <svg
+    viewBox="0 0 24 24"
+    width={props.size}
+    height={props.size}
+    fill={props.color}
+    aria-hidden="true"
+  >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>;
+}
+
+// src/icon/index.tsx
+function Icon(props) {
+  const size = () => props.size ?? 24;
+  const color = () => props.color ?? "var(--color-primary-500)";
+  const IconComponent = props.icon;
+  return <div
+    class={`vui-icon ${props.withShadow ? "vui-icon--with-shadow" : ""} ${props.class ?? ""}`}
+    onClick={props.onClick}
+  >
+      {props.withShadow && <div class="vui-icon__shadow">
+          <IconComponent size={size()} color="var(--color-accent)" />
+        </div>}
+      <div class="vui-icon__main">
+        <IconComponent size={size()} color={color()} />
+      </div>
+    </div>;
+}
+
+// src/tooltip/index.tsx
+function Tooltip(props) {
+  const position = () => props.position ?? "bottom";
+  return <div class={`vui-tooltip ${props.class ?? ""}`}>
+      <div class="vui-tooltip__trigger">
+        {props.children}
+      </div>
+      <div class={`vui-tooltip__content vui-tooltip__content--${position()}`}>
+        <span>{props.label}</span>
+      </div>
+    </div>;
+}
+
+// src/textfield/index.tsx
+import { splitProps as splitProps5, mergeProps as solidMergeProps4, Show as Show7 } from "solid-js";
+import {
+  createTextField,
+  createFocusRing
+} from "@proyecto-viviana/solidaria";
+
+// ../solid-stately/dist/index.js
+import { createSignal as createSignal2, createUniqueId, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
+function access(value) {
+  return typeof value === "function" ? value() : value;
+}
+function createTextFieldState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
+  const [internalValue, setInternalValue] = createSignal2(initialValue);
+  const isControlled = () => getProps().value !== void 0;
+  const value = () => {
+    const p = getProps();
+    return isControlled() ? p.value ?? "" : internalValue();
+  };
+  function setValue(newValue) {
+    const p = getProps();
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    p.onChange?.(newValue);
+  }
+  return {
+    value,
+    setValue
+  };
+}
+
+// src/textfield/index.tsx
+var sizeStyles6 = {
+  sm: {
+    input: "h-8 px-2 text-sm",
+    label: "text-sm",
+    description: "text-xs"
+  },
+  md: {
+    input: "h-10 px-3 text-base",
+    label: "text-sm",
+    description: "text-sm"
+  },
+  lg: {
+    input: "h-12 px-4 text-lg",
+    label: "text-base",
+    description: "text-sm"
+  }
+};
+function TextField(props) {
+  const defaultProps = {
+    size: "md",
+    variant: "outline"
+  };
+  const merged = solidMergeProps4(defaultProps, props);
+  const [local, ariaProps] = splitProps5(merged, [
+    "size",
+    "variant",
+    "class",
+    "label",
+    "description",
+    "errorMessage"
+  ]);
+  const size = () => sizeStyles6[local.size];
+  const state = createTextFieldState(() => ({
+    value: ariaProps.value,
+    defaultValue: ariaProps.defaultValue,
+    onChange: ariaProps.onChange
+  }));
+  const textFieldAria = createTextField(() => ({
+    ...ariaProps,
+    value: state.value(),
+    onChange: state.setValue
+  }));
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const containerClasses = () => {
+    const base = "flex flex-col";
+    const disabledClass = ariaProps.isDisabled ? "opacity-60" : "";
+    const custom = local.class || "";
+    return [base, disabledClass, custom].filter(Boolean).join(" ");
+  };
+  const inputClasses = () => {
+    const base = "w-full rounded-md transition-all duration-200 outline-none";
+    const sizeClass = size().input;
+    let variantClass;
+    if (local.variant === "filled") {
+      variantClass = "bg-bg-200 border border-transparent";
+    } else {
+      variantClass = "bg-transparent border border-bg-400";
+    }
+    let stateClass;
+    if (ariaProps.isDisabled) {
+      stateClass = "bg-bg-200 text-primary-500 cursor-not-allowed";
+    } else if (textFieldAria.isInvalid) {
+      stateClass = "border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20";
+    } else {
+      stateClass = "text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20";
+    }
+    const hoverClass = ariaProps.isDisabled ? "" : "hover:border-accent-300";
+    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(" ");
+  };
+  const labelClasses = () => {
+    const base = "block font-medium text-primary-200 mb-1";
+    const sizeClass = size().label;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const descriptionClasses = () => {
+    const base = "mt-1 text-primary-400";
+    const sizeClass = size().description;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const errorClasses = () => {
+    const base = "mt-1 text-danger-400";
+    const sizeClass = size().description;
+    return [base, sizeClass].filter(Boolean).join(" ");
+  };
+  const cleanLabelProps = () => {
+    const { ref: _ref, ...rest } = textFieldAria.labelProps;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref1, ...rest } = textFieldAria.inputProps;
+    const { ref: _ref2, ...focusRest } = focusProps;
+    return { ...rest, ...focusRest };
+  };
+  const cleanDescriptionProps = () => {
+    const { ref: _ref, ...rest } = textFieldAria.descriptionProps;
+    return rest;
+  };
+  const cleanErrorMessageProps = () => {
+    const { ref: _ref, ...rest } = textFieldAria.errorMessageProps;
+    return rest;
+  };
+  return <div
+    class={containerClasses()}
+    data-disabled={ariaProps.isDisabled || void 0}
+    data-invalid={textFieldAria.isInvalid || void 0}
+    data-readonly={ariaProps.isReadOnly || void 0}
+    data-required={ariaProps.isRequired || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+  >
+      <Show7 when={local.label}>
+        <label {...cleanLabelProps()} class={labelClasses()}>
+          {local.label}
+          <Show7 when={ariaProps.isRequired}>
+            <span class="text-danger-400 ml-0.5">*</span>
+          </Show7>
+        </label>
+      </Show7>
+
+      <input {...cleanInputProps()} class={inputClasses()} />
+
+      <Show7 when={local.description && !textFieldAria.isInvalid}>
+        <p {...cleanDescriptionProps()} class={descriptionClasses()}>
+          {local.description}
+        </p>
+      </Show7>
+
+      <Show7 when={local.errorMessage && textFieldAria.isInvalid}>
+        <p {...cleanErrorMessageProps()} class={errorClasses()}>
+          {local.errorMessage}
+        </p>
+      </Show7>
+    </div>;
+}
+
+// src/link/index.tsx
+import { splitProps as splitProps6 } from "solid-js";
+import {
+  Link as HeadlessLink
+} from "@proyecto-viviana/solidaria-components";
+var variantStyles4 = {
+  primary: "text-accent hover:text-accent-300",
+  secondary: "text-primary-300 hover:text-primary-200",
+  subtle: "text-primary-400 hover:text-primary-300"
+};
+function Link(props) {
+  const [local, headlessProps] = splitProps6(props, [
+    "variant",
+    "isStandalone",
+    "isQuiet",
+    "class",
+    "children"
+  ]);
+  const variant = local.variant ?? "primary";
+  const customClass = local.class ?? "";
+  const getClassName = (renderProps) => {
+    const base = "transition-colors duration-200 cursor-pointer rounded-sm outline-none";
+    const variantClass = variantStyles4[variant];
+    let underlineClass;
+    if (local.isStandalone && local.isQuiet) {
+      underlineClass = renderProps.isHovered || renderProps.isFocusVisible ? "underline" : "no-underline";
+    } else {
+      underlineClass = "underline";
+    }
+    const weightClass = local.isStandalone ? "font-medium" : "";
+    const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400" : "";
+    const disabledClass = renderProps.isDisabled ? "opacity-50 cursor-not-allowed" : "";
+    const pressedClass = renderProps.isPressed ? "opacity-80" : "";
+    return [
+      base,
+      variantClass,
+      underlineClass,
+      weightClass,
+      focusClass,
+      disabledClass,
+      pressedClass,
+      customClass
+    ].filter(Boolean).join(" ");
+  };
+  return <HeadlessLink
+    {...headlessProps}
+    class={getClassName}
+  >
+      {local.children}
+    </HeadlessLink>;
+}
+
+// src/progress-bar/index.tsx
+import { splitProps as splitProps7, Show as Show8, createMemo } from "solid-js";
+import { createProgressBar } from "@proyecto-viviana/solidaria";
+var sizeStyles7 = {
+  sm: {
+    track: "h-1",
+    text: "text-xs"
+  },
+  md: {
+    track: "h-2",
+    text: "text-sm"
+  },
+  lg: {
+    track: "h-3",
+    text: "text-base"
+  }
+};
+var variantStyles5 = {
+  primary: "bg-primary-500",
+  accent: "bg-accent",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  danger: "bg-red-500"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function ProgressBar(props) {
+  const [local, ariaProps] = splitProps7(props, [
+    "size",
+    "variant",
+    "label",
+    "showValueLabel",
+    "class"
+  ]);
+  const size = () => local.size ?? "md";
+  const variant = () => local.variant ?? "primary";
+  const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
+  const showValueLabel = () => local.showValueLabel ?? !isIndeterminate();
+  const progressAria = createProgressBar({
+    get value() {
+      return ariaProps.value;
+    },
+    get minValue() {
+      return ariaProps.minValue;
+    },
+    get maxValue() {
+      return ariaProps.maxValue;
+    },
+    get valueLabel() {
+      return ariaProps.valueLabel;
+    },
+    get isIndeterminate() {
+      return ariaProps.isIndeterminate;
+    },
+    get label() {
+      return local.label;
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    }
+  });
+  const percentage = createMemo(() => {
+    if (isIndeterminate()) {
+      return void 0;
+    }
+    const value = ariaProps.value ?? 0;
+    const minValue = ariaProps.minValue ?? 0;
+    const maxValue = ariaProps.maxValue ?? 100;
+    const clampedValue = clamp(value, minValue, maxValue);
+    return (clampedValue - minValue) / (maxValue - minValue) * 100;
+  });
+  const valueText = () => progressAria.progressBarProps["aria-valuetext"];
+  const sizeConfig = () => sizeStyles7[size()];
+  return <div
+    {...progressAria.progressBarProps}
+    class={`w-full ${local.class ?? ""}`}
+  >
+      {
+    /* Label and value row */
+  }
+      <Show8 when={local.label || showValueLabel()}>
+        <div class={`flex justify-between items-center mb-1 ${sizeConfig().text}`}>
+          <Show8 when={local.label}>
+            <span class="text-primary-200 font-medium">{local.label}</span>
+          </Show8>
+          <Show8 when={showValueLabel() && !isIndeterminate()}>
+            <span class="text-primary-300">{valueText()}</span>
+          </Show8>
+        </div>
+      </Show8>
+
+      {
+    /* Track */
+  }
+      <div class={`w-full ${sizeConfig().track} bg-bg-300 rounded-full overflow-hidden`}>
+        {
+    /* Fill */
+  }
+        <div
+    class={`h-full rounded-full transition-all duration-300 ${variantStyles5[variant()]} ${isIndeterminate() ? "animate-progress-indeterminate" : ""}`}
+    style={{
+      width: isIndeterminate() ? "30%" : `${percentage()}%`
+    }}
+  />
+      </div>
+    </div>;
+}
+
+// src/separator/index.tsx
+import { splitProps as splitProps8, createMemo as createMemo2, Show as Show9 } from "solid-js";
+import { createSeparator } from "@proyecto-viviana/solidaria";
+var variantStyles6 = {
+  default: "bg-bg-100",
+  subtle: "bg-bg-200",
+  strong: "bg-primary-600"
+};
+var horizontalSizeStyles = {
+  sm: "h-px",
+  md: "h-0.5",
+  lg: "h-1"
+};
+var verticalSizeStyles = {
+  sm: "w-px",
+  md: "w-0.5",
+  lg: "w-1"
+};
+function Separator(props) {
+  const [local, ariaProps] = splitProps8(props, [
+    "orientation",
+    "variant",
+    "size",
+    "class"
+  ]);
+  const orientation = () => local.orientation ?? "horizontal";
+  const variant = () => local.variant ?? "default";
+  const size = () => local.size ?? "md";
+  const elementType = createMemo2(() => {
+    if (orientation() === "vertical") {
+      return "div";
+    }
+    return "hr";
+  });
+  const separatorAria = createSeparator({
+    get orientation() {
+      return orientation();
+    },
+    get elementType() {
+      return elementType();
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    }
+  });
+  const className = createMemo2(() => {
+    const isVertical = orientation() === "vertical";
+    const sizeStyles8 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
+    const base = [
+      variantStyles6[variant()],
+      sizeStyles8[size()],
+      isVertical ? "h-full self-stretch" : "w-full",
+      "border-0",
+      // Reset hr default border
+      local.class ?? ""
+    ];
+    return base.filter(Boolean).join(" ");
+  });
+  const getAriaProps = () => {
+    const { ref: _, ...props2 } = separatorAria.separatorProps;
+    return props2;
+  };
+  return <Show9
+    when={orientation() === "vertical"}
+    fallback={<hr
+      {...getAriaProps()}
+      class={className()}
+    />}
+  >
+      <div
+    {...getAriaProps()}
+    class={className()}
+  />
+    </Show9>;
+}
+
+// src/custom/nav-header/index.tsx
+import { Show as Show10 } from "solid-js";
+function NavHeader(props) {
+  return <nav class={`flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ""}`}>
+      <div class="pl-1 md:pl-8 flex items-center">
+        <Show10 when={props.logo} fallback={<Show10 when={props.logoText}>
+            <span class="text-[34px] font-light text-primary-700 flex items-center">
+              {props.logoText}
+            </span>
+          </Show10>}>
+          <img src={props.logo} alt={props.logoAlt ?? "Logo"} class="h-[42px] w-auto" />
+        </Show10>
+      </div>
+
+      <div class="flex-1 flex justify-end items-center pr-1 md:pr-8">
+        {props.children}
+        <Show10 when={props.menuIcon}>
+          <button
+    class="md:hidden flex items-center justify-center"
+    onClick={props.onMenuClick}
+  >
+            {props.menuIcon}
+          </button>
+        </Show10>
+      </div>
+    </nav>;
+}
+
+// src/custom/lateral-nav/index.tsx
+import { Show as Show11, For } from "solid-js";
+function NavItem(props) {
+  return <li class={`flex items-center ${props.class ?? ""}`}>
+      <span class="text-lg font-bold text-primary-200">{props.title}</span>
+      {props.children}
+    </li>;
+}
+function NavLink(props) {
+  const activeStyles = "font-medium text-primary-300 underline underline-offset-4";
+  const inactiveStyles = "font-normal text-gray-200 underline-offset-4 hover:text-gray-100 hover:underline";
+  return <a
+    href={props.href}
+    class={`${props.active ? activeStyles : inactiveStyles} ${props.class ?? ""}`}
+  >
+      {props.children}
+    </a>;
+}
+function NavSection(props) {
+  return <div class={props.class ?? ""}>
+      <NavItem title={props.title} />
+      <div class="flex h-full">
+        <div class="h-5 w-1 bg-accent-300" />
+        <ul class="flex h-full flex-1 flex-col gap-1 pl-4">
+          <Show11 when={props.links}>
+            <For each={props.links}>
+              {(link) => <li>
+                  <NavLink href={link.href} active={link.active}>
+                    {link.label}
+                  </NavLink>
+                </li>}
+            </For>
+          </Show11>
+          {props.children}
+        </ul>
+      </div>
+    </div>;
+}
+function LateralNav(props) {
+  const bgColor = () => props.transparent ? "" : "bg-bg-200";
+  return <div
+    class={`hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ""}`}
+  >
+      {props.children}
+    </div>;
+}
+
+// src/custom/timeline-item/index.tsx
+import { Show as Show12 } from "solid-js";
+var eventMessages = {
+  follow: (left, right) => <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {" ha empezado a seguir a "}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>,
+  like: (left, right) => <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {" le ha dado like a "}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>,
+  comment: (left, right) => <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {" ha comentado en "}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>,
+  event: (left, right) => <>
+      <span class="font-semibold text-accent-200">{left}</span>
+      {" asistir\xE1 al evento de "}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>,
+  custom: () => null
+};
+function TimelineItem(props) {
+  const type = () => props.type ?? "follow";
+  const leftName = () => props.leftUser?.name ?? "";
+  const rightName = () => props.rightUser?.name ?? "";
+  return <div class={`inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ""}`}>
+      <div class="flex items-center justify-around gap-3">
+        <Show12 when={props.leftUser}>
+          <Avatar src={props.leftUser.avatar} alt={props.leftUser.name} />
+        </Show12>
+        <Show12 when={props.icon}>
+          {props.icon}
+        </Show12>
+        <Show12 when={props.rightUser}>
+          <Avatar src={props.rightUser.avatar} alt={props.rightUser.name} />
+        </Show12>
+      </div>
+      <div class="flex items-center justify-center gap-3 text-center">
+        <span class="font-light text-primary-300">
+          <Show12 when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
+            {props.message}
+          </Show12>
+        </span>
+      </div>
+    </div>;
+}
+
+// src/custom/conversation/index.tsx
+import { Show as Show13, For as For2 } from "solid-js";
+function ConversationPreview(props) {
+  return <button
+    class={`flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`}
+    onClick={props.onClick}
+  >
+      <Avatar
+    src={props.user.avatar}
+    alt={props.user.name}
+    online={props.user.online}
+    size="md"
+  />
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between">
+          <span class="font-semibold text-primary-100 truncate">{props.user.name}</span>
+          <Show13 when={props.timestamp}>
+            <span class="text-xs text-primary-500">{props.timestamp}</span>
+          </Show13>
+        </div>
+        <Show13 when={props.lastMessage}>
+          <p class="text-sm text-primary-400 truncate">{props.lastMessage}</p>
+        </Show13>
+      </div>
+      <Show13 when={props.unreadCount && props.unreadCount > 0}>
+        <span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">
+          {props.unreadCount}
+        </span>
+      </Show13>
+    </button>;
+}
+function ConversationBubble(props) {
+  const isUser = () => props.sender === "user";
+  return <div class={`flex ${isUser() ? "justify-end" : "justify-start"} ${props.class ?? ""}`}>
+      <div
+    class={`max-w-[70%] rounded-2xl px-4 py-2 ${isUser() ? "bg-accent text-white rounded-br-sm" : "bg-bg-300 text-primary-100 rounded-bl-sm"}`}
+  >
+        <p>{props.content}</p>
+        <Show13 when={props.timestamp}>
+          <span class={`text-xs ${isUser() ? "text-white/70" : "text-primary-500"}`}>
+            {props.timestamp}
+          </span>
+        </Show13>
+      </div>
+    </div>;
+}
+function Conversation(props) {
+  return <div class={`flex flex-col gap-2 p-4 ${props.class ?? ""}`}>
+      <For2 each={props.messages}>
+        {(message) => <ConversationBubble
+    content={message.content}
+    sender={message.sender}
+    timestamp={message.timestamp}
+  />}
+      </For2>
+    </div>;
+}
+
+// src/custom/profile-card/index.tsx
+import { Show as Show14 } from "solid-js";
+function ProfileCard(props) {
+  const formatNumber = (num) => {
+    if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+    if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+    return num.toString();
+  };
+  return <div class={`bg-bg-200 rounded-xl p-4 ${props.class ?? ""}`}>
+      <div class="flex items-start gap-4">
+        <Avatar src={props.avatar} alt={props.username} size="lg" />
+        <div class="flex-1 min-w-0">
+          <h3 class="font-semibold text-primary-100 text-lg truncate">
+            {props.username}
+          </h3>
+          <Show14 when={props.bio}>
+            <p class="text-primary-300 text-sm mt-1 line-clamp-2">{props.bio}</p>
+          </Show14>
+          <div class="flex gap-4 mt-2 text-sm">
+            <Show14 when={props.followers !== void 0}>
+              <span class="text-primary-300">
+                <span class="font-semibold text-primary-100">
+                  {formatNumber(props.followers)}
+                </span>{" "}
+                seguidores
+              </span>
+            </Show14>
+            <Show14 when={props.following !== void 0}>
+              <span class="text-primary-300">
+                <span class="font-semibold text-primary-100">
+                  {formatNumber(props.following)}
+                </span>{" "}
+                siguiendo
+              </span>
+            </Show14>
+          </div>
+        </div>
+      </div>
+      <Show14 when={props.actions}>
+        <div class="mt-4 flex gap-2">{props.actions}</div>
+      </Show14>
+    </div>;
+}
+
+// src/custom/event-card/index.tsx
+import { Show as Show15, For as For3 } from "solid-js";
+function EventCard(props) {
+  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
+  const remainingCount = () => {
+    const total = props.attendeeCount ?? props.attendees?.length ?? 0;
+    const displayed = displayedAttendees().length;
+    return total - displayed;
+  };
+  return <div class={`relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ""}`}>
+      {
+    /* Decoration image (fire gif, etc) */
+  }
+      <Show15 when={props.decorationImage}>
+        <div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1">
+          <img src={props.decorationImage} alt="" class="w-8 h-8 object-contain" />
+          <img src={props.decorationImage} alt="" class="w-6 h-6 object-contain ml-2" />
+          <img src={props.decorationImage} alt="" class="w-5 h-5 object-contain" />
+        </div>
+      </Show15>
+
+      <Show15 when={props.image}>
+        <div class="relative h-32 w-full">
+          <img
+    src={props.image}
+    alt={props.title}
+    class="w-full h-full object-cover"
+  />
+          <div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent" />
+        </div>
+      </Show15>
+
+      <div class="p-4 pt-2">
+        <h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">
+          {props.title}
+        </h3>
+
+        <Show15 when={props.date || props.author}>
+          <div class="flex items-center gap-4 mt-3 text-sm text-primary-300">
+            <Show15 when={props.author}>
+              <div class="flex items-center gap-1.5">
+                <span class="text-accent">@</span>
+                <span>{props.author}</span>
+              </div>
+            </Show15>
+            <Show15 when={props.date}>
+              <div class="flex items-center gap-1.5">
+                <span class="text-accent">⏱</span>
+                <span>{props.date}</span>
+              </div>
+            </Show15>
+          </div>
+        </Show15>
+
+        <Show15 when={displayedAttendees().length > 0}>
+          <div class="flex items-center mt-3">
+            <div class="flex -space-x-2">
+              <For3 each={displayedAttendees()}>
+                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />}
+              </For3>
+            </div>
+            <Show15 when={remainingCount() > 0}>
+              <span class="ml-2 text-sm text-primary-300">
+                +{remainingCount()} más
+              </span>
+            </Show15>
+          </div>
+        </Show15>
+
+        <Show15 when={props.actions}>
+          <div class="mt-4 flex gap-2">{props.actions}</div>
+        </Show15>
+      </div>
+    </div>;
+}
+function EventListItem(props) {
+  return <button
+    class={`flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ""}`}
+    onClick={props.onClick}
+  >
+      <Show15 when={props.image}>
+        <div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+          <img
+    src={props.image}
+    alt={props.title}
+    class="w-full h-full object-cover"
+  />
+        </div>
+      </Show15>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-medium text-primary-100 truncate">{props.title}</h4>
+        <Show15 when={props.subtitle}>
+          <p class="text-sm text-primary-300 truncate">{props.subtitle}</p>
+        </Show15>
+      </div>
+    </button>;
+}
+
+// src/custom/calendar-card/index.tsx
+import { Show as Show16, For as For4 } from "solid-js";
+function CalendarCard(props) {
+  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
+  const remainingCount = () => {
+    const total = props.followerCount ?? props.followers?.length ?? 0;
+    const displayed = displayedFollowers().length;
+    return total - displayed;
+  };
+  return <div class={`flex h-[100px] w-full max-w-[500px] items-center rounded-xl border border-primary-600 border-b-accent-500 bg-bg-300 p-2 ${props.class ?? ""}`}>
+      <Show16 when={props.image}>
+        <div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200">
+          <img src={props.image} alt={props.title} class="h-full w-full object-cover" />
+        </div>
+      </Show16>
+      <div class="relative h-full flex-1 flex-col pl-3">
+        <Show16 when={props.tags && props.tags.length > 0}>
+          <div class="absolute bottom-[-20px] h-[30px] w-full">
+            <div class="flex h-full w-full flex-1 justify-end gap-1">
+              <For4 each={props.tags}>
+                {(tag) => <Chip text={tag} variant="primary" />}
+              </For4>
+            </div>
+          </div>
+        </Show16>
+        <div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2">
+          <div class="flex flex-1">
+            <span class="text-lg font-semibold text-white drop-shadow-sm">
+              {props.title}
+            </span>
+          </div>
+          <Show16 when={displayedFollowers().length > 0}>
+            <div class="flex flex-1">
+              <span class="text-base font-normal text-primary-500">
+                seguida por{" "}
+                <For4 each={displayedFollowers()}>
+                  {(follower, index) => <>
+                      <span class="font-semibold text-accent-200">{follower.name}</span>
+                      {index() < displayedFollowers().length - 1 && ", "}
+                    </>}
+                </For4>
+                <Show16 when={remainingCount() > 0}>
+                  {" "}y <span class="font-semibold text-accent-200">{remainingCount()} más</span>
+                </Show16>
+              </span>
+            </div>
+          </Show16>
+        </div>
+      </div>
+    </div>;
+}
+
+// src/custom/logo/index.tsx
+function Logo(props) {
+  const sizeClass = () => {
+    switch (props.size) {
+      case "sm":
+        return "vui-logo--sm";
+      case "lg":
+        return "vui-logo--lg";
+      case "xl":
+        return "vui-logo--xl";
+      case "md":
+      default:
+        return "vui-logo--md";
+    }
+  };
+  const firstWord = () => props.firstWord ?? "Proyecto";
+  const secondWord = () => props.secondWord ?? "Viviana";
+  return <span class={`vui-logo ${sizeClass()} ${props.class ?? ""}`}>
+      <span class="vui-logo__first">{firstWord()}</span>
+      <span class="vui-logo__second" data-text={secondWord()}>
+        {secondWord()}
+      </span>
+    </span>;
+}
+
+// src/custom/project-card/index.tsx
+function ProjectCard(props) {
+  const size = () => props.size ?? "sm";
+  const inactive = () => props.inactive ?? false;
+  const cardContent = () => <>
+      <div class="vui-project-card__tooltip">
+        <span>{props.name}</span>
+      </div>
+      <img
+    class="vui-project-card__image"
+    src={props.imageSrc}
+    alt={props.imageAlt ?? props.name}
+  />
+    </>;
+  const cardClasses = () => `vui-project-card vui-project-card--${size()} ${inactive() ? "vui-project-card--inactive" : ""} ${props.class ?? ""}`;
+  if (props.href) {
+    return <a href={props.href} target="_blank" rel="noopener noreferrer" class={cardClasses()}>
+        {cardContent()}
+      </a>;
+  }
+  return <div class={cardClasses()}>
+      {cardContent()}
+    </div>;
+}
+
+// src/custom/page-layout/index.tsx
+import { splitProps as splitProps9 } from "solid-js";
+function PageLayout(props) {
+  const [local, rest] = splitProps9(props, ["children", "class"]);
+  return <div class={`vui-page ${local.class ?? ""}`} {...rest}>
+      {local.children}
+    </div>;
+}
+export {
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  CalendarCard,
+  Checkbox,
+  CheckboxGroup,
+  Chip,
+  Conversation,
+  ConversationBubble,
+  ConversationPreview,
+  Dialog,
+  EventCard,
+  EventListItem,
+  GitHubIcon,
+  Icon,
+  LateralNav,
+  Link,
+  Logo,
+  NavHeader,
+  NavItem,
+  NavLink,
+  NavSection,
+  PageLayout,
+  ProfileCard,
+  ProgressBar,
+  ProjectCard,
+  Radio,
+  RadioGroup,
+  Separator,
+  TabSwitch,
+  TextField,
+  TimelineItem,
+  ToggleSwitch,
+  Tooltip
+};