@proyecto-viviana/ui 0.4.0 → 0.5.0

package/src/custom/nav-header/index.tsx

@@ -1,98 +0,0 @@
-import type { JSX } from "solid-js";
-import { Show } from "solid-js";
-import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A nav bar with an accent bottom rule, a logo/wordmark slot,
-// and trailing actions, on the S2 ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface NavHeaderProps {
-  logo?: string;
-  logoAlt?: string;
-  logoText?: string;
-  children?: JSX.Element;
-  menuIcon?: JSX.Element;
-  onMenuClick?: () => void;
-  menuAriaLabel?: string;
-  class?: string;
-}
-
-const bar = style({
-  display: "flex",
-  alignItems: "center",
-  height: 70,
-  backgroundColor: "[var(--color-bg-400)]",
-  borderBottomWidth: 4,
-  borderStyle: "solid",
-  borderColor: "[var(--color-accent)]",
-});
-
-const lead = style({
-  display: "flex",
-  alignItems: "center",
-  paddingStart: 32,
-});
-
-const logoText = style({
-  display: "flex",
-  alignItems: "center",
-  font: "title-xl",
-  fontWeight: "normal",
-  color: "[var(--color-primary-700)]",
-});
-
-const logoImage = style({
-  height: 42,
-  width: "auto",
-});
-
-const trail = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "end",
-  flexGrow: 1,
-  gap: 12,
-  paddingEnd: 32,
-});
-
-const menuButton = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  backgroundColor: "transparent",
-  borderStyle: "none",
-  color: "[var(--color-primary-200)]",
-});
-
-export function NavHeader(props: NavHeaderProps) {
-  return (
-    <nav class={`${bar} ${props.class ?? ""}`}>
-      <div class={lead}>
-        <Show
-          when={props.logo}
-          fallback={
-            <Show when={props.logoText}>
-              <span class={logoText}>{props.logoText}</span>
-            </Show>
-          }
-        >
-          <img class={logoImage} src={props.logo} alt={props.logoAlt ?? "Logo"} />
-        </Show>
-      </div>
-
-      <div class={trail}>
-        {props.children}
-        <Show when={props.menuIcon}>
-          <HeadlessButton
-            class={menuButton}
-            onPress={() => props.onMenuClick?.()}
-            aria-label={props.menuAriaLabel ?? "Open menu"}
-          >
-            {props.menuIcon}
-          </HeadlessButton>
-        </Show>
-      </div>
-    </nav>
-  );
-}

package/src/custom/page-layout/index.tsx

@@ -1,33 +0,0 @@
-import { type JSX, splitProps } from "solid-js";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A full-height page shell painted in Silapse surface/text
-// colors; `withHeader` reserves top space so a fixed header doesn't overlap.
-import { style } from "../../style" with { type: "macro" };
-
-export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-  withHeader?: boolean;
-}
-
-const page = style<{ isWithHeader: boolean }>({
-  display: "flex",
-  flexDirection: "column",
-  minHeight: "screen",
-  width: "full",
-  backgroundColor: "[var(--color-background)]",
-  color: "[var(--color-text)]",
-  paddingTop: { isWithHeader: 64 },
-});
-
-export function PageLayout(props: PageLayoutProps) {
-  const [local, rest] = splitProps(props, ["class", "withHeader"]);
-
-  return (
-    <div
-      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? ""}`}
-      {...rest}
-    >
-      {props.children}
-    </div>
-  );
-}

package/src/custom/profile-card/index.tsx

@@ -1,114 +0,0 @@
-import type { JSX } from "solid-js";
-import { Show } from "solid-js";
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). Mirrors S2's UserCard shape (avatar + title/description +
-// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface ProfileCardProps {
-  username: string;
-  avatar?: string;
-  bio?: string;
-  followers?: number;
-  following?: number;
-  /**
-   * Actions to display below the profile.
-   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
-   */
-  actions?: JSX.Element | (() => JSX.Element);
-  class?: string;
-}
-
-const card = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 16,
-  padding: 16,
-  borderRadius: "lg",
-  backgroundColor: "[var(--color-bg-200)]",
-  boxShadow: "elevated",
-});
-
-const head = style({
-  display: "flex",
-  alignItems: "start",
-  gap: 16,
-});
-
-const info = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-  flexGrow: 1,
-  minWidth: 0,
-});
-
-const name = style({
-  font: "heading-sm",
-  color: "[var(--color-primary-100)]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-const bio = style({
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-});
-
-const stats = style({
-  display: "flex",
-  gap: 16,
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-});
-
-const statValue = style({
-  fontWeight: "bold",
-  color: "[var(--color-primary-100)]",
-});
-
-const actionRow = style({
-  display: "flex",
-  gap: 8,
-});
-
-export function ProfileCard(props: ProfileCardProps) {
-  const formatNumber = (num: number) => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toString();
-  };
-
-  return (
-    <div class={`${card} ${props.class ?? ""}`}>
-      <div class={head}>
-        <Avatar src={props.avatar} alt={props.username} size="lg" />
-        <div class={info}>
-          <h3 class={name}>{props.username}</h3>
-          <Show when={props.bio}>
-            <p class={bio}>{props.bio}</p>
-          </Show>
-          <div class={stats}>
-            <Show when={props.followers !== undefined}>
-              <span>
-                <span class={statValue}>{formatNumber(props.followers!)}</span> seguidores
-              </span>
-            </Show>
-            <Show when={props.following !== undefined}>
-              <span>
-                <span class={statValue}>{formatNumber(props.following!)}</span> siguiendo
-              </span>
-            </Show>
-          </div>
-        </div>
-      </div>
-      <Show when={props.actions}>
-        <div class={actionRow}>
-          {typeof props.actions === "function" ? props.actions() : props.actions}
-        </div>
-      </Show>
-    </div>
-  );
-}

package/src/custom/project-card/index.tsx

@@ -1,76 +0,0 @@
-import type { JSX } from "solid-js";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A square logo/preview tile with a caption, sized by the S2
-// spacing + type ramps and painted in Silapse colors. `inactive` dims it;
-// `href` turns the whole card into a link.
-import { style } from "../../style" with { type: "macro" };
-
-export type ProjectCardSize = "sm" | "md" | "lg";
-
-export interface ProjectCardProps {
-  name: string;
-  imageSrc: string;
-  imageAlt?: string;
-  href?: string;
-  size?: ProjectCardSize;
-  inactive?: boolean;
-  class?: string;
-}
-
-const card = style<{ size: ProjectCardSize; isInactive: boolean }>({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  gap: 8,
-  width: "full",
-  borderRadius: "lg",
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: "[var(--color-border)]",
-  backgroundColor: "[var(--color-bg-200)]",
-  color: "[var(--color-primary-100)]",
-  textDecoration: "none",
-  padding: { size: { sm: 12, md: 16, lg: 20 } },
-  opacity: { default: 1, isInactive: 0.5 },
-});
-
-const image = style({
-  width: "full",
-  aspectRatio: "square",
-  objectFit: "contain",
-  borderRadius: "sm",
-});
-
-const caption = style<{ size: ProjectCardSize }>({
-  width: "full",
-  textAlign: "center",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  color: "[var(--color-primary-200)]",
-  font: { size: { sm: "ui-sm", md: "ui", lg: "ui-lg" } },
-});
-
-export function ProjectCard(props: ProjectCardProps): JSX.Element {
-  const size = () => props.size ?? "sm";
-  const inactive = () => props.inactive ?? false;
-
-  const cardContent = () => (
-    <>
-      <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />
-      <span class={caption({ size: size() })}>{props.name}</span>
-    </>
-  );
-
-  const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? ""}`;
-
-  if (props.href) {
-    return (
-      <a href={props.href} target="_blank" rel="noopener noreferrer" class={classes()}>
-        {cardContent()}
-      </a>
-    );
-  }
-
-  return <div class={classes()}>{cardContent()}</div>;
-}

