@neynar/ui 0.3.1 → 0.5.0

package/dist/components/neynar/color-mode/color-mode-toggle.d.ts

@@ -0,0 +1,106 @@
+import { Button } from '../../ui/button';
+type ColorModeToggleSize = "xs" | "sm" | "default" | "lg";
+type ColorModeToggleProps = {
+    /**
+     * Button size - when showLabel is false, renders as a square icon button
+     * @default "default"
+     */
+    size?: ColorModeToggleSize;
+    /**
+     * Whether to show the current color mode name as text next to the icon
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Alignment of the dropdown menu relative to the trigger button
+     * @default "end"
+     */
+    align?: "start" | "center" | "end";
+} & Omit<React.ComponentProps<typeof Button>, "size">;
+/**
+ * ColorModeToggle - A zero-configuration color mode switcher with system, light, and dark modes
+ *
+ * A completely self-contained color mode toggle component that provides an intuitive dropdown
+ * interface for switching between system preference, light mode, and dark mode. Works
+ * immediately without any provider setup, context configuration, or additional dependencies.
+ *
+ * Built on top of Base UI components (Button + DropdownMenu) with the Neynar useColorMode
+ * hook for state management. Handles color mode persistence via cookies, system preference
+ * detection, real-time system changes, and synchronization across multiple instances.
+ *
+ * **Zero Configuration Design:**
+ * Just import and use - no providers, no setup, no configuration required. The component
+ * handles all color mode management internally and provides a complete solution out of the box.
+ *
+ * @example Basic usage (most common - icon button)
+ * ```tsx
+ * import { ColorModeToggle } from "@neynar/ui/color-mode";
+ *
+ * // Just drop it in! Works immediately with zero setup
+ * function Header() {
+ *   return (
+ *     <header className="flex items-center justify-between p-4">
+ *       <Logo />
+ *       <ColorModeToggle />
+ *     </header>
+ *   );
+ * }
+ * ```
+ *
+ * @example With text labels for better UX
+ * ```tsx
+ * // Show current color mode name next to icon
+ * <ColorModeToggle size="default" showLabel />
+ *
+ * // In a settings panel
+ * <div className="space-y-4">
+ *   <h3>Appearance</h3>
+ *   <div className="flex items-center justify-between">
+ *     <span>Color Mode</span>
+ *     <ColorModeToggle size="sm" showLabel />
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @example Different visual variants
+ * ```tsx
+ * // Ghost button for minimalist toolbars
+ * <ColorModeToggle variant="ghost" />
+ *
+ * // Secondary style for subtle integration
+ * <ColorModeToggle variant="secondary" size="sm" />
+ *
+ * // Outline style (default) for clear boundaries
+ * <ColorModeToggle variant="outline" size="lg" />
+ * ```
+ *
+ * @param variant - Visual style variant inherited from Button component (default: "outline")
+ * @param size - Button size: xs, sm, default, lg. Renders as icon button when showLabel is false (default: "default")
+ * @param className - Additional CSS classes for custom styling
+ * @param showLabel - Whether to show color mode name text. When false, renders as square icon button (default: false)
+ * @param align - Dropdown menu alignment relative to trigger button (default: "end")
+ *
+ * @features
+ * - **Zero Configuration**: Import and use immediately - no setup required
+ * - **System Detection**: Automatically follows OS dark/light preference changes
+ * - **Perfect Persistence**: Color mode choice saved via cookies for SSR compatibility
+ * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized
+ * - **Real-Time Updates**: Responds to system color mode changes while app is running
+ * - **Smooth Transitions**: CSS-based mode switching with no flash of wrong content
+ * - **Accessibility First**: Full keyboard navigation and screen reader support
+ * - **Touch Optimized**: Works perfectly on mobile and tablet devices
+ * - **Framework Agnostic**: Works with Next.js, Vite, Create React App, etc.
+ *
+ * @accessibility
+ * - **Keyboard Navigation**: Full support for Enter, Space, and Arrow keys
+ * - **Screen Reader Support**: Proper ARIA labels and role announcements
+ * - **Focus Management**: Visible focus indicators meeting WCAG 2.1 AA standards
+ * - **State Communication**: Current selection clearly indicated with checkmarks
+ *
+ * @see {@link useColorMode} - The underlying color mode management hook with event-driven architecture
+ * @see {@link ColorModeScript} - Component for FOUC prevention (required in root layout)
+ * @since 1.0.0
+ */
+declare function ColorModeToggle({ variant, size, className, showLabel, align, ...props }: ColorModeToggleProps): import("react/jsx-runtime").JSX.Element;
+export { ColorModeToggle, type ColorModeToggleProps, type ColorModeToggleSize };
+//# sourceMappingURL=color-mode-toggle.d.ts.map

