@proyecto-viviana/ui 0.1.7 → 0.2.0

package/src/popover/index.tsx

@@ -0,0 +1,260 @@
+/**
+ * Popover component for proyecto-viviana-ui
+ *
+ * A popover displays content in an overlay positioned relative to a trigger.
+ * Built on top of solidaria-components for accessibility.
+ * Follows Spectrum 2 design patterns.
+ */
+
+import { type JSX, Show, splitProps } from 'solid-js'
+import {
+  Popover as HeadlessPopover,
+  PopoverTrigger as HeadlessPopoverTrigger,
+  OverlayArrow as HeadlessOverlayArrow,
+  type PopoverProps as HeadlessPopoverProps,
+  type PopoverTriggerProps as HeadlessPopoverTriggerProps,
+  type PopoverRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import type { Placement, PlacementAxis } from '@proyecto-viviana/solidaria'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type PopoverPlacement = Placement
+export type PopoverSize = 'sm' | 'md' | 'lg'
+
+export interface PopoverTriggerProps extends HeadlessPopoverTriggerProps {
+  /** The children of the popover trigger (trigger element and popover). */
+  children: JSX.Element
+}
+
+export interface PopoverProps extends Omit<HeadlessPopoverProps, 'class' | 'style' | 'children'> {
+  /** The content of the popover. */
+  children: JSX.Element
+  /** The position of the popover relative to the trigger. */
+  placement?: PopoverPlacement
+  /** Size variant of the popover. */
+  size?: PopoverSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Whether to show an arrow pointing to the trigger. */
+  showArrow?: boolean
+  /** Custom padding inside the popover. */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const baseStyles = [
+  'bg-bg-300',
+  'rounded-lg',
+  'shadow-xl',
+  'border border-primary-700',
+  'text-primary-200',
+  'outline-none',
+  // Animation
+  'animate-in fade-in-0 zoom-in-95',
+  'data-[placement=top]:slide-in-from-bottom-2',
+  'data-[placement=bottom]:slide-in-from-top-2',
+  'data-[placement=left]:slide-in-from-right-2',
+  'data-[placement=right]:slide-in-from-left-2',
+  'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',
+].join(' ')
+
+const sizeStyles: Record<PopoverSize, string> = {
+  sm: 'max-w-xs',
+  md: 'max-w-sm',
+  lg: 'max-w-lg',
+}
+
+const paddingStyles: Record<string, string> = {
+  none: '',
+  sm: 'p-2',
+  md: 'p-4',
+  lg: 'p-6',
+}
+
+// Arrow styles based on placement
+const arrowBaseStyles = [
+  'fill-bg-300',
+  'stroke-primary-700',
+  'stroke-1',
+].join(' ')
+
+// Arrow positioning for each placement axis
+const getArrowRotation = (placement: PlacementAxis | null): string => {
+  switch (placement) {
+    case 'top':
+      return 'rotate-180'
+    case 'bottom':
+      return ''
+    case 'left':
+      return 'rotate-90'
+    case 'right':
+      return '-rotate-90'
+    default:
+      return ''
+  }
+}
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * PopoverTrigger wraps around a trigger element and a Popover.
+ * It handles opening and closing the Popover when the user interacts
+ * with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Open Popover</Button>
+ *   <Popover>
+ *     <p>Popover content here!</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+export function PopoverTrigger(props: PopoverTriggerProps): JSX.Element {
+  return <HeadlessPopoverTrigger {...props} />
+}
+
+/**
+ * Styled popover component that displays content in an overlay.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Settings</Button>
+ *   <Popover placement="bottom" size="md">
+ *     <h3>Settings</h3>
+ *     <p>Configure your preferences here.</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+export function Popover(props: PopoverProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'placement',
+    'size',
+    'class',
+    'showArrow',
+    'padding',
+  ])
+
+  const placement = () => local.placement ?? 'bottom'
+  const size = () => local.size ?? 'md'
+  const padding = () => local.padding ?? 'md'
+
+  return (
+    <HeadlessPopover
+      {...rest}
+      placement={placement()}
+      class={(_renderProps: PopoverRenderProps) => {
+        const classes = [
+          baseStyles,
+          sizeStyles[size()],
+          paddingStyles[padding()],
+          local.class ?? '',
+        ].filter(Boolean).join(' ')
+        return classes
+      }}
+    >
+      {(renderProps: PopoverRenderProps) => (
+        <>
+          <Show when={local.showArrow}>
+            <PopoverArrow placement={renderProps.placement} />
+          </Show>
+          {props.children}
+        </>
+      )}
+    </HeadlessPopover>
+  )
+}
+
+/**
+ * Arrow component for the popover.
+ * Automatically positions itself based on the popover placement.
+ */
+interface PopoverArrowProps {
+  /** The current placement axis. */
+  placement: PlacementAxis | null
+  /** Additional CSS class. */
+  class?: string
+}
+
+function PopoverArrow(props: PopoverArrowProps): JSX.Element {
+  return (
+    <HeadlessOverlayArrow
+      class="absolute block"
+      style={{
+        // Position based on placement
+        ...(props.placement === 'top' && { bottom: '100%', left: '50%', transform: 'translateX(-50%)' }),
+        ...(props.placement === 'bottom' && { top: '-8px', left: '50%', transform: 'translateX(-50%)' }),
+        ...(props.placement === 'left' && { right: '100%', top: '50%', transform: 'translateY(-50%)' }),
+        ...(props.placement === 'right' && { left: '-8px', top: '50%', transform: 'translateY(-50%)' }),
+      }}
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        class={`${arrowBaseStyles} ${getArrowRotation(props.placement)} ${props.class ?? ''}`}
+      >
+        <path d="M0 0 L6 6 L12 0" />
+      </svg>
+    </HeadlessOverlayArrow>
+  )
+}
+
+// ============================================
+// POPOVER CONTENT SECTIONS
+// ============================================
+
+export interface PopoverHeaderProps {
+  /** The title of the popover. */
+  title: string
+  /** Optional description text. */
+  description?: string
+  /** Additional CSS class. */
+  class?: string
+}
+
+/**
+ * Header section for popover with title and optional description.
+ */
+export function PopoverHeader(props: PopoverHeaderProps): JSX.Element {
+  return (
+    <div class={`mb-3 ${props.class ?? ''}`}>
+      <h3 class="text-lg font-semibold text-primary-100">{props.title}</h3>
+      <Show when={props.description}>
+        <p class="text-sm text-primary-400 mt-1">{props.description}</p>
+      </Show>
+    </div>
+  )
+}
+
+export interface PopoverFooterProps {
+  /** Footer content, typically buttons. */
+  children: JSX.Element
+  /** Additional CSS class. */
+  class?: string
+}
+
+/**
+ * Footer section for popover actions.
+ */
+export function PopoverFooter(props: PopoverFooterProps): JSX.Element {
+  return (
+    <div class={`flex gap-2 justify-end mt-4 pt-3 border-t border-primary-700 ${props.class ?? ''}`}>
+      {props.children}
+    </div>
+  )
+}
+
+// Re-export types
+export type { PopoverRenderProps, Placement, PlacementAxis }

package/src/radio/index.tsx

@@ -2,10 +2,7 @@
  * RadioGroup and Radio components for proyecto-viviana-ui
  *
  * Styled radio components built on top of solidaria-components.
- *
- * IMPORTANT: Due to SolidJS's JSX evaluation order, we cannot wrap the headless
- * components in a traditional way. Instead, we re-export them and provide
- * styling through the class prop functions.
+ * SSR-compatible - renders children and UI elements directly without render props.
  */
 
 import { type JSX, Show, createContext, useContext, splitProps } from 'solid-js'
@@ -88,7 +85,6 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
     'label',
     'description',
     'errorMessage',
-    'children',
   ])
 
   const size = local.size ?? 'md'
