@spacesync/client 0.1.0

package/dist/app-shell-mobile-nav.js

@@ -0,0 +1,122 @@
+import { Menu } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { Drawer as Drawer$1 } from 'vaul';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Drawer({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function useAppShellMobileNav(pathname) {
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [pathname]);
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 768px)");
+    const closeIfDesktop = () => {
+      if (mq.matches) setMobileNavOpen(false);
+    };
+    mq.addEventListener("change", closeIfDesktop);
+    closeIfDesktop();
+    return () => mq.removeEventListener("change", closeIfDesktop);
+  }, []);
+  return { mobileNavOpen, setMobileNavOpen };
+}
+function AppShellMobileNav({
+  open,
+  onOpenChange,
+  drawerHeader,
+  drawerNav,
+  drawerTitle = "Menu"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "gap-0 border-sidebar-border bg-sidebar px-0 pt-0 pb-[max(1rem,env(safe-area-inset-bottom))] text-sidebar-foreground", children: [
+      /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: drawerTitle }),
+      /* @__PURE__ */ jsxs("div", { className: "flex max-h-[min(85vh,calc(100dvh-3rem))] min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 space-y-3 border-b border-sidebar-border bg-sidebar px-4 pt-2 pb-4", children: drawerHeader }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-2", children: drawerNav })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "fixed z-40 flex size-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg ring-1 ring-black/5 transition-colors hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 md:hidden",
+        style: {
+          bottom: "max(1rem, env(safe-area-inset-bottom))",
+          right: "max(1rem, env(safe-area-inset-right))"
+        },
+        "aria-label": "Open navigation",
+        "aria-expanded": open,
+        onClick: () => onOpenChange(true),
+        children: /* @__PURE__ */ jsx(Menu, { size: 26, strokeWidth: 2.25, "aria-hidden": true })
+      }
+    )
+  ] });
+}
+
+export { AppShellMobileNav, useAppShellMobileNav };
+//# sourceMappingURL=app-shell-mobile-nav.js.map
+//# sourceMappingURL=app-shell-mobile-nav.js.map

package/dist/app-shell-mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/utils.ts","../src/ui/drawer.tsx","../src/shell/app-shell-mobile-nav.tsx"],"names":["DrawerPrimitive","jsxs","jsx"],"mappings":"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","file":"app-shell-mobile-nav.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"./utils\";\n\nfunction Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n","\"use client\";\n\nimport { Menu } from \"lucide-react\";\nimport { useEffect, useState, type ReactNode } from \"react\";\nimport { Drawer, DrawerContent, DrawerTitle } from \"../ui/drawer\";\n\n/**\n * Closes the mobile nav drawer on route change and when crossing the `md` breakpoint upward.\n * Pass `location.pathname` from React Router (or any stable route key).\n */\nexport function useAppShellMobileNav(pathname: string) {\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n\n  useEffect(() => {\n    setMobileNavOpen(false);\n  }, [pathname]);\n\n  useEffect(() => {\n    const mq = window.matchMedia(\"(min-width: 768px)\");\n    const closeIfDesktop = () => {\n      if (mq.matches) setMobileNavOpen(false);\n    };\n    mq.addEventListener(\"change\", closeIfDesktop);\n    closeIfDesktop();\n    return () => mq.removeEventListener(\"change\", closeIfDesktop);\n  }, []);\n\n  return { mobileNavOpen, setMobileNavOpen };\n}\n\nexport type AppShellMobileNavProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Top block inside the drawer (brand, workspace controls, sign out, etc.). */\n  drawerHeader: ReactNode;\n  /** Scrollable navigation — usually the same content as `AppWebShell`’s `sidebar`. */\n  drawerNav: ReactNode;\n  /** Accessible name for the drawer (visually hidden). */\n  drawerTitle?: string;\n};\n\n/**\n * Bottom drawer + FAB used with {@link AppWebShell} on viewports below `md`\n * (sidebar and top bar hidden; main is full-bleed white).\n */\nexport function AppShellMobileNav({\n  open,\n  onOpenChange,\n  drawerHeader,\n  drawerNav,\n  drawerTitle = \"Menu\",\n}: AppShellMobileNavProps) {\n  return (\n    <>\n      <Drawer open={open} onOpenChange={onOpenChange}>\n        <DrawerContent className=\"gap-0 border-sidebar-border bg-sidebar px-0 pt-0 pb-[max(1rem,env(safe-area-inset-bottom))] text-sidebar-foreground\">\n          <DrawerTitle className=\"sr-only\">{drawerTitle}</DrawerTitle>\n          <div className=\"flex max-h-[min(85vh,calc(100dvh-3rem))] min-h-0 flex-col\">\n            <div className=\"shrink-0 space-y-3 border-b border-sidebar-border bg-sidebar px-4 pt-2 pb-4\">\n              {drawerHeader}\n            </div>\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-2\">{drawerNav}</div>\n          </div>\n        </DrawerContent>\n      </Drawer>\n\n      <button\n        type=\"button\"\n        className=\"fixed z-40 flex size-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg ring-1 ring-black/5 transition-colors hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 md:hidden\"\n        style={{\n          bottom: \"max(1rem, env(safe-area-inset-bottom))\",\n          right: \"max(1rem, env(safe-area-inset-right))\",\n        }}\n        aria-label=\"Open navigation\"\n        aria-expanded={open}\n        onClick={() => onOpenChange(true)}\n      >\n        <Menu size={26} strokeWidth={2.25} aria-hidden />\n      </button>\n    </>\n  );\n}\n"]}