package/dist/components/neynar/color-mode/color-mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/color-mode/color-mode-toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAkChD,KAAK,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAE1D,KAAK,oBAAoB,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,iBAAS,eAAe,CAAC,EACvB,OAAmB,EACnB,IAAgB,EAChB,SAAS,EACT,SAAiB,EACjB,KAAa,EACb,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA+DtB;AAED,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/dist/components/neynar/color-mode/color-mode-toggle.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../../ui/dropdown-menu.js";
+import { useColorMode } from "./use-color-mode.js";
+import { cn } from "../../../lib/utils.js";
+import Monitor from "../../../node_modules/lucide-react/dist/esm/icons/monitor.js";
+import Sun from "../../../node_modules/lucide-react/dist/esm/icons/sun.js";
+import Moon from "../../../node_modules/lucide-react/dist/esm/icons/moon.js";
+const iconSizeMap = {
+  xs: "icon-xs",
+  sm: "icon-sm",
+  default: "icon",
+  lg: "icon-lg"
+};
+const iconClassMap = {
+  xs: "size-3",
+  sm: "size-3.5",
+  default: "size-4",
+  lg: "size-5"
+};
+const textClassMap = {
+  xs: "text-xs",
+  sm: "text-sm",
+  default: "text-base",
+  lg: "text-lg"
+};
+function ColorModeToggle({
+  variant = "outline",
+  size = "default",
+  className,
+  showLabel = false,
+  align = "end",
+  ...props
+}) {
+  const buttonSize = showLabel ? size : iconSizeMap[size];
+  const iconClass = iconClassMap[size];
+  const textClass = textClassMap[size];
+  const { preference, setPreference } = useColorMode();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const items = [
+    { mode: "system", Icon: Monitor, label: "System" },
+    { mode: "light", Icon: Sun, label: "Light" },
+    { mode: "dark", Icon: Moon, label: "Dark" }
+  ];
+  const currentItem = mounted ? items.find((item) => item.mode === preference) || items[0] : items[0];
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant,
+            size: buttonSize,
+            className: cn(className),
+            suppressHydrationWarning: true,
+            ...props,
+            children: [
+              currentItem && /* @__PURE__ */ jsx(currentItem.Icon, { className: iconClass }),
+              showLabel && /* @__PURE__ */ jsx("span", { className: textClass, children: currentItem?.label }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle color mode" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align, children: items.map((item) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onClick: () => setPreference(item.mode),
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx(item.Icon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          preference === item.mode && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs opacity-60", children: "✓" })
+        ]
+      },
+      item.mode
+    )) })
+  ] });
+}
+export {
+  ColorModeToggle
+};
+//# sourceMappingURL=color-mode-toggle.js.map

