@nexub/react 0.0.2 → 1.1.0

package/dist/chunk-IHW2L532.js

@@ -0,0 +1,175 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toast/Toast.tsx
+import * as React from "react";
+import * as RadixToast from "@radix-ui/react-toast";
+import { jsx } from "react/jsx-runtime";
+var Provider2 = RadixToast.Provider;
+var Viewport2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Viewport,
+    {
+      ref,
+      className: cn(
+        "fixed top-0 right-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Viewport2.displayName = "Toast.Viewport";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Root,
+    {
+      ref,
+      className: cn(
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Toast.Root";
+var Title2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Title, { ref, className: cn("text-sm font-semibold", className), ...props })
+);
+Title2.displayName = "Toast.Title";
+var Description2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Description,
+    {
+      ref,
+      className: cn("text-sm text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Description2.displayName = "Toast.Description";
+var Action2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToast.Action,
+    {
+      ref,
+      className: cn(
+        "inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md border px-3 text-xs font-medium transition-colors hover:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Action2.displayName = "Toast.Action";
+var Close2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixToast.Close, { ref, className: cn("rounded p-1", className), ...props })
+);
+Close2.displayName = "Toast.Close";
+var Toast = { Provider: Provider2, Viewport: Viewport2, Root: Root2, Title: Title2, Description: Description2, Action: Action2, Close: Close2 };
+
+// src/components/Toast/Toaster.tsx
+import "react";
+import * as RadixToast2 from "@radix-ui/react-toast";
+import { X } from "@nexub/icons";
+
+// src/components/Toast/useToast.ts
+import { useState, useEffect } from "react";
+var g = typeof window !== "undefined" ? (() => {
+  const _g = globalThis;
+  _g.__nexub_toast_items ??= [];
+  _g.__nexub_toast_listeners ??= /* @__PURE__ */ new Set();
+  _g.__nexub_toast_counter ??= 0;
+  return _g;
+})() : { __nexub_toast_items: [], __nexub_toast_listeners: /* @__PURE__ */ new Set(), __nexub_toast_counter: 0 };
+function notify() {
+  g.__nexub_toast_listeners.forEach((l) => l([...g.__nexub_toast_items]));
+}
+function add(item) {
+  const id = String(++g.__nexub_toast_counter);
+  g.__nexub_toast_items = [...g.__nexub_toast_items, { ...item, id }];
+  notify();
+  return id;
+}
+function useToastStore() {
+  const [state, setState] = useState([...g.__nexub_toast_items]);
+  useEffect(() => {
+    g.__nexub_toast_listeners.add(setState);
+    return () => {
+      g.__nexub_toast_listeners.delete(setState);
+    };
+  }, []);
+  return state;
+}
+function dismiss(id) {
+  g.__nexub_toast_items = id ? g.__nexub_toast_items.filter((i) => i.id !== id) : [];
+  notify();
+}
+var toast = {
+  success: (title, opts) => add({ title, tone: "success", ...opts }),
+  error: (title, opts) => add({ title, tone: "error", ...opts }),
+  info: (title, opts) => add({ title, tone: "info", ...opts }),
+  warning: (title, opts) => add({ title, tone: "warning", ...opts }),
+  custom: (title, opts) => add({ title, tone: "neutral", ...opts }),
+  dismiss
+};
+
+// src/components/Toast/Toaster.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var toneMap = {
+  success: "border-l-4 border-[var(--color-semantic-success-default)]",
+  error: "border-l-4 border-[var(--color-semantic-error-default)]",
+  warning: "border-l-4 border-[var(--color-semantic-warning-default)]",
+  info: "border-l-4 border-[var(--color-semantic-info-default)]",
+  neutral: ""
+};
+function Toaster() {
+  const toasts = useToastStore();
+  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: "right", children: [
+    toasts.map((t) => /* @__PURE__ */ jsxs(
+      RadixToast2.Root,
+      {
+        className: cn(
+          "group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] p-4 shadow-md transition-all",
+          "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full",
+          toneMap[t.tone ?? "neutral"]
+        ),
+        duration: t.duration ?? 5e3,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            /* @__PURE__ */ jsx2(RadixToast2.Title, { className: "text-sm font-semibold", children: t.title }),
+            t.description && /* @__PURE__ */ jsx2(RadixToast2.Description, { className: "text-sm text-[var(--color-text-muted)]", children: t.description })
+          ] }),
+          t.action && /* @__PURE__ */ jsx2(
+            RadixToast2.Action,
+            {
+              altText: t.action.label,
+              onClick: t.action.onClick,
+              className: "shrink-0 rounded-md border border-[var(--color-border-default)] px-3 py-1.5 text-sm font-medium hover:bg-[var(--color-bg-subtle)] focus:outline-none focus:ring-2 focus:ring-[var(--color-ring-default)]",
+              children: t.action.label
+            }
+          ),
+          /* @__PURE__ */ jsxs(RadixToast2.Close, { className: "rounded-md p-1 transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--color-ring-default)]", children: [
+            /* @__PURE__ */ jsx2(X, { size: "sm", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      },
+      t.id
+    )),
+    /* @__PURE__ */ jsx2(RadixToast2.Viewport, { className: "fixed top-0 right-0 z-[var(--z-toast,2000)] flex max-h-screen w-full flex-col-reverse p-4 sm:max-w-sm gap-2" })
+  ] });
+}
+Toaster.displayName = "Toaster";
+
+export {
+  Toast,
+  useToastStore,
+  toast,
+  Toaster
+};

package/dist/chunk-IU76LV3W.js

@@ -0,0 +1,101 @@
+'use client';
+import {
+  Label
+} from "./chunk-JKTZMWWC.js";
+import {
+  FormError
+} from "./chunk-OUBBOOZE.js";
+import {
+  HelperText
+} from "./chunk-T4IVMVMQ.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FormField/FormField.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var FormFieldContext = React.createContext(null);
+function useFormField() {
+  const ctx = React.useContext(FormFieldContext);
+  if (!ctx) {
+    throw new Error("FormField parts must be used inside <FormField.Root>");
+  }
+  return ctx;
+}
+var Root = React.forwardRef(function Root2({ id: idProp, name, invalid, required, disabled, className, children, ...props }, ref) {
+  const generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  const value = React.useMemo(
+    () => ({
+      id,
+      name,
+      invalid,
+      required,
+      disabled,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`
+    }),
+    [id, name, invalid, required, disabled]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children }) });
+});
+Root.displayName = "FormField.Root";
+function FieldLabel({
+  className,
+  children,
+  ...props
+}) {
+  const { id, required, disabled } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      htmlFor: id,
+      required,
+      disabled,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+FieldLabel.displayName = "FormField.Label";
+function Control({ children }) {
+  const { id, name, invalid, required, disabled, descriptionId, errorId } = useFormField();
+  const describedBy = [descriptionId, invalid ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return React.cloneElement(children, {
+    id,
+    name: children.props["name"] ?? name,
+    invalid: children.props["invalid"] ?? invalid,
+    required: children.props["required"] ?? required,
+    disabled: children.props["disabled"] ?? disabled,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid ?? void 0,
+    "aria-required": required ?? void 0
+  });
+}
+Control.displayName = "FormField.Control";
+function Description({
+  className,
+  children,
+  ...props
+}) {
+  const { descriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(HelperText, { id: descriptionId, className, ...props, children });
+}
+Description.displayName = "FormField.Description";
+function FieldError({
+  className,
+  children,
+  ...props
+}) {
+  const { errorId, invalid } = useFormField();
+  if (!invalid) return null;
+  return /* @__PURE__ */ jsx(FormError, { id: errorId, className, ...props, children });
+}
+FieldError.displayName = "FormField.Error";
+var FormField = { Root, Label: FieldLabel, Control, Description, Error: FieldError };
+
+export {
+  FormField
+};

package/dist/chunk-IZ6ZPEZ2.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-JCUVWDUC.js

@@ -0,0 +1,57 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/SegmentedControl/SegmentedControl.tsx
+import * as React from "react";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "h-7 px-2.5 text-xs",
+  md: "h-8 px-3 text-sm",
+  lg: "h-9 px-4 text-sm"
+};
+var SegmentedControlContext = React.createContext({ size: "md" });
+var Root2 = React.forwardRef(
+  ({ className, size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
+    RadixToggleGroup.Root,
+    {
+      ref,
+      type: "single",
+      className: cn(
+        "inline-flex items-center rounded-lg bg-[var(--color-bg-subtle)] p-0.5 gap-0.5",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) })
+);
+Root2.displayName = "SegmentedControl.Root";
+var Item2 = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size } = React.useContext(SegmentedControlContext);
+    return /* @__PURE__ */ jsx(
+      RadixToggleGroup.Item,
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md font-medium transition-all",
+          "text-[var(--color-text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+          "data-[state=on]:bg-[var(--color-bg-default)] data-[state=on]:text-[var(--color-text-primary)] data-[state=on]:shadow-sm",
+          "disabled:pointer-events-none disabled:opacity-50",
+          sizeMap[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "SegmentedControl.Item";
+var SegmentedControl = { Root: Root2, Item: Item2 };
+
+export {
+  SegmentedControl
+};

package/dist/chunk-JKTZMWWC.js

@@ -0,0 +1,63 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Label/Label.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var labelVariants = cva(
+  ["inline-flex items-center gap-1 font-medium leading-none select-none"],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Label = React.forwardRef(
+  ({ className, size, required, disabled, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        "data-tone": tone,
+        style: { ...toneStyle, ...style },
+        className: cn(
+          labelVariants({ size, disabled }),
+          "text-[var(--color-text-primary)]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "text-[var(--color-danger-500)] leading-none",
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+
+export {
+  labelVariants,
+  Label
+};

package/dist/chunk-JQDLCN5D.js

@@ -0,0 +1,66 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Accordion/Accordion.tsx
+import * as React from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { ChevronDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixAccordion.Root,
+    {
+      ref,
+      className: cn("divide-y divide-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Root2.displayName = "Accordion.Root";
+var Item2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixAccordion.Item, { ref, className: cn("", className), ...props })
+);
+Item2.displayName = "Accordion.Item";
+var Trigger2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(RadixAccordion.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    RadixAccordion.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
+        "hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-200", "aria-hidden": "true" })
+      ]
+    }
+  ) })
+);
+Trigger2.displayName = "Accordion.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixAccordion.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden text-sm",
+        "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "pb-4", children })
+    }
+  )
+);
+Content2.displayName = "Accordion.Content";
+var Accordion = { Root: Root2, Item: Item2, Trigger: Trigger2, Content: Content2 };
+
+export {
+  Accordion
+};

package/dist/chunk-K7CUCLLI.js

@@ -0,0 +1,43 @@
+'use client';
+import {
+  toggleVariants
+} from "./chunk-U3EGB3JL.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/ToggleGroup/ToggleGroup.tsx
+import * as React from "react";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { jsx } from "react/jsx-runtime";
+var ToggleGroupContext = React.createContext({});
+var Root2 = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(
+    RadixToggleGroup.Root,
+    {
+      ref,
+      className: cn("flex items-center gap-1", className),
+      ...props
+    }
+  ) })
+);
+Root2.displayName = "ToggleGroup.Root";
+var Item2 = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    const ctx = React.useContext(ToggleGroupContext);
+    return /* @__PURE__ */ jsx(
+      RadixToggleGroup.Item,
+      {
+        ref,
+        className: cn(toggleVariants({ variant: variant ?? ctx.variant, size: size ?? ctx.size }), className),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "ToggleGroup.Item";
+var ToggleGroup = { Root: Root2, Item: Item2 };
+
+export {
+  ToggleGroup
+};

package/dist/chunk-KBB7M6WO.js

@@ -0,0 +1,65 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Stack/Stack.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+function injectDividers(children, divider) {
+  const childArray = React.Children.toArray(children);
+  return childArray.reduce((acc, child, index) => {
+    if (index > 0) {
+      acc.push(
+        /* @__PURE__ */ jsx(React.Fragment, { children: divider }, `divider-${index}`)
+      );
+    }
+    acc.push(child);
+    return acc;
+  }, []);
+}
+var Stack = React.forwardRef(
+  ({
+    direction = "column",
+    gap,
+    align,
+    justify,
+    wrap = false,
+    divider,
+    asChild = false,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const inlineStyle = {
+      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap } : {},
+      ...align ? { alignItems: align } : {},
+      ...justify ? { justifyContent: justify } : {},
+      ...style
+    };
+    const content = divider ? injectDividers(children, divider) : children;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "flex",
+          direction === "row" ? "flex-row" : "flex-col",
+          wrap && "flex-wrap",
+          className
+        ),
+        style: inlineStyle,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+
+export {
+  Stack
+};

package/dist/chunk-KLTQJZOX.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-KWWV3CM3.js

@@ -0,0 +1,62 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Separator/Separator.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var separatorVariants = cva("", {
+  variants: {
+    orientation: {
+      horizontal: "w-full border-t",
+      vertical: "h-full border-l self-stretch"
+    },
+    tone: {
+      neutral: "border-[var(--color-border-default)]",
+      info: "border-[var(--color-semantic-info-default)]/30",
+      success: "border-[var(--color-semantic-success-default)]/30",
+      warning: "border-[var(--color-semantic-warning-default)]/30",
+      danger: "border-[var(--color-semantic-error-default)]/30",
+      leap: "border-[var(--color-leap-500)]/30",
+      bookub: "border-[var(--color-bookub-500)]/30",
+      payub: "border-[var(--color-payub-500)]/30",
+      founderub: "border-[var(--color-founderub-500)]/30"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    tone: "neutral"
+  }
+});
+var Separator = React.forwardRef(({ className, orientation = "horizontal", tone = "neutral", ...props }, ref) => {
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: cn(separatorVariants({ orientation, tone }), className),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": "vertical",
+      className: cn(separatorVariants({ orientation, tone }), className),
+      ...props
+    }
+  );
+});
+Separator.displayName = "Separator";
+
+export {
+  separatorVariants,
+  Separator
+};

package/dist/chunk-KZW37FQZ.js

@@ -0,0 +1,40 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/AppShell/AppShell.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("grid h-screen grid-rows-[auto_1fr] overflow-hidden", className),
+      ...props
+    }
+  )
+);
+Root.displayName = "AppShell.Root";
+var Header = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("col-span-full row-start-1", className), ...props })
+);
+Header.displayName = "AppShell.Header";
+var Body = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex overflow-hidden row-start-2", className), ...props })
+);
+Body.displayName = "AppShell.Body";
+var SidebarSlot = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 overflow-y-auto", className), ...props })
+);
+SidebarSlot.displayName = "AppShell.Sidebar";
+var Main = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("main", { ref, className: cn("flex-1 overflow-y-auto p-6", className), ...props })
+);
+Main.displayName = "AppShell.Main";
+var AppShell = { Root, Header, Body, Sidebar: SidebarSlot, Main };
+
+export {
+  AppShell
+};