@snapdragonsnursery/react-components 1.7.0 → 1.8.0

package/src/components/ui/tooltip.jsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
+}
+
+function Tooltip({
+  ...props
+}) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow
+          className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/use-current-site.js

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+export const SITE_STORAGE_KEY = "current_site_id"
+export const SITE_EVENT_NAME = "siteChanged"
+
+export function readCurrentSiteId(storageKey = SITE_STORAGE_KEY) {
+  if (typeof window === "undefined") return null
+  try {
+    const v = window.localStorage.getItem(storageKey)
+    if (v == null) return null
+    const n = Number(v)
+    return Number.isNaN(n) ? v : n
+  } catch {
+    return null
+  }
+}
+
+export function writeCurrentSiteId(siteId, storageKey = SITE_STORAGE_KEY) {
+  if (typeof window === "undefined") return
+  try {
+    if (siteId == null) {
+      window.localStorage.removeItem(storageKey)
+    } else {
+      window.localStorage.setItem(storageKey, String(siteId))
+    }
+  } catch {}
+
+  try {
+    const numeric = typeof siteId === "number" ? siteId : Number(siteId)
+    const detail = { siteId: Number.isFinite(numeric) ? numeric : siteId }
+    window.dispatchEvent(new CustomEvent(SITE_EVENT_NAME, { detail }))
+  } catch {}
+}
+
+export function useCurrentSiteId({ storageKey = SITE_STORAGE_KEY, eventName = SITE_EVENT_NAME } = {}) {
+  const [currentSiteId, setCurrentSiteId] = React.useState(null)
+
+  React.useEffect(() => {
+    // Initialize from storage on mount
+    const initial = readCurrentSiteId(storageKey)
+    setCurrentSiteId(initial)
+
+    // Listen for global site changes
+    const handler = (e) => {
+      try {
+        const id = e?.detail?.siteId
+        if (typeof id !== "undefined") setCurrentSiteId(id)
+      } catch {}
+    }
+    window.addEventListener(eventName, handler)
+    return () => window.removeEventListener(eventName, handler)
+  }, [storageKey, eventName])
+
+  const update = React.useCallback((id) => {
+    setCurrentSiteId(id)
+    writeCurrentSiteId(id, storageKey)
+  }, [storageKey])
+
+  return [currentSiteId, update]
+}
+

package/src/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}

package/src/index.css

@@ -1,4 +1,6 @@
 @tailwind base;
+
+@custom-variant dark (&:is(.dark *));
 @tailwind components;
 @tailwind utilities;
 
@@ -56,4 +58,46 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+:root {
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 } 

package/src/index.d.ts

@@ -65,3 +65,70 @@ export const StatCard: React.ComponentType<StatCardProps>
 export function configureTelemetry(...args: any[]): any
 
 
+// Sidebar + UI exports
+export const AppSidebar: React.ComponentType<any>
+export const Sidebar: React.ComponentType<any>
+export const SidebarContent: React.ComponentType<any>
+export const SidebarFooter: React.ComponentType<any>
+export const SidebarGroup: React.ComponentType<any>
+export const SidebarGroupAction: React.ComponentType<any>
+export const SidebarGroupContent: React.ComponentType<any>
+export const SidebarGroupLabel: React.ComponentType<any>
+export const SidebarHeader: React.ComponentType<any>
+export const SidebarInput: React.ComponentType<any>
+export const SidebarInset: React.ComponentType<any>
+export const SidebarMenu: React.ComponentType<any>
+export const SidebarMenuAction: React.ComponentType<any>
+export const SidebarMenuBadge: React.ComponentType<any>
+export const SidebarMenuButton: React.ComponentType<any>
+export const SidebarMenuItem: React.ComponentType<any>
+export const SidebarMenuSkeleton: React.ComponentType<any>
+export const SidebarMenuSub: React.ComponentType<any>
+export const SidebarMenuSubButton: React.ComponentType<any>
+export const SidebarMenuSubItem: React.ComponentType<any>
+export const SidebarProvider: React.ComponentType<any>
+export const SidebarRail: React.ComponentType<any>
+export const SidebarSeparator: React.ComponentType<any>
+export const SidebarTrigger: React.ComponentType<any>
+export function useSidebar(): any
+
+export const Separator: React.ComponentType<any>
+export const Breadcrumb: React.ComponentType<any>
+export const BreadcrumbItem: React.ComponentType<any>
+export const BreadcrumbLink: React.ComponentType<any>
+export const BreadcrumbList: React.ComponentType<any>
+export const BreadcrumbPage: React.ComponentType<any>
+export const BreadcrumbSeparator: React.ComponentType<any>
+export const BreadcrumbEllipsis: React.ComponentType<any>
+
+// Switchers
+export interface SwitcherItem {
+  id?: string | number
+  name: string
+  icon?: React.ComponentType<any>
+  logo?: React.ComponentType<any>
+}
+export interface SiteSwitcherProps {
+  items?: SwitcherItem[]
+  activeId?: string | number
+  onChange?: (item: SwitcherItem) => void
+  label?: string
+  isLoading?: boolean
+}
+export interface RoomSwitcherProps {
+  items?: SwitcherItem[]
+  activeId?: string | number
+  onChange?: (item: SwitcherItem) => void
+  label?: string
+  isLoading?: boolean
+  baseColor?: string
+}
+export const SiteSwitcher: React.ComponentType<SiteSwitcherProps>
+export const RoomSwitcher: React.ComponentType<RoomSwitcherProps>
+
+// Site selection helpers
+export const SITE_STORAGE_KEY: string
+export const SITE_EVENT_NAME: string
+export function readCurrentSiteId(storageKey?: string): string | number | null
+export function writeCurrentSiteId(siteId: string | number | null, storageKey?: string): void
+export function useCurrentSiteId(options?: { storageKey?: string; eventName?: string }): [string | number | null, (id: string | number | null) => void]

package/src/index.js

@@ -26,3 +26,51 @@ export { SimpleCalendar } from "./components/ui/simple-calendar.jsx";
 export { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover.jsx";
 export { default as SoftWarningAlert } from "./components/ui/soft-warning-alert.jsx";
 export { default as StatCard } from "./components/ui/stat-card.jsx";
+
+// Shadcn Sidebar + related UI
+export { AppSidebar } from "./components/app-sidebar.jsx";
+export { SiteSwitcher } from "./components/site-switcher.jsx";
+export { RoomSwitcher } from "./components/room-switcher.jsx";
+export {
+  useCurrentSiteId,
+  readCurrentSiteId,
+  writeCurrentSiteId,
+  SITE_STORAGE_KEY,
+  SITE_EVENT_NAME,
+} from "./hooks/use-current-site.js";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from "./components/ui/sidebar.jsx";
+export { Separator } from "./components/ui/separator.jsx";
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./components/ui/breadcrumb.jsx";