@proyecto-viviana/ui 0.3.5 → 0.4.1

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

@@ -1,105 +1,148 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-import { Avatar } from '../../avatar'
+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 type TimelineEventType = "follow" | "like" | "comment" | "event" | "custom";
 
 export interface TimelineItemProps {
-  type?: TimelineEventType
+  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)
+  icon?: string | (() => JSX.Element);
   leftUser?: {
-    name: string
-    avatar?: string
-  }
+    name: string;
+    avatar?: string;
+  };
   rightUser?: {
-    name: string
-    avatar?: string
-  }
+    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
+  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="font-semibold text-accent-200">{left}</span>
-      {' ha empezado a seguir a '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <span class={nameEmph}>{left}</span>
+      {" ha empezado a seguir a "}
+      <span class={nameEmph}>{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>
+      <span class={nameEmph}>{left}</span>
+      {" le ha dado like a "}
+      <span class={nameEmph}>{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>
+      <span class={nameEmph}>{left}</span>
+      {" ha comentado en "}
+      <span class={nameEmph}>{right}</span>
     </>
   ),
   event: (left, right) => (
     <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' asistirá al evento de '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <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 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 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()
-  }
+    const message = props.message;
+    if (!message) return null;
+    if (typeof message === "string") return message;
+    return message();
+  };
 
   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">
+    <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.icon}>{renderIcon()}</Show>
         <Show when={props.rightUser}>
           <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
         </Show>
       </div>
-      <div class="flex items-center justify-center gap-3 text-center">
-        <span class="font-light text-primary-300">
+      <div class={messageRow}>
+        <span>
           <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
             {renderMessage()}
           </Show>
         </span>
       </div>
     </div>
-  )
+  );
 }

package/src/font-faces.css

@@ -0,0 +1 @@
+@import "@proyecto-viviana/solid-spectrum/font-faces.css";

package/src/index.ts