@@ -102,22 +98,6 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
     return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(' ')
   }
 
-  // Create render children function
-  const renderChildren = (renderProps: RadioGroupRenderProps) => (
-    <>
-      <Show when={local.label}>
-        <span class="text-primary-200 font-medium mb-1">{local.label}</span>
-      </Show>
-      {typeof local.children === 'function' ? local.children(renderProps) : local.children}
-      <Show when={local.description && !renderProps.isInvalid}>
-        <span class="text-primary-400 text-sm">{local.description}</span>
-      </Show>
-      <Show when={local.errorMessage && renderProps.isInvalid}>
-        <span class="text-danger-400 text-sm">{local.errorMessage}</span>
-      </Show>
-    </>
-  )
-
   // Pass remaining props through to headless component
   // headlessProps maintains reactivity for controlled values like value/onChange
   return (
@@ -126,8 +106,18 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
         {...headlessProps}
         class={getClassName}
         data-size={size}
-        children={renderChildren as any}
-      />
+      >
+        <Show when={local.label}>
+          <span class="text-primary-200 font-medium mb-1">{local.label}</span>
+        </Show>
+        {props.children as JSX.Element}
+        <Show when={local.description}>
+          <span class="text-primary-400 text-sm [&:has(~[data-invalid])]:hidden">{local.description}</span>
+        </Show>
+        <Show when={local.errorMessage}>
+          <span class="text-danger-400 text-sm hidden [[data-invalid]_&]:block">{local.errorMessage}</span>
+        </Show>
+      </HeadlessRadioGroup>
     </RadioSizeContext.Provider>
   )
 }
