@proyecto-viviana/ui 0.3.5 → 0.4.0

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

@@ -1,70 +1,138 @@
-import type { JSX } from 'solid-js'
-import { Show, For } from 'solid-js'
-import { Avatar } from '../../avatar'
+import type { JSX } from "solid-js";
+import { Show, For } from "solid-js";
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). An event summary card (S2 Card shape: preview + content +
+// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface EventCardProps {
-  title: string
-  image?: string
-  date?: string
-  author?: string
-  authorAvatar?: string
-  attendees?: { avatar?: string; name: string }[]
-  attendeeCount?: number
-  decorationImage?: string
+  title: string;
+  image?: string;
+  date?: string;
+  author?: string;
+  authorAvatar?: string;
+  attendees?: { avatar?: string; name: string }[];
+  attendeeCount?: number;
+  decorationImage?: string;
   /**
    * Actions to display below the event.
    * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
    */
-  actions?: JSX.Element | (() => JSX.Element)
-  class?: string
+  actions?: JSX.Element | (() => JSX.Element);
+  class?: string;
 }
 
+const card = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  borderRadius: "xl",
+  backgroundColor: "[var(--color-bg-200)]",
+  boxShadow: "elevated",
+});
+
+const decoration = style({
+  position: "absolute",
+  top: 8,
+  insetEnd: 8,
+  width: 32,
+  height: 32,
+  objectFit: "contain",
+});
+
+const preview = style({
+  width: "full",
+  aspectRatio: "16/9",
+  objectFit: "cover",
+});
+
+const body = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  padding: 16,
+});
+
+const title = style({
+  font: "heading",
+  color: "[var(--color-accent)]",
+});
+
+const meta = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+});
+
+const metaItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+const metaIcon = style({
+  color: "[var(--color-accent)]",
+});
+
+const attendeesRow = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+});
+
+const avatars = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+const more = style({
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+});
+
+const actionRow = style({
+  display: "flex",
+  gap: 8,
+});
+
 export function EventCard(props: EventCardProps) {
-  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? []
+  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
   const remainingCount = () => {
-    const total = props.attendeeCount ?? props.attendees?.length ?? 0
-    const displayed = displayedAttendees().length
-    return total - displayed
-  }
+    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) */}
+    <div class={`${card} ${props.class ?? ""}`}>
       <Show 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>
+        <img class={decoration} src={props.decorationImage} alt="" />
       </Show>
 
       <Show 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>
+        <img class={preview} src={props.image} alt={props.title} />
       </Show>
 
-      <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>
+      <div class={body}>
+        <h3 class={title}>{props.title}</h3>
 
         <Show when={props.date || props.author}>
-          <div class="flex items-center gap-4 mt-3 text-sm text-primary-300">
+          <div class={meta}>
             <Show when={props.author}>
-              <div class="flex items-center gap-1.5">
-                <span class="text-accent">@</span>
+              <div class={metaItem}>
+                <span class={metaIcon}>@</span>
                 <span>{props.author}</span>
               </div>
             </Show>
             <Show when={props.date}>
-              <div class="flex items-center gap-1.5">
-                <span class="text-accent">⏱</span>
+              <div class={metaItem}>
+                <span class={metaIcon}>⏱</span>
                 <span>{props.date}</span>
               </div>
             </Show>
@@ -72,61 +140,93 @@ export function EventCard(props: EventCardProps) {
         </Show>
 
         <Show when={displayedAttendees().length > 0}>
-          <div class="flex items-center mt-3">
-            <div class="flex -space-x-2">
+          <div class={attendeesRow}>
+            <div class={avatars}>
               <For each={displayedAttendees()}>
-                {(attendee) => (
-                  <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />
-                )}
+                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />}
               </For>
             </div>
             <Show when={remainingCount() > 0}>
-              <span class="ml-2 text-sm text-primary-300">
-                +{remainingCount()} más
-              </span>
+              <span class={more}>+{remainingCount()} más</span>
             </Show>
           </div>
         </Show>
 
         <Show when={props.actions}>
-          <div class="mt-4 flex gap-2">
-            {typeof props.actions === 'function' ? props.actions() : props.actions}
+          <div class={actionRow}>
+            {typeof props.actions === "function" ? props.actions() : props.actions}
           </div>
         </Show>
       </div>
     </div>
-  )
+  );
 }
 
 export interface EventListItemProps {
-  title: string
-  image?: string
-  subtitle?: string
-  onClick?: () => void
-  class?: string
+  title: string;
+  image?: string;
+  subtitle?: string;
+  onClick?: () => void;
+  class?: string;
 }
 