package/dist/components/neynar/color-mode/color-mode-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-toggle.js","sources":["../../../../src/components/neynar/color-mode/color-mode-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useColorMode } from \"./use-color-mode\";\nimport { cn } from \"@/lib/utils\";\n\n// Map regular sizes to icon sizes for when showLabel is false\nconst iconSizeMap = {\n  xs: \"icon-xs\",\n  sm: \"icon-sm\",\n  default: \"icon\",\n  lg: \"icon-lg\",\n} as const;\n\n// Icon sizes that scale with button size\nconst iconClassMap = {\n  xs: \"size-3\",\n  sm: \"size-3.5\",\n  default: \"size-4\",\n  lg: \"size-5\",\n} as const;\n\n// Text sizes that scale with button size\nconst textClassMap = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  default: \"text-base\",\n  lg: \"text-lg\",\n} as const;\n\ntype ColorModeToggleSize = \"xs\" | \"sm\" | \"default\" | \"lg\";\n\ntype ColorModeToggleProps = {\n  /**\n   * Button size - when showLabel is false, renders as a square icon button\n   * @default \"default\"\n   */\n  size?: ColorModeToggleSize;\n  /**\n   * Whether to show the current color mode name as text next to the icon\n   * @default false\n   */\n  showLabel?: boolean;\n  /**\n   * Alignment of the dropdown menu relative to the trigger button\n   * @default \"end\"\n   */\n  align?: \"start\" | \"center\" | \"end\";\n} & Omit<React.ComponentProps<typeof Button>, \"size\">;\n\n/**\n * ColorModeToggle - A zero-configuration color mode switcher with system, light, and dark modes\n *\n * A completely self-contained color mode toggle component that provides an intuitive dropdown\n * interface for switching between system preference, light mode, and dark mode. Works\n * immediately without any provider setup, context configuration, or additional dependencies.\n *\n * Built on top of Base UI components (Button + DropdownMenu) with the Neynar useColorMode\n * hook for state management. Handles color mode persistence via cookies, system preference\n * detection, real-time system changes, and synchronization across multiple instances.\n *\n * **Zero Configuration Design:**\n * Just import and use - no providers, no setup, no configuration required. The component\n * handles all color mode management internally and provides a complete solution out of the box.\n *\n * @example Basic usage (most common - icon button)\n * ```tsx\n * import { ColorModeToggle } from \"@neynar/ui/color-mode\";\n *\n * // Just drop it in! Works immediately with zero setup\n * function Header() {\n *   return (\n *     <header className=\"flex items-center justify-between p-4\">\n *       <Logo />\n *       <ColorModeToggle />\n *     </header>\n *   );\n * }\n * ```\n *\n * @example With text labels for better UX\n * ```tsx\n * // Show current color mode name next to icon\n * <ColorModeToggle size=\"default\" showLabel />\n *\n * // In a settings panel\n * <div className=\"space-y-4\">\n *   <h3>Appearance</h3>\n *   <div className=\"flex items-center justify-between\">\n *     <span>Color Mode</span>\n *     <ColorModeToggle size=\"sm\" showLabel />\n *   </div>\n * </div>\n * ```\n *\n * @example Different visual variants\n * ```tsx\n * // Ghost button for minimalist toolbars\n * <ColorModeToggle variant=\"ghost\" />\n *\n * // Secondary style for subtle integration\n * <ColorModeToggle variant=\"secondary\" size=\"sm\" />\n *\n * // Outline style (default) for clear boundaries\n * <ColorModeToggle variant=\"outline\" size=\"lg\" />\n * ```\n *\n * @param variant - Visual style variant inherited from Button component (default: \"outline\")\n * @param size - Button size: xs, sm, default, lg. Renders as icon button when showLabel is false (default: \"default\")\n * @param className - Additional CSS classes for custom styling\n * @param showLabel - Whether to show color mode name text. When false, renders as square icon button (default: false)\n * @param align - Dropdown menu alignment relative to trigger button (default: \"end\")\n *\n * @features\n * - **Zero Configuration**: Import and use immediately - no setup required\n * - **System Detection**: Automatically follows OS dark/light preference changes\n * - **Perfect Persistence**: Color mode choice saved via cookies for SSR compatibility\n * - **Multi-Instance Sync**: Multiple toggles stay perfectly synchronized\n * - **Real-Time Updates**: Responds to system color mode changes while app is running\n * - **Smooth Transitions**: CSS-based mode switching with no flash of wrong content\n * - **Accessibility First**: Full keyboard navigation and screen reader support\n * - **Touch Optimized**: Works perfectly on mobile and tablet devices\n * - **Framework Agnostic**: Works with Next.js, Vite, Create React App, etc.\n *\n * @accessibility\n * - **Keyboard Navigation**: Full support for Enter, Space, and Arrow keys\n * - **Screen Reader Support**: Proper ARIA labels and role announcements\n * - **Focus Management**: Visible focus indicators meeting WCAG 2.1 AA standards\n * - **State Communication**: Current selection clearly indicated with checkmarks\n *\n * @see {@link useColorMode} - The underlying color mode management hook with event-driven architecture\n * @see {@link ColorModeScript} - Component for FOUC prevention (required in root layout)\n * @since 1.0.0\n */\nfunction ColorModeToggle({\n  variant = \"outline\",\n  size = \"default\",\n  className,\n  showLabel = false,\n  align = \"end\",\n  ...props\n}: ColorModeToggleProps) {\n  // Use icon size when no label, regular size when label is shown\n  const buttonSize = showLabel ? size : iconSizeMap[size];\n  const iconClass = iconClassMap[size];\n  const textClass = textClassMap[size];\n\n  const { preference, setPreference } = useColorMode();\n\n  // Track hydration to prevent mismatch between server/client rendering.\n  // This runs once after hydration to signal we can show client-specific values.\n  const [mounted, setMounted] = useState(false);\n  // eslint-disable-next-line react-hooks/set-state-in-effect -- Intentional: standard hydration detection pattern\n  useEffect(() => setMounted(true), []);\n\n  // Simple icons and labels - no configuration needed\n  const items = [\n    { mode: \"system\" as const, Icon: Monitor, label: \"System\" },\n    { mode: \"light\" as const, Icon: Sun, label: \"Light\" },\n    { mode: \"dark\" as const, Icon: Moon, label: \"Dark\" },\n  ];\n\n  // Get current item based on preference, not resolved mode\n  // Before hydration, always show \"system\" to match server render\n  const currentItem = mounted\n    ? items.find((item) => item.mode === preference) || items[0]\n    : items[0]; // Always \"system\" on server\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          <Button\n            variant={variant}\n            size={buttonSize}\n            className={cn(className)}\n            suppressHydrationWarning\n            {...props}\n          >\n            {currentItem && <currentItem.Icon className={iconClass} />}\n            {showLabel && (\n              <span className={textClass}>{currentItem?.label}</span>\n            )}\n            <span className=\"sr-only\">Toggle color mode</span>\n          </Button>\n        }\n      />\n      <DropdownMenuContent align={align}>\n        {items.map((item) => (\n          <DropdownMenuItem\n            key={item.mode}\n            onClick={() => setPreference(item.mode)}\n            className=\"flex items-center gap-2\"\n          >\n            <item.Icon className=\"size-4\" />\n            <span>{item.label}</span>\n            {preference === item.mode && (\n              <span className=\"ml-auto text-xs opacity-60\">✓</span>\n            )}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport { ColorModeToggle, type ColorModeToggleProps, type ColorModeToggleSize };\n"],"names":[],"mappings":";;;;;;;;;;AAeA;AAAoB;AACd;AACA;AACK;AAEX;AAGA;AAAqB;AACf;AACA;AACK;AAEX;AAGA;AAAqB;AACf;AACA;AACK;AAEX;AA0GA;AAAyB;AACb;AACH;AACP;AACY;AACJ;AAEV;AAEE;AACA;AACA;AAEA;AAIA;AAEA;AAGA;AAAc;AACqC;AACL;AACA;AAK9C;AAIA;AAEI;AAAA;AAAC;AAAA;AAEG;AAAC;AAAA;AACC;AACM;AACiB;AACC;AACpB;AAEH;AAAuD;AAEN;AAEP;AAAA;AAAA;AAAA;AAC7C;AAAA;AAKA;AAAC;AAAA;AAEuC;AAC5B;AAEV;AAA8B;AACZ;AAE8B;AAAA;AAAA;AAPtC;AAWhB;AAGN;;;;"}

