@mihcm/ui 0.14.1 → 0.15.0

package/src/Sidebar/sidebar.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+/**
+ * Sidebar — the visual container. Three modes selected per context:
+ *   - `collapsible="none"` → static `<nav>` at the configured width.
+ *   - mobile → wrapped in the Sheet primitive.
+ *   - desktop `contained` / `fixed` → either takes space in flow or is fixed
+ *     to the viewport edge, with width transitions and offcanvas handling.
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+import { Sheet, SheetContent } from '../Sheet.js';
+import {
+  useSidebar,
+  type SidebarCollapsible,
+  type SidebarPosition,
+  type SidebarSide,
+  type SidebarVariant,
+} from './context.js';
+
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  side?: SidebarSide;
+  variant?: SidebarVariant;
+  collapsible?: SidebarCollapsible;
+  position?: SidebarPosition;
+}
+
+export const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(
+  { side, variant, collapsible, position, className, children, ...props },
+  ref,
+) {
+  const context = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile } = context;
+  const currentSide = side ?? context.side;
+  const currentVariant = variant ?? context.variant;
+  const currentCollapsible = collapsible ?? context.collapsible;
+  const currentPosition = position ?? context.position;
+  const isCollapsed = state === 'collapsed';
+  const isFloating = currentVariant === 'floating' || currentVariant === 'inset';
+  const isOffcanvasCollapsed = isCollapsed && currentCollapsible === 'offcanvas';
+  const isIconCollapsed = isCollapsed && currentCollapsible === 'icon';
+  const sidebarEdgeBorder = currentSide === 'right'
+    ? 'border-l border-sidebar-border'
+    : 'border-r border-sidebar-border';
+
+  if (currentCollapsible === 'none') {
+    return (
+      <nav
+        ref={ref}
+        aria-label={props['aria-label'] ?? 'Sidebar'}
+        data-sidebar="sidebar"
+        data-state={state}
+        data-collapsible=""
+        data-variant={currentVariant}
+        data-side={currentSide}
+        data-position={currentPosition}
+        className={cn(
+          'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+          isFloating ? 'rounded-lg border border-sidebar-border shadow' : sidebarEdgeBorder,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </nav>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          className={cn(
+            'w-(--sidebar-width-mobile) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden',
+            className,
+          )}
+          side={currentSide}
+          {...props}
+        >
+          <nav aria-label={props['aria-label'] ?? 'Sidebar'} className="flex h-full w-full flex-col">
+            {children}
+          </nav>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  if (currentPosition === 'contained') {
+    return (
+      <div
+        data-sidebar="sidebar-container"
+        className={cn(
+          'group peer relative hidden h-full shrink-0 overflow-hidden text-sidebar-foreground transition-[width] duration-200 ease-linear md:flex',
+          isOffcanvasCollapsed
+            ? 'w-0'
+            : isIconCollapsed
+              ? isFloating
+                ? 'w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]'
+                : 'w-(--sidebar-width-icon)'
+              : 'w-(--sidebar-width)',
+          isFloating && !isOffcanvasCollapsed && 'p-2',
+          className,
+        )}
+        data-state={state}
+        data-collapsible={isCollapsed ? currentCollapsible : ''}
+        data-variant={currentVariant}
+        data-side={currentSide}
+        data-position={currentPosition}
+      >
+        <nav
+          ref={ref}
+          aria-label={props['aria-label'] ?? 'Sidebar'}
+          data-sidebar="sidebar"
+          className={cn(
+            'flex h-full w-full min-w-0 flex-col bg-sidebar',
+            isFloating ? 'rounded-lg border border-sidebar-border shadow' : sidebarEdgeBorder,
+          )}
+          {...props}
+        >
+          {children}
+        </nav>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-sidebar="sidebar-container"
+      className="group peer hidden md:block text-sidebar-foreground"
+      data-state={state}
+      data-collapsible={isCollapsed ? currentCollapsible : ''}
+      data-variant={currentVariant}
+      data-side={currentSide}
+      data-position={currentPosition}
+    >
+      <div
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          isFloating
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          currentSide === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          isFloating
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4)+2px)]'
+            : cn(
+                'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+                'border-sidebar-border',
+                currentSide === 'right' ? 'group-data-[variant=sidebar]:border-l' : 'group-data-[variant=sidebar]:border-r',
+              ),
+          className,
+        )}
+        {...props}
+      >
+        <nav
+          ref={ref}
+          aria-label={props['aria-label'] ?? 'Sidebar'}
+          data-sidebar="sidebar"
+          className={cn(
+            'flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow',
+          )}
+        >
+          {children}
+        </nav>
+      </div>
+    </div>
+  );
+});

package/src/Sidebar/submenu.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+/**
+ * Sub-menu pieces: SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton.
+ */
+import { forwardRef, type AnchorHTMLAttributes, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+
+export const SidebarMenuSub = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
+  function SidebarMenuSub({ className, ...props }, ref) {
+    return (
+      <ul
+        ref={ref}
+        data-sidebar="menu-sub"
+        className={cn(
+          'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+          'group-data-[collapsible=icon]:hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarMenuSubItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  function SidebarMenuSubItem({ ...props }, ref) {
+    return <li ref={ref} {...props} />;
+  },
+);
+
+export interface SidebarMenuSubButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean;
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+}
+
+export const SidebarMenuSubButton = forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
+  function SidebarMenuSubButton({ asChild: _asChild, size = 'md', isActive, className, ...props }, ref) {
+    return (
+      <a
+        ref={ref}
+        data-sidebar="menu-sub-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(
+          'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+          'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+          size === 'sm' && 'text-xs',
+          size === 'md' && 'text-sm',
+          'group-data-[collapsible=icon]:hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/Sidebar/trigger.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+/**
+ * Edge / chrome pieces: SidebarTrigger, SidebarRail, SidebarInset, SidebarInput.
+ */
+import { forwardRef, type ComponentProps, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+import { Button } from '../Button.js';
+import { Input } from '../Input.js';
+import { useSidebar } from './context.js';
+import { PanelLeftIcon, PanelRightIcon } from './icons.js';
+
+export const SidebarTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof Button>
+>(function SidebarTrigger({ className, disabled, onClick, ...props }, ref) {
+  const { isMobile, open, openMobile, collapsible, side, toggleSidebar } = useSidebar();
+  const expanded = collapsible === 'none' ? true : isMobile ? openMobile : open;
+  const isDisabled = disabled || collapsible === 'none';
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      aria-expanded={expanded}
+      aria-disabled={isDisabled || undefined}
+      disabled={isDisabled}
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(e) => {
+        onClick?.(e);
+        if (collapsible === 'none') return;
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      {side === 'right' ? <PanelRightIcon /> : <PanelLeftIcon />}
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+
+export const SidebarRail = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  function SidebarRail({ className, ...props }, ref) {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=left]:-translate-x-1/2 group-data-[side=right]:-left-4 group-data-[side=right]:translate-x-1/2 sm:flex',
+          'hover:after:bg-sidebar-border',
+          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+          'group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-collapsible=offcanvas]_&]:translate-x-0',
+          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-collapsible=offcanvas]_&]:translate-x-0',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarInset = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SidebarInset({ className, ...props }, ref) {
+    return (
+      <main
+        ref={ref}
+        className={cn(
+          'relative flex min-h-svh flex-1 flex-col bg-background',
+          'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[side=left]:peer-data-[variant=inset]:ml-0 md:peer-data-[side=right]:peer-data-[variant=inset]:mr-0 md:peer-data-[side=left]:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[side=right]:peer-data-[state=collapsed]:peer-data-[variant=inset]:mr-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SidebarInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps<typeof Input>
+>(function SidebarInput({ className, ...props }, ref) {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        'h-8 w-full bg-background shadow-none focus-within:ring-2 focus-within:ring-sidebar-ring',
+        className,
+      )}
+      {...props}
+    />
+  );
+});