@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/app-shell/app-shell.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import * as React from "react";
+import { IconChevronDown, IconMenu } from "@mlola-ui/icons";
+import { Resizable } from "../resizable/resizable";
+import { Sheet } from "../sheet/sheet";
+import { cx } from "../_internal/react";
+
+interface ShellContext {
+  /** Fold the sidebar on wide screens; open the drawer on narrow ones. */
+  toggle: () => void;
+  folded: boolean;
+  narrow: boolean;
+  /** Close the drawer, after a navigation on a phone. */
+  closeDrawer: () => void;
+}
+
+const Context = React.createContext<ShellContext>({ toggle: () => undefined, folded: false, narrow: false, closeDrawer: () => undefined });
+
+/** The shell's controls, for a menu button in a page header or a link that should close the drawer. */
+export const useAppShell = () => React.useContext(Context);
+
+function useNarrow(query: string) {
+  return React.useSyncExternalStore(
+    (notify) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", notify);
+      return () => list.removeEventListener("change", notify);
+    },
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}
+
+export interface AppShellProps {
+  sidebar: React.ReactNode;
+  children: React.ReactNode;
+  /** Names the navigation region and the drawer. */
+  label?: string;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Remembers the width and the fold between visits. */
+  storageKey?: string;
+  /** Below this width the sidebar becomes a drawer. */
+  drawerQuery?: string;
+  className?: string;
+}
+
+/**
+ * The frame of an app: a sidebar that resizes and folds, and the page beside
+ * it; on phones the sidebar becomes a drawer. Anything inside can reach the
+ * controls with `useAppShell`, and `AppShellMenuButton` shows itself only
+ * when the sidebar is out of view.
+ */
+export function AppShell({ sidebar, children, label = "Navigation", defaultWidth = 248, minWidth = 200, maxWidth = 360, storageKey, drawerQuery = "(max-width: 48rem)", className }: AppShellProps) {
+  const narrow = useNarrow(drawerQuery);
+  const [folded, setFolded] = React.useState(false);
+  const [drawer, setDrawer] = React.useState(false);
+  const context = React.useMemo<ShellContext>(
+    () => ({ toggle: () => (narrow ? setDrawer(true) : setFolded((value) => !value)), folded, narrow, closeDrawer: () => setDrawer(false) }),
+    [folded, narrow],
+  );
+  React.useEffect(() => {
+    if (!narrow) setDrawer(false);
+  }, [narrow]);
+  return (
+    <Context.Provider value={context}>
+      <div className={cx("ml-app-shell", className)} data-folded={folded || undefined} data-narrow={narrow || undefined}>
+        <Resizable
+          className="ml-app-shell-frame"
+          units="pixels"
+          defaultSize={defaultWidth}
+          min={minWidth}
+          max={maxWidth}
+          collapsible
+          collapsed={folded}
+          onCollapsedChange={setFolded}
+          storageKey={storageKey}
+          label={`Resize ${label.toLowerCase()}`}
+          first={
+            <nav className="ml-app-shell-sidebar" aria-label={label}>
+              {sidebar}
+            </nav>
+          }
+          second={<div className="ml-app-shell-main">{children}</div>}
+        />
+        <Sheet open={drawer} onClose={() => setDrawer(false)} side="left" size="sm" title={label} className="ml-app-shell-drawer">
+          <nav className="ml-app-shell-sidebar" aria-label={label}>
+            {sidebar}
+          </nav>
+        </Sheet>
+      </div>
+    </Context.Provider>
+  );
+}
+
+/** A menu button that appears only when the sidebar is folded or on a phone. */
+export function AppShellMenuButton({ label = "Open navigation", className }: { label?: string; className?: string }) {
+  const { toggle, folded, narrow } = useAppShell();
+  if (!folded && !narrow) return null;
+  return (
+    <button type="button" className={cx("ml-app-shell-menu", className)} aria-label={label} onClick={toggle}>
+      <IconMenu aria-hidden="true" size="1.05em" />
+    </button>
+  );
+}
+
+export function Sidebar({ header, footer, children, className }: { header?: React.ReactNode; footer?: React.ReactNode; children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cx("ml-sidebar", className)}>
+      {header ? <div className="ml-sidebar-header">{header}</div> : null}
+      <div className="ml-sidebar-body">{children}</div>
+      {footer ? <div className="ml-sidebar-footer">{footer}</div> : null}
+    </div>
+  );
+}
+
+/** A titled group of items; with `collapsible`, the title folds it. */
+export function SidebarSection({ title, collapsible = false, defaultOpen = true, children }: { title?: React.ReactNode; collapsible?: boolean; defaultOpen?: boolean; children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const id = React.useId();
+  return (
+    <section className="ml-sidebar-section">
+      {title ? (
+        collapsible ? (
+          <button type="button" className="ml-sidebar-title" data-collapsible="" aria-expanded={open} aria-controls={id} onClick={() => setOpen(!open)}>
+            {title}
+            <IconChevronDown aria-hidden="true" size="0.85em" className="ml-sidebar-chevron" />
+          </button>
+        ) : (
+          <h2 className="ml-sidebar-title">{title}</h2>
+        )
+      ) : null}
+      <ul id={id} className="ml-sidebar-list" hidden={!open}>
+        {children}
+      </ul>
+    </section>
+  );
+}
+
+export interface SidebarItemProps {
+  label: string;
+  icon?: React.ReactNode;
+  /** A number at the end: unread, open, due. */
+  count?: number;
+  /** The page being shown. */
+  current?: boolean;
+  href?: string;
+  onClick?: () => void;
+  /** Controls revealed on hover, such as a + or a menu. */
+  actions?: React.ReactNode;
+}
+
+export function SidebarItem({ label, icon, count, current, href, onClick, actions }: SidebarItemProps) {
+  const { narrow, closeDrawer } = useAppShell();
+  const content = (
+    <>
+      {icon ? (
+        <span className="ml-sidebar-icon" aria-hidden="true">
+          {icon}
+        </span>
+      ) : null}
+      <span className="ml-sidebar-label">{label}</span>
+      {count ? <span className="ml-sidebar-count">{count}</span> : null}
+    </>
+  );
+  const choose = () => {
+    onClick?.();
+    if (narrow) closeDrawer();
+  };
+  return (
+    <li className="ml-sidebar-entry">
+      {href ? (
+        <a className="ml-sidebar-item" href={href} aria-current={current ? "page" : undefined} onClick={choose}>
+          {content}
+        </a>
+      ) : (
+        <button type="button" className="ml-sidebar-item" aria-current={current ? "page" : undefined} onClick={choose}>
+          {content}
+        </button>
+      )}
+      {actions ? <span className="ml-sidebar-actions">{actions}</span> : null}
+    </li>
+  );
+}

package/snapshot/source/packages/components/avatar/avatar.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "away" | "busy";
+const initials = (name?: string) => {
+  const words = name?.replace(/[^\p{L}\p{N}\s]/gu, "").trim().split(/\s+/).filter(Boolean) ?? [];
+  return words.length > 1 ? `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase() : words[0]?.slice(0, 2).toUpperCase() ?? "?";
+};
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  status?: AvatarStatus;
+}
+const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ src, alt, name, size = "md", status, className, ...props }, ref) => {
+    const [failed, setFailed] = React.useState(false);
+    React.useEffect(() => setFailed(false), [src]);
+    const label = alt ?? name ?? "Avatar";
+    // alt="" marks the avatar as decorative, as it is for images: the name is
+    // already on screen beside it and must not be read twice.
+    const decorative = alt === "";
+    return (
+      <span ref={ref} data-size={size} className={cx("ml-avatar-root", className)} {...props}>
+        <span className="ml-avatar">
+          {src && !failed
+            ? <img src={src} alt={label} loading="lazy" className="ml-avatar-image" onError={() => setFailed(true)} />
+            : <span role={decorative ? undefined : "img"} aria-label={decorative ? undefined : label} aria-hidden={decorative || undefined} className="ml-avatar-fallback">{initials(name)}</span>}
+        </span>
+        {status ? <span role="status" aria-label={`${label} is ${status}`} data-status={status} className="ml-avatar-status" /> : null}
+      </span>
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> { max?: number; }
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ max = 4, className, children, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    const visible = items.slice(0, Math.max(0, max));
+    const overflow = items.length - visible.length;
+    return (
+      <div ref={ref} role="group" aria-label={`Avatar group, ${items.length} people`} className={cx("ml-avatar-group", className)} {...props}>
+        {visible.map((child, index) => <span key={index} className="ml-avatar-group-item">{child}</span>)}
+        {overflow ? <span aria-label={`${overflow} more people`} className="ml-avatar-overflow">+{overflow}</span> : null}
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export { Avatar, AvatarGroup };

package/snapshot/source/packages/components/badge/badge.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+import { IconX } from "@mlola-ui/icons";
+
+/** The meaning of the colour, from the theme's roles. */
+export type BadgeTone = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
+/** The form: a tint, a solid fill, or an outline. */
+export type BadgeVariant = "soft" | "solid" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  dot?: boolean;
+  onRemove?: () => void;
+}
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ tone = "neutral", variant = "soft", size = "md", dot = false, onRemove, className, children, ...props }, ref) => (
+    <span ref={ref} data-tone={tone} data-variant={variant} data-size={size} className={cx("ml-badge", className)} {...props}>
+      {dot ? <span aria-hidden="true" className="ml-badge-dot" /> : null}
+      <span className="ml-badge-label">{children}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove${typeof children === "string" ? ` ${children}` : " badge"}`}
+          className="ml-badge-remove"
+        >
+          <IconX aria-hidden="true" size="0.75em" />
+        </button>
+      ) : null}
+    </span>
+  )
+);
+Badge.displayName = "Badge";
+export { Badge };
+export type { BadgeSize };

