@proyecto-viviana/ui 0.4.1 → 0.5.0

package/src/custom/logo/index.tsx

@@ -1,60 +0,0 @@
-import type { JSX } from "solid-js";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse
-// colors paint it (primary + accent). `inverted` swaps which word takes accent.
-import { style } from "../../style" with { type: "macro" };
-
-export type LogoSize = "sm" | "md" | "lg" | "xl";
-
-export interface LogoProps {
-  firstWord?: string;
-  secondWord?: string;
-  size?: LogoSize;
-  inverted?: boolean;
-  class?: string;
-}
-
-const wordmark = style<{ size: LogoSize }>({
-  display: "inline-flex",
-  alignItems: "baseline",
-  columnGap: 8,
-  whiteSpace: "nowrap",
-  font: {
-    size: {
-      sm: "title-sm",
-      md: "title",
-      lg: "title-xl",
-      xl: "title-3xl",
-    },
-  },
-  fontWeight: "black",
-});
-
-const word = style<{ tone: "primary" | "accent" }>({
-  color: {
-    tone: {
-      primary: "[var(--color-primary-100)]",
-      // `--color-accent` (#df5c9a) is the SAME non-flipping pink in both themes;
-      // on the light `--color-bg-200` panel the wordmark reads only 1.89:1 (fails
-      // even the 3:1 large-text floor the `black`-weight `title-xl` earns). No
-      // single non-flipping shade clears a near-white AND a near-black panel, so
-      // the accent word takes the *flipping* `--color-accent-500` (dark #d84a8f /
-      // light #8a1e4a) → 3.86:1 dark / 4.91:1 light — clearing the large-text
-      // floor in both themes while keeping the two-tone wordmark identity.
-      accent: "[var(--color-accent-500)]",
-    },
-  },
-});
-
-export function Logo(props: LogoProps): JSX.Element {
-  const firstWord = () => props.firstWord ?? "Proyecto";
-  const secondWord = () => props.secondWord ?? "Viviana";
-  const inverted = () => props.inverted ?? false;
-
-  return (
-    <span class={`${wordmark({ size: props.size ?? "md" })} ${props.class ?? ""}`}>
-      <span class={word({ tone: inverted() ? "accent" : "primary" })}>{firstWord()}</span>
-      <span class={word({ tone: inverted() ? "primary" : "accent" })}>{secondWord()}</span>
-    </span>
-  );
-}

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

@@ -1,106 +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",
-  // WCAG AA fix: the wordmark sits on the `--color-bg-400` bar. `--color-primary-700`
-  // is a non-flipping brand fill (light blue in light mode, dark blue in dark mode) —
-  // the SAME direction as the bar, so it read only 2.10:1 light / 2.92:1 dark. The
-  // rendered `title-xl` measures under 24px, so WCAG scores it as normal text (4.5:1
-  // floor, not the 3:1 large-text exception). `--color-primary-500` is the smallest
-  // ramp step that flips with the theme (dark-on-light / light-on-dark) AND clears
-  // 4.5:1, lifting the wordmark to 5.37:1 light / 7.00:1 dark while keeping a prominent
-  // brand blue.
-  color: "[var(--color-primary-500)]",
-});
-
-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,123 +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",
-  // WCAG AA fix: the bio is small text (`ui-sm`) on the `--color-bg-200` card, so
-  // the 4.5:1 floor applies. `--color-text-secondary` read only 3.84:1 on the
-  // light-blue card (5.86:1 dark); `--color-text` flips and clears 4.5:1 both
-  // ways (15.33:1 dark / 7.53:1 light). The bio stays visually secondary to the
-  // `heading-sm` name through its smaller size, not a sub-AA color.
-  color: "[var(--color-text)]",
-});
-
-const stats = style({
-  display: "flex",
-  gap: 16,
-  font: "ui-sm",
-  // WCAG AA fix: the stat connector words ("seguidores" / "siguiendo") share the
-  // bio's 3.84:1-light failure on the `--color-bg-200` card and take the same
-  // flipping `--color-text`. (The stat VALUES are `--color-primary-100`, which
-  // already clears AA — 13.47:1 dark / 10.37:1 light.)
-  color: "[var(--color-text)]",
-});
-
-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",
-  font: { size: { sm: "ui-sm", md: "ui", lg: "ui-lg" } },
-  color: "[var(--color-primary-200)]",
-});
-
-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,148 +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",
-  // Emphasis via weight, not color: `--color-accent` (#df5c9a) fails AA on the
-  // `--color-bg-200` card (~1.9:1 light, ~4.48:1 dark) and no accent shade clears
-  // 4.5:1 in BOTH themes. The flipping `--color-text` does (7.53 light / 15.33
-  // dark); the `bold` weight sets the names apart from the message body.
-  color: "[var(--color-text)]",
-});
-
-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-text-secondary` renders 3.84:1 on the light `--color-bg-200` card
-  // (fails the 4.5:1 small-text floor); the flipping `--color-text` clears it in
-  // both themes. `color` stays after `font` (the S2 macro font-shorthand default
-  // color would otherwise win on source order).
-  color: "[var(--color-text)]",
-});
-
-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>
-  );
-}