package/dist/components/neynar/color-mode/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorModeInitializer } from './color-mode-initializer';
+export { ColorModeToggle } from './color-mode-toggle';
+export { useColorMode, type ColorModePreference } from './use-color-mode';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/neynar/color-mode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/color-mode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/neynar/color-mode/index.js

@@ -0,0 +1,9 @@
+import { ColorModeInitializer } from "./color-mode-initializer.js";
+import { ColorModeToggle } from "./color-mode-toggle.js";
+import { useColorMode } from "./use-color-mode.js";
+export {
+  ColorModeInitializer,
+  ColorModeToggle,
+  useColorMode
+};
+//# sourceMappingURL=index.js.map

package/dist/components/neynar/color-mode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/neynar/color-mode/use-color-mode.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Color mode preference options for the color mode system
+ *
+ * Controls how the application determines the active color mode:
+ * - `"system"` - Automatically follows the user's OS preference
+ * - `"light"` - Forces light mode regardless of system preference
+ * - `"dark"` - Forces dark mode regardless of system preference
+ *
+ * @example
+ * ```tsx
+ * const { preference, setPreference } = useColorMode();
+ *
+ * // Switch to dark mode
+ * setPreference("dark");
+ *
+ * // Follow system preference
+ * setPreference("system");
+ * ```
+ *
+ * @since 1.0.0
+ */
+export type ColorModePreference = "system" | "light" | "dark";
+/**
+ * Hook for managing application color mode with automatic system preference detection
+ *
+ * A complete color mode management solution that handles persistence, system preference
+ * detection, and DOM manipulation without requiring any context providers. Designed
+ * for applications that need simple light/dark mode switching with optional system
+ * preference following.
+ *
+ * This hook works in conjunction with the {@link ColorModeScript} component to provide
+ * a complete color mode solution with FOUC prevention and perfect synchronization
+ * across multiple instances.
+ *
+ * Features:
+ * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events
+ * - **Automatic persistence**: Color mode preference saved to cookies across sessions
+ * - **System preference detection**: Automatically follows OS dark/light mode when set to "system"
+ * - **Live system updates**: Responds to system color mode changes in real-time
+ * - **SSR compatible**: Works safely during server-side rendering
+ * - **Type safe**: Full TypeScript support with proper type definitions
+ * - **No provider required**: Self-contained hook that works out of the box
+ *
+ * @example Basic color mode switching
+ * ```tsx
+ * function ColorModeToggle() {
+ *   const { preference, mode, setPreference } = useColorMode();
+ *
+ *   const toggleMode = () => {
+ *     setPreference(mode === "dark" ? "light" : "dark");
+ *   };
+ *
+ *   return (
+ *     <button onClick={toggleMode}>
+ *       Switch to {mode === "dark" ? "light" : "dark"} mode
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Color mode selector dropdown
+ * ```tsx
+ * function ColorModeSelector() {
+ *   const { preference, setPreference } = useColorMode();
+ *
+ *   return (
+ *     <select value={preference} onChange={(e) => setPreference(e.target.value as ColorModePreference)}>
+ *       <option value="system">Follow system</option>
+ *       <option value="light">Light mode</option>
+ *       <option value="dark">Dark mode</option>
+ *     </select>
+ *   );
+ * }
+ * ```
+ *
+ * @returns Object containing current color mode state and setter function
+ * @returns returns.preference - The user's selected color mode preference
+ * @returns returns.mode - The actual color mode currently applied (always "light" or "dark")
+ * @returns returns.setPreference - Function to change the color mode preference
+ *
+ * @see {@link ColorModePreference} - Available color mode preference options
+ * @see {@link ColorModeScript} - Component for FOUC prevention
+ * @see {@link ColorModeToggle} - UI component for color mode switching
+ * @since 1.0.0
+ */
+export declare function useColorMode(): {
+    preference: ColorModePreference;
+    mode: "dark" | "light";
+    setPreference: (newPreference: ColorModePreference) => void;
+};
+//# sourceMappingURL=use-color-mode.d.ts.map

