@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-app-shell.js

@@ -0,0 +1,631 @@
+import {
+  cn,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-app-shell/dist/index.js
+import * as React from "react";
+
+// ../app-shell/dist/index.js
+var DEFAULTS = {
+  sidebarWidth: "16rem",
+  sidebarCollapsedWidth: "4rem",
+  headerHeight: "3.5rem",
+  mobileBreakpoint: 768,
+  tabletBreakpoint: 1024,
+  sidebarPosition: "left",
+  sidebarCollapsible: true,
+  sidebarDefaultCollapsed: false,
+  mobileNavPosition: "bottom"
+};
+function resolveBreakpoint(width, mobileBp, tabletBp) {
+  if (width < mobileBp) return "mobile";
+  if (width < tabletBp) return "tablet";
+  return "desktop";
+}
+function makeState(sidebarOpen, sidebarCollapsed, breakpoint) {
+  return {
+    sidebarOpen,
+    sidebarCollapsed,
+    breakpoint,
+    isMobile: breakpoint === "mobile",
+    isTablet: breakpoint === "tablet",
+    isDesktop: breakpoint === "desktop"
+  };
+}
+function createAppShell(config) {
+  const resolved = {
+    ...DEFAULTS,
+    ...config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== void 0)) : {}
+  };
+  let sidebarOpen = false;
+  let sidebarCollapsed = resolved.sidebarDefaultCollapsed;
+  let breakpoint = "desktop";
+  const subscribers = /* @__PURE__ */ new Set();
+  const sidebarId = generateId("rfr-shell-sidebar");
+  function getState() {
+    return makeState(sidebarOpen, sidebarCollapsed, breakpoint);
+  }
+  function notify() {
+    const s = getState();
+    for (const fn of subscribers) {
+      fn(s);
+    }
+  }
+  function toggleSidebar() {
+    if (breakpoint === "mobile") {
+      sidebarOpen = !sidebarOpen;
+    } else if (resolved.sidebarCollapsible) {
+      sidebarCollapsed = !sidebarCollapsed;
+    }
+    notify();
+  }
+  function openSidebar() {
+    sidebarOpen = true;
+    notify();
+  }
+  function closeSidebar() {
+    sidebarOpen = false;
+    notify();
+  }
+  function collapseSidebar() {
+    sidebarCollapsed = true;
+    notify();
+  }
+  function expandSidebar() {
+    sidebarCollapsed = false;
+    notify();
+  }
+  function setBreakpoint(bp) {
+    if (bp === breakpoint) return;
+    breakpoint = bp;
+    if (bp !== "mobile") {
+      sidebarOpen = false;
+    }
+    notify();
+  }
+  function getCSSVariables() {
+    const currentWidth = sidebarCollapsed ? resolved.sidebarCollapsedWidth : resolved.sidebarWidth;
+    return {
+      "--shell-sidebar-width": currentWidth,
+      "--shell-sidebar-full-width": resolved.sidebarWidth,
+      "--shell-sidebar-collapsed-width": resolved.sidebarCollapsedWidth,
+      "--shell-header-height": resolved.headerHeight
+    };
+  }
+  function subscribe(fn) {
+    subscribers.add(fn);
+    return () => {
+      subscribers.delete(fn);
+    };
+  }
+  return {
+    get state() {
+      return getState();
+    },
+    config: resolved,
+    toggleSidebar,
+    openSidebar,
+    closeSidebar,
+    collapseSidebar,
+    expandSidebar,
+    setBreakpoint,
+    getCSSVariables,
+    sidebarAriaProps: {
+      role: "navigation",
+      "aria-label": "Sidebar",
+      id: sidebarId
+    },
+    mainAriaProps: {
+      role: "main"
+    },
+    headerAriaProps: {
+      role: "banner"
+    },
+    mobileNavAriaProps: {
+      role: "navigation",
+      "aria-label": "Mobile navigation"
+    },
+    overlayAriaProps: {
+      "aria-hidden": "true"
+    },
+    subscribe
+  };
+}
+var DEFAULTS2 = {
+  maxWidth: "80rem",
+  navHeight: "4rem",
+  navTransparent: false,
+  navSticky: true,
+  footerColumns: 4
+};
+var BACKGROUND_CLASSES = {
+  default: "",
+  muted: "bg-muted",
+  primary: "bg-primary text-primary-foreground",
+  none: ""
+};
+function createPageShell(config) {
+  const resolved = {
+    ...DEFAULTS2,
+    ...config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== void 0)) : {}
+  };
+  function getSectionClasses(sectionConfig) {
+    const {
+      fullWidth = false,
+      maxWidth,
+      padding = true,
+      background = "default"
+    } = sectionConfig ?? {};
+    const classes = [];
+    if (!fullWidth) {
+      classes.push("mx-auto");
+      classes.push("w-full");
+      if (maxWidth) {
+        classes.push(`max-w-${maxWidth}`);
+      } else {
+        classes.push("max-w-[var(--page-max-width)]");
+      }
+    }
+    if (padding) {
+      classes.push("px-4 sm:px-6 lg:px-8");
+    }
+    const bg = BACKGROUND_CLASSES[background];
+    if (bg) {
+      classes.push(bg);
+    }
+    return classes.join(" ");
+  }
+  function getCSSVariables() {
+    return {
+      "--page-max-width": resolved.maxWidth,
+      "--page-nav-height": resolved.navHeight,
+      "--page-footer-columns": String(resolved.footerColumns)
+    };
+  }
+  return {
+    config: resolved,
+    navAriaProps: {
+      role: "navigation",
+      "aria-label": "Main navigation"
+    },
+    footerAriaProps: {
+      role: "contentinfo"
+    },
+    getSectionClasses,
+    getCSSVariables
+  };
+}
+var DEFAULTS3 = {
+  maxWidth: "sm",
+  position: "center",
+  showBackground: true
+};
+var MAX_WIDTH_CLASSES = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md"
+};
+function createAuthShell(config) {
+  const resolved = {
+    ...DEFAULTS3,
+    ...config ? Object.fromEntries(Object.entries(config).filter(([_, v]) => v !== void 0)) : {}
+  };
+  const containerParts = ["min-h-screen", "flex", "w-full"];
+  if (resolved.position === "center") {
+    containerParts.push("items-center", "justify-center");
+  } else {
+    containerParts.push("items-center", "justify-start", "pl-8 sm:pl-16 lg:pl-24");
+  }
+  if (resolved.showBackground) {
+    containerParts.push("bg-muted");
+  }
+  const cardParts = [
+    "w-full",
+    MAX_WIDTH_CLASSES[resolved.maxWidth],
+    "rounded-lg",
+    "border",
+    "bg-card",
+    "p-6",
+    "shadow-sm"
+  ];
+  return {
+    config: resolved,
+    containerClasses: containerParts.join(" "),
+    cardClasses: cardParts.join(" "),
+    ariaProps: {
+      role: "main",
+      "aria-label": "Authentication"
+    }
+  };
+}
+
+// ../react-app-shell/dist/index.js
+var AppShellContext = React.createContext(null);
+function useAppShell() {
+  const ctx = React.useContext(AppShellContext);
+  if (!ctx) {
+    devWarn(
+      "react-app-shell/use-app-shell-outside-provider",
+      "useAppShell() was called outside of <AppShell>. Wrap the consuming component tree in <AppShell>."
+    );
+    throw new Error("useAppShell must be used within <AppShell>");
+  }
+  return ctx;
+}
+var AppShellRoot = React.forwardRef(
+  function AppShell({ config, children, className }, ref) {
+    const apiRef = React.useRef(null);
+    if (apiRef.current === null) {
+      apiRef.current = createAppShell(config);
+    }
+    const api = apiRef.current;
+    const [state, setState] = React.useState(() => api.state);
+    React.useEffect(() => {
+      setState(api.state);
+      return api.subscribe((s) => setState(s));
+    }, [api]);
+    React.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const { mobileBreakpoint, tabletBreakpoint } = api.config;
+      const mobileQuery = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+      const tabletQuery = window.matchMedia(
+        `(min-width: ${mobileBreakpoint}px) and (max-width: ${tabletBreakpoint - 1}px)`
+      );
+      function update() {
+        const width = window.innerWidth;
+        const bp = resolveBreakpoint(width, mobileBreakpoint, tabletBreakpoint);
+        api.setBreakpoint(bp);
+      }
+      update();
+      mobileQuery.addEventListener("change", update);
+      tabletQuery.addEventListener("change", update);
+      return () => {
+        mobileQuery.removeEventListener("change", update);
+        tabletQuery.removeEventListener("change", update);
+      };
+    }, [api]);
+    const cssVars = api.getCSSVariables();
+    const ctxValue = React.useMemo(
+      () => ({ api, state }),
+      [api, state]
+    );
+    return React.createElement(
+      AppShellContext.Provider,
+      { value: ctxValue },
+      React.createElement(
+        "div",
+        {
+          ref,
+          className: cn("flex h-screen w-full overflow-hidden", className),
+          style: cssVars,
+          "data-shell": ""
+        },
+        children
+      )
+    );
+  }
+);
+var Sidebar = React.forwardRef(
+  function Sidebar2({ children, className }, ref) {
+    const { api, state } = useAppShell();
+    const isRight = api.config.sidebarPosition === "right";
+    const baseClasses = [
+      "flex flex-col shrink-0 overflow-y-auto overflow-x-hidden",
+      "bg-background border-r",
+      "transition-[width,transform] duration-200 ease-in-out",
+      "h-full"
+    ];
+    if (isRight) {
+      baseClasses[1] = "flex flex-col shrink-0 overflow-y-auto overflow-x-hidden bg-background border-l";
+    }
+    const mobileClasses = state.isMobile ? [
+      "fixed top-0 z-40",
+      isRight ? "right-0" : "left-0",
+      "w-[var(--shell-sidebar-full-width)]",
+      state.sidebarOpen ? "translate-x-0" : isRight ? "translate-x-full" : "-translate-x-full"
+    ] : ["relative", "w-[var(--shell-sidebar-width)]"];
+    return React.createElement(
+      "aside",
+      {
+        ref,
+        ...api.sidebarAriaProps,
+        className: cn(baseClasses.join(" "), mobileClasses.join(" "), className),
+        "data-collapsed": state.sidebarCollapsed ? "" : void 0,
+        "data-open": state.sidebarOpen ? "" : void 0
+      },
+      children
+    );
+  }
+);
+var Main = React.forwardRef(
+  function Main2({ children, className }, ref) {
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-1 flex-col min-w-0 h-full", className)
+      },
+      children
+    );
+  }
+);
+var Header = React.forwardRef(
+  function Header2({ children, className }, ref) {
+    const { api, state } = useAppShell();
+    const hamburger = state.isMobile ? React.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Toggle sidebar",
+        "aria-expanded": state.sidebarOpen,
+        "aria-controls": api.sidebarAriaProps.id,
+        onClick: () => api.toggleSidebar(),
+        className: "inline-flex items-center justify-center p-2 mr-2"
+      },
+      React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: 24,
+          height: 24,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true"
+        },
+        React.createElement("line", { x1: 3, y1: 6, x2: 21, y2: 6 }),
+        React.createElement("line", { x1: 3, y1: 12, x2: 21, y2: 12 }),
+        React.createElement("line", { x1: 3, y1: 18, x2: 21, y2: 18 })
+      )
+    ) : null;
+    return React.createElement(
+      "header",
+      {
+        ref,
+        ...api.headerAriaProps,
+        className: cn(
+          "sticky top-0 z-30 flex items-center shrink-0",
+          "h-[var(--shell-header-height)]",
+          "border-b bg-background px-4",
+          className
+        )
+      },
+      hamburger,
+      children
+    );
+  }
+);
+var Content = React.forwardRef(
+  function Content2({ children, className, maxWidth }, ref) {
+    const { api } = useAppShell();
+    const mwClass = maxWidth ? `max-w-${maxWidth}` : "";
+    return React.createElement(
+      "main",
+      {
+        ref,
+        ...api.mainAriaProps,
+        className: cn(
+          "flex-1 overflow-y-auto",
+          mwClass ? `${mwClass} mx-auto w-full` : "",
+          "px-4 sm:px-6 lg:px-8 py-6",
+          className
+        )
+      },
+      children
+    );
+  }
+);
+var MobileNav = React.forwardRef(
+  function MobileNav2({ children, className }, ref) {
+    const { api, state } = useAppShell();
+    if (!state.isMobile) return null;
+    if (api.config.mobileNavPosition === "none") return null;
+    return React.createElement(
+      "nav",
+      {
+        ref,
+        ...api.mobileNavAriaProps,
+        className: cn(
+          "fixed bottom-0 left-0 right-0 z-30",
+          "flex items-center justify-around",
+          "border-t bg-background",
+          "h-14",
+          className
+        )
+      },
+      children
+    );
+  }
+);
+var Overlay = React.forwardRef(
+  function Overlay2({ className }, ref) {
+    const { api, state } = useAppShell();
+    if (!state.isMobile || !state.sidebarOpen) return null;
+    return React.createElement("div", {
+      ref,
+      ...api.overlayAriaProps,
+      className: cn(
+        "fixed inset-0 z-30 bg-black/50 transition-opacity",
+        className
+      ),
+      onClick: () => api.closeSidebar(),
+      "data-shell-overlay": ""
+    });
+  }
+);
+var AppShell2 = Object.assign(AppShellRoot, {
+  Sidebar,
+  Main,
+  Header,
+  Content,
+  MobileNav,
+  Overlay
+});
+var PageShellContext = React.createContext(null);
+function usePageShell() {
+  const ctx = React.useContext(PageShellContext);
+  if (!ctx) {
+    devWarn(
+      "react-app-shell/page-shell-compound-outside-provider",
+      "A PageShell compound component was rendered outside of <PageShell>. Wrap it in <PageShell>."
+    );
+    throw new Error("PageShell compound components must be used within <PageShell>");
+  }
+  return ctx;
+}
+var PageShellRoot = function PageShell({ config, children, className }) {
+  const apiRef = React.useRef(null);
+  if (apiRef.current === null) {
+    apiRef.current = createPageShell(config);
+  }
+  const api = apiRef.current;
+  const cssVars = api.getCSSVariables();
+  const ctxValue = React.useMemo(
+    () => ({ api }),
+    [api]
+  );
+  return React.createElement(
+    PageShellContext.Provider,
+    { value: ctxValue },
+    React.createElement(
+      "div",
+      {
+        className: cn("flex min-h-screen flex-col", className),
+        style: cssVars,
+        "data-page-shell": ""
+      },
+      children
+    )
+  );
+};
+function Nav({ children, className }) {
+  const { api } = usePageShell();
+  const stickyClass = api.config.navSticky ? "sticky top-0 z-40" : "";
+  const transparentClass = api.config.navTransparent ? "bg-transparent" : "bg-background border-b";
+  return React.createElement(
+    "nav",
+    {
+      ...api.navAriaProps,
+      className: cn(
+        "flex items-center h-[var(--page-nav-height)] px-4 sm:px-6 lg:px-8",
+        stickyClass,
+        transparentClass,
+        className
+      )
+    },
+    children
+  );
+}
+function Section({
+  children,
+  className,
+  fullWidth,
+  maxWidth,
+  padding,
+  background
+}) {
+  const { api } = usePageShell();
+  const sectionClasses = api.getSectionClasses({ fullWidth, maxWidth, padding, background });
+  return React.createElement(
+    "section",
+    {
+      className: cn("py-12", sectionClasses, className)
+    },
+    children
+  );
+}
+function Footer({ children, className, columns }) {
+  const { api } = usePageShell();
+  const cols = columns ?? api.config.footerColumns;
+  return React.createElement(
+    "footer",
+    {
+      ...api.footerAriaProps,
+      className: cn(
+        "border-t bg-muted py-12 px-4 sm:px-6 lg:px-8",
+        className
+      )
+    },
+    React.createElement(
+      "div",
+      {
+        className: `mx-auto max-w-[var(--page-max-width)] grid gap-8`,
+        style: {
+          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`
+        }
+      },
+      children
+    )
+  );
+}
+var PageShell2 = Object.assign(PageShellRoot, {
+  Nav,
+  Section,
+  Footer
+});
+var AuthShellContext = React.createContext(null);
+function useAuthShell() {
+  const ctx = React.useContext(AuthShellContext);
+  if (!ctx) {
+    devWarn(
+      "react-app-shell/auth-shell-compound-outside-provider",
+      "An AuthShell compound component was rendered outside of <AuthShell>. Wrap it in <AuthShell>."
+    );
+    throw new Error("AuthShell compound components must be used within <AuthShell>");
+  }
+  return ctx;
+}
+var AuthShellRoot = function AuthShell({ config, children, className }) {
+  const apiRef = React.useRef(null);
+  if (apiRef.current === null) {
+    apiRef.current = createAuthShell(config);
+  }
+  const api = apiRef.current;
+  const ctxValue = React.useMemo(
+    () => ({ api }),
+    [api]
+  );
+  return React.createElement(
+    AuthShellContext.Provider,
+    { value: ctxValue },
+    React.createElement(
+      "div",
+      {
+        ...api.ariaProps,
+        className: cn(api.containerClasses, className),
+        "data-auth-shell": ""
+      },
+      children
+    )
+  );
+};
+function AuthShellCard({ children, className }) {
+  const { api } = useAuthShell();
+  return React.createElement(
+    "div",
+    {
+      className: cn(api.cardClasses, className),
+      "data-auth-card": ""
+    },
+    children
+  );
+}
+var AuthShell2 = Object.assign(AuthShellRoot, {
+  Card: AuthShellCard
+});
+export {
+  AppShell2 as AppShell,
+  AuthShell2 as AuthShell,
+  PageShell2 as PageShell,
+  createAppShell,
+  createAuthShell,
+  createPageShell,
+  resolveBreakpoint,
+  useAppShell
+};
+//# sourceMappingURL=react-app-shell.js.map