@@ -1,322 +1,8 @@
-// ============================================
-// SPECTRUM-BASED COMPONENTS
-// ============================================
-
-// Button
-export { Button } from './button';
-export type { ButtonProps, ButtonVariant, ButtonStyle, StaticColor } from './button';
-
-// Badge
-export { Badge } from './badge';
-export type { BadgeProps, BadgeVariant, BadgeSize } from './badge';
-
-// Alert
-export { Alert } from './alert';
-export type { AlertProps, AlertVariant } from './alert';
-
-// Avatar
-export { Avatar, AvatarGroup } from './avatar';
-export type { AvatarProps, AvatarGroupProps, AvatarSize } from './avatar';
-
-// Switch
-export { TabSwitch, ToggleSwitch } from './switch';
-export type { TabSwitchProps, ToggleSwitchProps, SwitchSize } from './switch';
-
-// Checkbox
-export { Checkbox, CheckboxGroup } from './checkbox';
-export type { CheckboxProps, CheckboxGroupProps, CheckboxSize } from './checkbox';
-
-// Radio
-export { RadioGroup, Radio } from './radio';
-export type { RadioGroupProps, RadioProps, RadioGroupOrientation, RadioGroupSize } from './radio';
-
-// Dialog
-export { Dialog, DialogTrigger, DialogFooter } from './dialog';
-export type { DialogProps, DialogTriggerProps, DialogFooterProps, DialogSize } from './dialog';
-
-// Icon
-export { Icon, GitHubIcon } from './icon';
-export type { IconProps, GitHubIconProps } from './icon';
-
-// Tooltip
-export { Tooltip, TooltipTrigger, SimpleTooltip } from './tooltip';
-export type { TooltipProps, TooltipTriggerProps, TooltipPlacement, TooltipVariant, SimpleTooltipProps } from './tooltip';
-
-// Popover
-export { Popover, PopoverTrigger, PopoverHeader, PopoverFooter } from './popover';
-export type { PopoverProps, PopoverTriggerProps, PopoverHeaderProps, PopoverFooterProps, PopoverPlacement, PopoverSize, PopoverRenderProps } from './popover';
-
-// TextField
-export { TextField } from './textfield';
-export type { TextFieldProps, TextFieldSize, TextFieldVariant } from './textfield';
-
-// Link
-export { Link } from './link';
-export type { LinkProps, LinkVariant } from './link';
-
-// ProgressBar
-export { ProgressBar } from './progress-bar';
-export type { ProgressBarProps, ProgressBarSize, ProgressBarVariant } from './progress-bar';
-
-// Separator
-export { Separator } from './separator';
-export type { SeparatorProps, SeparatorVariant, SeparatorSize } from './separator';
-
-// Toolbar
-export { Toolbar } from './toolbar';
-export type { ToolbarProps, ToolbarSize, ToolbarVariant } from './toolbar';
-
-// Autocomplete
-export { SearchAutocomplete } from './autocomplete';
-export type { SearchAutocompleteProps, SearchAutocompleteItem, SearchAutocompleteSize } from './autocomplete';
-
-// Select
-export { Select, SelectTrigger, SelectValue, SelectListBox, SelectOption } from './select';
-export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectListBoxProps, SelectOptionProps, SelectSize } from './select';
-
-// Menu
-export { Menu, MenuItem, MenuTrigger, MenuButton, MenuSeparator } from './menu';
-export type { MenuProps, MenuItemProps, MenuTriggerProps, MenuButtonProps, MenuSeparatorProps, MenuSize } from './menu';
-
-// ListBox
-export { ListBox, ListBoxOption } from './listbox';
-export type { ListBoxProps, ListBoxOptionProps, ListBoxSize } from './listbox';
-
-// Tabs
-export { Tabs, TabList, Tab, TabPanel } from './tabs';
-export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsSize, TabsVariant, TabOrientation } from './tabs';
-
-// Breadcrumbs
-export { Breadcrumbs, BreadcrumbItem } from './breadcrumbs';
-export type { BreadcrumbsProps, BreadcrumbItemProps, BreadcrumbsSize, BreadcrumbsVariant } from './breadcrumbs';
-
-// NumberField
-export { NumberField } from './numberfield';
-export type { NumberFieldProps, NumberFieldSize, NumberFieldVariant } from './numberfield';
-
-// SearchField
-export { SearchField } from './searchfield';
-export type { SearchFieldProps, SearchFieldSize, SearchFieldVariant } from './searchfield';
-
-// Slider
-export { Slider } from './slider';
-export type { SliderProps, SliderSize, SliderVariant } from './slider';
-
-// ComboBox
-export { ComboBox, ComboBoxInputGroup, ComboBoxInput, ComboBoxButton, ComboBoxListBox, ComboBoxOption, defaultContainsFilter } from './combobox';
-export type { ComboBoxProps, ComboBoxInputProps, ComboBoxButtonProps, ComboBoxListBoxProps, ComboBoxOptionProps, ComboBoxSize, FilterFn, MenuTriggerAction } from './combobox';
-
-// Toast
-export {
-  Toast,
-  ToastRegion,
-  ToastProvider,
-  ToastContext,
-  addToast,
-  toastSuccess,
-  toastError,
-  toastWarning,
-  toastInfo,
-  globalToastQueue,
-  useToastContext,
-} from './toast';
-export type {
-  ToastProps,
-  ToastRegionProps,
-  ToastProviderProps,
-  ToastPlacement,
-  ToastVariant,
-  ToastContent,
-  ToastRenderProps,
-  ToastRegionRenderProps,
-  QueuedToast,
-  ToastOptions,
-} from './toast';
-
-// Disclosure
-export {
-  Disclosure,
-  DisclosureGroup,
-  DisclosureTrigger,
-  DisclosurePanel,
-} from './disclosure';
-export type {
-  DisclosureProps,
-  DisclosureGroupProps,
-  DisclosureTriggerProps,
-  DisclosurePanelProps,
-  DisclosureSize,
-  DisclosureVariant,
-} from './disclosure';
-
-// Meter
-export { Meter } from './meter';
-export type { MeterProps, MeterSize, MeterVariant } from './meter';
-
-// TagGroup
-export { TagGroup } from './tag-group';
-export type { TagGroupProps, TagProps, TagGroupSize, TagGroupVariant } from './tag-group';
-
-// Calendar
-export { Calendar } from './calendar';
-export type { CalendarProps, CalendarSize, CalendarDate, DateValue } from './calendar';
-
-// RangeCalendar
-export { RangeCalendar } from './calendar/RangeCalendar';
-export type { RangeCalendarProps, RangeCalendarSize, RangeValue } from './calendar/RangeCalendar';
-
-// DateField
-export { DateField } from './calendar/DateField';
-export type { DateFieldProps, DateFieldSize } from './calendar/DateField';
-
-// TimeField
-export { TimeField } from './calendar/TimeField';
-export type { TimeFieldProps, TimeFieldSize, TimeValue } from './calendar/TimeField';
-
-// DatePicker
-export { DatePicker } from './calendar/DatePicker';
-export type { DatePickerProps, DatePickerSize } from './calendar/DatePicker';
-
-// Table
-export {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  TableSelectionCheckbox,
-  TableSelectAllCheckbox,
-} from './table';
-export type {
-  TableProps,
-  TableHeaderProps,
-  TableColumnProps,
-  TableBodyProps,
-  TableRowProps,
-  TableCellProps,
-  TableSize,
-  TableVariant,
-} from './table';
-
-// GridList
-export {
-  GridList,
-  GridListItem,
-  GridListSelectionCheckbox,
-} from './gridlist';
-export type {
-  GridListProps,
-  GridListItemProps,
-  GridListSize,
-  GridListVariant,
-  GridListLayout,
-} from './gridlist';
-
-// Tree
-export {
-  Tree,
-  TreeItem,
-  TreeExpandButton,
-  TreeSelectionCheckbox,
-} from './tree';
-export type {
-  TreeProps,
-  TreeItemProps,
-  TreeExpandButtonProps,
-  TreeSize,
-  TreeVariant,
-} from './tree';
-
-// Color
-export {
-  ColorSlider,
-  ColorSliderTrack,
-  ColorSliderThumb,
-  ColorArea,
-  ColorAreaGradient,
-  ColorAreaThumb,
-  ColorWheel,
-  ColorWheelTrack,
-  ColorWheelThumb,
-  ColorField,
-  ColorFieldInput,
-  ColorSwatch,
-  ColorPicker,
-} from './color';
-export type {
-  ColorSliderProps,
-  ColorAreaProps,
-  ColorWheelProps,
-  ColorFieldProps,
-  ColorSwatchProps,
-  ColorPickerProps,
-  ColorSize,
-} from './color';
-
-// Landmark
-export {
-  Landmark,
-  SkipLink,
-  LandmarkNavigator,
-  useLandmarkController,
-} from './landmark';
-export type {
-  LandmarkProps,
-  SkipLinkProps,
-  LandmarkNavigatorProps,
-  AriaLandmarkRole,
-  LandmarkController,
-} from './landmark';
-
-// ============================================
-// CUSTOM COMPONENTS
-// ============================================
-
-// Chip
-export { Chip } from './custom/chip';
-export type { ChipProps, ChipVariant } from './custom/chip';
-
-// NavHeader
-export { NavHeader } from './custom/nav-header';
-export type { NavHeaderProps } from './custom/nav-header';
-
-// Header
-export { Header } from './custom/header';
-export type { HeaderProps } from './custom/header';
-
-// LateralNav
-export { LateralNav, NavItem, NavLink, NavSection } from './custom/lateral-nav';
-export type { LateralNavProps, NavItemProps, NavLinkProps, NavSectionProps } from './custom/lateral-nav';
-
-// TimelineItem
-export { TimelineItem } from './custom/timeline-item';
-export type { TimelineItemProps, TimelineEventType } from './custom/timeline-item';
-
-// Conversation
-export { Conversation, ConversationPreview, ConversationBubble } from './custom/conversation';
-export type { ConversationProps, ConversationPreviewProps, ConversationBubbleProps, Message } from './custom/conversation';
-
-// ProfileCard
-export { ProfileCard } from './custom/profile-card';
-export type { ProfileCardProps } from './custom/profile-card';
-
-// EventCard
-export { EventCard, EventListItem } from './custom/event-card';
-export type { EventCardProps, EventListItemProps } from './custom/event-card';
-
-// CalendarCard
-export { CalendarCard } from './custom/calendar-card';
-export type { CalendarCardProps } from './custom/calendar-card';
-
-// Logo
-export { Logo } from './custom/logo';
-export type { LogoProps, LogoSize } from './custom/logo';
-
-// ProjectCard
-export { ProjectCard } from './custom/project-card';
-export type { ProjectCardProps, ProjectCardSize } from './custom/project-card';
-
-// PageLayout
-export { PageLayout } from './custom/page-layout';
-export type { PageLayoutProps } from './custom/page-layout';
+// @proyecto-viviana/ui — the viviana brand's design system.
+//
+// It starts as a thin re-export of @proyecto-viviana/solid-spectrum (identical
+// components + tokens + style macro), establishing the package consumers depend
+// on and the point we diverge from. Divergence happens incrementally: shadow
+// specific components here, then swap in a viviana token theme. Until then this
+// is solid-spectrum verbatim.
+export * from "@proyecto-viviana/solid-spectrum";

package/src/style/runtime.ts

@@ -0,0 +1,2 @@
+// The style macro runtime helpers, re-exported from solid-spectrum.
+export * from "@proyecto-viviana/solid-spectrum/style/runtime";

package/src/style.ts

@@ -0,0 +1,5 @@
+// The style macro, re-exported from solid-spectrum. Consumers import it with the
+// macro attribute, e.g.:
+//   import { style } from "@proyecto-viviana/ui/style" with { type: "macro" };
+// The viviana token theme will be swapped in here when we diverge from solid-spectrum.
+export * from "@proyecto-viviana/solid-spectrum/style";