@sableui/react 0.6.2 → 0.7.1

package/dist/components/accordion/accordion.js

@@ -0,0 +1,63 @@
+// src/components/accordion/accordion.tsx
+import { Accordion as Base } from "@base-ui/react/accordion";
+import { Icon } from "../../icon/Icon.js";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion = Base.Root;
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Item,
+    {
+      className: cn("border-b border-border", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  indicator,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Base.Header, { children: /* @__PURE__ */ jsxs(
+    Base.Trigger,
+    {
+      className: cn(
+        "flex w-full items-start justify-between gap-3 py-4 text-start text-title-sm text-foreground motion-interactive hover:text-muted-foreground rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50",
+        !indicator && "[&[data-panel-open]_[data-slot=accordion-chevron]]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "accordion-chevron",
+            className: "flex h-[1lh] shrink-0 items-center motion-interactive",
+            children: indicator ?? /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "text-xs text-muted-foreground" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionPanel({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Panel,
+    {
+      className: cn(
+        "h-[var(--accordion-panel-height)] text-body-md text-muted-foreground motion-disclosure data-[ending-style]:h-0 data-[starting-style]:h-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "pb-4", children })
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger
+};

package/dist/components/accordion/accordion.meta.js

@@ -0,0 +1,155 @@
+// src/components/accordion/accordion.meta.ts
+var accordionMeta = {
+  name: "Accordion",
+  summary: "Stacked, collapsible disclosure sections over Base UI Accordion \u2014 roving focus, arrow-key navigation, ARIA region/heading/button wiring, and an animated height transition. Each item pairs a full-width trigger (with a rotating chevron) and a panel.",
+  status: "stable",
+  keywords: [
+    "accordion",
+    "disclosure",
+    "collapse",
+    "faq"
+  ],
+  usage: {
+    description: "Use Accordion to reveal a vertical set of related sections while keeping the surrounding page scannable.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use concise trigger text that describes the content revealed below it."
+      },
+      {
+        guidance: "do",
+        description: "Keep section content focused so expanding one item does not feel like navigating to a new page."
+      },
+      {
+        guidance: "dont",
+        description: "Do not hide required fields, primary actions, or critical errors inside collapsed sections."
+      },
+      {
+        guidance: "dont",
+        description: "Do not nest an Accordion inside an Accordion. Two layers of roving focus fight each other, and the arrow keys become ambiguous \u2014 flatten the hierarchy or use a Tree."
+      }
+    ],
+    anatomy: [
+      {
+        name: "AccordionItem",
+        required: true,
+        description: "One expandable section in the group."
+      },
+      {
+        name: "AccordionTrigger",
+        required: true,
+        description: "The button-like control that opens the section."
+      },
+      {
+        name: "AccordionPanel",
+        required: true,
+        description: "The content revealed by the trigger."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Collapsible",
+      "Tabs"
+    ]
+  },
+  props: [
+    {
+      name: "Accordion (Root)",
+      type: "Base UI Accordion.Root props (value, defaultValue, multiple, disabled, onValueChange, orientation, loopFocus, keepMounted, hiddenUntilFound)",
+      default: "\u2014",
+      description: "Groups all items and owns the open value(s). Uncontrolled via defaultValue, controlled via value."
+    },
+    {
+      name: "defaultValue",
+      type: "Value[]",
+      default: "[]",
+      description: "Uncontrolled set of item values that start expanded (e.g. ['faq-1'])."
+    },
+    {
+      name: "value",
+      type: "Value[]",
+      default: "\u2014",
+      description: "Controlled set of expanded item values; pair with onValueChange."
+    },
+    {
+      name: "onValueChange",
+      type: "(value: Value[]) => void",
+      description: "Called with the new set of expanded item values when an item opens or closes."
+    },
+    {
+      name: "multiple",
+      type: "boolean",
+      default: "false",
+      description: "Whether more than one item can be open at the same time. When false, opening one closes the others."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "AccordionItem",
+      type: "Base UI Accordion.Item props + className (value, disabled, onOpenChange)",
+      description: "Pairs a header with its panel. Give each a stable `value` to control or set initial open state."
+    },
+    {
+      name: "AccordionTrigger",
+      type: "Base UI Accordion.Trigger props + className + indicator?: ReactNode",
+      description: "The header button (Header + Trigger composed). Renders children plus a chevron that rotates via data-[panel-open] by default; pass `indicator` to replace the icon and its open-state behavior entirely (e.g. a plus that becomes an \xD7 for a FAQ-style toggle)."
+    },
+    {
+      name: "AccordionPanel",
+      type: "Base UI Accordion.Panel props + className (keepMounted, hiddenUntilFound)",
+      description: "The collapsible body. Animates height using the --accordion-panel-height CSS var; fades on data-[starting-style]/data-[ending-style]."
+    }
+  ],
+  tokensUsed: ["border", "foreground", "muted-foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "An accordion is page furniture that is present from first paint. Animating it in would stage content the reader is already scanning past."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "AccordionTrigger",
+      why: "The whole header row is the hit target, and it looks like a heading rather than a control. The hover shift is what tells the reader it can be clicked before they click it."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-disclosure",
+      part: "AccordionPanel",
+      why: "Panel height is the only cue that content came from THIS header rather than appearing at the bottom of the page. Snapping it open moves everything below by a screenful with nothing connecting cause to effect."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Nothing here is indeterminate \u2014 the panel content is already resident. A panel that loads on expand should put its own loader inside the panel."
+    }
+  ],
+  a11y: [
+    "Base UI renders the trigger inside an <h3> heading and wires aria-expanded / aria-controls to the panel region.",
+    "Arrow keys move roving focus between triggers; Home/End jump to the first/last; loopFocus wraps by default.",
+    "Each trigger toggles its panel with Enter/Space; the panel is announced as a labelled region.",
+    "A disabled AccordionItem dims and is skipped by keyboard focus while neighbouring items stay interactive.",
+    "The chevron rotation is driven by data-[panel-open] and the focus ring by focus-visible \u2014 both honor reduced-motion via the consumer's transitions."
+  ],
+  examples: [
+    {
+      label: "Single (default)",
+      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>A one-time mint fee.</AccordionPanel></AccordionItem></Accordion>'
+    },
+    {
+      label: "Multiple open",
+      code: '<Accordion multiple defaultValue={["a", "b"]}><AccordionItem value="a"><AccordionTrigger>First</AccordionTrigger><AccordionPanel>One.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>Second</AccordionTrigger><AccordionPanel>Two.</AccordionPanel></AccordionItem></Accordion>'
+    },
+    {
+      label: "Custom indicator (plus-becomes-\xD7)",
+      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem></Accordion>'
+    }
+  ]
+};
+export {
+  accordionMeta
+};

package/dist/components/accordion/index.js

@@ -0,0 +1,15 @@
+// src/components/accordion/index.ts
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionPanel
+} from "./accordion.js";
+import { accordionMeta } from "./accordion.meta.js";
+export {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+  accordionMeta
+};

package/dist/components/app-header/app-header.js

@@ -0,0 +1,30 @@
+// src/components/app-header/app-header.tsx
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppHeader({
+  leading,
+  title,
+  actions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-(--z-nav) w-full border-b border-border bg-background pt-[env(safe-area-inset-top,0px)] lg:hidden",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid h-[var(--nav-height,56px)] grid-cols-[1fr_auto_1fr] items-center px-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start gap-(--control-gap)", children: leading }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-center text-title-lg", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-(--control-gap)", children: actions })
+      ] })
+    }
+  );
+}
+AppHeader.displayName = "AppHeader";
+export {
+  AppHeader
+};

