@proyecto-viviana/ui 0.1.5 → 0.2.0

package/src/toast/index.tsx

@@ -0,0 +1,324 @@
+/**
+ * Toast components for proyecto-viviana-ui
+ *
+ * Toast notifications with auto-dismiss, animations, and variants.
+ * Built on top of solidaria-components for accessibility.
+ */
+
+import { type JSX, splitProps, For, Show } from 'solid-js';
+import {
+  Toast as HeadlessToast,
+  ToastRegion as HeadlessToastRegion,
+  ToastProvider as HeadlessToastProvider,
+  ToastContext,
+  ToastCloseButton as HeadlessToastCloseButton,
+  globalToastQueue,
+  addToast as headlessAddToast,
+  useToastContext,
+  type ToastContent,
+  type ToastProps as HeadlessToastProps,
+  type ToastRegionProps as HeadlessToastRegionProps,
+  type ToastProviderProps as HeadlessToastProviderProps,
+  type ToastRenderProps,
+  type ToastRegionRenderProps,
+} from '@proyecto-viviana/solidaria-components';
+import { type QueuedToast, type ToastOptions } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ToastPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+
+export interface ToastProviderProps extends HeadlessToastProviderProps {}
+
+export interface ToastRegionProps extends Omit<HeadlessToastRegionProps, 'class' | 'style' | 'children'> {
+  /** The placement of the toast region. */
+  placement?: ToastPlacement;
+  /** Additional CSS class name. */
+  class?: string;
+}
+
+export interface ToastProps extends Omit<HeadlessToastProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const regionStyles = [
+  'flex flex-col gap-3',
+  'p-4',
+].join(' ');
+
+const toastBaseStyles = [
+  'flex items-start gap-3',
+  'px-4 py-3',
+  'rounded-lg shadow-lg',
+  'min-w-[300px] max-w-[400px]',
+  'border',
+  // Animations
+  'data-[animation=entering]:animate-in data-[animation=entering]:fade-in-0 data-[animation=entering]:slide-in-from-right-5',
+  'data-[animation=exiting]:animate-out data-[animation=exiting]:fade-out-0 data-[animation=exiting]:slide-out-to-right-5',
+].join(' ');
+
+const variantStyles: Record<ToastVariant, string> = {
+  info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200',
+  success: 'bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-200',
+  warning: 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-200',
+  error: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-200',
+  neutral: 'bg-neutral-50 border-neutral-200 text-neutral-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200',
+};
+
+const iconStyles: Record<ToastVariant, string> = {
+  info: 'text-blue-500 dark:text-blue-400',
+  success: 'text-green-500 dark:text-green-400',
+  warning: 'text-yellow-500 dark:text-yellow-400',
+  error: 'text-red-500 dark:text-red-400',
+  neutral: 'text-neutral-500 dark:text-neutral-400',
+};
+
+const closeButtonStyles = [
+  'ml-auto -mr-1 -mt-1',
+  'p-1 rounded-md',
+  'text-current opacity-60 hover:opacity-100',
+  'transition-opacity',
+  'focus:outline-none focus:ring-2 focus:ring-offset-2',
+].join(' ');
+
+// ============================================
+// ICONS
+// ============================================
+
+const InfoIcon = () => (
+  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const SuccessIcon = () => (
+  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const WarningIcon = () => (
+  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+  </svg>
+);
+
+const ErrorIcon = () => (
+  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const getVariantIcon = (variant: ToastVariant) => {
+  switch (variant) {
+    case 'success': return <SuccessIcon />;
+    case 'warning': return <WarningIcon />;
+    case 'error': return <ErrorIcon />;
+    case 'info':
+    case 'neutral':
+    default: return <InfoIcon />;
+  }
+};
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * ToastProvider creates a toast queue context for descendant components.
+ * Wrap your app or a section that needs toast notifications.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <ToastRegion placement="bottom-end" />
+ * </ToastProvider>
+ * ```
+ */
+export function ToastProvider(props: ToastProviderProps): JSX.Element {
+  return <HeadlessToastProvider {...props} />;
+}
+
+/**
+ * ToastRegion displays all visible toasts in a fixed position.
+ *
+ * @example
+ * ```tsx
+ * <ToastRegion placement="bottom-end" />
+ * ```
+ */
+export function ToastRegion(props: ToastRegionProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['placement', 'class']);
+
+  return (
+    <HeadlessToastRegion
+      {...rest}
+      placement={local.placement ?? 'bottom-end'}
+      class={(_renderProps: ToastRegionRenderProps) => {
+        return [regionStyles, local.class ?? ''].filter(Boolean).join(' ');
+      }}
+    >
+      {(regionProps: ToastRegionRenderProps) => (
+        <For each={regionProps.visibleToasts}>
+          {(toast) => <Toast toast={toast} />}
+        </For>
+      )}
+    </HeadlessToastRegion>
+  );
+}
+
+/**
+ * Toast displays an individual notification with icon, content, and close button.
+ *
+ * Usually you don't need to use this directly - ToastRegion renders toasts automatically.
+ */
+export function Toast(props: ToastProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['toast', 'class']);
+
+  const content = () => local.toast.content;
+  const variant = (): ToastVariant => content().type ?? 'neutral';
+
+  return (
+    <HeadlessToast
+      {...rest}
+      toast={local.toast}
+      class={(_renderProps: ToastRenderProps) => {
+        return [
+          toastBaseStyles,
+          variantStyles[variant()],
+          local.class ?? '',
+        ].filter(Boolean).join(' ');
+      }}
+    >
+      {/* Icon */}
+      <div class={`flex-shrink-0 ${iconStyles[variant()]}`}>
+        {getVariantIcon(variant())}
+      </div>
+
+      {/* Content */}
+      <div class="flex-1 min-w-0">
+        <Show when={content().title}>
+          <p class="font-semibold text-sm">{content().title}</p>
+        </Show>
+        <Show when={content().description}>
+          <p class="text-sm opacity-90 mt-1">{content().description}</p>
+        </Show>
+        <Show when={content().action}>
+          <button
+            type="button"
+            class="mt-2 text-sm font-medium underline hover:no-underline"
+            onClick={content().action?.onAction}
+          >
+            {content().action?.label}
+          </button>
+        </Show>
+      </div>
+
+      {/* Close Button */}
+      <HeadlessToastCloseButton
+        toast={local.toast}
+        class={closeButtonStyles}
+        aria-label="Dismiss"
+      >
+        <CloseIcon />
+      </HeadlessToastCloseButton>
+    </HeadlessToast>
+  );
+}
+
+// ============================================
+// GLOBAL TOAST API
+// ============================================
+
+/**
+ * Add a toast to the global queue.
+ * Use this to show toasts from anywhere in your app.
+ *
+ * @example
+ * ```tsx
+ * // Show a success toast
+ * addToast({
+ *   title: 'Success!',
+ *   description: 'Your changes have been saved.',
+ *   type: 'success',
+ * });
+ *
+ * // Show an error toast with auto-dismiss
+ * addToast({
+ *   title: 'Error',
+ *   description: 'Something went wrong.',
+ *   type: 'error',
+ * }, { timeout: 5000 });
+ *
+ * // Show a toast with action
+ * addToast({
+ *   title: 'File deleted',
+ *   type: 'info',
+ *   action: {
+ *     label: 'Undo',
+ *     onAction: () => restoreFile(),
+ *   },
+ * }, { timeout: 10000 });
+ * ```
+ */
+export function addToast(
+  content: ToastContent,
+  options?: ToastOptions
+): string {
+  return headlessAddToast(content, options);
+}
+
+/**
+ * Convenience function to show a success toast.
+ */
+export function toastSuccess(message: string, options?: Omit<ToastOptions, 'priority'>): string {
+  return addToast({ title: message, type: 'success' }, { timeout: 5000, ...options });
+}
+
+/**
+ * Convenience function to show an error toast.
+ */
+export function toastError(message: string, options?: Omit<ToastOptions, 'priority'>): string {
+  return addToast({ title: message, type: 'error' }, { timeout: 8000, ...options });
+}
+
+/**
+ * Convenience function to show a warning toast.
+ */
+export function toastWarning(message: string, options?: Omit<ToastOptions, 'priority'>): string {
+  return addToast({ title: message, type: 'warning' }, { timeout: 6000, ...options });
+}
+
+/**
+ * Convenience function to show an info toast.
+ */
+export function toastInfo(message: string, options?: Omit<ToastOptions, 'priority'>): string {
+  return addToast({ title: message, type: 'info' }, { timeout: 5000, ...options });
+}
+
+// Re-exports
+export {
+  ToastContext,
+  globalToastQueue,
+  useToastContext,
+  type ToastContent,
+  type ToastRenderProps,
+  type ToastRegionRenderProps,
+  type QueuedToast,
+  type ToastOptions,
+};

package/src/toolbar/index.tsx

@@ -0,0 +1,108 @@
+/**
+ * Toolbar component for proyecto-viviana-ui
+ *
+ * Styled toolbar component built on top of solidaria-components Toolbar.
+ */
+
+import { type JSX, splitProps, createMemo } from 'solid-js'
+import {
+  Toolbar as HeadlessToolbar,
+  type ToolbarProps as HeadlessToolbarProps,
+  type ToolbarRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ToolbarSize = 'sm' | 'md' | 'lg'
+export type ToolbarVariant = 'default' | 'bordered' | 'ghost'
+
+export interface ToolbarProps extends Omit<HeadlessToolbarProps, 'class' | 'style'> {
+  /** The visual variant of the toolbar. @default 'default' */
+  variant?: ToolbarVariant
+  /** The size of the toolbar. @default 'md' */
+  size?: ToolbarSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Inline styles. */
+  style?: JSX.CSSProperties
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const baseStyles = 'vui-toolbar inline-flex items-center'
+
+const variantStyles: Record<ToolbarVariant, string> = {
+  default: 'bg-bg-50 rounded-md',
+  bordered: 'border border-bg-200 rounded-md',
+  ghost: '',
+}
+
+const sizeStyles: Record<ToolbarSize, string> = {
+  sm: 'gap-1 p-1',
+  md: 'gap-2 p-2',
+  lg: 'gap-3 p-3',
+}
+
+const orientationStyles = {
+  horizontal: 'flex-row',
+  vertical: 'flex-col',
+}
+
+// ============================================
+// TOOLBAR COMPONENT
+// ============================================
+
+/**
+ * A styled toolbar for grouping interactive controls with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <Button>Bold</Button>
+ *   <Button>Italic</Button>
+ *   <Separator orientation="vertical" />
+ *   <Button>Align Left</Button>
+ *   <Button>Align Center</Button>
+ * </Toolbar>
+ *
+ * // Vertical toolbar
+ * <Toolbar orientation="vertical" variant="bordered">
+ *   <Button>Cut</Button>
+ *   <Button>Copy</Button>
+ *   <Button>Paste</Button>
+ * </Toolbar>
+ * ```
+ */
+export function Toolbar(props: ToolbarProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'variant',
+    'size',
+    'class',
+    'style',
+  ])
+
+  const variant = () => local.variant ?? 'default'
+  const size = () => local.size ?? 'md'
+
+  const getClassName = (renderProps: ToolbarRenderProps): string => {
+    return [
+      baseStyles,
+      variantStyles[variant()],
+      sizeStyles[size()],
+      orientationStyles[renderProps.orientation],
+      local.class ?? '',
+    ].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessToolbar
+      {...headlessProps}
+      class={getClassName}
+      style={local.style}
+    />
+  )
+}

package/src/tooltip/index.tsx

@@ -1,6 +1,160 @@
-import type { JSX } from 'solid-js'
+/**
+ * Tooltip component for proyecto-viviana-ui
+ *
+ * A tooltip displays a description of an element on hover or focus.
+ * Built on top of solidaria-components for accessibility.
+ */
+
+import { type JSX, Show, splitProps } from 'solid-js'
+import {
+  Tooltip as HeadlessTooltip,
+  TooltipTrigger as HeadlessTooltipTrigger,
+  type TooltipProps as HeadlessTooltipProps,
+  type TooltipTriggerComponentProps as HeadlessTooltipTriggerProps,
+  type TooltipRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+export type TooltipVariant = 'default' | 'neutral' | 'info'
 
-export interface TooltipProps {
+export interface TooltipTriggerProps extends HeadlessTooltipTriggerProps {
+  /** The children of the tooltip trigger (trigger element and tooltip). */
+  children: JSX.Element
+}
+
+export interface TooltipProps extends Omit<HeadlessTooltipProps, 'class' | 'style' | 'children'> {
+  /** The content of the tooltip. */
+  children: JSX.Element
+  /** The position of the tooltip relative to the trigger. */
+  placement?: TooltipPlacement
+  /** Visual variant of the tooltip. */
+  variant?: TooltipVariant
+  /** Additional CSS class name. */
+  class?: string
+  /** Whether to show an arrow pointing to the trigger. */
+  showArrow?: boolean
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+// Note: Position is now calculated by the headless layer (solidaria-components)
+// so we don't need CSS positioning classes here
+const baseStyles = [
+  'px-3 py-2 rounded-lg',
+  'text-sm font-medium',
+  'shadow-lg',
+  'pointer-events-auto',
+  'animate-in fade-in-0 zoom-in-95',
+  'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',
+].join(' ')
+
+const variantStyles: Record<TooltipVariant, string> = {
+  default: 'bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900',
+  neutral: 'bg-neutral-800 text-neutral-100 dark:bg-neutral-200 dark:text-neutral-900',
+  info: 'bg-blue-600 text-white dark:bg-blue-500',
+}
+
+const arrowStyles: Record<TooltipPlacement, string> = {
+  top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent',
+  bottom: 'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent',
+  left: 'right-0 top-1/2 -translate-y-1/2 translate-x-full border-t-transparent border-b-transparent border-r-transparent',
+  right: 'left-0 top-1/2 -translate-y-1/2 -translate-x-full border-t-transparent border-b-transparent border-l-transparent',
+}
+
+const getArrowBorderColor = (variant: TooltipVariant): string => {
+  const colors: Record<TooltipVariant, string> = {
+    default: 'border-neutral-900 dark:border-neutral-100',
+    neutral: 'border-neutral-800 dark:border-neutral-200',
+    info: 'border-blue-600 dark:border-blue-500',
+  }
+  return colors[variant]
+}
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip.
+ * It handles opening and closing the Tooltip when the user hovers
+ * over or focuses the trigger.
+ *
+ * @example
+ * ```tsx
+ * <TooltipTrigger>
+ *   <Button>Hover me</Button>
+ *   <Tooltip>This is helpful information</Tooltip>
+ * </TooltipTrigger>
+ * ```
+ */
+export function TooltipTrigger(props: TooltipTriggerProps): JSX.Element {
+  return <HeadlessTooltipTrigger {...props} />
+}
+
+/**
+ * Styled tooltip component that displays a description on hover or focus.
+ *
+ * @example
+ * ```tsx
+ * <TooltipTrigger>
+ *   <Button>Save</Button>
+ *   <Tooltip placement="top">Save your changes</Tooltip>
+ * </TooltipTrigger>
+ * ```
+ */
+export function Tooltip(props: TooltipProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'placement',
+    'variant',
+    'class',
+    'showArrow',
+  ])
+
+  const placement = () => local.placement ?? 'top'
+  const variant = () => local.variant ?? 'default'
+
+  return (
+    <HeadlessTooltip
+      {...rest}
+      placement={placement()}
+      class={(_renderProps: TooltipRenderProps) => {
+        const classes = [
+          baseStyles,
+          variantStyles[variant()],
+          local.class ?? '',
+        ].filter(Boolean).join(' ')
+        return classes
+      }}
+    >
+      {(renderProps: TooltipRenderProps) => (
+        <>
+          {props.children}
+          <Show when={local.showArrow}>
+            <div
+              class={[
+                'absolute w-0 h-0 border-4',
+                arrowStyles[renderProps.placement ?? placement()],
+                getArrowBorderColor(variant()),
+              ].join(' ')}
+            />
+          </Show>
+        </>
+      )}
+    </HeadlessTooltip>
+  )
+}
+
+// ============================================
+// SIMPLE CSS-ONLY TOOLTIP (Legacy)
+// ============================================
+
+export interface SimpleTooltipProps {
   /** The content to show in the tooltip */
   label: string
   /** The trigger element */
@@ -12,10 +166,19 @@ export interface TooltipProps {
 }
 
 /**
- * Tooltip component that shows a label on hover.
- * Uses CSS-only hover effect for performance.
+ * Simple CSS-only tooltip component.
+ * Uses CSS hover effect for performance. No JS state management.
+ *
+ * @deprecated Use the accessible Tooltip + TooltipTrigger components instead.
+ *
+ * @example
+ * ```tsx
+ * <SimpleTooltip label="Save your changes">
+ *   <button>Save</button>
+ * </SimpleTooltip>
+ * ```
  */
-export function Tooltip(props: TooltipProps): JSX.Element {
+export function SimpleTooltip(props: SimpleTooltipProps): JSX.Element {
   const position = () => props.position ?? 'bottom'
 
   return (
@@ -29,3 +192,6 @@ export function Tooltip(props: TooltipProps): JSX.Element {
     </div>
   )
 }
+
+// Re-export types
+export type { TooltipRenderProps }