@proyecto-viviana/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,81 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Avatar } from '../../avatar'
+
+export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom'
+
+export interface TimelineItemProps {
+  type?: TimelineEventType
+  icon?: JSX.Element
+  leftUser?: {
+    name: string
+    avatar?: string
+  }
+  rightUser?: {
+    name: string
+    avatar?: string
+  }
+  message?: JSX.Element
+  class?: string
+}
+
+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>
+    </>
+  ),
+  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á al evento de '}
+      <span class="font-semibold text-accent-200">{right}</span>
+    </>
+  ),
+  custom: () => null,
+}
+
+export function TimelineItem(props: TimelineItemProps) {
+  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">
+        <Show when={props.leftUser}>
+          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
+        </Show>
+        <Show when={props.icon}>
+          {props.icon}
+        </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">
+          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
+            {props.message}
+          </Show>
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/dialog/index.tsx

@@ -0,0 +1,69 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Button } from '../button'
+import { Chip } from '../custom/chip'
+
+export interface DialogProps {
+  title: string
+  subtitle?: string
+  children: JSX.Element
+  tags?: string[]
+  primaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  secondaryAction?: {
+    label: string
+    onClick: () => void
+  }
+  class?: string
+}
+
+export function Dialog(props: DialogProps) {
+  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">
+            <Show when={props.subtitle}>
+              <span class="text-base font-normal text-primary-300">
+                {props.subtitle}
+              </span>
+            </Show>
+          </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>
+          <Show when={props.primaryAction || props.secondaryAction}>
+            <div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">
+              <Show when={props.secondaryAction}>
+                <Button variant="primary" buttonStyle="outline" onPress={props.secondaryAction!.onClick}>
+                  {props.secondaryAction!.label}
+                </Button>
+              </Show>
+              <Show when={props.primaryAction}>
+                <Button variant="primary" onPress={props.primaryAction!.onClick}>
+                  {props.primaryAction!.label}
+                </Button>
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </div>
+      <Show 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>
+      </Show>
+    </div>
+  )
+}

package/src/icon/icons/GitHubIcon.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from 'solid-js';
+
+export interface GitHubIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function GitHubIcon(props: GitHubIconProps): JSX.Element {
+  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>
+  );
+}

package/src/icon/index.tsx

@@ -0,0 +1,48 @@
+import type { Component, JSX } from 'solid-js'
+
+export interface IconProps {
+  /** The icon component to render (should accept size and color props) */
+  icon: Component<{ size?: string | number; color?: string }>
+  /** Size of the icon (e.g., '24px' or 24) */
+  size?: string | number
+  /** Color of the icon */
+  color?: string
+  /** Whether to show the accent shadow effect (4px offset to bottom) */
+  withShadow?: boolean
+  /** Additional CSS class */
+  class?: string
+  /** Click handler */
+  onClick?: () => void
+}
+
+/**
+ * Icon wrapper component with optional accent shadow effect.
+ *
+ * The shadow effect creates a 4px offset accent-colored duplicate
+ * of the icon behind it for a stylized look.
+ */
+export function Icon(props: IconProps): JSX.Element {
+  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>
+  )
+}
+
+// Re-export common icons
+export { GitHubIcon } from './icons/GitHubIcon'
+export type { GitHubIconProps } from './icons/GitHubIcon'

package/src/index.ts

@@ -0,0 +1,107 @@
+// ============================================
+// 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 } from './dialog';
+export type { DialogProps } from './dialog';
+
+// Icon
+export { Icon, GitHubIcon } from './icon';
+export type { IconProps, GitHubIconProps } from './icon';
+
+// Tooltip
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+
+// 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';
+
+// ============================================
+// 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';
+
+// 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';

package/src/link/index.tsx

