@spaceinvoices/react-ui 0.1.1

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/ui/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted rounded-md animate-pulse", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/sonner.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+// Try to use next-themes if available, otherwise fall back to system theme
+let useTheme: () => { theme?: string } = () => ({ theme: "system" })
+try {
+  // Dynamic import to avoid hard dependency on next-themes
+  const nextThemes = require("next-themes")
+  if (nextThemes?.useTheme) {
+    useTheme = nextThemes.useTheme
+  }
+} catch {
+  // next-themes not available, use fallback
+}
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/ui/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }

package/src/components/ui/sticky-form-footer.tsx

@@ -0,0 +1,55 @@
+import { Button } from "@/ui/components/ui/button";
+import ButtonLoader from "../button-loader";
+import { cn } from "@/ui/lib/utils";
+
+type SecondaryAction = {
+  label: string;
+  onClick: () => void;
+  isPending?: boolean;
+};
+
+type StickyFormFooterProps = {
+  formId: string;
+  isPending: boolean;
+  isDirty: boolean;
+  label: string;
+  onSubmit?: () => void;
+  secondaryAction?: SecondaryAction;
+  className?: string;
+};
+
+export function StickyFormFooter({
+  formId,
+  isPending,
+  isDirty,
+  label,
+  onSubmit,
+  secondaryAction,
+  className,
+}: StickyFormFooterProps) {
+  // If onSubmit is provided, use onClick, otherwise use form attribute for native form submission
+  const buttonProps = onSubmit
+    ? { type: "button" as const, onClick: onSubmit }
+    : { type: "submit" as const, form: formId };
+
+  return (
+    <div className={cn("sticky bottom-0 z-10 border-t bg-sidebar px-4 py-3", className)}>
+      <div className="flex gap-2">
+        <Button {...buttonProps} className="cursor-pointer px-8" disabled={isPending || !isDirty}>
+          {isPending ? <ButtonLoader /> : label}
+        </Button>
+        {secondaryAction && (
+          <Button
+            type="button"
+            variant="outline"
+            className="cursor-pointer px-8"
+            disabled={secondaryAction.isPending || !isDirty}
+            onClick={secondaryAction.onClick}
+          >
+            {secondaryAction.isPending ? <ButtonLoader /> : secondaryAction.label}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/ui/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/table.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/ui/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/ui/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] w-full group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground flex items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:w-fit",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("text-sm flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/ui/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/ui/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  asChild,
+  children,
+  ...props
+}: TooltipPrimitive.Trigger.Props & { asChild?: boolean }) {
+  // Base UI uses render prop instead of asChild
+  if (asChild && React.isValidElement(children)) {
+    return (
+      <TooltipPrimitive.Trigger
+        data-slot="tooltip-trigger"
+        render={children}
+        {...props}
+      />
+    )
+  }
+  return (
+    <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}>
+      {children}
+    </TooltipPrimitive.Trigger>
+  )
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-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 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/wl-subscription/index.ts

@@ -0,0 +1,2 @@
+export { LockedBadge, LockedFeature, UsageBadge } from "./locked-feature";
+export { UpgradeModal } from "./upgrade-modal";

package/src/components/wl-subscription/locked-feature.tsx

@@ -0,0 +1,173 @@
+import { Lock } from "lucide-react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { type GatedFeature, useWLSubscriptionOptional } from "../../providers/wl-subscription-provider";
+import { UpgradeModal } from "./upgrade-modal";
+
+type LockedFeatureProps = {
+  /** Feature slug to check access for */
+  feature: GatedFeature;
+  /** Content to render when feature is unlocked */
+  children: ReactNode;
+  /** Optional custom locked message */
+  lockedMessage?: string;
+  /** Whether to show the upgrade modal on click (default: true) */
+  showUpgradeModal?: boolean;
+  /** Custom render for locked state */
+  lockedRender?: () => ReactNode;
+};
+
+/**
+ * LockedFeature wrapper component
+ *
+ * Wraps content that requires a specific subscription feature.
+ * Shows a locked overlay with upgrade prompt if feature is not available.
+ *
+ * @example
+ * <LockedFeature feature="furs">
+ *   <FursSettingsPage />
+ * </LockedFeature>
+ */
+export function LockedFeature({
+  feature,
+  children,
+  lockedMessage,
+  showUpgradeModal = true,
+  lockedRender,
+}: LockedFeatureProps) {
+  const subscription = useWLSubscriptionOptional();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // If no subscription context, feature is unlocked (Space Invoices)
+  if (!subscription) {
+    return <>{children}</>;
+  }
+
+  const hasFeature = subscription.hasFeature(feature);
+
+  // Feature is available, render children
+  if (hasFeature) {
+    return <>{children}</>;
+  }
+
+  // Feature is locked - show locked state
+  const handleClick = () => {
+    if (showUpgradeModal) {
+      setIsModalOpen(true);
+    }
+  };
+
+  // Custom locked render
+  if (lockedRender) {
+    return (
+      <>
+        <button type="button" className="w-full text-left" onClick={handleClick}>
+          {lockedRender()}
+        </button>
+        {showUpgradeModal && (
+          <UpgradeModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} feature={feature} />
+        )}
+      </>
+    );
+  }
+
+  // Default locked state
+  return (
+    <>
+      <button type="button" className="relative w-full cursor-pointer" onClick={handleClick}>
+        {/* Blurred content */}
+        <div className="pointer-events-none select-none opacity-50 blur-sm">{children}</div>
+
+        {/* Lock overlay */}
+        <div className="absolute inset-0 flex items-center justify-center bg-background/60">
+          <div className="flex flex-col items-center gap-2 p-4 text-center">
+            <div className="rounded-full bg-muted p-3">
+              <Lock className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <p className="font-medium text-muted-foreground text-sm">
+              {lockedMessage || getDefaultLockedMessage(feature)}
+            </p>
+            <p className="text-muted-foreground text-xs">Click to upgrade</p>
+          </div>
+        </div>
+      </button>
+
+      {showUpgradeModal && (
+        <UpgradeModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} feature={feature} />
+      )}
+    </>
+  );
+}
+
+/**
+ * LockedBadge component for sidebar items
+ * Shows a small lock icon next to locked features
+ */
+export function LockedBadge({ feature }: { feature: GatedFeature }) {
+  const subscription = useWLSubscriptionOptional();
+
+  // No subscription context or has feature = no badge
+  if (!subscription || subscription.hasFeature(feature)) {
+    return null;
+  }
+
+  return (
+    <span className="ml-auto">
+      <Lock className="h-3.5 w-3.5 text-muted-foreground" />
+    </span>
+  );
+}
+
+/**
+ * UsageBadge component showing document usage percentage
+ * For displaying in settings or dashboard
+ */
+export function UsageBadge() {
+  const subscription = useWLSubscriptionOptional();
+
+  if (!subscription) return null;
+
+  const percentage = subscription.getUsagePercentage("documents");
+  const { usage, plan } = subscription;
+
+  if (!plan || !usage) return null;
+
+  if (plan.limits?.documents_per_month === null) {
+    return null; // Unlimited - no badge needed
+  }
+
+  const limit = plan.limits?.documents_per_month ?? 0;
+  const isNearLimit = percentage >= 80;
+  const isAtLimit = percentage >= 100;
+
+  return (
+    <div
+      className={`rounded-full px-2 py-1 text-xs ${
+        isAtLimit
+          ? "bg-destructive/10 text-destructive"
+          : isNearLimit
+            ? "bg-warning/10 text-warning"
+            : "bg-muted text-muted-foreground"
+      }`}
+    >
+      {usage.documents_count}/{limit} docs
+    </div>
+  );
+}
+
+// Helper to get default locked message for a feature
+function getDefaultLockedMessage(feature: GatedFeature): string {
+  const messages: Record<GatedFeature, string> = {
+    furs: "FURS fiscalization requires a Starter or Advanced plan",
+    eslog: "eSlog export requires a Starter or Advanced plan",
+    recurring: "Recurring invoices require a Starter or Advanced plan",
+    email_sending: "Email sending requires a Starter or Advanced plan",
+    custom_templates: "Custom templates require an Advanced plan",
+    api_access: "API access requires an Advanced plan",
+    webhooks: "Webhooks require an Advanced plan",
+    priority_support: "Priority support requires an Advanced plan",
+  };
+
+  return messages[feature] || "This feature requires a plan upgrade";
+}