package/src/custom/timeline-item/index.tsx

@@ -1,140 +0,0 @@
-import type { JSX } from "solid-js";
-import { Show } from "solid-js";
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A social timeline event card (two avatars + icon + message)
-// on the S2 spacing/radius ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export type TimelineEventType = "follow" | "like" | "comment" | "event" | "custom";
-
-export interface TimelineItemProps {
-  type?: TimelineEventType;
-  /**
-   * Icon to display between the two avatars.
-   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
-   * Or pass a simple string for text-based icons: `icon="👋"`
-   */
-  icon?: string | (() => JSX.Element);
-  leftUser?: {
-    name: string;
-    avatar?: string;
-  };
-  rightUser?: {
-    name: string;
-    avatar?: string;
-  };
-  /**
-   * Custom message content.
-   * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
-   * Or pass a simple string.
-   */
-  message?: string | (() => JSX.Element);
-  class?: string;
-}
-
-const nameEmph = style({
-  fontWeight: "bold",
-  color: "[var(--color-accent)]",
-});
-
-const eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {
-  follow: (left, right) => (
-    <>
-      <span class={nameEmph}>{left}</span>
-      {" ha empezado a seguir a "}
-      <span class={nameEmph}>{right}</span>
-    </>
-  ),
-  like: (left, right) => (
-    <>
-      <span class={nameEmph}>{left}</span>
-      {" le ha dado like a "}
-      <span class={nameEmph}>{right}</span>
-    </>
-  ),
-  comment: (left, right) => (
-    <>
-      <span class={nameEmph}>{left}</span>
-      {" ha comentado en "}
-      <span class={nameEmph}>{right}</span>
-    </>
-  ),
-  event: (left, right) => (
-    <>
-      <span class={nameEmph}>{left}</span>
-      {" asistirá al evento de "}
-      <span class={nameEmph}>{right}</span>
-    </>
-  ),
-  custom: () => null,
-};
-
-const card = style({
-  display: "inline-flex",
-  flexDirection: "column",
-  gap: 20,
-  padding: 20,
-  borderRadius: "xl",
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: "[var(--color-primary-700)]",
-  backgroundColor: "[var(--color-bg-200)]",
-});
-
-const avatarsRow = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: 12,
-});
-
-const messageRow = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  textAlign: "center",
-  font: "ui",
-  color: "[var(--color-text-secondary)]",
-});
-
-export function TimelineItem(props: TimelineItemProps) {
-  const type = () => props.type ?? "follow";
-  const leftName = () => props.leftUser?.name ?? "";
-  const rightName = () => props.rightUser?.name ?? "";
-
-  const renderIcon = () => {
-    const icon = props.icon;
-    if (!icon) return null;
-    if (typeof icon === "string") return icon;
-    return icon();
-  };
-
-  const renderMessage = () => {
-    const message = props.message;
-    if (!message) return null;
-    if (typeof message === "string") return message;
-    return message();
-  };
-
-  return (
-    <div class={`${card} ${props.class ?? ""}`}>
-      <div class={avatarsRow}>
-        <Show when={props.leftUser}>
-          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
-        </Show>
-        <Show when={props.icon}>{renderIcon()}</Show>
-        <Show when={props.rightUser}>
-          <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
-        </Show>
-      </div>
-      <div class={messageRow}>
-        <span>
-          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
-            {renderMessage()}
-          </Show>
-        </span>
-      </div>
-    </div>
-  );
-}