@tangle-network/ui 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 1.0.1
+
+### Patch Changes
+
+- 0db7afc: Expose `ThemeToggle` and `useTheme` from `@tangle-network/ui/primitives`. The component and hook were bulk-imported in `1.0.0` but never wired into `primitives/index.ts`, leaving them inaccessible to consumers.
+
 ## 1.0.0
 
 ### Minor Changes

package/dist/{chunk-LISXUB4D.js → chunk-XY2FP763.js}

@@ -1175,6 +1175,91 @@ function SidebarDropZone({
   );
 }
 
+// src/primitives/theme-toggle.tsx
+import { useCallback as useCallback4, useEffect as useEffect2, useState as useState5 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyTheme(theme) {
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+function useTheme() {
+  const [theme, setThemeState] = useState5(() => {
+    if (typeof window === "undefined") return "system";
+    return localStorage.getItem("theme") ?? "system";
+  });
+  const setTheme = useCallback4((next) => {
+    setThemeState(next);
+    if (next === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", next);
+    }
+    applyTheme(next);
+  }, []);
+  useEffect2(() => {
+    applyTheme(theme);
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme("system");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  return { theme, setTheme };
+}
+var iconClass = "h-4 w-4";
+function SunIcon() {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: [
+        /* @__PURE__ */ jsx16("circle", { cx: 12, cy: 12, r: 5 }),
+        /* @__PURE__ */ jsx16("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: /* @__PURE__ */ jsx16("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  return /* @__PURE__ */ jsx16(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(resolved === "dark" ? "light" : "dark"),
+      className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+      "aria-label": `Switch to ${resolved === "dark" ? "light" : "dark"} mode`,
+      children: resolved === "dark" ? /* @__PURE__ */ jsx16(SunIcon, {}) : /* @__PURE__ */ jsx16(MoonIcon, {})
+    }
+  );
+}
+
 export {
   Dialog,
   DialogTrigger,
@@ -1217,6 +1302,8 @@ export {
   DropZone,
   UploadProgress,
   SidebarDropZone,
+  useTheme,
+  ThemeToggle,
   Logo,
   TangleKnot
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';

package/dist/index.js

@@ -103,11 +103,13 @@ import {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
+  useTheme,
   useToast
-} from "./chunk-LISXUB4D.js";
+} from "./chunk-XY2FP763.js";
 import {
   Avatar,
   AvatarFallback,
@@ -362,6 +364,7 @@ export {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ThinkingIndicator,
   TiptapEditor,
   ToastContainer,
@@ -439,6 +442,7 @@ export {
   useSSEStream,
   useSdkSession,
   useSessionsByActivity,
+  useTheme,
   useToast,
   useToolCallStream,
   useTotalRunningSessions,

package/dist/primitives.d.ts

@@ -329,4 +329,11 @@ interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare function InlineCode({ className, children, ...props }: InlineCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useToast };
+type Theme = "light" | "dark" | "system";
+declare function useTheme(): {
+    theme: Theme;
+    setTheme: (next: Theme) => void;
+};
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };

package/dist/primitives.js

@@ -38,11 +38,13 @@ import {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
+  useTheme,
   useToast
-} from "./chunk-LISXUB4D.js";
+} from "./chunk-XY2FP763.js";
 import {
   Avatar,
   AvatarFallback,
@@ -182,10 +184,12 @@ export {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
   badgeVariants,
   buttonVariants,
+  useTheme,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/index.ts

@@ -116,3 +116,5 @@ export type { ArtifactPaneProps } from "./artifact-pane";
 
 export { CodeBlock, CopyButton, InlineCode } from "./code-block";
 export type { CodeBlockProps, InlineCodeProps } from "./code-block";
+
+export { ThemeToggle, useTheme } from "./theme-toggle";