package/dist/components/app-header/app-header.meta.js

@@ -0,0 +1,88 @@
+// src/components/app-header/app-header.meta.ts
+var appHeaderMeta = {
+  name: "AppHeader",
+  summary: "Mobile top bar (sticky, hidden at lg) with leading / title / actions slots on a 3-column grid that keeps the title optically centered. Grows into the top safe-area.",
+  status: "stable",
+  keywords: [
+    "app header",
+    "top bar",
+    "mobile header",
+    "chrome"
+  ],
+  usage: {
+    description: "Use AppHeader for compact application chrome at the top of a screen, usually with navigation, identity, and a small action set. Pass it to AppShell's `header` slot so screen content clears it on mobile (it is sticky and hides itself at lg).",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Keep the header actions narrow and predictable so the page title remains legible."
+      },
+      {
+        guidance: "do",
+        description: "Use it once per app view as chrome, not as repeated content inside page sections."
+      },
+      {
+        guidance: "dont",
+        description: "Do not overload it with filters, forms, or page-specific controls that belong in the content area."
+      },
+      {
+        guidance: "dont",
+        description: "Do not render more than one per app, or put a second one inside a route. It is sticky chrome, so two of them stack and permanently eat the top of the viewport."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "AppShell",
+      "PageHeader",
+      "BottomNav"
+    ]
+  },
+  props: [
+    {
+      name: "leading",
+      type: "ReactNode",
+      description: "Leading slot \u2014 back button, create action, or menu trigger."
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "Center slot \u2014 brand wordmark or contextual page title."
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "Trailing slot \u2014 wallet trigger, action buttons."
+    }
+  ],
+  a11y: [
+    "Renders a <header> landmark.",
+    "Pair with a leading control that has an accessible label (e.g. a BackButton)."
+  ],
+  tokensUsed: ["background", "border", "foreground"],
+  examples: [
+    {
+      label: "Contextual header",
+      code: '<AppHeader leading={<Button size="icon" variant="ghost" aria-label="Back"><Icon name="chevron-left" /></Button>} title="Notifications" />'
+    },
+    {
+      label: "Choosing between AppHeader and PageHeader",
+      code: `// AppHeader is APP chrome \u2014 it persists across routes and holds global
+// affordances (brand, search, account). One per app.
+<AppShell header={<AppHeader title="Studio" />}>
+  <Region max="content">Route content</Region>
+</AppShell>
+
+// PageHeader is CONTENT \u2014 it introduces the current route and scrolls away
+// with it. One per page, INSIDE the region.
+<Region max="content">
+  <PageHeader title="Billing" description="Plans, invoices, payment methods." />
+</Region>
+
+// \u2717 Putting route-specific actions in AppHeader. They then persist onto routes
+//   where they mean nothing, and the header becomes a dumping ground.`
+    }
+  ]
+};
+export {
+  appHeaderMeta
+};

