-
- {children}
+
diff --git a/docs/app/showcase/music-app/helpers/sections/PlaylistHero.tsx b/docs/app/showcase/music-app/helpers/sections/PlaylistHero.tsx
index 00f687271..0d6b4584b 100644
--- a/docs/app/showcase/music-app/helpers/sections/PlaylistHero.tsx
+++ b/docs/app/showcase/music-app/helpers/sections/PlaylistHero.tsx
@@ -6,7 +6,7 @@ import Heading from "@radui/ui/Heading";
import Text from "@radui/ui/Text";
import Badge from "@radui/ui/Badge";
-import RightArrow from "@/icons/RightArrow";
+import { ArrowRight as RightArrow } from 'lucide-react';
const InteractiveAlbums: any = () => {
diff --git a/docs/components/Copy.js b/docs/components/Copy.js
index ae5e98471..17806e2f5 100644
--- a/docs/components/Copy.js
+++ b/docs/components/Copy.js
@@ -1,5 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
+import { Check, Copy as CopyIcon } from 'lucide-react';
function Copy({ content }) {
const [isCopied, setIsCopied] = useState(false);
@@ -20,11 +21,11 @@ function Copy({ content }) {
}, [isCopied]);
const TickIcon = () => {
- return ;
- };
-
- const CopyIcon = () => {
- return ;
+ return (
+ {children}
}
\ No newline at end of file
diff --git a/docs/components/layout/Documentation/Documentation.js b/docs/components/layout/Documentation/Documentation.js
index c302046a5..c5f58e9d0 100644
--- a/docs/components/layout/Documentation/Documentation.js
+++ b/docs/components/layout/Documentation/Documentation.js
@@ -3,6 +3,7 @@ import Heading from '@radui/ui/Heading';
import Link from '@radui/ui/Link';
import Separator from '@radui/ui/Separator';
import DocsTable from './helpers/DocsTable';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
import CodeBlock from '@/components/layout/Documentation/helpers/CodeBlock';
import ComponentHero from '@/components/layout/Documentation/helpers/ComponentHero/ComponentHero';
@@ -12,11 +13,11 @@ import { BookMarkLink } from '@/components/layout/Documentation/utils';
const LeftArrow = () => {
- return ;
+ return
diff --git a/docs/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures.js b/docs/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures.js
index 8573f7c39..7a1985632 100644
--- a/docs/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures.js
+++ b/docs/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures.js
@@ -20,7 +20,7 @@ const ComponentFeatures = ({ features }) => {
+
);
}
@@ -31,7 +29,7 @@ const PlayButton: React.FC = () => {
return (
{children}
-
);
}
diff --git a/docs/app/showcase/music-app/helpers/MusicSidebar.js b/docs/app/showcase/music-app/helpers/MusicSidebar.js
index 84f27642e..910a60082 100644
--- a/docs/app/showcase/music-app/helpers/MusicSidebar.js
+++ b/docs/app/showcase/music-app/helpers/MusicSidebar.js
@@ -1,7 +1,4 @@
-import HomeIcon from "@/icons/Home"
-import RocketIcon from "@/icons/Rocket"
-import DiscIcon from "@/icons/Disc"
-import RowsIcon from "@/icons/Rows"
+import { Home as HomeIcon, Rocket as RocketIcon, Disc as DiscIcon, Music as RowsIcon } from 'lucide-react';
import SoundWaveSampleLogo from "@/icons/logos/SoundWaveSampleLogo"
@@ -10,7 +7,9 @@ const MenuItem = ({children, label="", active=false}) => {
const DIMENSIONS = 18;
return
- {label}
{children}
+
+
{children}
+
+
+ );
};
return (
@@ -32,7 +33,11 @@ function Copy({ content }) {
diff --git a/docs/components/PostHogProvider.tsx b/docs/components/PostHogProvider.tsx
index 6fabe1211..42913fe1d 100644
--- a/docs/components/PostHogProvider.tsx
+++ b/docs/components/PostHogProvider.tsx
@@ -16,12 +16,26 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
return
}
- // Suppress PostHog script loading errors
+ // Suppress PostHog script loading errors and fetch errors
const originalError = typeof window !== 'undefined' ? window.console.error : console.error
const errorHandler = (...args: any[]) => {
const errorMessage = args[0]?.toString() || ''
- if (errorMessage.includes('[PostHog.js]') && errorMessage.includes('failed to load script')) {
- // Silently ignore PostHog script loading errors
+ const stackTrace = args.join(' ') || ''
+ const fullMessage = (errorMessage + ' ' + stackTrace).toLowerCase()
+
+ // Check if this is a PostHog-related fetch error
+ // Be more lenient with pattern matching to catch all variations
+ const isPostHogError =
+ (errorMessage.includes('[PostHog.js]') && errorMessage.includes('failed to load script')) ||
+ (fullMessage.includes('failed to fetch') && (fullMessage.includes('posthog') || fullMessage.includes('posthog-js') || fullMessage.includes('posthog.com'))) ||
+ (errorMessage.includes('TypeError') && errorMessage.includes('Failed to fetch') && (stackTrace.includes('posthog') || stackTrace.includes('posthog-js'))) ||
+ // Catch fetch errors from PostHog module (webpack-internal path includes posthog-js)
+ (errorMessage.includes('TypeError') && errorMessage.includes('Failed to fetch') && stackTrace.includes('webpack-internal') && stackTrace.includes('posthog-js')) ||
+ // Catch any TypeError: Failed to fetch that occurs during PostHog initialization
+ (errorMessage.includes('TypeError') && errorMessage.includes('Failed to fetch') && stackTrace.includes('PostHogProvider'))
+
+ if (isPostHogError) {
+ // Silently ignore PostHog script loading and fetch errors
return
}
originalError.apply(console, args)
@@ -31,34 +45,72 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
window.console.error = errorHandler
}
- try {
- posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
- api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.posthog.com",
- ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.posthog.com",
- defaults: '2025-05-24',
- autocapture: false,
- capture_exceptions: true,
- debug: process.env.NODE_ENV === "development",
- loaded: (posthog) => {
- if (process.env.NODE_ENV === "development") {
- console.log('PostHog loaded successfully')
- posthog.capture('my event', { property: 'value' })
- }
- },
- on_request_error: (failedRequest) => {
- if (process.env.NODE_ENV === "development") {
- console.warn('PostHog request failed:', failedRequest)
- }
- }
- })
- } catch (error) {
- console.error('PostHog initialization failed:', error)
+ // Suppress unhandled promise rejections from PostHog
+ const unhandledRejectionHandler = (event: PromiseRejectionEvent) => {
+ const reason = event.reason?.toString() || ''
+ const stack = event.reason?.stack || ''
+ const fullError = reason + ' ' + stack
+
+ // Catch PostHog-related fetch errors in promise rejections
+ const lowerError = fullError.toLowerCase()
+ if (
+ (lowerError.includes('failed to fetch') && (lowerError.includes('posthog') || lowerError.includes('posthog-js') || lowerError.includes('posthog.com'))) ||
+ (lowerError.includes('posthog') || lowerError.includes('posthog-js')) ||
+ // Catch fetch errors from PostHog module (webpack-internal path includes posthog-js)
+ (lowerError.includes('typeerror') && lowerError.includes('failed to fetch') && lowerError.includes('webpack-internal') && lowerError.includes('posthog-js')) ||
+ // Catch any fetch error during PostHog initialization
+ (lowerError.includes('typeerror') && lowerError.includes('failed to fetch') && fullError.includes('PostHogProvider'))
+ ) {
+ event.preventDefault()
+ return
+ }
}
+ if (typeof window !== 'undefined') {
+ window.addEventListener('unhandledrejection', unhandledRejectionHandler)
+ }
+
+ // Initialize PostHog with error handling
+ // Use setTimeout to ensure error handlers are fully set up
+ const initTimeout = setTimeout(() => {
+ try {
+ posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+ api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.posthog.com",
+ ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.posthog.com",
+ defaults: '2025-05-24',
+ autocapture: false,
+ capture_exceptions: false, // Disable exception capture to prevent error loops
+ debug: process.env.NODE_ENV === "development",
+ // Completely disable feature flags to prevent fetch errors
+ disable_feature_flags: true,
+ loaded: (posthog) => {
+ if (process.env.NODE_ENV === "development") {
+ console.log('PostHog loaded successfully')
+ }
+ },
+ on_request_error: (failedRequest) => {
+ // Silently handle request errors to prevent console noise
+ if (process.env.NODE_ENV === "development") {
+ console.warn('PostHog request failed:', failedRequest)
+ }
+ },
+ // Add fetch error handling
+ request_batching: false,
+ })
+ } catch (error) {
+ // Silently handle initialization errors
+ if (process.env.NODE_ENV === "development") {
+ console.error('PostHog initialization failed:', error)
+ }
+ }
+ }, 0)
+
return () => {
- // Restore original console.error on cleanup
+ clearTimeout(initTimeout)
+ // Restore original handlers on cleanup
if (typeof window !== 'undefined') {
window.console.error = originalError
+ window.removeEventListener('unhandledrejection', unhandledRejectionHandler)
}
}
}, [hasPostHogKey])
@@ -68,5 +120,6 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
return <>{children}
}
+ // Always wrap with PHProvider - PostHog handles errors internally
return
@@ -91,7 +92,7 @@ className={`language-${language} whitespace-pre-wrap`}
- {!inline && (
+ {!inline && expanded && (
-
{features.map((feature, index) => (
-
-
+
diff --git a/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js b/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js index b5a08ba0f..d1b9a1431 100644 --- a/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js +++ b/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js @@ -7,7 +7,7 @@ import { BookMarkLink } from '@/components/layout/Documentation/utils'; import CodeTabs from './CodeTabs'; -const ComponentHero = ({ children, title='', codeUsage = {} }) => { +const ComponentHero = ({ children, title='', codeUsage = {}, as = "h2" }) => { const initializeTabs = (codeUsage) => { const tabs = [] @@ -31,8 +31,8 @@ const ComponentHero = ({ children, title='', codeUsage = {} }) => { // Use useMemo to avoid recalculating tabs unnecessarily const data = useMemo(() => initializeTabs(codeUsage), [codeUsage]); - return - {title &&{title} + {title &&); diff --git a/docs/components/utility/Ruler/index.js b/docs/components/utility/Ruler/index.js new file mode 100644 index 000000000..3d4532542 --- /dev/null +++ b/docs/components/utility/Ruler/index.js @@ -0,0 +1,33 @@ +'use client'; + +import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from 'lucide-react'; + +const Ruler = ({ orientation = 'horizontal', length = 'full', className = '' }) => { + const isHorizontal = orientation === 'horizontal'; + const lengthClass = length === 'full' ? (isHorizontal ? 'w-full' : 'h-full') : ''; + + return ( +{title} {children}diff --git a/docs/components/layout/Documentation/helpers/DocsTable.js b/docs/components/layout/Documentation/helpers/DocsTable.js index 5d38c0470..ddd7a3976 100644 --- a/docs/components/layout/Documentation/helpers/DocsTable.js +++ b/docs/components/layout/Documentation/helpers/DocsTable.js @@ -5,26 +5,10 @@ import Heading from '@radui/ui/Heading'; import Text from '@radui/ui/Text'; import Tooltip from '@radui/ui/Tooltip'; import Button from '@radui/ui/Button'; +import { Info } from 'lucide-react'; const InfoIcon = () => { - return ( - - ); + return ; } const InfoRenderer = ({ row }) => { diff --git a/docs/components/layout/Documentation/utils.js b/docs/components/layout/Documentation/utils.js index 6ba732a35..815b917e4 100644 --- a/docs/components/layout/Documentation/utils.js +++ b/docs/components/layout/Documentation/utils.js @@ -1,8 +1,5 @@ "use client" - -const LinkIcon =() => { - return -} +import { Link as LinkIcon } from 'lucide-react'; export const BookMarkLink = ({ children, id }) => { const sanitizedId = id.toLowerCase().replace(/[^a-z0-9-]/g, '-'); @@ -33,7 +30,7 @@ export const BookMarkLink = ({ children, id }) => { aria-label={`Direct link to ${id}`} > {children} -+ + {/* Start arrow */} + {isHorizontal ? ( ++ ); +} + +export default Ruler; \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index 9881497ba..a9e1f9406 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,7 +15,7 @@ "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.2.0", "@radui/fx": "^0.2.0", - "@radui/ui": "^0.0.47", + "@radui/ui": "^0.1.9", "@types/mdx": "^2.0.13", "@types/node": "20.5.9", "@types/react": "19.0.2", @@ -28,6 +28,7 @@ "eslint": "8.48.0", "eslint-config-next": "15.1.2", "js-cookie": "^3.0.5", + "lucide-react": "^0.562.0", "motion": "^12.9.2", "next": "15.2.8", "next-cookies": "^2.0.3", diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 3ba0e3426..08be1986a 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^0.2.0 version: 0.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@radui/ui': - specifier: ^0.0.47 - version: 0.0.47(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + specifier: ^0.1.9 + version: 0.1.9(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@types/mdx': specifier: ^2.0.13 version: 2.0.13 @@ -59,6 +59,9 @@ importers: js-cookie: specifier: ^3.0.5 version: 3.0.5 + lucide-react: + specifier: ^0.562.0 + version: 0.562.0(react@19.0.0) motion: specifier: ^12.9.2 version: 12.9.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -405,8 +408,8 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - '@radui/ui@0.0.47': - resolution: {integrity: sha512-mHPwe5C8yccmfinsU4J88FmZJ8Rv/3Q9u8XbfCWPeiJucNVskqXcuX75BdSwQvdrOIqW8Lh4stBpIaW2QqG2wA==} + '@radui/ui@0.1.9': + resolution: {integrity: sha512-o2XdkyGop9kghi37O43FtoV7whhOkOs4A1+B9h1miLhjcj6Oj2tpJDAV6X7BiPRt/DWk68YRjMW/oL99p6LzTg==} peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 @@ -1527,6 +1530,11 @@ packages: resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==} engines: {node: 14 || >=16.14} + lucide-react@0.562.0: + resolution: {integrity: sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + markdown-extensions@2.0.0: resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==} engines: {node: '>=16'} @@ -2753,7 +2761,7 @@ snapshots: transitivePeerDependencies: - '@emotion/is-prop-valid' - '@radui/ui@0.0.47(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + '@radui/ui@0.1.9(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@floating-ui/react': 0.27.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0) clsx: 2.1.1 @@ -3400,7 +3408,7 @@ snapshots: '@typescript-eslint/parser': 8.18.1(eslint@8.48.0)(typescript@5.2.2) eslint: 8.48.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.48.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0) eslint-plugin-jsx-a11y: 6.10.2(eslint@8.48.0) eslint-plugin-react: 7.37.2(eslint@8.48.0) @@ -3419,12 +3427,12 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.48.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.48.0 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0))(eslint@8.48.0) eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 @@ -3436,14 +3444,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0))(eslint@8.48.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.18.1(eslint@8.48.0)(typescript@5.2.2) eslint: 8.48.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.48.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0) transitivePeerDependencies: - supports-color @@ -3458,7 +3466,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.48.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.48.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.1(eslint@8.48.0)(typescript@5.2.2))(eslint@8.48.0))(eslint@8.48.0))(eslint@8.48.0) hasown: 2.0.2 is-core-module: 2.16.0 is-glob: 4.0.3 @@ -4112,6 +4120,10 @@ snapshots: lru-cache@10.1.0: {} + lucide-react@0.562.0(react@19.0.0): + dependencies: + react: 19.0.0 + markdown-extensions@2.0.0: {} markdown-table@3.0.4: {}+ ) : ( + + )} + + {/* Dotted line */} + + + {/* End arrow */} + {isHorizontal ? ( + + ) : ( + + )} +