package/dist/app-web-shell.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type AppWebShellProps = {
+    /** Full-width bar above the sidebar + main row (e.g. brand, account actions). */
+    topBar?: ReactNode;
+    /** Left navigation column. */
+    sidebar: ReactNode;
+    /** Collapses the desktop sidebar to an icon rail. */
+    sidebarCollapsed?: boolean;
+    /** Routed page content — typically a card area on desktop. */
+    children: ReactNode;
+};
+/**
+ * Shared app chrome: outer shell + sidebar, optional top bar, and inset main on desktop.
+ * Keeps operator / member (and future web apps) visually aligned.
+ */
+declare function AppWebShell({ topBar, sidebar, sidebarCollapsed, children, }: AppWebShellProps): react_jsx_runtime.JSX.Element;
+
+export { AppWebShell, type AppWebShellProps };

package/dist/app-web-shell.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/shell/app-web-shell.tsx
+function getShellTheme() {
+  return "light";
+}
+function AppWebShell({
+  topBar,
+  sidebar,
+  sidebarCollapsed = true,
+  children
+}) {
+  const shellTheme = getShellTheme();
+  useEffect(() => {
+    document.documentElement.dataset.shellTheme = shellTheme;
+    return () => {
+      delete document.documentElement.dataset.shellTheme;
+    };
+  }, [shellTheme]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-shell-theme": shellTheme,
+      className: "flex h-screen w-screen flex-col overflow-hidden bg-background md:bg-sidebar",
+      children: [
+        topBar != null ? /* @__PURE__ */ jsx("header", { className: "z-10 hidden h-11 shrink-0 items-center justify-between bg-sidebar px-4 text-sidebar-foreground md:flex", children: topBar }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "aside",
+            {
+              className: `hidden h-full min-h-0 shrink-0 flex-col bg-sidebar py-2.5 text-sidebar-foreground transition-[width] duration-200 md:flex ${sidebarCollapsed ? "w-16" : "w-[14.4rem]"}`,
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: sidebar })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-0 min-w-0 flex-1 p-0 md:pr-2.5 md:pb-2.5", children: /* @__PURE__ */ jsx("main", { className: "flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden rounded-none border-0 bg-card md:rounded-2xl md:border md:border-border", children }) })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AppWebShell };
+//# sourceMappingURL=app-web-shell.js.map
+//# sourceMappingURL=app-web-shell.js.map

package/dist/app-web-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/shell-theme.ts","../src/shell/app-web-shell.tsx"],"names":[],"mappings":";;;;AAKO,SAAS,aAAA,GAA4B;AAC1C,EAAA,OAAuC,OAAA;AACzC;ACWO,SAAS,WAAA,CAAY;AAAA,EAC1B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA,GAAmB,IAAA;AAAA,EACnB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,eAAA,CAAgB,QAAQ,UAAA,GAAa,UAAA;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,OAAO,QAAA,CAAS,gBAAgB,OAAA,CAAQ,UAAA;AAAA,IAC1C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,kBAAA,EAAkB,UAAA;AAAA,MAClB,SAAA,EAAU,6EAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,MAAA,IAAU,uBACT,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,wGAAA,EACf,kBACH,CAAA,GACE,IAAA;AAAA,wBAEJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAA,0HAAA,EACT,gBAAA,GAAmB,MAAA,GAAS,aAC9B,CAAA,CAAA;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EAAuC,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA,WAChE;AAAA,0BAEA,GAAA,CAAC,SAAI,SAAA,EAAU,qDAAA,EACb,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qIAAA,EACb,QAAA,EACH,CAAA,EACF;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"app-web-shell.js","sourcesContent":["/** Flip to compare light vs dark outer shell with the team. */\nexport const SHELL_USE_DARK_THEME = false;\n\nexport type ShellTheme = \"light\" | \"dark\";\n\nexport function getShellTheme(): ShellTheme {\n  return SHELL_USE_DARK_THEME ? \"dark\" : \"light\";\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { getShellTheme } from \"../theme/shell-theme\";\n\nexport type AppWebShellProps = {\n  /** Full-width bar above the sidebar + main row (e.g. brand, account actions). */\n  topBar?: ReactNode;\n  /** Left navigation column. */\n  sidebar: ReactNode;\n  /** Collapses the desktop sidebar to an icon rail. */\n  sidebarCollapsed?: boolean;\n  /** Routed page content — typically a card area on desktop. */\n  children: ReactNode;\n};\n\n/**\n * Shared app chrome: outer shell + sidebar, optional top bar, and inset main on desktop.\n * Keeps operator / member (and future web apps) visually aligned.\n */\nexport function AppWebShell({\n  topBar,\n  sidebar,\n  sidebarCollapsed = true,\n  children,\n}: AppWebShellProps) {\n  const shellTheme = getShellTheme();\n\n  useEffect(() => {\n    document.documentElement.dataset.shellTheme = shellTheme;\n    return () => {\n      delete document.documentElement.dataset.shellTheme;\n    };\n  }, [shellTheme]);\n\n  return (\n    <div\n      data-shell-theme={shellTheme}\n      className=\"flex h-screen w-screen flex-col overflow-hidden bg-background md:bg-sidebar\"\n    >\n      {topBar != null ? (\n        <header className=\"z-10 hidden h-11 shrink-0 items-center justify-between bg-sidebar px-4 text-sidebar-foreground md:flex\">\n          {topBar}\n        </header>\n      ) : null}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1\">\n        <aside\n          className={`hidden h-full min-h-0 shrink-0 flex-col bg-sidebar py-2.5 text-sidebar-foreground transition-[width] duration-200 md:flex ${\n            sidebarCollapsed ? \"w-16\" : \"w-[14.4rem]\"\n          }`}\n        >\n          <div className=\"flex min-h-0 w-full flex-1 flex-col\">{sidebar}</div>\n        </aside>\n\n        <div className=\"flex min-h-0 min-w-0 flex-1 p-0 md:pr-2.5 md:pb-2.5\">\n          <main className=\"flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden rounded-none border-0 bg-card md:rounded-2xl md:border md:border-border\">\n            {children}\n          </main>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/booking-schedule-calendars.d.ts

@@ -0,0 +1,95 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Date / schedule helpers used by booking-schedule calendars.
+ * Copied from `@spacesync/client/domain/lib/pricing` so the client has no package dependency.
+ */
+type RepeatType = "none" | "daily" | "weekly" | "monthly";
+type BookingMode = "slots" | "schedule";
+/** Editor state for slot / schedule / daily / item shaped tiers */
+interface BookingState {
+    slotCount: number;
+    bookingDate: string;
+    bookingMode: BookingMode;
+    scheduleDate: string;
+    scheduleTime: string;
+    repeatType: RepeatType;
+    repeatEveryDays: number;
+    repeatEveryWeeks: number;
+    repeatOnDays: string[];
+    repeatEveryMonths: number;
+    repeatUntilDate: string;
+    startDate: string;
+    endDate: string;
+    monthFrom: string;
+    monthTo: string;
+    weekFrom: string;
+    weekCount: number;
+    itemQuantity: number;
+    /** Daily per-day tiers: single-day booking when true (endDate = startDate + 1 day). */
+    oneDayBooking?: boolean;
+}
+
+declare function ScheduleFieldLabel({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function ScheduleInfoBanner({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function ScheduleStepper({ value, min, max, onChange, }: {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange: (v: number) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function WeekCalendarPicker({ weekFrom, onChange, flat, }: {
+    weekFrom: string;
+    onChange: (v: string) => void;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function MonthRangeCalendar({ monthFrom, monthTo, onChange, flat, }: {
+    monthFrom: string;
+    monthTo: string;
+    onChange: (from: string, to: string) => void;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function MonthPeriodPicker({ booking, onChange, flat, }: {
+    booking: BookingState;
+    onChange: (patch: Partial<BookingState>) => void;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function WeekPeriodPicker({ booking, onChange, flat, }: {
+    booking: BookingState;
+    onChange: (patch: Partial<BookingState>) => void;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DayCalendarPicker({ selectedDate, onChange, minDate, flat, }: {
+    selectedDate: string;
+    onChange: (date: string) => void;
+    minDate?: string;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DayRangeCalendar({ startDate, endDate, onChange, minDate, flat, }: {
+    startDate: string;
+    endDate: string;
+    onChange: (start: string, end: string) => void;
+    minDate?: string;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DayPeriodPicker({ booking, onChange, flat, }: {
+    booking: BookingState;
+    onChange: (patch: Partial<BookingState>) => void;
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HourlySchedulePicker({ scheduleDate, scheduleTime, onChange, timeFormat, flat, }: {
+    scheduleDate: string;
+    scheduleTime: string;
+    onChange: (patch: {
+        scheduleDate?: string;
+        scheduleTime?: string;
+    }) => void;
+    timeFormat?: "12h" | "24h";
+    flat?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { DayCalendarPicker, DayPeriodPicker, DayRangeCalendar, HourlySchedulePicker, MonthPeriodPicker, MonthRangeCalendar, ScheduleFieldLabel, ScheduleInfoBanner, ScheduleStepper, WeekCalendarPicker, WeekPeriodPicker };