@mihcm/ui 0.14.1

package/src/Pagination.native.tsx

@@ -0,0 +1,217 @@
+/**
+ * Pagination (React Native variant).
+ *
+ * Horizontal row of page navigation buttons using View, Text, Pressable.
+ * Same composable API as the web variant.
+ *
+ * Wiki: docs/components/Pagination.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ------------------------------------------------------------------ */
+/*  Pagination (root View)                                            */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const Pagination = forwardRef<View, PaginationProps>(function Pagination(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessible
+      accessibilityRole="none"
+      accessibilityLabel="Pagination"
+      className={cn('flex-row justify-center', className)}
+      {...props}
+    />
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/*  PaginationContent (horizontal row)                                */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationContentProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const PaginationContent = forwardRef<View, PaginationContentProps>(
+  function PaginationContent({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center gap-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationItem (View wrapper)                                     */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationItemProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const PaginationItem = forwardRef<View, PaginationItemProps>(
+  function PaginationItem({ className, ...props }, ref) {
+    return <View ref={ref} className={cn(className)} {...props} />;
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationLink (Pressable for page numbers)                       */
+/* ------------------------------------------------------------------ */
+
+export const paginationLinkVariants = cva(
+  'items-center justify-center rounded-md',
+  {
+    variants: {
+      isActive: {
+        true: 'bg-accent',
+        false: '',
+      },
+      size: {
+        sm: 'h-8 min-w-[32px]',
+        md: 'h-9 min-w-[36px]',
+        lg: 'h-10 min-w-[40px]',
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+      size: 'md',
+    },
+  },
+);
+
+export interface PaginationLinkProps
+  extends Omit<PressableProps, 'style'>,
+    VariantProps<typeof paginationLinkVariants> {
+  isActive?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const PaginationLink = forwardRef<View, PaginationLinkProps>(
+  function PaginationLink({ className, isActive, size, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityState={{ selected: !!isActive }}
+        className={cn(paginationLinkVariants({ isActive, size }), className)}
+        {...props}
+      >
+        <Text
+          className={cn(
+            'text-sm font-medium',
+            isActive ? 'text-accent-foreground' : 'text-foreground',
+          )}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationPrevious                                                */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationPreviousProps extends Omit<PressableProps, 'style'> {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export const PaginationPrevious = forwardRef<View, PaginationPreviousProps>(
+  function PaginationPrevious({ className, size, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityLabel="Go to previous page"
+        className={cn(
+          paginationLinkVariants({ isActive: false, size }),
+          'flex-row gap-1 pl-2.5',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm text-foreground">‹</Text>
+        <Text className="text-sm font-medium text-foreground">Previous</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationNext                                                    */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationNextProps extends Omit<PressableProps, 'style'> {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export const PaginationNext = forwardRef<View, PaginationNextProps>(
+  function PaginationNext({ className, size, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityLabel="Go to next page"
+        className={cn(
+          paginationLinkVariants({ isActive: false, size }),
+          'flex-row gap-1 pr-2.5',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-medium text-foreground">Next</Text>
+        <Text className="text-sm text-foreground">›</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationEllipsis                                                */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationEllipsisProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+}
+
+export const PaginationEllipsis = forwardRef<View, PaginationEllipsisProps>(
+  function PaginationEllipsis({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        className={cn('h-9 w-9 items-center justify-center', className)}
+        {...props}
+      >
+        <Text className="text-sm text-muted-foreground">…</Text>
+      </View>
+    );
+  },
+);

package/src/Pagination.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+/**
+ * Pagination (web variant — React DOM).
+ *
+ * Composable page navigation with numbered links and prev/next buttons.
+ *
+ *   <Pagination>
+ *     <PaginationContent>
+ *       <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+ *       <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
+ *       <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
+ *       <PaginationItem><PaginationEllipsis /></PaginationItem>
+ *       <PaginationItem><PaginationNext href="#" /></PaginationItem>
+ *     </PaginationContent>
+ *   </Pagination>
+ *
+ * Sets `aria-label="Pagination"` on the `<nav>` and `aria-current="page"`
+ * on the active page link.
+ *
+ * Wiki: docs/components/Pagination.md
+ */
+import { forwardRef, type HTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ------------------------------------------------------------------ */
+/*  Pagination (root <nav>)                                           */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+  /** Override the default "Pagination" aria-label. */
+  'aria-label'?: string;
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
+  { className, 'aria-label': ariaLabel = 'Pagination', ...props },
+  ref,
+) {
+  return (
+    <nav
+      ref={ref}
+      role="navigation"
+      aria-label={ariaLabel}
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  );
+});
+
+/* ------------------------------------------------------------------ */
+/*  PaginationContent (<ol>)                                          */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationContentProps extends HTMLAttributes<HTMLOListElement> {}
+
+export const PaginationContent = forwardRef<HTMLOListElement, PaginationContentProps>(
+  function PaginationContent({ className, ...props }, ref) {
+    return (
+      <ol
+        ref={ref}
+        className={cn('flex flex-row items-center gap-1', className)}
+        style={{ listStyleType: 'none', paddingInlineStart: 0 }}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationItem (<li>)                                             */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationItemProps extends HTMLAttributes<HTMLLIElement> {}
+
+export const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(
+  function PaginationItem({ className, ...props }, ref) {
+    return <li ref={ref} className={cn(className)} {...props} />;
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationLink (button for page numbers)                          */
+/* ------------------------------------------------------------------ */
+
+export const paginationLinkVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ' +
+    'transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
+    'disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      isActive: {
+        true: 'bg-primary text-primary-foreground',
+        false: 'hover:bg-muted',
+      },
+      size: {
+        sm: 'h-8 min-w-8',
+        md: 'h-9 min-w-9',
+        lg: 'h-10 min-w-10',
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+      size: 'md',
+    },
+  },
+);
+
+export interface PaginationLinkProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof paginationLinkVariants> {
+  isActive?: boolean;
+}
+
+export const PaginationLink = forwardRef<HTMLButtonElement, PaginationLinkProps>(
+  function PaginationLink({ className, isActive, size, children, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-current={isActive ? 'page' : undefined}
+        className={cn(paginationLinkVariants({ isActive, size }), className)}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationPrevious                                                */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationPreviousProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const PaginationPrevious = forwardRef<HTMLButtonElement, PaginationPreviousProps>(
+  function PaginationPrevious({ className, size, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Go to previous page"
+        className={cn(
+          paginationLinkVariants({ isActive: false, size }),
+          'gap-1 pl-2.5',
+          className,
+        )}
+        {...props}
+      >
+        <ChevronLeftIcon />
+        <span>Previous</span>
+      </button>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationNext                                                    */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationNextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const PaginationNext = forwardRef<HTMLButtonElement, PaginationNextProps>(
+  function PaginationNext({ className, size, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Go to next page"
+        className={cn(
+          paginationLinkVariants({ isActive: false, size }),
+          'gap-1 pr-2.5',
+          className,
+        )}
+        {...props}
+      >
+        <span>Next</span>
+        <ChevronRightIcon />
+      </button>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  PaginationEllipsis                                                */
+/* ------------------------------------------------------------------ */
+
+export interface PaginationEllipsisProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const PaginationEllipsis = forwardRef<HTMLSpanElement, PaginationEllipsisProps>(
+  function PaginationEllipsis({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        aria-hidden="true"
+        className={cn('flex h-9 w-9 items-center justify-center', className)}
+        {...props}
+      >
+        &#x2026;
+        <span className="sr-only">More pages</span>
+      </span>
+    );
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  Inline chevron icons                                              */
+/* ------------------------------------------------------------------ */
+
+function ChevronLeftIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

package/src/Popover.native.tsx

@@ -0,0 +1,139 @@
+/**
+ * Popover (React Native variant).
+ *
+ * Renders a `Modal` overlay anchored to a trigger. On native, the
+ * popover appears centered (no anchor positioning) with a transparent
+ * backdrop to dismiss.
+ *
+ *   <Popover open={open} onOpenChange={setOpen}>
+ *     <PopoverTrigger>
+ *       <Button>Open</Button>
+ *     </PopoverTrigger>
+ *     <PopoverContent>
+ *       <Text>Popover body</Text>
+ *     </PopoverContent>
+ *   </Popover>
+ *
+ * Wiki: docs/components/Popover.md
+ */
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  forwardRef,
+  useContext,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Modal, Pressable, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ────────────────────────────────────────────────────────── */
+
+interface PopoverContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext() {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error('Popover compound components must be used within <Popover>');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface PopoverProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Popover({ open, onOpenChange, children, className }: PopoverProps) {
+  return (
+    <PopoverContext.Provider value={{ open, onOpenChange }}>
+      <View className={cn(className)}>{children}</View>
+    </PopoverContext.Provider>
+  );
+}
+
+/* ── Trigger ────────────────────────────────────────────────────────── */
+
+export interface PopoverTriggerProps {
+  children: ReactElement;
+}
+
+/**
+ * Clones its single child element and merges onPress onto it.
+ * Avoids wrapping in a `Pressable` which would nest touchable elements.
+ */
+export function PopoverTrigger({ children }: PopoverTriggerProps) {
+  const ctx = usePopoverContext();
+
+  if (!isValidElement(children)) {
+    throw new Error('PopoverTrigger requires a single React element as its child.');
+  }
+
+  return cloneElement(children as ReactElement<Record<string, unknown>>, {
+    onPress: () => ctx.onOpenChange(!ctx.open),
+    accessibilityState: { expanded: ctx.open },
+  });
+}
+
+/* ── Content ────────────────────────────────────────────────────────── */
+
+export const popoverContentVariants = cva(
+  'rounded-xl border border-border bg-card p-4',
+  {
+    variants: {
+      size: {
+        sm: 'w-56',
+        md: 'w-72',
+        lg: 'w-96',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+export interface PopoverContentProps
+  extends ClassedViewProps,
+    VariantProps<typeof popoverContentVariants> {
+  side?: 'top' | 'bottom';
+}
+
+export const PopoverContent = forwardRef<View, PopoverContentProps>(
+  function PopoverContent({ className, size, ...props }, ref) {
+    const ctx = usePopoverContext();
+    if (!ctx.open) return null;
+
+    return (
+      <Modal
+        visible
+        transparent
+        animationType="fade"
+        onRequestClose={() => ctx.onOpenChange(false)}
+      >
+        <Pressable
+          onPress={() => ctx.onOpenChange(false)}
+          className="flex-1 items-center justify-center"
+          accessibilityRole="none"
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              ref={ref}
+              className={cn(popoverContentVariants({ size }), className)}
+              {...props}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    );
+  },
+);