@@ -0,0 +1,131 @@
+/**
+ * Link component for proyecto-viviana-ui
+ *
+ * Styled link component built on top of solidaria-components.
+ */
+
+import { type JSX, splitProps } from 'solid-js';
+import {
+  Link as HeadlessLink,
+  type LinkProps as HeadlessLinkProps,
+  type LinkRenderProps,
+} from '@proyecto-viviana/solidaria-components';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type LinkVariant = 'primary' | 'secondary' | 'subtle';
+
+export interface LinkProps extends Omit<HeadlessLinkProps, 'class' | 'style' | 'children'> {
+  /** The visual style of the link. @default 'primary' */
+  variant?: LinkVariant;
+  /** Whether the link is on its own vs inside a longer string of text. */
+  isStandalone?: boolean;
+  /** Whether the link should be displayed with a quiet style (no underline by default). */
+  isQuiet?: boolean;
+  /** Additional CSS class name. */
+  class?: string;
+  /** The content of the link. */
+  children?: JSX.Element;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const variantStyles = {
+  primary: 'text-accent hover:text-accent-300',
+  secondary: 'text-primary-300 hover:text-primary-200',
+  subtle: 'text-primary-400 hover:text-primary-300',
+};
+
+// ============================================
+// LINK COMPONENT
+// ============================================
+
+/**
+ * Links allow users to navigate to a different location.
+ * They can be presented inline inside a paragraph or as standalone text.
+ *
+ * Built on solidaria-components Link for full accessibility support.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about">About Us</Link>
+ *
+ * // Secondary variant
+ * <Link href="/help" variant="secondary">Help</Link>
+ *
+ * // Standalone (bold, no underline until hover)
+ * <Link href="/home" isStandalone isQuiet>Home</Link>
+ * ```
+ */
+export function Link(props: LinkProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'variant',
+    'isStandalone',
+    'isQuiet',
+    'class',
+    'children',
+  ]);
+
+  const variant = local.variant ?? 'primary';
+  const customClass = local.class ?? '';
+
+  // Generate class based on render props
+  const getClassName = (renderProps: LinkRenderProps): string => {
+    const base = 'transition-colors duration-200 cursor-pointer rounded-sm outline-none';
+
+    // Variant colors
+    const variantClass = variantStyles[variant];
+
+    // Underline behavior
+    let underlineClass: string;
+    if (local.isStandalone && local.isQuiet) {
+      // Quiet standalone: no underline by default, underline on hover/focus
+      underlineClass = renderProps.isHovered || renderProps.isFocusVisible
+        ? 'underline'
+        : 'no-underline';
+    } else {
+      // Inline links always have underline for accessibility
+      underlineClass = 'underline';
+    }
+
+    // Font weight for standalone
+    const weightClass = local.isStandalone ? 'font-medium' : '';
+
+    // Focus ring
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+      : '';
+
+    // Disabled state
+    const disabledClass = renderProps.isDisabled
+      ? 'opacity-50 cursor-not-allowed'
+      : '';
+
+    // Pressed state
+    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>
+  );
+}

package/src/progress-bar/index.tsx

@@ -0,0 +1,169 @@
+/**
+ * ProgressBar component for proyecto-viviana-ui
+ *
+ * Styled progress bar component built on top of the solidaria hook directly.
+ */
+
+import { type JSX, splitProps, Show, createMemo } from 'solid-js';
+import { createProgressBar } from '@proyecto-viviana/solidaria';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ProgressBarSize = 'sm' | 'md' | 'lg';
+export type ProgressBarVariant = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+export interface ProgressBarProps {
+  /** The current value (controlled). @default 0 */
+  value?: number;
+  /** The smallest value allowed. @default 0 */
+  minValue?: number;
+  /** The largest value allowed. @default 100 */
+  maxValue?: number;
+  /** The content to display as the value's label (e.g. "1 of 4"). */
+  valueLabel?: string;
+  /** Whether presentation is indeterminate when progress isn't known. */
+  isIndeterminate?: boolean;
+  /** The size of the progress bar. @default 'md' */
+  size?: ProgressBarSize;
+  /** The visual style variant. @default 'primary' */
+  variant?: ProgressBarVariant;
+  /** The label to display above the progress bar. */
+  label?: string;
+  /** Whether to show the value text. @default true for determinate progress */
+  showValueLabel?: boolean;
+  /** Additional CSS class name. */
+  class?: string;
+  /** An accessibility label. */
+  'aria-label'?: string;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    track: 'h-1',
+    text: 'text-xs',
+  },
+  md: {
+    track: 'h-2',
+    text: 'text-sm',
+  },
+  lg: {
+    track: 'h-3',
+    text: 'text-base',
+  },
+};
+
+const variantStyles = {
+  primary: 'bg-primary-500',
+  accent: 'bg-accent',
+  success: 'bg-green-500',
+  warning: 'bg-yellow-500',
+  danger: 'bg-red-500',
+};
+
+// ============================================
+// UTILITIES
+// ============================================
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+// ============================================
+// PROGRESSBAR COMPONENT
+// ============================================
+
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={50} label="Loading..." />
+ *
+ * // Indeterminate
+ * <ProgressBar isIndeterminate label="Processing..." />
+ *
+ * // Different variants
+ * <ProgressBar value={75} variant="success" />
+ * ```
+ */
+export function ProgressBar(props: ProgressBarProps): JSX.Element {
+  const [local, ariaProps] = splitProps(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();
+
+  // Create progress bar aria props
+  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']; },
+  });
+
+  // Calculate percentage
+  const percentage = createMemo(() => {
+    if (isIndeterminate()) {
+      return undefined;
+    }
+    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;
+  });
+
+  // Get value text from aria props
+  const valueText = () => progressAria.progressBarProps['aria-valuetext'] as string | undefined;
+
+  const sizeConfig = () => sizeStyles[size()];
+
+  return (
+    <div
+      {...progressAria.progressBarProps}
+      class={`w-full ${local.class ?? ''}`}
+    >
+      {/* Label and value row */}
+      <Show when={local.label || showValueLabel()}>
+        <div class={`flex justify-between items-center mb-1 ${sizeConfig().text}`}>
+          <Show when={local.label}>
+            <span class="text-primary-200 font-medium">{local.label}</span>
+          </Show>
+          <Show when={showValueLabel() && !isIndeterminate()}>
+            <span class="text-primary-300">{valueText()}</span>
+          </Show>
+        </div>
+      </Show>
+
+      {/* 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 ${variantStyles[variant()]} ${
+            isIndeterminate() ? 'animate-progress-indeterminate' : ''
+          }`}
+          style={{
+            width: isIndeterminate() ? '30%' : `${percentage()}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}