package/dist/components/neynar/color-mode/use-color-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/color-mode/use-color-mode.ts"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAuJ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,YAAY;;;mCAWY,mBAAmB;EAyC1D"}

package/dist/components/neynar/color-mode/use-color-mode.js

@@ -0,0 +1,106 @@
+"use client";
+import { useState, useEffect } from "react";
+let systemListenerInitialized = false;
+const COOKIE_NAME = "color-mode";
+const COOKIE_OPTIONS = {
+  path: "/",
+  maxAge: 60 * 60 * 24 * 365,
+  // 1 year
+  sameSite: "lax"
+};
+function getColorModeFromCookie() {
+  if (typeof document === "undefined") return null;
+  let match = document.cookie.match(
+    new RegExp(`(?:^|; )${COOKIE_NAME}=([^;]*)`)
+  );
+  if (!match) {
+    match = document.cookie.match(/(?:^|; )theme=([^;]*)/);
+  }
+  if (!match) return null;
+  try {
+    const decoded = decodeURIComponent(match[1] || "");
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+function setColorModeCookie(state) {
+  if (typeof document === "undefined") return;
+  const value = JSON.stringify(state);
+  let cookieString = `${COOKIE_NAME}=${encodeURIComponent(value)}`;
+  cookieString += `; path=${COOKIE_OPTIONS.path}`;
+  cookieString += `; max-age=${COOKIE_OPTIONS.maxAge}`;
+  cookieString += `; samesite=${COOKIE_OPTIONS.sameSite}`;
+  document.cookie = cookieString;
+}
+function getSystemColorMode() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyColorMode(mode) {
+  if (typeof document === "undefined") return;
+  if (mode === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+  document.documentElement.style.colorScheme = mode;
+}
+function setupSystemListener() {
+  if (systemListenerInitialized || typeof window === "undefined") return;
+  systemListenerInitialized = true;
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  mediaQuery.addEventListener("change", () => {
+    const stored = getColorModeFromCookie();
+    if (stored?.preference !== "system") return;
+    const mode = mediaQuery.matches ? "dark" : "light";
+    const newState = { preference: "system", mode };
+    setColorModeCookie(newState);
+    applyColorMode(mode);
+    window.dispatchEvent(
+      new CustomEvent("color-mode-change", { detail: newState })
+    );
+  });
+}
+function useColorMode() {
+  const [state, setState] = useState(() => {
+    const saved = getColorModeFromCookie();
+    if (saved) return saved;
+    const mode = getSystemColorMode();
+    return { preference: "system", mode };
+  });
+  function setPreference(newPreference) {
+    const mode = newPreference === "system" ? getSystemColorMode() : newPreference;
+    const newState = { preference: newPreference, mode };
+    setColorModeCookie(newState);
+    applyColorMode(mode);
+    window.dispatchEvent(
+      new CustomEvent("color-mode-change", {
+        detail: newState
+      })
+    );
+  }
+  useEffect(() => {
+    setupSystemListener();
+    const handleColorModeChange = (event) => {
+      setState(event.detail);
+    };
+    window.addEventListener(
+      "color-mode-change",
+      handleColorModeChange
+    );
+    return () => window.removeEventListener(
+      "color-mode-change",
+      handleColorModeChange
+    );
+  }, []);
+  return {
+    preference: state.preference,
+    mode: state.mode,
+    setPreference
+  };
+}
+export {
+  useColorMode
+};
+//# sourceMappingURL=use-color-mode.js.map

package/dist/components/neynar/color-mode/use-color-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-mode.js","sources":["../../../../src/components/neynar/color-mode/use-color-mode.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Module-level flag to ensure the system color mode listener is set up only once.\n *\n * This is a pragmatic tradeoff: module-level mutable state is generally a code smell\n * in React (SSR issues, test leakage, not idiomatic), but the alternative would be\n * requiring users to wrap their app in a <ColorModeProvider>. Since we want zero-config\n * \"just works\" behavior, we accept this pattern here.\n *\n * It's safe because:\n * - Only runs client-side (window check in setupSystemListener)\n * - The listener is truly global (system color scheme is one per browser)\n * - It's idempotent and stateless (reads from cookie each time)\n */\nlet systemListenerInitialized = false;\n\n/**\n * Color mode preference options for the color mode system\n *\n * Controls how the application determines the active color mode:\n * - `\"system\"` - Automatically follows the user's OS preference\n * - `\"light\"` - Forces light mode regardless of system preference\n * - `\"dark\"` - Forces dark mode regardless of system preference\n *\n * @example\n * ```tsx\n * const { preference, setPreference } = useColorMode();\n *\n * // Switch to dark mode\n * setPreference(\"dark\");\n *\n * // Follow system preference\n * setPreference(\"system\");\n * ```\n *\n * @since 1.0.0\n */\nexport type ColorModePreference = \"system\" | \"light\" | \"dark\";\n\n/**\n * Internal color mode state structure stored in cookies\n *\n * Maintains both the user's preference and the actual mode value\n * to handle system color mode changes efficiently.\n *\n * @internal\n */\ntype ColorModeState = {\n  /** User's selected color mode preference */\n  preference: ColorModePreference;\n  /** Actual mode applied to the DOM */\n  mode: \"light\" | \"dark\";\n};\n\n/**\n * Cookie configuration for color mode persistence\n *\n * Uses secure defaults for cross-site compatibility and long-term storage.\n *\n * @internal\n */\nconst COOKIE_NAME = \"color-mode\";\nconst COOKIE_OPTIONS = {\n  path: \"/\",\n  maxAge: 60 * 60 * 24 * 365, // 1 year\n  sameSite: \"lax\" as const,\n};\n\n/**\n * Retrieves the stored color mode preference from browser cookies\n *\n * Safely parses the cookie value and handles malformed data gracefully.\n * Returns null if no valid color mode data is found or if running server-side.\n *\n * @returns The stored color mode state or null if unavailable\n * @internal\n */\nfunction getColorModeFromCookie(): ColorModeState | null {\n  if (typeof document === \"undefined\") return null;\n\n  // Try new cookie name first, then fall back to legacy \"theme\" cookie\n  let match = document.cookie.match(\n    new RegExp(`(?:^|; )${COOKIE_NAME}=([^;]*)`),\n  );\n  if (!match) {\n    match = document.cookie.match(/(?:^|; )theme=([^;]*)/);\n  }\n  if (!match) return null;\n\n  try {\n    const decoded = decodeURIComponent(match[1] || \"\");\n    return JSON.parse(decoded);\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Persists the current color mode state to browser cookies\n *\n * Stores the complete color mode state as a JSON string with appropriate\n * cookie settings for security and longevity. Safe for server-side rendering.\n *\n * @param state - The color mode state to persist\n * @internal\n */\nfunction setColorModeCookie(state: ColorModeState) {\n  if (typeof document === \"undefined\") return;\n\n  const value = JSON.stringify(state);\n  let cookieString = `${COOKIE_NAME}=${encodeURIComponent(value)}`;\n\n  cookieString += `; path=${COOKIE_OPTIONS.path}`;\n  cookieString += `; max-age=${COOKIE_OPTIONS.maxAge}`;\n  cookieString += `; samesite=${COOKIE_OPTIONS.sameSite}`;\n\n  document.cookie = cookieString;\n}\n\n/**\n * Detects the user's system color mode preference\n *\n * Uses the CSS media query `prefers-color-scheme` to determine if the user\n * has configured their OS to prefer dark or light modes. Falls back to\n * light mode for server-side rendering or unsupported browsers.\n *\n * @returns The system's preferred color mode\n * @internal\n */\nfunction getSystemColorMode(): \"light\" | \"dark\" {\n  if (typeof window === \"undefined\") return \"light\";\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ? \"dark\"\n    : \"light\";\n}\n\n/**\n * Applies the specified color mode to the document\n *\n * Updates the document's class list and color-scheme CSS property to reflect\n * the chosen mode. This triggers CSS-based mode switching throughout the\n * application and ensures native elements respect the mode choice.\n *\n * @param mode - The color mode to apply (\"light\" or \"dark\")\n * @internal\n */\nfunction applyColorMode(mode: \"light\" | \"dark\") {\n  if (typeof document === \"undefined\") return;\n\n  // For light mode, remove dark class (light is default)\n  // For dark mode, add dark class\n  if (mode === \"dark\") {\n    document.documentElement.classList.add(\"dark\");\n  } else {\n    document.documentElement.classList.remove(\"dark\");\n  }\n\n  // Set color-scheme for native elements\n  document.documentElement.style.colorScheme = mode;\n}\n\n/**\n * Sets up a global listener for system color mode changes.\n * Only runs once per module load, regardless of how many hook instances exist.\n *\n * @internal\n */\nfunction setupSystemListener() {\n  if (systemListenerInitialized || typeof window === \"undefined\") return;\n  systemListenerInitialized = true;\n\n  const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  mediaQuery.addEventListener(\"change\", () => {\n    // Only respond if current preference is \"system\"\n    const stored = getColorModeFromCookie();\n    if (stored?.preference !== \"system\") return;\n\n    const mode: \"light\" | \"dark\" = mediaQuery.matches ? \"dark\" : \"light\";\n    const newState: ColorModeState = { preference: \"system\", mode };\n\n    setColorModeCookie(newState);\n    applyColorMode(mode);\n    window.dispatchEvent(\n      new CustomEvent(\"color-mode-change\", { detail: newState }),\n    );\n  });\n}\n\n/**\n * Hook for managing application color mode with automatic system preference detection\n *\n * A complete color mode management solution that handles persistence, system preference\n * detection, and DOM manipulation without requiring any context providers. Designed\n * for applications that need simple light/dark mode switching with optional system\n * preference following.\n *\n * This hook works in conjunction with the {@link ColorModeScript} component to provide\n * a complete color mode solution with FOUC prevention and perfect synchronization\n * across multiple instances.\n *\n * Features:\n * - **Perfect synchronization**: Multiple hook instances stay in sync via custom events\n * - **Automatic persistence**: Color mode preference saved to cookies across sessions\n * - **System preference detection**: Automatically follows OS dark/light mode when set to \"system\"\n * - **Live system updates**: Responds to system color mode changes in real-time\n * - **SSR compatible**: Works safely during server-side rendering\n * - **Type safe**: Full TypeScript support with proper type definitions\n * - **No provider required**: Self-contained hook that works out of the box\n *\n * @example Basic color mode switching\n * ```tsx\n * function ColorModeToggle() {\n *   const { preference, mode, setPreference } = useColorMode();\n *\n *   const toggleMode = () => {\n *     setPreference(mode === \"dark\" ? \"light\" : \"dark\");\n *   };\n *\n *   return (\n *     <button onClick={toggleMode}>\n *       Switch to {mode === \"dark\" ? \"light\" : \"dark\"} mode\n *     </button>\n *   );\n * }\n * ```\n *\n * @example Color mode selector dropdown\n * ```tsx\n * function ColorModeSelector() {\n *   const { preference, setPreference } = useColorMode();\n *\n *   return (\n *     <select value={preference} onChange={(e) => setPreference(e.target.value as ColorModePreference)}>\n *       <option value=\"system\">Follow system</option>\n *       <option value=\"light\">Light mode</option>\n *       <option value=\"dark\">Dark mode</option>\n *     </select>\n *   );\n * }\n * ```\n *\n * @returns Object containing current color mode state and setter function\n * @returns returns.preference - The user's selected color mode preference\n * @returns returns.mode - The actual color mode currently applied (always \"light\" or \"dark\")\n * @returns returns.setPreference - Function to change the color mode preference\n *\n * @see {@link ColorModePreference} - Available color mode preference options\n * @see {@link ColorModeScript} - Component for FOUC prevention\n * @see {@link ColorModeToggle} - UI component for color mode switching\n * @since 1.0.0\n */\nexport function useColorMode() {\n  // Initialize state from cookie or default to system\n  const [state, setState] = useState<ColorModeState>(() => {\n    const saved = getColorModeFromCookie();\n    if (saved) return saved;\n\n    const mode = getSystemColorMode();\n    return { preference: \"system\", mode };\n  });\n\n  // Set color mode preference - dispatch event, let event handler update state\n  function setPreference(newPreference: ColorModePreference) {\n    const mode =\n      newPreference === \"system\" ? getSystemColorMode() : newPreference;\n    const newState = { preference: newPreference, mode };\n\n    // Update cookie and DOM immediately\n    setColorModeCookie(newState);\n    applyColorMode(mode);\n\n    // Broadcast change - ALL instances (including this one) will update state from this event\n    window.dispatchEvent(\n      new CustomEvent(\"color-mode-change\", {\n        detail: newState,\n      }),\n    );\n  }\n\n  // Set up global system listener once (idempotent) and listen for color mode changes\n  useEffect(() => {\n    setupSystemListener();\n\n    const handleColorModeChange = (event: CustomEvent) => {\n      setState(event.detail);\n    };\n\n    window.addEventListener(\n      \"color-mode-change\",\n      handleColorModeChange as EventListener,\n    );\n    return () =>\n      window.removeEventListener(\n        \"color-mode-change\",\n        handleColorModeChange as EventListener,\n      );\n  }, []);\n\n  return {\n    preference: state.preference,\n    mode: state.mode,\n    setPreference,\n  };\n}\n"],"names":[],"mappings":";;AAiBA;AA+CA;AACA;AAAuB;AACf;AACiB;AAAA;AAEzB;AAWA;AACE;AAGA;AAA4B;AACiB;AAE7C;AACE;AAAqD;AAEvD;AAEA;AACE;AACA;AAAyB;AAEzB;AAAO;AAEX;AAWA;AACE;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACF;AAYA;AACE;AACA;AAGF;AAYA;AACE;AAIA;AACE;AAA6C;AAE7C;AAAgD;AAIlD;AACF;AAQA;AACE;AACA;AAEA;AACA;AAEE;AACA;AAEA;AACA;AAEA;AACA;AACA;AAAO;AACoD;AAAA;AAG/D;AAiEO;AAEL;AACE;AACA;AAEA;AACA;AAA+B;AAIjC;AACE;AAEA;AAGA;AACA;AAGA;AAAO;AACgC;AAC3B;AACT;AAAA;AAKL;AACE;AAEA;AACE;AAAqB;AAGvB;AAAO;AACL;AACA;AAEF;AACS;AACL;AACA;AAAA;AAIN;AAAO;AACa;AACN;AACZ;AAEJ;;;;"}

package/dist/components/neynar/first-light/first-light-filters.d.ts

@@ -0,0 +1,27 @@
+/**
+ * FirstLightFilters - SVG filter definitions for hand-drawn/sketch effects
+ *
+ * This component must be rendered once in your app (typically in your root layout)
+ * when using the First Light theme. It provides the SVG filters that create the
+ * hand-drawn wobble effect on components.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import "@neynar/ui/themes/first-light";
+ * import { FirstLightFilters } from "@neynar/ui/first-light";
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <FirstLightFilters />
+ *         {children}
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export declare function FirstLightFilters(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=first-light-filters.d.ts.map

package/dist/components/neynar/first-light/first-light-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-light-filters.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/first-light/first-light-filters.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,iBAAiB,4CAkFhC"}

package/dist/components/neynar/first-light/first-light-filters.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FirstLightFilters() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "absolute h-0 w-0",
+      "aria-hidden": "true",
+      style: { position: "absolute", width: 0, height: 0 },
+      children: /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter",
+            x: "-3%",
+            y: "-3%",
+            width: "106%",
+            height: "106%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.015",
+                  numOctaves: "2",
+                  seed: "1",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "1.5",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter-light",
+            x: "-2%",
+            y: "-2%",
+            width: "104%",
+            height: "104%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.006",
+                  numOctaves: "1",
+                  seed: "2",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "0.4",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: "first-light-filter-heavy",
+            x: "-3%",
+            y: "-3%",
+            width: "106%",
+            height: "106%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "fractalNoise",
+                  baseFrequency: "0.012",
+                  numOctaves: "3",
+                  seed: "3",
+                  result: "noise"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "1.5",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  FirstLightFilters
+};
+//# sourceMappingURL=first-light-filters.js.map

package/dist/components/neynar/first-light/first-light-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-light-filters.js","sources":["../../../../src/components/neynar/first-light/first-light-filters.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * FirstLightFilters - SVG filter definitions for hand-drawn/sketch effects\n *\n * This component must be rendered once in your app (typically in your root layout)\n * when using the First Light theme. It provides the SVG filters that create the\n * hand-drawn wobble effect on components.\n *\n * @example\n * ```tsx\n * // app/layout.tsx\n * import \"@neynar/ui/themes/first-light\";\n * import { FirstLightFilters } from \"@neynar/ui/first-light\";\n *\n * export default function Layout({ children }) {\n *   return (\n *     <html>\n *       <body>\n *         <FirstLightFilters />\n *         {children}\n *       </body>\n *     </html>\n *   );\n * }\n * ```\n */\nexport function FirstLightFilters() {\n  return (\n    <svg\n      className=\"absolute h-0 w-0\"\n      aria-hidden=\"true\"\n      style={{ position: \"absolute\", width: 0, height: 0 }}\n    >\n      <defs>\n        {/* Standard first-light filter - hand-drawn wobble */}\n        <filter\n          id=\"first-light-filter\"\n          x=\"-3%\"\n          y=\"-3%\"\n          width=\"106%\"\n          height=\"106%\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.015\"\n            numOctaves=\"2\"\n            seed=\"1\"\n            result=\"noise\"\n          />\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"noise\"\n            scale=\"1.5\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n\n        {/* Light first-light filter - barely noticeable */}\n        <filter\n          id=\"first-light-filter-light\"\n          x=\"-2%\"\n          y=\"-2%\"\n          width=\"104%\"\n          height=\"104%\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.006\"\n            numOctaves=\"1\"\n            seed=\"2\"\n            result=\"noise\"\n          />\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"noise\"\n            scale=\"0.4\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n\n        {/* Heavy first-light filter - more pronounced wobble */}\n        <filter\n          id=\"first-light-filter-heavy\"\n          x=\"-3%\"\n          y=\"-3%\"\n          width=\"106%\"\n          height=\"106%\"\n        >\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency=\"0.012\"\n            numOctaves=\"3\"\n            seed=\"3\"\n            result=\"noise\"\n          />\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"noise\"\n            scale=\"1.5\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;AA2BO;AACL;AACE;AAAC;AAAA;AACW;AACE;AACqC;AAI/C;AAAA;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAIF;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAIF;AAAC;AAAA;AACI;AACD;AACA;AACI;AACC;AAEP;AAAA;AAAC;AAAA;AACM;AACS;AACH;AACN;AACE;AAAA;AAAA;AAET;AAAC;AAAA;AACI;AACC;AACE;AACW;AACA;AAAA;AAAA;AACnB;AAAA;AAAA;AAEJ;AAAA;AAGN;;;;"}

package/dist/components/neynar/first-light/index.d.ts

@@ -0,0 +1,2 @@
+export { FirstLightFilters } from './first-light-filters';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/neynar/first-light/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/neynar/first-light/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/neynar/first-light/index.js

@@ -0,0 +1,5 @@
+import { FirstLightFilters } from "./first-light-filters.js";
+export {
+  FirstLightFilters
+};
+//# sourceMappingURL=index.js.map

package/dist/components/neynar/first-light/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}