+const listItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  width: "full",
+  padding: 8,
+  borderRadius: "lg",
+  textAlign: "start",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderStyle: "none",
+});
+
+const thumb = style({
+  width: 48,
+  height: 48,
+  flexShrink: 0,
+  borderRadius: "default",
+  objectFit: "cover",
+});
+
+const listBody = style({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  minWidth: 0,
+});
+
+const listTitle = style({
+  font: "ui",
+  fontWeight: "medium",
+  color: "[var(--color-primary-100)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const listSubtitle = style({
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
 export function EventListItem(props: EventListItemProps) {
   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}
-    >
+    <HeadlessButton class={`${listItem} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
       <Show 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>
+        <img class={thumb} src={props.image} alt={props.title} />
       </Show>
-      <div class="flex-1 min-w-0">
-        <h4 class="font-medium text-primary-100 truncate">{props.title}</h4>
+      <div class={listBody}>
+        <h4 class={listTitle}>{props.title}</h4>
         <Show when={props.subtitle}>
-          <p class="text-sm text-primary-300 truncate">{props.subtitle}</p>
+          <p class={listSubtitle}>{props.subtitle}</p>
         </Show>
       </div>
-    </button>
-  )
+    </HeadlessButton>
+  );
 }

package/src/custom/header/index.tsx

@@ -1,33 +1,64 @@
-import type { JSX } from 'solid-js'
-import { Logo, type LogoProps } from '../logo'
-
-export interface HeaderProps {
-  /** Image element to show to the left of the text logo */
-  logoImage?: JSX.Element
-  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
-  logoProps?: LogoProps | null
-  /** Custom logo element - replaces the default Logo component entirely */
-  logo?: JSX.Element
-  /** Navigation items to display on the right side */
-  children?: JSX.Element
-  /** Additional CSS classes */
-  class?: string
-}
-
-export function Header(props: HeaderProps) {
-  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null
-
-  return (
-    <header class={`vui-header ${props.class ?? ''}`}>
-      <div class="vui-header__container">
-        <div class="flex items-center gap-3">
-          {props.logoImage}
-          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
-        </div>
-        <nav class="vui-header__nav">
-          {props.children}
-        </nav>
-      </div>
-    </header>
-  )
-}
+import type { JSX } from "solid-js";
+import { Logo, type LogoProps } from "../logo";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A top app-bar: centered max-width row with a logo group and
+// a nav slot, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
+
+export interface HeaderProps {
+  logoImage?: JSX.Element;
+  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
+  logoProps?: LogoProps | null;
+  logo?: JSX.Element;
+  children?: JSX.Element;
+  class?: string;
+}
+
+const bar = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "full",
+  backgroundColor: "[var(--color-header-bg)]",
+  borderBottomWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-border)]",
+});
+
+const inner = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "full",
+  maxWidth: 1152,
+  paddingX: 24,
+  paddingY: 12,
+});
+
+const logoGroup = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+});
+
+const nav = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+});
+
+export function Header(props: HeaderProps) {
+  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null;
+
+  return (
+    <header class={`${bar} ${props.class ?? ""}`}>
+      <div class={inner}>
+        <div class={logoGroup}>
+          {props.logoImage}
+          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
+        </div>
+        <nav class={nav}>{props.children}</nav>
+      </div>
+    </header>
+  );
+}

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

@@ -1,62 +1,99 @@
-import type { JSX } from 'solid-js'
-import { Show, For } from 'solid-js'
+import type { JSX } from "solid-js";
+import { Show, For } from "solid-js";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A sidebar nav (sections with an accent rail + links) on the
+// S2 spacing/type ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface NavItemProps {
-  title: string
-  children?: JSX.Element
-  class?: string
+  title: string;
+  children?: JSX.Element;
+  class?: string;
 }
 
+const item = style({
+  display: "flex",
+  alignItems: "center",
+  font: "heading-sm",
+  color: "[var(--color-primary-200)]",
+});
+
 export function NavItem(props: NavItemProps) {
   return (
-    <li class={`flex items-center ${props.class ?? ''}`}>
-      <span class="text-lg font-bold text-primary-200">{props.title}</span>
+    <li class={`${item} ${props.class ?? ""}`}>
+      <span>{props.title}</span>
       {props.children}
     </li>
-  )
+  );
 }
 
 export interface NavLinkProps {
-  href: string
-  children: JSX.Element
-  active?: boolean
-  class?: string
+  href: string;
+  children: JSX.Element;
+  active?: boolean;
+  class?: string;
 }
 
-export function NavLink(props: NavLinkProps) {
-  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'
+const link = style<{ isActive: boolean }>({
+  font: "ui",
+  textDecoration: { default: "none", isActive: "underline" },
+  fontWeight: { default: "normal", isActive: "medium" },
+  color: {
+    default: "[var(--color-text-secondary)]",
+    isActive: "[var(--color-primary-300)]",
+  },
+});
 
+export function NavLink(props: NavLinkProps) {
   return (
     <a
       href={props.href}
-      class={`${props.active ? activeStyles : inactiveStyles} ${props.class ?? ''}`}
+      class={`${link({ isActive: props.active ?? false })} ${props.class ?? ""}`}
     >
       {props.children}
     </a>
-  )
+  );
 }
 
 export interface NavSectionProps {
-  title: string
-  links?: { href: string; label: string; active?: boolean }[]
-  children?: JSX.Element
-  class?: string
+  title: string;
+  links?: { href: string; label: string; active?: boolean }[];
+  children?: JSX.Element;
+  class?: string;
 }
 
+const sectionRow = style({
+  display: "flex",
+});
+
+const accentRail = style({
+  flexShrink: 0,
+  width: 4,
+  height: 20,
+  backgroundColor: "[var(--color-accent-300)]",
+});
+
+const list = style({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  gap: 4,
+  paddingStart: 16,
+});
+
 export function NavSection(props: NavSectionProps) {
   return (
-    <div class={props.class ?? ''}>
+    <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">
+      <div class={sectionRow}>
+        <div class={accentRail} />
+        <ul class={list}>
           <Show when={props.links}>
             <For each={props.links}>
-              {(link) => (
+              {(navLink) => (
                 <li>
-                  <NavLink href={link.href} active={link.active}>
-                    {link.label}
+                  <NavLink href={navLink.href} active={navLink.active}>
+                    {navLink.label}
                   </NavLink>
                 </li>
               )}
@@ -66,23 +103,32 @@ export function NavSection(props: NavSectionProps) {
         </ul>
       </div>
     </div>
-  )
+  );
 }
 
 export interface LateralNavProps {
-  transparent?: boolean
-  children?: JSX.Element
-  class?: string
+  transparent?: boolean;
+  children?: JSX.Element;
+  class?: string;
 }
 
-export function LateralNav(props: LateralNavProps) {
-  const bgColor = () => (props.transparent ? '' : 'bg-bg-200')
+const nav = style<{ isTransparent: boolean }>({
+  width: 300,
+  margin: 0,
+  padding: 12,
+  borderEndWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-primary-600)]",
+  backgroundColor: {
+    default: "[var(--color-bg-200)]",
+    isTransparent: "transparent",
+  },
+});
 
+export function LateralNav(props: LateralNavProps) {
   return (
-    <div
-      class={`hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ''}`}
-    >
+    <div class={`${nav({ isTransparent: props.transparent ?? false })} ${props.class ?? ""}`}>
       {props.children}
     </div>
-  )
+  );
 }

package/src/custom/logo/index.tsx

@@ -1,58 +1,53 @@
-import { JSX } from "solid-js";
+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 {
-  /** First word (light weight, muted color) */
   firstWord?: string;
-  /** Second word (bold, with 3D effect) */
   secondWord?: string;
-  /** Size variant of the logo */
   size?: LogoSize;
-  /** Invert the styles (first word gets 3D effect, second word is muted) */
   inverted?: boolean;
-  /** Additional CSS classes */
   class?: string;
 }
 
-/**
- * Two-word logo with retro synthwave 3D effect.
- * First word is light/muted, second word has bold styling with pink 3D shadow.
- *
- * @example
- * // Default usage
- * <Logo />
- *
- * @example
- * // Custom text
- * <Logo firstWord="My" secondWord="Brand" size="lg" />
- */
-export function Logo(props: LogoProps): JSX.Element {
-  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 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)]",
+      accent: "[var(--color-accent)]",
+    },
+  },
+});
 
+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={`vui-logo ${sizeClass()} ${props.inverted ? "vui-logo--inverted" : ""} ${props.class ?? ""}`}>
-      <span class="vui-logo__first" data-text={props.inverted ? firstWord() : undefined}>
-        {firstWord()}
-      </span>
-      <span class="vui-logo__second" data-text={props.inverted ? undefined : secondWord()}>
-        {secondWord()}
-      </span>
+    <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>
   );
 }