@proyecto-viviana/ui 0.3.2 → 0.3.4

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,322 @@
+// ============================================
+// 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';

package/src/landmark/index.tsx

@@ -0,0 +1,231 @@
+/**
+ * Landmark component for proyecto-viviana-ui
+ *
+ * Styled landmark component built on top of solidaria-components.
+ * Landmarks help screen reader users navigate between major sections of a page.
+ * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
+ */
+
+import { type JSX, splitProps, Show } from 'solid-js'
+import {
+  Landmark as HeadlessLandmark,
+  useLandmarkController,
+  type LandmarkProps as HeadlessLandmarkProps,
+  type AriaLandmarkRole,
+  type LandmarkController,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface LandmarkProps extends Omit<HeadlessLandmarkProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+  /** Whether to show a visual indicator (for development). */
+  showLabel?: boolean
+}
+
+export type { AriaLandmarkRole, LandmarkController }
+
+// ============================================
+// STYLES
+// ============================================
+
+const roleLabels: Record<AriaLandmarkRole, string> = {
+  main: 'Main',
+  navigation: 'Navigation',
+  search: 'Search',
+  banner: 'Banner',
+  contentinfo: 'Footer',
+  complementary: 'Aside',
+  form: 'Form',
+  region: 'Region',
+}
+
+const roleColors: Record<AriaLandmarkRole, string> = {
+  main: 'bg-accent/10 border-accent-300',
+  navigation: 'bg-primary-500/10 border-primary-400',
+  search: 'bg-warning-400/10 border-warning-400',
+  banner: 'bg-success-400/10 border-success-400',
+  contentinfo: 'bg-danger-400/10 border-danger-400',
+  complementary: 'bg-primary-300/10 border-primary-300',
+  form: 'bg-accent-200/10 border-accent-200',
+  region: 'bg-bg-200/50 border-bg-300',
+}
+
+// ============================================
+// LANDMARK COMPONENT
+// ============================================
+
+/**
+ * A landmark is a region of the page that helps screen reader users navigate.
+ * Press F6 to cycle through landmarks, or Shift+F6 to go backwards.
+ *
+ * @example
+ * ```tsx
+ * // Main content area
+ * <Landmark role="main" aria-label="Main content">
+ *   <h1>Welcome</h1>
+ *   <p>Page content here...</p>
+ * </Landmark>
+ *
+ * // Navigation
+ * <Landmark role="navigation" aria-label="Primary navigation">
+ *   <nav>...</nav>
+ * </Landmark>
+ *
+ * // With development label visible
+ * <Landmark role="main" aria-label="Main content" showLabel>
+ *   ...
+ * </Landmark>
+ * ```
+ */
+export function Landmark(props: LandmarkProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class', 'showLabel'])
+  const customClass = local.class ?? ''
+
+  const role = () => headlessProps.role
+
+  const getClassName = (): string => {
+    const base = 'relative'
+    const debugClass = local.showLabel
+      ? `border-2 border-dashed ${roleColors[role()]}`
+      : ''
+    return [base, debugClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessLandmark {...headlessProps} class={getClassName()}>
+      <Show when={local.showLabel}>
+        <div
+          class={`absolute -top-3 left-2 px-2 py-0.5 text-xs font-medium rounded ${roleColors[role()]} text-primary-200`}
+        >
+          {roleLabels[role()]}
+          <Show when={headlessProps['aria-label']}>
+            <span class="text-primary-400"> - {headlessProps['aria-label']}</span>
+          </Show>
+        </div>
+      </Show>
+      {props.children}
+    </HeadlessLandmark>
+  )
+}
+
+// ============================================
+// SKIP LINK COMPONENT
+// ============================================
+
+export interface SkipLinkProps {
+  /** The ID of the element to skip to (usually the main landmark). */
+  href: string
+  /** The text to display in the skip link. */
+  children?: JSX.Element
+  /** Additional CSS class name. */
+  class?: string
+}
+
+/**
+ * A skip link allows keyboard users to bypass repetitive navigation and jump directly to main content.
+ * The link is visually hidden until focused.
+ *
+ * @example
+ * ```tsx
+ * <SkipLink href="#main-content">Skip to main content</SkipLink>
+ *
+ * <Landmark role="navigation">...</Landmark>
+ *
+ * <Landmark role="main" id="main-content">
+ *   ...
+ * </Landmark>
+ * ```
+ */
+export function SkipLink(props: SkipLinkProps): JSX.Element {
+  const customClass = props.class ?? ''
+
+  const className = [
+    // Visually hidden by default
+    'absolute left-0 top-0 -translate-y-full',
+    // Show when focused
+    'focus:translate-y-0',
+    // Styling
+    'z-50 px-4 py-2 bg-accent text-white font-medium rounded-br-lg',
+    'transition-transform duration-200',
+    'focus:outline-none focus:ring-2 focus:ring-accent-300 focus:ring-offset-2',
+    customClass,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <a href={props.href} class={className}>
+      {props.children ?? 'Skip to main content'}
+    </a>
+  )
+}
+
+// ============================================
+// LANDMARK NAVIGATOR COMPONENT
+// ============================================
+
+export interface LandmarkNavigatorProps {
+  /** Additional CSS class name. */
+  class?: string
+  /** Whether to show the navigator (for development/accessibility testing). */
+  isVisible?: boolean
+}
+
+/**
+ * A floating navigator for landmarks, useful for development and accessibility testing.
+ * Provides buttons to navigate between landmarks programmatically.
+ *
+ * @example
+ * ```tsx
+ * // Show in development only
+ * <LandmarkNavigator isVisible={import.meta.env.DEV} />
+ * ```
+ */
+export function LandmarkNavigator(props: LandmarkNavigatorProps): JSX.Element {
+  const controller = useLandmarkController()
+
+  return (
+    <Show when={props.isVisible}>
+      <div
+        class={`fixed bottom-4 right-4 z-50 flex flex-col gap-2 p-3 bg-bg-400 border border-bg-300 rounded-lg shadow-lg ${props.class ?? ''}`}
+      >
+        <span class="text-xs font-medium text-primary-400 uppercase tracking-wider">
+          Landmarks (F6)
+        </span>
+        <div class="flex gap-1">
+          <button
+            type="button"
+            onClick={() => controller.focusPrevious()}
+            class="px-2 py-1 text-sm bg-bg-300 hover:bg-bg-200 text-primary-200 rounded transition-colors"
+            title="Previous landmark (Shift+F6)"
+          >
+            ←
+          </button>
+          <button
+            type="button"
+            onClick={() => controller.focusMain()}
+            class="px-3 py-1 text-sm bg-accent hover:bg-accent-200 text-white rounded transition-colors"
+            title="Go to main content"
+          >
+            Main
+          </button>
+          <button
+            type="button"
+            onClick={() => controller.focusNext()}
+            class="px-2 py-1 text-sm bg-bg-300 hover:bg-bg-200 text-primary-200 rounded transition-colors"
+            title="Next landmark (F6)"
+          >
+            →
+          </button>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+// Export controller hook for convenience
+export { useLandmarkController }