package/dist/components/app-header/index.js

@@ -0,0 +1,7 @@
+// src/components/app-header/index.ts
+import { AppHeader } from "./app-header.js";
+import { appHeaderMeta } from "./app-header.meta.js";
+export {
+  AppHeader,
+  appHeaderMeta
+};

package/dist/components/app-shell/app-shell-dock.js

@@ -0,0 +1,37 @@
+"use client";
+
+// src/components/app-shell/app-shell-dock.tsx
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function AppShellDock({ aboveBottomNav, children }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const dock = ref.current;
+    const shell = dock?.parentElement;
+    if (!dock || !shell || typeof ResizeObserver === "undefined") return;
+    const publish = () => shell.style.setProperty("--dock-height", `${dock.offsetHeight}px`);
+    publish();
+    const observer = new ResizeObserver(publish);
+    observer.observe(dock);
+    return () => {
+      observer.disconnect();
+      shell.style.removeProperty("--dock-height");
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-app-shell-dock": "",
+      className: cn(
+        "sticky bottom-0 z-(--z-nav)",
+        aboveBottomNav && "bottom-[calc(var(--nav-height)+env(safe-area-inset-bottom,0px))] lg:bottom-0"
+      ),
+      children
+    }
+  );
+}
+export {
+  AppShellDock
+};

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,67 @@
+// src/components/app-shell/app-shell.tsx
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "../button/button.variants.js";
+import { AppShellDock } from "./app-shell-dock.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppShell({
+  banners,
+  header,
+  sidebar,
+  bottomNav,
+  dock,
+  overlays,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // `overflow-x-clip` (not `-hidden`) contains horizontal bleed WITHOUT
+        // establishing a scroll container — `-hidden` forces `overflow-y: auto`,
+        // which breaks `position: sticky` on a descendant Sidebar.
+        "flex min-h-screen flex-col overflow-x-clip bg-background text-foreground",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "#main-content",
+            className: cn(
+              buttonVariants({ variant: "primary", size: "sm" }),
+              "text-label-md sr-only focus:not-sr-only focus:fixed focus:start-2 focus:top-2 focus:z-(--z-skip-link)"
+            ),
+            children: "Skip to content"
+          }
+        ),
+        banners ? /* @__PURE__ */ jsx("div", { className: "relative z-(--z-nav)", children: banners }) : null,
+        header,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          sidebar,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              id: "main-content",
+              style: { containerType: "inline-size" },
+              className: cn(
+                "min-w-0 flex-1",
+                bottomNav && "pb-[calc(var(--nav-height)+env(safe-area-inset-bottom,0px))] lg:pb-0"
+              ),
+              children
+            }
+          )
+        ] }),
+        dock ? /* @__PURE__ */ jsx(AppShellDock, { aboveBottomNav: Boolean(bottomNav), children: dock }) : null,
+        bottomNav,
+        overlays
+      ]
+    }
+  );
+}
+AppShell.displayName = "AppShell";
+export {
+  AppShell
+};