package/snapshot/source/packages/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+import { IconChevronRight } from "@mlola-ui/icons";
+
+export type BreadcrumbItemType = { label: string; href?: string };
+type BreadcrumbProps = { items: BreadcrumbItemType[]; separator?: React.ReactNode; className?: string };
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.OlHTMLAttributes<HTMLOListElement>>(
+  ({ className, ...props }, ref) => <ol ref={ref} className={cx("ml-breadcrumb-list", className)} {...props} />
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cx("ml-breadcrumb-item", className)} {...props} />
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
+  ({ className, ...props }, ref) => <a ref={ref} className={cx("ml-breadcrumb-link", className)} {...props} />
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+function BreadcrumbPage({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span aria-current="page" className={cx("ml-breadcrumb-page", className)} {...props} />;
+}
+function BreadcrumbSeparator({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return <span aria-hidden="true" className={cx("ml-breadcrumb-separator", className)}>{children ?? <IconChevronRight aria-hidden="true" size="1em" />}</span>;
+}
+function BreadcrumbEllipsis({ className }: { className?: string }) {
+  return <span aria-hidden="true" className={cx("ml-breadcrumb-ellipsis", className)}>…</span>;
+}
+
+export function Breadcrumb({ items, separator, className }: BreadcrumbProps) {
+  const last = items.length - 1;
+  const collapse = items.length > 3;
+  return (
+    <nav aria-label="Breadcrumb" className={cx("ml-breadcrumb", className)}>
+      <BreadcrumbList>
+        {items.map((item, index) => {
+          const current = index === last;
+          const middle = index > 0 && index < last;
+          return (
+            <React.Fragment key={`${item.label}-${index}`}>
+              {collapse && index === 1 ? (
+                <BreadcrumbItem aria-hidden="true" data-collapse-indicator="">
+                  <BreadcrumbEllipsis /><BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
+                </BreadcrumbItem>
+              ) : null}
+              <BreadcrumbItem data-collapsible={middle && collapse ? "" : undefined}>
+                {current || !item.href
+                  ? <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                  : <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>}
+                {!current ? <BreadcrumbSeparator>{separator}</BreadcrumbSeparator> : null}
+              </BreadcrumbItem>
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </nav>
+  );
+}
+export { BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

package/snapshot/source/packages/components/button/button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import * as React from "react";
+import { Magnetic } from "@mlola-ui/motion";
+import { cx } from "../_internal/react";
+
+export type ButtonVariant = "primary" | "secondary" | "subtle" | "danger" | "outline" | "link";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  magnetic?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", size = "md", loading = false, magnetic = false, disabled, children, type = "button", ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    const button = (
+      <button
+        ref={ref}
+        type={type}
+        disabled={isDisabled}
+        aria-disabled={isDisabled || undefined}
+        aria-busy={loading || undefined}
+        data-variant={variant}
+        data-size={size}
+        data-loading={loading ? "" : undefined}
+        className={cx("ml-button", className)}
+        {...props}
+      >
+        {loading ? <span aria-hidden="true" className="ml-button-spinner" /> : null}
+        <span className="ml-button-label">{children}</span>
+      </button>
+    );
+    return magnetic && !isDisabled ? <Magnetic pull={0.2}>{button}</Magnetic> : button;
+  }
+);
+Button.displayName = "Button";
+
+export { Button };