@proyecto-viviana/ui 0.1.7 → 0.2.0

package/src/index.ts

@@ -31,16 +31,20 @@ export { RadioGroup, Radio } from './radio';
 export type { RadioGroupProps, RadioProps, RadioGroupOrientation, RadioGroupSize } from './radio';
 
 // Dialog
-export { Dialog } from './dialog';
-export type { DialogProps } from './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 } from './tooltip';
-export type { TooltipProps } from './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';
@@ -58,6 +62,213 @@ export type { ProgressBarProps, ProgressBarSize, ProgressBarVariant } from './pr
 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
 // ============================================
@@ -70,6 +281,10 @@ export type { ChipProps, ChipVariant } from './custom/chip';
 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';

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 }

package/src/link/index.tsx

@@ -67,7 +67,6 @@ export function Link(props: LinkProps): JSX.Element {
     'isStandalone',
     'isQuiet',
     'class',
-    'children',
   ]);
 
   const variant = local.variant ?? 'primary';
@@ -125,7 +124,7 @@ export function Link(props: LinkProps): JSX.Element {
       {...headlessProps}
       class={getClassName}
     >
-      {local.children}
+      {props.children}
     </HeadlessLink>
   );
 }