@@ -139,81 +129,45 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
 /**
  * A radio button allows users to select a single option from a list.
  * Must be used within a RadioGroup.
+ * SSR-compatible - renders static JSX without render prop children.
+ *
+ * Note: Unlike other styled components, Radio does not use render props for children.
+ * Instead, it relies on data attributes set by the headless Radio component for styling.
+ * However, since we need dynamic styling based on state, we accept that this component
+ * has some limitations compared to the render-props-based original implementation.
  *
  * Built on solidaria-components Radio for full accessibility support.
  */
 export function Radio(props: RadioProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
   const sizeFromContext = useContext(RadioSizeContext)
-  const size = () => sizeStyles[sizeFromContext]
-  const customClass = props.class ?? ''
+  const sizeStyle = sizeStyles[sizeFromContext]
+  const customClass = local.class ?? ''
 
   // Generate class based on render props
   const getClassName = (renderProps: RadioRenderProps): string => {
-    const base = 'inline-flex items-center gap-2 cursor-pointer'
-    const disabledClass = renderProps.isDisabled ? 'cursor-not-allowed opacity-50' : ''
-    return [base, disabledClass, customClass].filter(Boolean).join(' ')
+    const base = 'inline-flex items-center gap-2'
+    const cursorClass = renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    return [base, cursorClass, disabledClass, customClass].filter(Boolean).join(' ')
   }
 
-  // Extract props to pass to headless
-  const { class: _, children, ...headlessProps } = props
+  // Static classes - will use a simplified visual style since we can't dynamically style based on state without render props
+  const circleClass = `relative flex items-center justify-center rounded-full border-2 transition-all duration-200 ${sizeStyle.circle} border-primary-600 bg-transparent hover:border-accent-300`
+  const dotClass = `rounded-full bg-accent transition-all duration-200 ${sizeStyle.dot}`
+  const labelClass = `text-primary-200 ${sizeStyle.label}`
 
   return (
     <HeadlessRadio
       {...headlessProps}
       class={getClassName}
     >
-      {(renderProps: RadioRenderProps) => {
-        const circleClasses = () => {
-          const base = 'relative flex items-center justify-center rounded-full border-2 transition-all duration-200'
-          const sizeClass = size().circle
-
-          let colorClass: string
-          if (renderProps.isDisabled) {
-            colorClass = 'border-bg-300 bg-bg-200'
-          } else if (renderProps.isSelected) {
-            colorClass = 'border-accent bg-transparent'
-          } else {
-            colorClass = 'border-primary-600 bg-transparent hover:border-accent-300'
-          }
-
-          const focusClass = renderProps.isFocusVisible
-            ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
-            : ''
-          const cursorClass = renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
-
-          return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(' ')
-        }
-
-        const dotClasses = () => {
-          const base = 'rounded-full bg-accent transition-all duration-200'
-          const sizeClass = size().dot
-          const visibilityClass = renderProps.isSelected ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
-
-          return [base, sizeClass, visibilityClass].filter(Boolean).join(' ')
-        }
-
-        const labelClasses = () => {
-          const base = 'text-primary-200'
-          const sizeClass = size().label
-          const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
-
-          return [base, sizeClass, disabledClass].filter(Boolean).join(' ')
-        }
-
-        // Resolve children - could be a function or JSX element
-        const resolvedChildren = typeof children === 'function' ? children(renderProps) : children
-
-        return (
-          <>
-            <span class={circleClasses()}>
-              <span class={dotClasses()} />
-            </span>
-            <Show when={resolvedChildren}>
-              <span class={labelClasses()}>{resolvedChildren}</span>
-            </Show>
-          </>
-        )
-      }}
+      <span class={circleClass}>
+        <span class={dotClass} />
+      </span>
+      <Show when={props.children}>
+        <span class={labelClass}>{props.children as JSX.Element}</span>
+      </Show>
     </HeadlessRadio>
   )
 }