@mihcm/ui 0.14.1 → 0.15.0

package/src/Sidebar/context.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+/**
+ * Sidebar context, shared types, constants, and the `useSidebar` hook.
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+export type SidebarPosition = 'contained' | 'fixed';
+
+/* ── Constants ─────────────────────────────────────────────────────── */
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+export const SIDEBAR_MOBILE_BREAKPOINT = 768;
+
+/* ── useIsMobile ───────────────────────────────────────────────────── */
+
+export function useIsMobile(breakpoint: number) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    const mql = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, [breakpoint]);
+
+  return isMobile;
+}
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+export interface SidebarContextValue {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean | ((prev: boolean) => boolean)) => void;
+  isMobile: boolean;
+  side: SidebarSide;
+  variant: SidebarVariant;
+  collapsible: SidebarCollapsible;
+  position: SidebarPosition;
+  toggleSidebar: () => void;
+}
+
+export const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+export function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error('useSidebar must be used within a <SidebarProvider>.');
+  }
+  return ctx;
+}

package/src/Sidebar/group.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * Group sections: SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent.
+ */
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+
+export const SidebarGroup = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarGroup({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarGroupLabel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { asChild?: boolean }>(
+  function SidebarGroupLabel({ className, asChild: _asChild, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group-label"
+        className={cn(
+          'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2',
+          'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarGroupAction = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(
+  function SidebarGroupAction({ className, asChild: _asChild, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="group-action"
+        className={cn(
+          'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+          'after:absolute after:-inset-2 after:md:hidden',
+          'group-data-[collapsible=icon]:hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarGroupContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarGroupContent({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group-content"
+        className={cn('w-full text-sm', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Sidebar/icons.tsx

@@ -0,0 +1,42 @@
+/**
+ * Inline trigger icons for the Sidebar. Kept local so the `@mihcm/ui`
+ * package doesn't pull in lucide-react just for two glyphs.
+ */
+
+export function PanelLeftIcon() {
+  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"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M9 3v18" />
+    </svg>
+  );
+}
+
+export function PanelRightIcon() {
+  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"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M15 3v18" />
+    </svg>
+  );
+}

package/src/Sidebar/layout.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+/**
+ * Layout sections: SidebarHeader, SidebarFooter, SidebarContent, SidebarSeparator.
+ */
+import { forwardRef, type ComponentProps, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+import { Separator } from '../Separator.js';
+
+export const SidebarHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarHeader({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarContent({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={cn(
+          'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarSeparator = forwardRef<
+  HTMLDivElement,
+  ComponentProps<typeof Separator>
+>(function SidebarSeparator({ className, ...props }, ref) {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn('mx-2 w-auto bg-sidebar-border', className)}
+      {...props}
+    />
+  );
+});

package/src/Sidebar/menu.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+/**
+ * Menu list and item: SidebarMenu, SidebarMenuItem, SidebarMenuButton (+ CVA),
+ * SidebarMenuAction, SidebarMenuBadge, SidebarMenuSkeleton.
+ */
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type ComponentProps,
+  type HTMLAttributes,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../internal/cn.js';
+import { Skeleton } from '../Skeleton.js';
+import { Tooltip } from '../Tooltip.js';
+import { useSidebar } from './context.js';
+
+export const SidebarMenu = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
+  function SidebarMenu({ className, ...props }, ref) {
+    return (
+      <ul
+        ref={ref}
+        data-sidebar="menu"
+        className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarMenuItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  function SidebarMenuItem({ className, ...props }, ref) {
+    return (
+      <li
+        ref={ref}
+        data-sidebar="menu-item"
+        className={cn('group/menu-item relative', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface SidebarMenuButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof sidebarMenuButtonVariants> {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | ComponentProps<typeof Tooltip>;
+}
+
+export const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
+  function SidebarMenuButton(
+    { asChild: _asChild, isActive = false, variant, size, tooltip, className, ...props },
+    ref,
+  ) {
+    useSidebar();
+
+    const button = (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) return button;
+
+    const tooltipProps: ComponentProps<typeof Tooltip> =
+      typeof tooltip === 'string' ? { content: tooltip } : tooltip;
+
+    return (
+      <Tooltip {...tooltipProps} side="right">
+        {button}
+      </Tooltip>
+    );
+  },
+);
+
+export const SidebarMenuAction = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean; showOnHover?: boolean }
+>(function SidebarMenuAction({ className, asChild: _asChild, showOnHover = false, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-sidebar="menu-action"
+      className={cn(
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const SidebarMenuBadge = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarMenuBadge({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="menu-badge"
+        className={cn(
+          'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+          'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+          'group-data-[collapsible=icon]:hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface SidebarMenuSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  showIcon?: boolean;
+}
+
+export const SidebarMenuSkeleton = forwardRef<HTMLDivElement, SidebarMenuSkeletonProps>(
+  function SidebarMenuSkeleton({ className, showIcon = false, ...props }, ref) {
+    const width = '70%';
+
+    return (
+      <div
+        ref={ref}
+        data-sidebar="menu-skeleton"
+        className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+        {...props}
+      >
+        {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+        <Skeleton
+          className="h-4 max-w-(--skeleton-width) flex-1"
+          data-sidebar="menu-skeleton-text"
+          style={{ '--skeleton-width': width } as React.CSSProperties}
+        />
+      </div>
+    );
+  },
+);

package/src/Sidebar/provider.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+/**
+ * SidebarProvider — owns sidebar state, cookie persistence, keyboard shortcut,
+ * and feeds context values to descendant Sidebar pieces.
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+} from 'react';
+import { cn } from '../internal/cn.js';
+import {
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_MOBILE_BREAKPOINT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  SidebarContext,
+  useIsMobile,
+  type SidebarCollapsible,
+  type SidebarContextValue,
+  type SidebarPosition,
+  type SidebarSide,
+  type SidebarVariant,
+} from './context.js';
+
+export interface SidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Initial mobile Sheet open state. Useful for examples and forced mobile previews. */
+  defaultOpenMobile?: boolean;
+  /** Controlled mobile Sheet open state. */
+  openMobile?: boolean;
+  /** Called when mobile Sheet open state changes. */
+  onOpenMobileChange?: (open: boolean) => void;
+  side?: SidebarSide;
+  variant?: SidebarVariant;
+  collapsible?: SidebarCollapsible;
+  position?: SidebarPosition;
+  /** Force mobile behavior for previews/tests. When omitted, matchMedia decides. */
+  mobile?: boolean;
+  /** Breakpoint in px where the sidebar switches to mobile Sheet mode. */
+  mobileBreakpoint?: number;
+  /** Expanded desktop width. */
+  width?: string;
+  /** Collapsed icon-rail width. */
+  iconWidth?: string;
+  /** Mobile Sheet width. */
+  mobileWidth?: string;
+}
+
+export const SidebarProvider = forwardRef<HTMLDivElement, SidebarProviderProps>(
+  function SidebarProvider(
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      defaultOpenMobile = false,
+      openMobile: openMobileProp,
+      onOpenMobileChange: setOpenMobileProp,
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      position = 'contained',
+      mobile,
+      mobileBreakpoint = SIDEBAR_MOBILE_BREAKPOINT,
+      width = SIDEBAR_WIDTH,
+      iconWidth = SIDEBAR_WIDTH_ICON,
+      mobileWidth = SIDEBAR_WIDTH_MOBILE,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) {
+    const detectedMobile = useIsMobile(mobileBreakpoint);
+    const isMobile = mobile ?? detectedMobile;
+    const [_openMobile, _setOpenMobile] = useState(defaultOpenMobile);
+
+    const [_open, _setOpen] = useState(defaultOpen);
+
+    const open = openProp ?? _open;
+    const openMobile = openMobileProp ?? _openMobile;
+
+    useEffect(() => {
+      if (openProp !== undefined) return;
+
+      const cookie = document.cookie
+        .split('; ')
+        .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
+      if (!cookie) return;
+
+      const nextOpen = cookie.split('=')[1] === 'true';
+      let cancelled = false;
+      queueMicrotask(() => {
+        if (!cancelled) {
+          _setOpen(nextOpen);
+        }
+      });
+
+      return () => {
+        cancelled = true;
+      };
+    }, [openProp]);
+
+    const setOpen = useCallback(
+      (value: boolean | ((prev: boolean) => boolean)) => {
+        const next = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(next);
+        } else {
+          _setOpen(next);
+        }
+        if (typeof document !== 'undefined') {
+          document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        }
+      },
+      [setOpenProp, open],
+    );
+
+    const setOpenMobile = useCallback(
+      (value: boolean | ((prev: boolean) => boolean)) => {
+        const next = typeof value === 'function' ? value(openMobile) : value;
+        if (setOpenMobileProp) {
+          setOpenMobileProp(next);
+        } else {
+          _setOpenMobile(next);
+        }
+      },
+      [openMobile, setOpenMobileProp],
+    );
+
+    const toggleSidebar = useCallback(() => {
+      if (collapsible === 'none') return;
+
+      if (isMobile) {
+        setOpenMobile((prev) => !prev);
+      } else {
+        setOpen((prev) => !prev);
+      }
+    }, [collapsible, isMobile, setOpen, setOpenMobile]);
+
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          toggleSidebar();
+        }
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+
+    const state = open ? 'expanded' : 'collapsed';
+
+    const value = useMemo<SidebarContextValue>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        side,
+        variant,
+        collapsible,
+        position,
+        toggleSidebar,
+      }),
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        side,
+        variant,
+        collapsible,
+        position,
+        toggleSidebar,
+      ],
+    );
+
+    return (
+      <SidebarContext.Provider value={value}>
+        <div
+          ref={ref}
+          style={
+            {
+              '--sidebar-width': width,
+              '--sidebar-width-icon': iconWidth,
+              '--sidebar-width-mobile': mobileWidth,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper flex min-h-svh w-full',
+            side === 'right' && 'flex-row-reverse',
+            variant === 'inset' && 'bg-sidebar',
+            className,
+          )}
+          data-sidebar="provider"
+          data-state={state}
+          data-collapsible={state === 'collapsed' ? collapsible : ''}
+          data-variant={variant}
+          data-side={side}
+          data-position={position}
+          {...props}
+        >
+          {children}
+        </div>
+      </SidebarContext.Provider>
+    );
+  },
+);