@proyecto-viviana/ui 0.3.1 → 0.3.3

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

@@ -0,0 +1,197 @@
+/**
+ * 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 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 */
+  children: JSX.Element
+  /** Position of the tooltip */
+  position?: 'top' | 'bottom'
+  /** Additional CSS class */
+  class?: string
+}
+
+/**
+ * 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 SimpleTooltip(props: SimpleTooltipProps): JSX.Element {
+  const position = () => props.position ?? 'bottom'
+
+  return (
+    <div class={`vui-tooltip ${props.class ?? ''}`}>
+      <div class="vui-tooltip__trigger">
+        {props.children}
+      </div>
+      <div class={`vui-tooltip__content vui-tooltip__content--${position()}`}>
+        <span>{props.label}</span>
+      </div>
+    </div>
+  )
+}
+
+// Re-export types
+export type { TooltipRenderProps }