package/dist/components/app-shell/app-shell.meta.js

@@ -0,0 +1,176 @@
+// src/components/app-shell/app-shell.meta.ts
+var appShellMeta = {
+  name: "AppShell",
+  summary: "The application frame: slots for status banners, a mobile header, a desktop sidebar, main content, a mobile bottom nav, a persistent dock (a now-playing or call bar), and floating overlays \u2014 plus a built-in skip link and #main-content target.",
+  keywords: [
+    "app shell",
+    "layout",
+    "frame",
+    "sidebar",
+    "header",
+    "bottom nav",
+    "mobile",
+    "banners",
+    "main",
+    "dock",
+    "player bar",
+    "now playing",
+    "persistent"
+  ],
+  usage: {
+    description: "Use AppShell as the outer product frame for authenticated or app-like experiences. It coordinates responsive chrome slots and guarantees a skip link plus main landmark; put route content inside the children and let AppHeader, Sidebar, BottomNav, and Banner own their own semantics.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use AppShell once around the route tree or major app area so the skip link and main landmark stay stable."
+      },
+      {
+        guidance: "do",
+        description: "Pass app-wide outage or status messages through banners so they remain above the frame."
+      },
+      {
+        guidance: "do",
+        description: "Use Region inside the main content to choose each route's reading width."
+      },
+      {
+        guidance: "do",
+        description: "Wrap EVERY return of a route in its own Page or Region \u2014 including early returns for loading, empty and error states. AppShell's <main> deliberately carries no padding (it is a frame, and padding belongs to the region that chose the width), so a route that returns a bare spinner or error renders flush against the chrome. This is the most common conversion bug: the happy path gets a Page, the three early returns do not."
+      },
+      {
+        guidance: "dont",
+        description: "Nest AppShell inside route cards or panels. It is page chrome, not local content."
+      },
+      {
+        guidance: "dont",
+        description: "Put desktop-only navigation in the mobile header slot or mobile-only controls in the sidebar slot."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Banners",
+        required: false,
+        description: "Full-width app status messages rendered above the shell."
+      },
+      {
+        name: "Header",
+        required: false,
+        description: "Mobile top chrome, usually AppHeader."
+      },
+      {
+        name: "Sidebar",
+        required: false,
+        description: "Desktop navigation chrome, usually Sidebar."
+      },
+      {
+        name: "Main",
+        required: true,
+        description: "The route content landmark with id main-content."
+      },
+      {
+        name: "Bottom nav",
+        required: false,
+        description: "Mobile fixed navigation with reserved bottom space."
+      },
+      {
+        name: "Dock",
+        required: false,
+        description: "Persistent bottom chrome that outlives routes \u2014 a now-playing bar, a call bar. Sticky above the bottom nav; the desktop Sidebar shortens to clear it."
+      }
+    ]
+  },
+  related: {
+    components: ["AppHeader", "Sidebar", "SideNav", "BottomNav", "Banner"],
+    patterns: ["DashboardPage", "FeedPage", "SettingsPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "banners",
+      type: "ReactNode",
+      description: "Full-width status banners pinned in flow above the frame (offline / chain-down)."
+    },
+    {
+      name: "header",
+      type: "ReactNode",
+      description: "Mobile top header (e.g. AppHeader); expected to hide itself at lg."
+    },
+    {
+      name: "sidebar",
+      type: "ReactNode",
+      description: "Desktop side navigation (e.g. Sidebar); expected to hide itself below lg. Leading column of the body row."
+    },
+    {
+      name: "bottomNav",
+      type: "ReactNode",
+      description: "Mobile bottom navigation (e.g. BottomNav); fixed to the bottom edge. main reserves space for it."
+    },
+    {
+      name: "dock",
+      type: "ReactNode",
+      description: 'Persistent chrome kept on screen across routes (a now-playing bar, an active-call bar, an upload tray). Full width, sticky to the bottom edge and above bottomNav on mobile; its height is published as --dock-height and the app Sidebar subtracts it. In flow, so main needs no reserved space. The contents paint their own surface and top border, and name themselves (e.g. <section aria-label="Player">). Mount AppShell in a layout that survives navigation, or the playback restarts.'
+    },
+    {
+      name: "overlays",
+      type: "ReactNode",
+      description: "Floating overlays \u2014 a message launcher, FAB, or modal mount points."
+    }
+  ],
+  a11y: [
+    "Renders a skip link to #main-content as the first focusable element.",
+    'Wraps content in a <main id="main-content"> landmark.',
+    "Slot components own their own ARIA (nav landmarks, labels).",
+    "The dock follows <main> in DOM order, so keyboard and screen-reader users reach the player after the page content, not before it."
+  ],
+  tokensUsed: ["background", "foreground", "primary", "primary-foreground"],
+  examples: [
+    {
+      label: "Full frame",
+      code: `<AppShell
+  banners={<Banner tone="warning">Network congested \u2014 mints may be slow.</Banner>}
+  header={<AppHeader title="Studio" />}
+  sidebar={
+    <Sidebar>
+      <SidebarNav>
+        <SidebarItem icon={<Icon name="home" />} label="Home" active render={<Link to="/" />} />
+        <SidebarItem icon={<Icon name="bell" />} label="Notifications" render={<Link to="/notifications" />} />
+        <SidebarItem icon={<Icon name="gear" />} label="Settings" render={<Link to="/settings" />} />
+      </SidebarNav>
+    </Sidebar>
+  }
+  bottomNav={
+    <BottomNav>
+      <BottomNavItem icon={<Icon name="home" />} label="Home" active render={<Link to="/" />} />
+      <BottomNavItem icon={<Icon name="bell" />} label="Alerts" render={<Link to="/notifications" />} />
+    </BottomNav>
+  }
+>
+  <Region max="feed">
+    <PageHeader title="Home" description="Latest posts from artists you follow." />
+  </Region>
+</AppShell>`
+    },
+    {
+      label: "Minimal (sidebar + content only)",
+      code: `<AppShell
+  sidebar={
+    <Sidebar>
+      <SidebarNav>
+        <SidebarItem icon={<Icon name="home" />} label="Dashboard" active render={<Link to="/" />} />
+      </SidebarNav>
+    </Sidebar>
+  }
+>
+  <Region max="wide">
+    <PageHeader title="Dashboard" />
+  </Region>
+</AppShell>`
+    },
+    {
+      label: "Route content width",
+      code: '<AppShell sidebar={<Sidebar><SidebarNav><SidebarItem icon={<Icon name="home" />} label="Home" active /></SidebarNav></Sidebar>}><Region max="content"><PageHeader title="Settings" description="Manage account and workspace preferences." /><Card><CardHeader><CardTitle>Profile</CardTitle></CardHeader><CardContent><Field label="Display name"><Input defaultValue="Nova" /></Field></CardContent></Card></Region></AppShell>'
+    }
+  ]
+};
+export {
+  appShellMeta
+};

package/dist/components/app-shell/index.js

@@ -0,0 +1,7 @@
+// src/components/app-shell/index.ts
+import { AppShell } from "./app-shell.js";
+import { appShellMeta } from "./app-shell.meta.js";
+export {
+  AppShell,
+  appShellMeta
+};

package/dist/components/area-chart/area-chart.js

@@ -0,0 +1,10 @@
+// src/components/area-chart/area-chart.tsx
+import { CartesianChart } from "../../lib/chart/cartesian.js";
+import { jsx } from "react/jsx-runtime";
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "area", ...props });
+}
+AreaChart.displayName = "AreaChart";
+export {
+  AreaChart
+};