diff --git a/apps/web/app/(app)/examples/dashboard/components/overview.tsx b/apps/web/app/(app)/examples/dashboard/components/overview.tsx index 80b085f0..cf775421 100644 --- a/apps/web/app/(app)/examples/dashboard/components/overview.tsx +++ b/apps/web/app/(app)/examples/dashboard/components/overview.tsx @@ -3,81 +3,81 @@ import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts" const data = [ - { - name: "Jan", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Feb", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Mar", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Apr", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "May", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Jun", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Jul", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Aug", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Sep", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Oct", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Nov", - total: Math.floor(Math.random() * 5000) + 1000, - }, - { - name: "Dec", - total: Math.floor(Math.random() * 5000) + 1000, - }, + { + name: "Jan", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Feb", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Mar", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Apr", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "May", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Jun", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Jul", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Aug", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Sep", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Oct", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Nov", + total: Math.floor(Math.random() * 5000) + 1000, + }, + { + name: "Dec", + total: Math.floor(Math.random() * 5000) + 1000, + }, ] export function Overview() { - return ( - - - - `$${value}`} - /> - - - - ) + return ( + + + + `$${value}`} + /> + + + + ) } diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx index 867c23a2..d90dd68e 100644 --- a/apps/web/app/(marketing)/page.tsx +++ b/apps/web/app/(marketing)/page.tsx @@ -1,6 +1,6 @@ -import ComponentDemos from '~/components/sections/component-demos' -import Hero from '~/components/sections/hero' -import Showcase from '~/components/sections/showcase' +import ComponentDemos from "~/components/sections/component-demos" +import Hero from "~/components/sections/hero" +import Showcase from "~/components/sections/showcase" // import Testimonials from '~/components/sections/testimonials' export default function Home() { diff --git a/apps/web/app/(marketing)/showcase/page.tsx b/apps/web/app/(marketing)/showcase/page.tsx index c7e890b2..c07a660f 100644 --- a/apps/web/app/(marketing)/showcase/page.tsx +++ b/apps/web/app/(marketing)/showcase/page.tsx @@ -1,7 +1,7 @@ -import { allShowcases } from 'content-collections' +import { allShowcases } from "content-collections" -import { ShowcaseCard } from '~/components/sections/showcase' -import BlurFade from '~/registry/miami/ui/blur-fade' +import { ShowcaseCard } from "~/components/sections/showcase" +import BlurFade from "~/registry/miami/ui/blur-fade" export default async function Page() { return ( diff --git a/apps/web/app/api/og/route.tsx b/apps/web/app/api/og/route.tsx index c51fb9bb..b7aefc90 100644 --- a/apps/web/app/api/og/route.tsx +++ b/apps/web/app/api/og/route.tsx @@ -1,22 +1,22 @@ -import { ImageResponse } from 'next/og' -import { capitalize } from '~/lib/utils' +import { ImageResponse } from "next/og" +import { capitalize } from "~/lib/utils" -export const runtime = 'edge' +export const runtime = "edge" const inter600 = fetch( new URL(`../../../assets/fonts/Inter-SemiBold.ttf`, import.meta.url), -).then(res => res.arrayBuffer()) +).then((res) => res.arrayBuffer()) const inter700 = fetch( new URL(`../../../assets/fonts/Inter-Bold.ttf`, import.meta.url), -).then(res => res.arrayBuffer()) +).then((res) => res.arrayBuffer()) const image = fetch( - new URL('../../../assets/images/og-bg-2.jpg', import.meta.url), -).then(res => res.arrayBuffer()) + new URL("../../../assets/images/og-bg-2.jpg", import.meta.url), +).then((res) => res.arrayBuffer()) -const logo = fetch(new URL('../../../public/icon.png', import.meta.url)).then( - res => res.arrayBuffer(), +const logo = fetch(new URL("../../../public/icon.png", import.meta.url)).then( + (res) => res.arrayBuffer(), ) export async function GET(req: Request) { @@ -26,27 +26,26 @@ export async function GET(req: Request) { const url = new URL(req.url) const params = Object.fromEntries(url.searchParams) const title = capitalize( - (params.title || 'Nyxb UI') - .replace(/-/g, ' ') - .split(' ') + (params.title || "Nyxb UI") + .replace(/-/g, " ") + .split(" ") .slice(0, 3) - .join(' ') + .join(" ") .substring(0, 20), ) try { return new ImageResponse( - ( -
- {title} +
+ {title} - {/* Lighting Effects */} - {/*
*/} -

- {title} - - Nyxb UI - -

+

+ {title} + + Nyxb UI + +

- {title && ( -

- {title} -

- )} + {title && ( +

+ {title} +

+ )} -

- - The best UI library for your next project. - -

-
- ), +

+ + The best UI library for your next project. + +

+
, { width: 1200, height: 630, fonts: [ { - name: 'Inter 600', + name: "Inter 600", data: await inter600, }, { - name: 'Inter 700', + name: "Inter 700", data: await inter700, }, ], }, ) - } - catch (e: any) { + } catch (e: any) { // eslint-disable-next-line no-console console.log(`${e.message}`) return new Response(`Failed to generate the image`, { diff --git a/apps/web/app/api/repo/download/route.tsx b/apps/web/app/api/repo/download/route.tsx index 4e911413..0a113391 100644 --- a/apps/web/app/api/repo/download/route.tsx +++ b/apps/web/app/api/repo/download/route.tsx @@ -1,9 +1,9 @@ /* eslint-disable no-console */ -import type { NextRequest } from 'next/server' -import { NextResponse } from 'next/server' -import { z } from 'zod' +import type { NextRequest } from "next/server" +import { NextResponse } from "next/server" +import { z } from "zod" -import { octokit } from '~/lib/octokit' +import { octokit } from "~/lib/octokit" const bodySchema = z.object({ owner: z.string(), @@ -14,38 +14,37 @@ export async function POST(request: NextRequest) { const body = await request.json() try { const { owner, repo } = bodySchema.parse(body) - console.log('Owner:', owner) - console.log('Repo:', repo) + console.log("Owner:", owner) + console.log("Repo:", repo) const response = await octokit.request( - 'GET /repos/{owner}/{repo}/zipball', + "GET /repos/{owner}/{repo}/zipball", { owner, repo, headers: { - 'X-GitHub-Api-Version': '2022-11-28', + "X-GitHub-Api-Version": "2022-11-28", }, }, ) if (response.status !== 200) { - console.error('GitHub API Error:', response.status, response.data) + console.error("GitHub API Error:", response.status, response.data) return NextResponse.json( - { success: false, error: 'GitHub API request failed' }, + { success: false, error: "GitHub API request failed" }, { status: 500 }, ) } - console.log('GitHub API response:', response) + console.log("GitHub API response:", response) const status = response.status const downloadUrl = response.url - console.log('Download URL:', downloadUrl) + console.log("Download URL:", downloadUrl) return NextResponse.json({ success: true, status, downloadUrl }) - } - catch (error: any) { - console.error('Error in /api/repo/download:', error) + } catch (error: any) { + console.error("Error in /api/repo/download:", error) return NextResponse.json( { success: false, error: error.message }, { status: 500 }, diff --git a/apps/web/app/robots.ts b/apps/web/app/robots.ts index 6f09b67e..78992e51 100644 --- a/apps/web/app/robots.ts +++ b/apps/web/app/robots.ts @@ -1,12 +1,12 @@ -import type { MetadataRoute } from 'next' +import type { MetadataRoute } from "next" export default function robots(): MetadataRoute.Robots { return { rules: { - userAgent: '*', - allow: '/', - disallow: ['/api/', '/_next/', '/public/'], + userAgent: "*", + allow: "/", + disallow: ["/api/", "/_next/", "/public/"], }, - sitemap: 'https://nyxui.design/sitemap.xml', + sitemap: "https://nyxui.design/sitemap.xml", } } diff --git a/apps/web/app/sitemap.ts b/apps/web/app/sitemap.ts index 92c950ca..f65d3365 100644 --- a/apps/web/app/sitemap.ts +++ b/apps/web/app/sitemap.ts @@ -1,22 +1,22 @@ -import type { MetadataRoute } from 'next' -import { headers } from 'next/headers' -import { allDocs, allPages } from 'content-collections' +import { allDocs, allPages } from "content-collections" +import type { MetadataRoute } from "next" +import { headers } from "next/headers" export default function sitemap(): MetadataRoute.Sitemap { const headersList = headers() - const domain = headersList.get('host') as string - const protocol = 'https' + const domain = headersList.get("host") as string + const protocol = "https" return [ { url: `${protocol}://${domain}`, lastModified: new Date(), }, - ...allPages.map(post => ({ + ...allPages.map((post) => ({ url: `${protocol}://${domain}/${post.slugAsParams}`, lastModified: new Date(), })), - ...allDocs.map(post => ({ + ...allDocs.map((post) => ({ url: `${protocol}://${domain}/docs/${post.slugAsParams}`, lastModified: post.date, })), diff --git a/apps/web/components/announcement.tsx b/apps/web/components/announcement.tsx index 54ee0974..38178a08 100644 --- a/apps/web/components/announcement.tsx +++ b/apps/web/components/announcement.tsx @@ -1,8 +1,8 @@ -import Link from 'next/link' -import { ArrowRightIcon } from '@radix-ui/react-icons' -import { Blocks, PieChart } from 'lucide-react' +import { ArrowRightIcon } from "@radix-ui/react-icons" +import { Blocks, PieChart } from "lucide-react" +import Link from "next/link" -import { Separator } from '~/registry/miami/ui/separator' +import { Separator } from "~/registry/miami/ui/separator" export function Announcement() { return ( @@ -10,10 +10,8 @@ export function Announcement() { href="/docs/changelog" className="group inline-flex items-center px-0.5 text-sm font-medium" > - - {' '} - - {' '} + {" "} + {" "} npx nyxb init diff --git a/apps/web/components/block-copy-button.tsx b/apps/web/components/block-copy-button.tsx index 3abcded0..d58176c5 100644 --- a/apps/web/components/block-copy-button.tsx +++ b/apps/web/components/block-copy-button.tsx @@ -1,18 +1,18 @@ -'use client' +"use client" -import * as React from 'react' -import { CheckIcon, ClipboardIcon } from 'lucide-react' +import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from "react" -import type { Event } from '~/lib/events' -import { trackEvent } from '~/lib/events' -import { ny } from '~/lib/utils' -import type { ButtonProps } from '~/registry/miami/ui/button' -import { Button } from '~/registry/miami/ui/button' +import type { Event } from "~/lib/events" +import { trackEvent } from "~/lib/events" +import { ny } from "~/lib/utils" +import type { ButtonProps } from "~/registry/miami/ui/button" +import { Button } from "~/registry/miami/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, -} from '~/registry/miami/ui/tooltip' +} from "~/registry/miami/ui/tooltip" export function BlockCopyButton({ event, @@ -21,7 +21,7 @@ export function BlockCopyButton({ className, ...props }: { - event: Event['name'] + event: Event["name"] name: string code: string } & ButtonProps) { @@ -40,7 +40,7 @@ export function BlockCopyButton({ size="icon" variant="outline" className={ny( - '[&_svg]-h-3.5 size-7 rounded-[6px] [&_svg]:w-3.5', + "[&_svg]-h-3.5 size-7 rounded-[6px] [&_svg]:w-3.5", className, )} onClick={() => { @@ -59,7 +59,9 @@ export function BlockCopyButton({ {hasCopied ? : } - Copy code + + Copy code + ) } diff --git a/apps/web/components/blur-image.tsx b/apps/web/components/blur-image.tsx index a50275b9..76def026 100644 --- a/apps/web/components/blur-image.tsx +++ b/apps/web/components/blur-image.tsx @@ -1,8 +1,8 @@ -'use client' +"use client" -import { useEffect, useState } from 'react' -import type { ImageProps } from 'next/image' -import Image from 'next/image' +import type { ImageProps } from "next/image" +import Image from "next/image" +import { useEffect, useState } from "react" export default function BlurImage(props: ImageProps) { const [loading, setLoading] = useState(true) @@ -14,7 +14,7 @@ export default function BlurImage(props: ImageProps) { {...props} src={src} alt={props.alt} - className={`${props.className} ${loading ? 'blur-[2px]' : 'blur-0'}`} + className={`${props.className} ${loading ? "blur-[2px]" : "blur-0"}`} onLoadingComplete={async () => { setLoading(false) }} diff --git a/apps/web/components/callout.tsx b/apps/web/components/callout.tsx index 9422c5c7..e6a508dd 100644 --- a/apps/web/components/callout.tsx +++ b/apps/web/components/callout.tsx @@ -1,8 +1,4 @@ -import { - Alert, - AlertDescription, - AlertTitle, -} from '~/registry/miami/ui/alert' +import { Alert, AlertDescription, AlertTitle } from "~/registry/miami/ui/alert" interface CalloutProps { icon?: string diff --git a/apps/web/components/chart-copy-button.tsx b/apps/web/components/chart-copy-button.tsx index 69929f27..503df2ae 100644 --- a/apps/web/components/chart-copy-button.tsx +++ b/apps/web/components/chart-copy-button.tsx @@ -1,18 +1,18 @@ -'use client' +"use client" -import * as React from 'react' -import { CheckIcon, ClipboardIcon } from 'lucide-react' +import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from "react" -import type { Event } from '~/lib/events' -import { trackEvent } from '~/lib/events' -import { ny } from '~/lib/utils' -import type { ButtonProps } from '~/registry/miami/ui/button' -import { Button } from '~/registry/miami/ui/button' +import type { Event } from "~/lib/events" +import { trackEvent } from "~/lib/events" +import { ny } from "~/lib/utils" +import type { ButtonProps } from "~/registry/miami/ui/button" +import { Button } from "~/registry/miami/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, -} from '~/registry/miami/ui/tooltip' +} from "~/registry/miami/ui/tooltip" export function ChartCopyButton({ event, @@ -21,7 +21,7 @@ export function ChartCopyButton({ className, ...props }: { - event: Event['name'] + event: Event["name"] name: string code: string } & ButtonProps) { @@ -40,7 +40,7 @@ export function ChartCopyButton({ size="icon" variant="outline" className={ny( - '[&_svg]-h-3.5 size-7 rounded-[6px] [&_svg]:w-3.5', + "[&_svg]-h-3.5 size-7 rounded-[6px] [&_svg]:w-3.5", className, )} onClick={() => { @@ -59,7 +59,9 @@ export function ChartCopyButton({ {hasCopied ? : } - Copy code + + Copy code + ) } diff --git a/apps/web/components/charts-nav.tsx b/apps/web/components/charts-nav.tsx index 820de305..59966f18 100644 --- a/apps/web/components/charts-nav.tsx +++ b/apps/web/components/charts-nav.tsx @@ -1,42 +1,42 @@ -'use client' +"use client" -import Link from 'next/link' -import { usePathname } from 'next/navigation' +import Link from "next/link" +import { usePathname } from "next/navigation" -import { ny } from '~/lib/utils' -import { ScrollArea, ScrollBar } from '~/registry/miami/ui/scroll-area' +import { ny } from "~/lib/utils" +import { ScrollArea, ScrollBar } from "~/registry/miami/ui/scroll-area" const examples = [ { - name: 'Area Chart', - href: '/charts#area-chart', + name: "Area Chart", + href: "/charts#area-chart", }, { - name: 'Bar Chart', - href: '/charts#bar-chart', + name: "Bar Chart", + href: "/charts#bar-chart", }, { - name: 'Line Chart', - href: '/charts#line-chart', + name: "Line Chart", + href: "/charts#line-chart", }, { - name: 'Pie Chart', - href: '/charts#pie-chart', + name: "Pie Chart", + href: "/charts#pie-chart", }, { - name: 'Radar Chart', - href: '/charts#radar-chart', + name: "Radar Chart", + href: "/charts#radar-chart", }, { - name: 'Radial Chart', - href: '/charts#radial-chart', + name: "Radial Chart", + href: "/charts#radial-chart", }, ] export function ChartsNav({ className, ...props -}: React.ComponentProps<'div'>) { +}: React.ComponentProps<"div">) { const pathname = usePathname() return ( @@ -44,7 +44,7 @@ export function ChartsNav({
{example.name} diff --git a/apps/web/components/charts-theme-switcher.tsx b/apps/web/components/charts-theme-switcher.tsx index 19df03da..9e34afd8 100644 --- a/apps/web/components/charts-theme-switcher.tsx +++ b/apps/web/components/charts-theme-switcher.tsx @@ -1,24 +1,24 @@ -'use client' +"use client" -import * as React from 'react' -import { useTheme } from 'next-themes' +import { useTheme } from "next-themes" +import * as React from "react" -import type { getChartThemes } from '~/lib/chart-themes' -import { ny } from '~/lib/utils' -import { useChartConfig } from '~/hooks/use-chart-config' -import { Skeleton } from '~/registry/miami/ui/skeleton' +import { useChartConfig } from "~/hooks/use-chart-config" +import type { getChartThemes } from "~/lib/chart-themes" +import { ny } from "~/lib/utils" +import { Skeleton } from "~/registry/miami/ui/skeleton" import { Tooltip, TooltipContent, TooltipTrigger, -} from '~/registry/miami/ui/tooltip' +} from "~/registry/miami/ui/tooltip" type Themes = ReturnType export function ChartsThemeSwitcher({ themes, className, -}: { themes: Themes } & React.ComponentProps<'div'>) { +}: { themes: Themes } & React.ComponentProps<"div">) { const { theme } = useTheme() const [mounted, setMounted] = React.useState(false) const { chartConfig, setChartConfig } = useChartConfig() @@ -32,11 +32,11 @@ export function ChartsThemeSwitcher({ return (
- {themes.map(theme => ( + {themes.map((theme) => (
{themes.map((chartTheme) => { const isActive = chartTheme.name === activeChartTheme.name - const isDarkTheme = ['Midnight'].includes(chartTheme.name) - const cssVars - = mounted && theme === 'dark' - ? chartTheme.cssVars.dark - : chartTheme.cssVars.light + const isDarkTheme = ["Midnight"].includes(chartTheme.name) + const cssVars = + mounted && theme === "dark" + ? chartTheme.cssVars.dark + : chartTheme.cssVars.light return ( - + {chartTheme.name} @@ -114,15 +127,15 @@ export function ChartsThemeSwitcher({ .chart-wrapper, [data-chart] { ${Object.entries(activeChartTheme.cssVars.light) - .map(([key, value]) => `${key}: ${value};`) - .join('\n')} + .map(([key, value]) => `${key}: ${value};`) + .join("\n")} } .dark .chart-wrapper, .dark [data-chart] { ${Object.entries(activeChartTheme.cssVars.dark) - .map(([key, value]) => `${key}: ${value};`) - .join('\n')} + .map(([key, value]) => `${key}: ${value};`) + .join("\n")} } `} diff --git a/apps/web/components/code-block-wrapper.tsx b/apps/web/components/code-block-wrapper.tsx index 1d939755..f03ad7e9 100644 --- a/apps/web/components/code-block-wrapper.tsx +++ b/apps/web/components/code-block-wrapper.tsx @@ -1,21 +1,21 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" -import { ny } from '~/lib/utils' -import { Button } from '~/registry/miami/ui/button' +import { ny } from "~/lib/utils" +import { Button } from "~/registry/miami/ui/button" import { Collapsible, CollapsibleContent, CollapsibleTrigger, -} from '~/registry/miami/ui/collapsible' +} from "~/registry/miami/ui/collapsible" interface CodeBlockProps extends React.HTMLAttributes { expandButtonTitle?: string } export function CodeBlockWrapper({ - expandButtonTitle = 'View Code', + expandButtonTitle = "View Code", className, children, ...props @@ -24,15 +24,17 @@ export function CodeBlockWrapper({ return ( -
+
{children} @@ -40,13 +42,13 @@ export function CodeBlockWrapper({
diff --git a/apps/web/components/component-example.tsx b/apps/web/components/component-example.tsx index be26d740..956608eb 100644 --- a/apps/web/components/component-example.tsx +++ b/apps/web/components/component-example.tsx @@ -1,20 +1,20 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" -import { ny } from '~/lib/utils' -import { CopyButton, CopyWithClassNames } from '~/components/copy-button' +import { CopyButton, CopyWithClassNames } from "~/components/copy-button" +import { ny } from "~/lib/utils" import { Tabs, TabsContent, TabsList, TabsTrigger, -} from '~/registry/miami/ui/tabs' +} from "~/registry/miami/ui/tabs" interface ComponentExampleProps extends React.HTMLAttributes { extractClassname?: boolean extractedClassNames?: string - align?: 'center' | 'start' | 'end' + align?: "center" | "start" | "end" src?: string } @@ -23,7 +23,7 @@ export function ComponentExample({ className, extractClassname, extractedClassNames, - align = 'center', + align = "center", src: _, ...props }: ComponentExampleProps) { @@ -33,7 +33,7 @@ export function ComponentExample({ const codeString = React.useMemo(() => { if ( - typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined' + typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined" ) { const [, Button] = React.Children.toArray( Code.props.children, @@ -44,7 +44,10 @@ export function ComponentExample({ return (
@@ -63,29 +66,27 @@ export function ComponentExample({ Code - {extractedClassNames - ? ( - - ) - : ( - codeString && ( - - ) - )} + {extractedClassNames ? ( + + ) : ( + codeString && ( + + ) + )}
{Example} @@ -96,13 +97,11 @@ export function ComponentExample({
{Code}
- {Children?.length - ? ( -
- {Children} -
- ) - : null} + {Children?.length ? ( +
+ {Children} +
+ ) : null}
diff --git a/apps/web/components/component-installation.tsx b/apps/web/components/component-installation.tsx index 6804f382..692277c5 100644 --- a/apps/web/components/component-installation.tsx +++ b/apps/web/components/component-installation.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import * as React from 'react' +import type * as React from "react" interface ComponentInstallationProps extends React.HTMLAttributes {} diff --git a/apps/web/components/component-source.tsx b/apps/web/components/component-source.tsx index fbddab3b..6cac1a0c 100644 --- a/apps/web/components/component-source.tsx +++ b/apps/web/components/component-source.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import * as React from 'react' +import type * as React from "react" -import { ny } from '~/lib/utils' -import { CodeBlockWrapper } from '~/components/code-block-wrapper' +import { CodeBlockWrapper } from "~/components/code-block-wrapper" +import { ny } from "~/lib/utils" interface ComponentSourceProps extends React.HTMLAttributes { src: string @@ -17,7 +17,7 @@ export function ComponentSource({ return ( {children} diff --git a/apps/web/components/component-wrapper.tsx b/apps/web/components/component-wrapper.tsx index 88184339..20cb9c97 100644 --- a/apps/web/components/component-wrapper.tsx +++ b/apps/web/components/component-wrapper.tsx @@ -1,4 +1,4 @@ -import { ny } from '~/lib/utils' +import { ny } from "~/lib/utils" interface ComponentWrapperProps { className?: string @@ -6,20 +6,24 @@ interface ComponentWrapperProps { dots?: boolean } -function ComponentWrapper({ className, children, dots = true }: ComponentWrapperProps) { +function ComponentWrapper({ + className, + children, + dots = true, +}: ComponentWrapperProps) { return (
{dots && (
)} diff --git a/apps/web/components/contribute.tsx b/apps/web/components/contribute.tsx index 7c207e86..576ca72d 100644 --- a/apps/web/components/contribute.tsx +++ b/apps/web/components/contribute.tsx @@ -1,35 +1,35 @@ -import type { Doc } from 'content-collections' -import { BugIcon, LightbulbIcon, PencilIcon } from 'lucide-react' -import Link from 'next/link' +import type { Doc } from "content-collections" +import { BugIcon, LightbulbIcon, PencilIcon } from "lucide-react" +import Link from "next/link" -import { getGitHubIssueUrl, getGithubFileUrl } from '~/lib/github' +import { getGitHubIssueUrl, getGithubFileUrl } from "~/lib/github" export function Contribute({ doc }: { doc: Doc }) { const contributeLinks = [ { - text: 'Report an issue', + text: "Report an issue", icon: BugIcon, href: getGitHubIssueUrl({ - owner: 'nyxb-ui', - repo: 'ui', + owner: "nyxb-ui", + repo: "ui", title: `[bug]: ${doc.slug}`, - labels: ['bug', 'documentation'], - template: 'bug_report.md', + labels: ["bug", "documentation"], + template: "bug_report.md", }), }, { - text: 'Request a feature', + text: "Request a feature", icon: LightbulbIcon, href: getGitHubIssueUrl({ - owner: 'nyxb-ui', - repo: 'ui', + owner: "nyxb-ui", + repo: "ui", title: `[feat]: ${doc.slug}`, - labels: ['enhancement'], - template: 'feature_request.md', + labels: ["enhancement"], + template: "feature_request.md", }), }, { - text: 'Edit this page', + text: "Edit this page", icon: PencilIcon, href: getGithubFileUrl(doc.slug), }, diff --git a/apps/web/components/copy-button.tsx b/apps/web/components/copy-button.tsx index b1bcdea7..e63406fe 100644 --- a/apps/web/components/copy-button.tsx +++ b/apps/web/components/copy-button.tsx @@ -1,39 +1,38 @@ -'use client' - -import * as React from 'react' -import type { DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu' -import { CheckIcon, ClipboardIcon } from 'lucide-react' -import type { NpmCommands } from 'types/unist' - -import type { Event } from '~/lib/events' -import { trackEvent } from '~/lib/events' -import { ny } from '~/lib/utils' -import type { ButtonProps } from '~/registry/miami/ui/button' -import { Button } from '~/registry/miami/ui/button' +"use client" + +import type { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu" +import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from "react" +import type { NpmCommands } from "types/unist" + +import type { Event } from "~/lib/events" +import { trackEvent } from "~/lib/events" +import { ny } from "~/lib/utils" +import type { ButtonProps } from "~/registry/miami/ui/button" +import { Button } from "~/registry/miami/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from '~/registry/miami/ui/dropdown-menu' +} from "~/registry/miami/ui/dropdown-menu" interface CopyButtonProps extends ButtonProps { value: string src?: string - event?: Event['name'] + event?: Event["name"] } export async function copyToClipboardWithMeta(value: string, event?: Event) { navigator.clipboard.writeText(value) - if (event) - trackEvent(event) + if (event) trackEvent(event) } export function CopyButton({ value, className, src, - variant = 'ghost', + variant = "ghost", event, ...props }: CopyButtonProps) { @@ -50,7 +49,7 @@ export function CopyButton({ size="icon" variant={variant} className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:size-3', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:size-3", className, )} onClick={() => { @@ -58,11 +57,11 @@ export function CopyButton({ value, event ? { - name: event, - properties: { - code: value, - }, - } + name: event, + properties: { + code: value, + }, + } : undefined, ) setHasCopied(true) @@ -107,17 +106,15 @@ export function CopyWithClassNames({ size="icon" variant="ghost" className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className, )} > - {hasCopied - ? ( - - ) - : ( - - )} + {hasCopied ? ( + + ) : ( + + )} Copy @@ -151,9 +148,9 @@ export function CopyNpmCommandButton({ }, [hasCopied]) const copyCommand = React.useCallback( - (value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => { + (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => { copyToClipboardWithMeta(value, { - name: 'copy_npm_command', + name: "copy_npm_command", properties: { command: value, pm, @@ -171,38 +168,36 @@ export function CopyNpmCommandButton({ size="icon" variant="ghost" className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className, )} > - {hasCopied - ? ( - - ) - : ( - - )} + {hasCopied ? ( + + ) : ( + + )} Copy copyCommand(commands.__npmCommand__, 'npm')} + onClick={() => copyCommand(commands.__npmCommand__, "npm")} > npm copyCommand(commands.__yarnCommand__, 'yarn')} + onClick={() => copyCommand(commands.__yarnCommand__, "yarn")} > yarn copyCommand(commands.__pnpmCommand__, 'pnpm')} + onClick={() => copyCommand(commands.__pnpmCommand__, "pnpm")} > pnpm copyCommand(commands.__bunCommand__, 'bun')} + onClick={() => copyCommand(commands.__bunCommand__, "bun")} > bun diff --git a/apps/web/components/copy-button2.tsx b/apps/web/components/copy-button2.tsx index 34847357..a3accf96 100644 --- a/apps/web/components/copy-button2.tsx +++ b/apps/web/components/copy-button2.tsx @@ -1,26 +1,26 @@ -'use client' - -import * as React from 'react' -import type { DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu' -import { CheckIcon, ClipboardIcon } from 'lucide-react' -import type { NpmCommands } from 'types/unist' - -import type { Event } from '~/lib/events' -import { trackEvent } from '~/lib/events' -import { ny } from '~/lib/utils' -import type { ButtonProps } from '~/registry/miami/ui/button' -import { Button } from '~/registry/miami/ui/button' +"use client" + +import type { DropdownMenuTriggerProps } from "@radix-ui/react-dropdown-menu" +import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from "react" +import type { NpmCommands } from "types/unist" + +import type { Event } from "~/lib/events" +import { trackEvent } from "~/lib/events" +import { ny } from "~/lib/utils" +import type { ButtonProps } from "~/registry/miami/ui/button" +import { Button } from "~/registry/miami/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from '~/registry/miami/ui/dropdown-menu' +} from "~/registry/miami/ui/dropdown-menu" interface CopyButtonProps extends ButtonProps { value: string src?: string - event?: Event['name'] + event?: Event["name"] } export async function copyToClipboardWithMeta(value: string, event?: Event) { @@ -34,7 +34,7 @@ export function CopyButton({ value, className, src, - variant = 'ghost', + variant = "ghost", event, ...props }: CopyButtonProps) { @@ -51,7 +51,7 @@ export function CopyButton({ size="icon" variant={variant} className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:size-3', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:size-3", className, )} onClick={() => { @@ -59,11 +59,11 @@ export function CopyButton({ value, event ? { - name: event, - properties: { - code: value, - }, - } + name: event, + properties: { + code: value, + }, + } : undefined, ) setHasCopied(true) @@ -108,17 +108,15 @@ export function CopyWithClassNames({ size="icon" variant="ghost" className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className, )} > - {hasCopied - ? ( - - ) - : ( - - )} + {hasCopied ? ( + + ) : ( + + )} Copy @@ -152,9 +150,9 @@ export function CopyNpmCommandButton({ }, [hasCopied]) const copyCommand = React.useCallback( - (value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => { + (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => { copyToClipboardWithMeta(value, { - name: 'copy_npm_command', + name: "copy_npm_command", properties: { command: value, pm, @@ -172,38 +170,36 @@ export function CopyNpmCommandButton({ size="icon" variant="ghost" className={ny( - 'relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50', + "relative z-10 size-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className, )} > - {hasCopied - ? ( - - ) - : ( - - )} + {hasCopied ? ( + + ) : ( + + )} Copy copyCommand(commands.__npmCommand__, 'npm')} + onClick={() => copyCommand(commands.__npmCommand__, "npm")} > npm copyCommand(commands.__yarnCommand__, 'yarn')} + onClick={() => copyCommand(commands.__yarnCommand__, "yarn")} > yarn copyCommand(commands.__pnpmCommand__, 'pnpm')} + onClick={() => copyCommand(commands.__pnpmCommand__, "pnpm")} > pnpm copyCommand(commands.__bunCommand__, 'bun')} + onClick={() => copyCommand(commands.__bunCommand__, "bun")} > bun diff --git a/apps/web/components/examples-nav.tsx b/apps/web/components/examples-nav.tsx index a4305301..d00669ca 100644 --- a/apps/web/components/examples-nav.tsx +++ b/apps/web/components/examples-nav.tsx @@ -1,52 +1,52 @@ -'use client' +"use client" -import Link from 'next/link' -import { usePathname } from 'next/navigation' -import { ArrowRightIcon } from '@radix-ui/react-icons' +import { ArrowRightIcon } from "@radix-ui/react-icons" +import Link from "next/link" +import { usePathname } from "next/navigation" -import { ny } from '~/lib/utils' -import { ScrollArea, ScrollBar } from '~/registry/miami/ui/scroll-area' +import { ny } from "~/lib/utils" +import { ScrollArea, ScrollBar } from "~/registry/miami/ui/scroll-area" const examples = [ { - name: 'Mail', - href: '/examples/mail', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/mail', + name: "Mail", + href: "/examples/mail", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/mail", }, { - name: 'Dashboard', - href: '/examples/dashboard', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/dashboard', + name: "Dashboard", + href: "/examples/dashboard", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/dashboard", }, { - name: 'Cards', - href: '/examples/cards', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/cards', + name: "Cards", + href: "/examples/cards", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/cards", }, { - name: 'Tasks', - href: '/examples/tasks', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/tasks', + name: "Tasks", + href: "/examples/tasks", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/tasks", }, { - name: 'Playground', - href: '/examples/playground', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/playground', + name: "Playground", + href: "/examples/playground", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/playground", }, { - name: 'Forms', - href: '/examples/forms', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/forms', + name: "Forms", + href: "/examples/forms", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/forms", }, { - name: 'Music', - href: '/examples/music', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/music', + name: "Music", + href: "/examples/music", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/music", }, { - name: 'Authentication', - href: '/examples/authentication', - code: 'https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/authentication', + name: "Authentication", + href: "/examples/authentication", + code: "https://github.com/nyxb/nyxb-ui/tree/main/apps/www/app/(app)/examples/authentication", }, ] @@ -58,17 +58,17 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) { return (
-
+
{examples.map((example, index) => ( {example.name} @@ -86,10 +86,11 @@ interface ExampleCodeLinkProps { } export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) { - const example = examples.find(example => pathname?.startsWith(example.href)) + const example = examples.find((example) => + pathname?.startsWith(example.href), + ) - if (!example?.code) - return null + if (!example?.code) return null return ( {/* Mobile Background Overlay */}
@@ -31,7 +34,7 @@ export default function GlobeGrid({ className, children }: GlobeGridProps) { width="100%" viewBox="-1 -1 802 402" style={{ - transform: 'translateY(0px) scale(1.002)', + transform: "translateY(0px) scale(1.002)", }} > @@ -41,9 +44,7 @@ export default function GlobeGrid({ className, children }: GlobeGridProps) {
{/* Content */} -
- {children} -
+
{children}
) } @@ -51,12 +52,7 @@ export default function GlobeGrid({ className, children }: GlobeGridProps) { function GlobeWireframe() { return ( - + {/* Vertical curved lines */} {[-400, -266.667, -133.333, 0, 133.333, 266.667, 400].map((x, i) => ( diff --git a/apps/web/components/mdx-components.tsx b/apps/web/components/mdx-components.tsx index db51acbd..3177ff8c 100644 --- a/apps/web/components/mdx-components.tsx +++ b/apps/web/components/mdx-components.tsx @@ -18,6 +18,7 @@ import { CopyButton, CopyNpmCommandButton } from "~/components/copy-button" import { FrameworkDocs } from "~/components/framework-docs" import { PropsTable } from "~/components/props-table" import RepoDownload from "~/components/repo-download" +import { SimpleComponentPreview } from "~/components/simple-component-preview" import { StyleWrapper } from "~/components/style-wrapper" import TechStack from "~/components/tech-stack" import TemplatePreview from "~/components/template-preview" @@ -256,6 +257,7 @@ const components = { Image, Callout, ComponentPreview, + SimpleComponentPreview, ComponentExample, ComponentSource, AspectRatio, diff --git a/apps/web/components/mode-toggle.tsx b/apps/web/components/mode-toggle.tsx index 4f438703..57260718 100644 --- a/apps/web/components/mode-toggle.tsx +++ b/apps/web/components/mode-toggle.tsx @@ -1,15 +1,15 @@ -'use client' +"use client" -import React from 'react' -import { MoonIcon, SunIcon } from '@radix-ui/react-icons' -import { useTheme } from 'next-themes' +import { MoonIcon, SunIcon } from "@radix-ui/react-icons" +import { useTheme } from "next-themes" +import React from "react" -import { ny } from '~/lib/utils' -import { Button } from '~/components/ui/button' +import { Button } from "~/components/ui/button" +import { ny } from "~/lib/utils" export const ModeToggle = React.forwardRef< HTMLButtonElement, - React.ComponentPropsWithoutRef & { className?: string } + React.ComponentPropsWithoutRef & { className?: string } >(({ className, ...props }, ref) => { const { theme, setTheme } = useTheme() @@ -19,9 +19,9 @@ export const ModeToggle = React.forwardRef< variant="ghost" type="button" size="icon" - className={ny('px-2', className)} + className={ny("px-2", className)} aria-label="Toggle theme" - onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} + onClick={() => setTheme(theme === "dark" ? "light" : "dark")} {...props} > @@ -30,4 +30,4 @@ export const ModeToggle = React.forwardRef< ) }) -ModeToggle.displayName = 'ModeToggle' +ModeToggle.displayName = "ModeToggle" diff --git a/apps/web/components/props-table.tsx b/apps/web/components/props-table.tsx index 353dc9c6..583f1f52 100644 --- a/apps/web/components/props-table.tsx +++ b/apps/web/components/props-table.tsx @@ -1,22 +1,22 @@ -'use client' +"use client" -import React from 'react' -import { DividerHorizontalIcon, InfoCircledIcon } from '@radix-ui/react-icons' +import { DividerHorizontalIcon, InfoCircledIcon } from "@radix-ui/react-icons" +import type React from "react" -import { Button } from '~/registry/miami/ui/button' +import { Button } from "~/registry/miami/ui/button" import { Popover, PopoverContent, PopoverTrigger, -} from '~/registry/miami/ui/popover' -import { ScrollArea } from '~/registry/miami/ui/scroll-area' +} from "~/registry/miami/ui/popover" +import { ScrollArea } from "~/registry/miami/ui/scroll-area" import { TableBody, TableCell, TableHead, TableHeader, TableRow, -} from '~/registry/miami/ui/table' +} from "~/registry/miami/ui/table" export interface PropDef { name: string @@ -39,7 +39,9 @@ export function PropsTable({ - + Prop Type @@ -60,12 +62,15 @@ export function PropsTable({ i, ) => { return ( - +
{name} - {required ? '*' : null} + {required ? "*" : null} {description && ( @@ -84,10 +89,14 @@ export function PropsTable({ className="radix-themes-custom-fonts" onOpenAutoFocus={(event) => { event.preventDefault() - ;(event.currentTarget as HTMLElement)?.focus() + ;( + event.currentTarget as HTMLElement + )?.focus() }} > -

{description}

+

+ {description} +

)} @@ -111,14 +120,16 @@ export function PropsTable({
{type} @@ -132,17 +143,15 @@ export function PropsTable({ - {defaultValue - ? ( - - {defaultValue} - - ) - : ( - - )} + {defaultValue ? ( + + {defaultValue} + + ) : ( + + )} ) diff --git a/apps/web/components/repo-download.tsx b/apps/web/components/repo-download.tsx index bd23cc63..efe4e2dc 100644 --- a/apps/web/components/repo-download.tsx +++ b/apps/web/components/repo-download.tsx @@ -1,13 +1,13 @@ -'use client' +"use client" -import { useState } from 'react' -import Link from 'next/link' -import { ArrowRightIcon, Download } from 'lucide-react' -import { toast } from 'sonner' +import { ArrowRightIcon, Download } from "lucide-react" +import Link from "next/link" +import { useState } from "react" +import { toast } from "sonner" -import { ny } from '~/lib/utils' -import { Button, buttonVariants } from '~/components/ui/button' -import { Icons } from '~/components/icons' +import { Icons } from "~/components/icons" +import { Button, buttonVariants } from "~/components/ui/button" +import { ny } from "~/lib/utils" interface RepoDownloadProps { repo: string @@ -27,13 +27,16 @@ export default function RepoDownload({ try { // eslint-disable-next-line no-console - console.log('Fetching from:', `${process.env.NEXT_PUBLIC_APP_URL}/api/repo/download`) + console.log( + "Fetching from:", + `${process.env.NEXT_PUBLIC_APP_URL}/api/repo/download`, + ) const response = await fetch( `${process.env.NEXT_PUBLIC_APP_URL}/api/repo/download`, { - method: 'POST', + method: "POST", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, body: JSON.stringify({ repo, owner }), }, @@ -44,12 +47,10 @@ export default function RepoDownload({ const data = await response.json() const downloadUrl = data.downloadUrl window.location.href = downloadUrl - } - catch (error) { - toast.error('Error occured while downloading. Please try again.') - console.error('Download Error:', error) - } - finally { + } catch (error) { + toast.error("Error occured while downloading. Please try again.") + console.error("Download Error:", error) + } finally { setLoading(false) } } @@ -61,7 +62,7 @@ export default function RepoDownload({ disabled={loading} className="not-prose group relative w-full gap-2" > - {loading ? 'Downloading' : 'Free Download'} + {loading ? "Downloading" : "Free Download"} {!loading && } {loading && } @@ -75,9 +76,9 @@ export default function RepoDownload({ rel="noopener noreferrer" className={ny( buttonVariants({ - variant: 'default', + variant: "default", }), - 'not-prose group relative w-full gap-1', + "not-prose group relative w-full gap-1", )} > Donate Now diff --git a/apps/web/components/sections/component-demos.tsx b/apps/web/components/sections/component-demos.tsx index 1138237c..c7f3c1f9 100644 --- a/apps/web/components/sections/component-demos.tsx +++ b/apps/web/components/sections/component-demos.tsx @@ -1,11 +1,11 @@ -import { allPages } from 'content-collections' -import { notFound } from 'next/navigation' -import { Mdx } from '~/components/mdx-components' +import { allPages } from "content-collections" +import { notFound } from "next/navigation" +import { Mdx } from "~/components/mdx-components" -const PAGE = 'home' +const PAGE = "home" export default function ComponentDemos() { - const page = allPages.find(page => page.slugAsParams === PAGE) + const page = allPages.find((page) => page.slugAsParams === PAGE) if (!page) { notFound() @@ -17,8 +17,8 @@ export default function ComponentDemos() { Component Demos

- Here are some of the components that you can use to build your landing - pages. + Here are some of the components that you can use to build your + landing pages.

diff --git a/apps/web/components/sections/cta-section.tsx b/apps/web/components/sections/cta-section.tsx index 9649307f..b980f7b7 100644 --- a/apps/web/components/sections/cta-section.tsx +++ b/apps/web/components/sections/cta-section.tsx @@ -1,6 +1,6 @@ -import { ChevronRight, HeartHandshake } from 'lucide-react' -import { buttonVariants } from '~/components/ui/button' -import { ny } from '~/lib/utils' +import { ChevronRight, HeartHandshake } from "lucide-react" +import { buttonVariants } from "~/components/ui/button" +import { ny } from "~/lib/utils" export default function CTASection() { return ( @@ -14,17 +14,19 @@ export default function CTASection() {

Love what you see?

-

Fuel my creativity with a virtual coffee!

+

+ Fuel my creativity with a virtual coffee! +

Buy Me a Coffee diff --git a/apps/web/components/sections/hero.tsx b/apps/web/components/sections/hero.tsx index e9012a6e..5382b164 100644 --- a/apps/web/components/sections/hero.tsx +++ b/apps/web/components/sections/hero.tsx @@ -1,26 +1,25 @@ -import { compareDesc } from 'date-fns' -import { ChevronRight } from 'lucide-react' -import Link from 'next/link' -import { allDocs } from 'content-collections' +import { allDocs } from "content-collections" +import { compareDesc } from "date-fns" +import { ChevronRight } from "lucide-react" +import Link from "next/link" -import TechStack from '~/components/tech-stack' -import { buttonVariants } from '~/components/ui/button' -import { Separator } from '~/components/ui/separator' -import { ny } from '~/lib/utils' +import TechStack from "~/components/tech-stack" +import { buttonVariants } from "~/components/ui/button" +import { Separator } from "~/components/ui/separator" +import { ny } from "~/lib/utils" export default async function Hero() { const post = allDocs .filter( - post => - post.date && post.date <= new Date().toISOString() && post.published, + (post) => + post.date && + post.date <= new Date().toISOString() && + post.published, ) .sort((a, b) => { - if (!a.date && !b.date) - return 0 // Both dates are undefined, keep original order - if (!a.date) - return 1 // Move a to the end if date is undefined - if (!b.date) - return -1 // Move b to the end if date is undefined + if (!a.date && !b.date) return 0 // Both dates are undefined, keep original order + if (!a.date) return 1 // Move a to the end if date is undefined + if (!b.date) return -1 // Move b to the end if date is undefined return compareDesc(new Date(a.date), new Date(b.date)) // Both dates are defined, proceed with comparison })[0] @@ -34,27 +33,27 @@ export default async function Hero() { href={post.slug} className={ny( buttonVariants({ - variant: 'outline', - size: 'sm', + variant: "outline", + size: "sm", }), - 'rounded-full', + "rounded-full", )} > - 🎉 - {' '} - - Introducing - {' '} - {post.title} + 🎉{" "} + + Introducing {post.title}

Nyxb UI @@ -62,15 +61,8 @@ export default async function Hero() {

- 160+ free and open-source UI elements built with - {' '} - React - , - Typescript - , - Tailwind CSS - , and - {' '} + 160+ free and open-source UI elements built with{" "} + React,Typescript,Tailwind CSS, and{" "} Framer Motion .
@@ -83,10 +75,10 @@ export default async function Hero() { href="/components" className={ny( buttonVariants({ - variant: 'rainbow', - size: 'lg', + variant: "rainbow", + size: "lg", }), - 'w-full gap-2', + "w-full gap-2", )} > Browse Components @@ -96,10 +88,10 @@ export default async function Hero() { href="/components" className={ny( buttonVariants({ - size: 'lg', - variant: 'rainbow-outline', + size: "lg", + variant: "rainbow-outline", }), - 'w-full gap-2', + "w-full gap-2", )} > Browse Templates @@ -114,11 +106,11 @@ export default async function Hero() {

diff --git a/apps/web/components/sections/showcase.tsx b/apps/web/components/sections/showcase.tsx index f3020cd3..b183198a 100644 --- a/apps/web/components/sections/showcase.tsx +++ b/apps/web/components/sections/showcase.tsx @@ -1,9 +1,9 @@ -import Image from 'next/image' -import Link from 'next/link' -import { ChevronRightIcon } from '@radix-ui/react-icons' -import { allShowcases } from 'content-collections' +import { ChevronRightIcon } from "@radix-ui/react-icons" +import { allShowcases } from "content-collections" +import Image from "next/image" +import Link from "next/link" -import Marquee from '~/registry/miami/ui/marquee' +import Marquee from "~/registry/miami/ui/marquee" export interface ShowcaseCardProps { title: string diff --git a/apps/web/components/sections/testimonials.tsx b/apps/web/components/sections/testimonials.tsx index 172d76fa..004ace3d 100644 --- a/apps/web/components/sections/testimonials.tsx +++ b/apps/web/components/sections/testimonials.tsx @@ -1,31 +1,31 @@ -import Marquee from '~/registry/miami/ui/marquee' -import TweetCard from '~/registry/miami/ui/tweet-card' +import Marquee from "~/registry/miami/ui/marquee" +import TweetCard from "~/registry/miami/ui/tweet-card" const tweets = [ - 'https://x.com/chronark_/status/1754781648262967323', - 'https://x.com/pkp_io/status/1684561895481802753', - 'https://x.com/devcagatay/status/1684573935466328065', - 'https://x.com/KanishkKhurana_/status/1684613797984800768', - 'https://x.com/WhopIO/status/1722690049374830639', - 'https://x.com/steventey/status/1722659583464968612', - 'https://x.com/AwesomAmri/status/1668432554842619906', - 'https://x.com/taishik_/status/1668510585926066176', - 'https://x.com/SullyOmarr/status/1668506160620769280', - 'https://x.com/sup_nim/status/1668525144409624578', - 'https://x.com/JakeDuth/status/1668442365625790465', - 'https://x.com/0xRaduan/status/1668557577985179648', - 'https://x.com/yazinsai/status/1668617800934641672', + "https://x.com/chronark_/status/1754781648262967323", + "https://x.com/pkp_io/status/1684561895481802753", + "https://x.com/devcagatay/status/1684573935466328065", + "https://x.com/KanishkKhurana_/status/1684613797984800768", + "https://x.com/WhopIO/status/1722690049374830639", + "https://x.com/steventey/status/1722659583464968612", + "https://x.com/AwesomAmri/status/1668432554842619906", + "https://x.com/taishik_/status/1668510585926066176", + "https://x.com/SullyOmarr/status/1668506160620769280", + "https://x.com/sup_nim/status/1668525144409624578", + "https://x.com/JakeDuth/status/1668442365625790465", + "https://x.com/0xRaduan/status/1668557577985179648", + "https://x.com/yazinsai/status/1668617800934641672", - 'https://x.com/wes_walke/status/1668612106696941570', - 'https://x.com/DevAlien/status/1668618017528479745', - 'https://x.com/fredmaiaarantes/status/1684676668445622272', - 'https://x.com/DesignSumu/status/1668559314272022528', - 'https://x.com/commandodev/status/1668640878225764354', - 'https://x.com/SandBoxSo/status/1668570645741948930', - 'https://x.com/sxndrao/status/1668634137547399168', - 'https://x.com/jordienr/status/1681389309037772820', - 'https://x.com/beneverman/status/1681477151042797568', -].map(t => t.split('/').slice(-1)[0]) + "https://x.com/wes_walke/status/1668612106696941570", + "https://x.com/DevAlien/status/1668618017528479745", + "https://x.com/fredmaiaarantes/status/1684676668445622272", + "https://x.com/DesignSumu/status/1668559314272022528", + "https://x.com/commandodev/status/1668640878225764354", + "https://x.com/SandBoxSo/status/1668570645741948930", + "https://x.com/sxndrao/status/1668634137547399168", + "https://x.com/jordienr/status/1681389309037772820", + "https://x.com/beneverman/status/1681477151042797568", +].map((t) => t.split("/").slice(-1)[0]) export default async function Testimonials() { const firstRow = tweets.slice(0, tweets.length / 2) @@ -37,16 +37,17 @@ export default async function Testimonials() { What People Are Saying

- Don't just take our word for it. Here's what - {' '} - real people - {' '} - are saying about Nyxb UI on Twitter. + Don't just take our word for it. Here's what{" "} + real people are saying about Nyxb UI on Twitter.

{firstRow.map((id, idx) => ( - + ))} {secondRow.map((id, idx) => ( - + ))}
diff --git a/apps/web/components/sidebar-cta.tsx b/apps/web/components/sidebar-cta.tsx index b9ebbf83..6ad8abe8 100644 --- a/apps/web/components/sidebar-cta.tsx +++ b/apps/web/components/sidebar-cta.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import { ChevronRight } from 'lucide-react' -import { Link } from 'next-view-transitions' -import AnimatedShinyText from '~/registry/default/ui/animated-shiny-text' -import WordPullUp from '~/registry/default/ui/word-pull-up' +import { ChevronRight } from "lucide-react" +import { Link } from "next-view-transitions" +import AnimatedShinyText from "~/registry/default/ui/animated-shiny-text" +import WordPullUp from "~/registry/default/ui/word-pull-up" export default function SidebarCTA() { return ( diff --git a/apps/web/components/simple-component-preview.tsx b/apps/web/components/simple-component-preview.tsx new file mode 100644 index 00000000..24221eed --- /dev/null +++ b/apps/web/components/simple-component-preview.tsx @@ -0,0 +1,83 @@ +"use client" + +import { UpdateIcon } from "@radix-ui/react-icons" +import * as React from "react" +import { Index } from "~/__registry__" +import { ThemeWrapper } from "~/components/theme-wrapper" +import { Button } from "~/components/ui/button" +import { useConfig } from "~/hooks/use-config" +import { ny } from "~/lib/utils" + +interface SimpleComponentPreviewProps + extends React.HTMLAttributes { + name: string + align?: "center" | "start" | "end" +} + +export function SimpleComponentPreview({ + name, + className, + align = "center", + ...props +}: SimpleComponentPreviewProps) { + const [config] = useConfig() + const [key, setKey] = React.useState(0) + + const handleReload = React.useCallback(() => { + setKey((k) => k + 1) + }, []) + + const Preview = React.useMemo(() => { + const Component = Index[config.style][name]?.component + + if (!Component) { + return ( +

+ Component{" "} + + {name} + {" "} + not found in registry. +

+ ) + } + + return + }, [name, config.style]) + + return ( +
+ + +
+ + Loading... +
+ } + > + {Preview} + +
+ +
+ ) +} diff --git a/apps/web/components/site-banner.tsx b/apps/web/components/site-banner.tsx index 8f8f9e5c..de3a2b00 100644 --- a/apps/web/components/site-banner.tsx +++ b/apps/web/components/site-banner.tsx @@ -1,7 +1,7 @@ -'use client' +"use client" -import Link from 'next/link' -import { ChevronRight } from 'lucide-react' +import { ChevronRight } from "lucide-react" +import Link from "next/link" export function SiteBanner() { return ( @@ -13,13 +13,12 @@ export function SiteBanner() { rel="noreferrer noopener" className="inline-flex text-xs leading-normal md:text-sm" > - ❤️ - {' '} + ❤️{" "} - {' '} - Support our project - Your donation helps us continue developing awesome tools! - - {' '} + {" "} + Support our project - Your donation helps us continue + developing awesome tools! + {" "}
diff --git a/apps/web/components/site-footer.tsx b/apps/web/components/site-footer.tsx index ce4f8a14..45ef0e1f 100644 --- a/apps/web/components/site-footer.tsx +++ b/apps/web/components/site-footer.tsx @@ -1,4 +1,4 @@ -import { siteConfig } from '~/config/site' +import { siteConfig } from "~/config/site" export function SiteFooter() { return ( @@ -7,14 +7,12 @@ export function SiteFooter() { className="absolute top-0 h-px w-full" style={{ background: - 'radial-gradient(50% 100% at 50% 100%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 100%)', + "radial-gradient(50% 100% at 50% 100%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 100%)", }} - > - + >

- Cooked up for you by - {' '} + Cooked up for you by{" "} + onValueChange={(value: Style["name"]) => setConfig({ ...config, style: value, - })} + }) + } > Style: - {styles.map(style => ( - + {styles.map((style) => ( + {style.label} ))} diff --git a/apps/web/components/style-wrapper.tsx b/apps/web/components/style-wrapper.tsx index b87b1594..c391f380 100644 --- a/apps/web/components/style-wrapper.tsx +++ b/apps/web/components/style-wrapper.tsx @@ -1,19 +1,18 @@ -'use client' +"use client" -import * as React from 'react' +import type * as React from "react" -import { useConfig } from '~/hooks/use-config' -import type { Style } from '~/registry/registry-styles' +import { useConfig } from "~/hooks/use-config" +import type { Style } from "~/registry/registry-styles" interface StyleWrapperProps extends React.HTMLAttributes { - styleName?: Style['name'] + styleName?: Style["name"] } export function StyleWrapper({ styleName, children }: StyleWrapperProps) { const [config] = useConfig() - if (!styleName || config.style === styleName) - return <>{children} + if (!styleName || config.style === styleName) return <>{children} return null } diff --git a/apps/web/components/super-announcement.tsx b/apps/web/components/super-announcement.tsx index b859560c..dcf6d691 100644 --- a/apps/web/components/super-announcement.tsx +++ b/apps/web/components/super-announcement.tsx @@ -1,16 +1,19 @@ -import Link from 'next/link' -import { ChevronRight } from 'lucide-react' -import type { FC } from 'react' -import { Separator } from '~/components/ui/separator' -import { ny } from '~/lib/utils' -import AnimatedGradientText from '~/registry/default/ui/animated-gradient-text' +import { ChevronRight } from "lucide-react" +import Link from "next/link" +import type { FC } from "react" +import { Separator } from "~/components/ui/separator" +import { ny } from "~/lib/utils" +import AnimatedGradientText from "~/registry/default/ui/animated-gradient-text" interface SuperAnnouncementProps { href: string text: string } -export const SuperAnnouncement: FC = ({ href, text }) => { +export const SuperAnnouncement: FC = ({ + href, + text, +}) => { return ( diff --git a/apps/web/components/tailwind-indicator.tsx b/apps/web/components/tailwind-indicator.tsx index 1bc99d1a..be6d14e4 100644 --- a/apps/web/components/tailwind-indicator.tsx +++ b/apps/web/components/tailwind-indicator.tsx @@ -1,6 +1,5 @@ export function TailwindIndicator() { - if (process.env.NODE_ENV === 'production') - return null + if (process.env.NODE_ENV === "production") return null return (

diff --git a/apps/web/components/tech-stack.tsx b/apps/web/components/tech-stack.tsx index 7d78233e..8abcccf7 100644 --- a/apps/web/components/tech-stack.tsx +++ b/apps/web/components/tech-stack.tsx @@ -2,19 +2,19 @@ import { Tooltip, TooltipContent, TooltipTrigger, -} from '~/components/ui/tooltip' -import { ny } from '~/lib/utils' +} from "~/components/ui/tooltip" +import { ny } from "~/lib/utils" interface TechComponentType { name: string icon: JSX.Element } - type TechComponents = Record +type TechComponents = Record const techComponents: TechComponents = { nextjs: { - name: 'Next.js 14', + name: "Next.js 14", icon: ( - + > - + > ), }, nyxbui: { - name: 'NyxbUI', + name: "NyxbUI", icon: ( - - - - - - - - - - - - - - + + + + + + + + + + + + + + ), }, @@ -169,8 +209,8 @@ export default function TechStack({ className?: string }) { return ( -
- {technologies.map(tech => ( +
+ {technologies.map((tech) => ( {techComponents[tech].icon} diff --git a/apps/web/components/template-preview.tsx b/apps/web/components/template-preview.tsx index cb08aee9..d1a895f8 100644 --- a/apps/web/components/template-preview.tsx +++ b/apps/web/components/template-preview.tsx @@ -1,9 +1,9 @@ -import type { ReactNode } from 'react' -import Link from 'next/link' -import { ExternalLinkIcon } from '@radix-ui/react-icons' +import { ExternalLinkIcon } from "@radix-ui/react-icons" +import Link from "next/link" +import type { ReactNode } from "react" -import { ny } from '~/lib/utils' -import { buttonVariants } from '~/components/ui/button' +import { buttonVariants } from "~/components/ui/button" +import { ny } from "~/lib/utils" export default function TemplatePreview({ href, @@ -16,9 +16,9 @@ export default function TemplatePreview({ { name: string extractClassname?: boolean extractedClassNames?: string - align?: 'center' | 'start' | 'end' + align?: "center" | "start" | "end" } export function ThemeComponent({ name, ...props }: ThemeComponentProps) { @@ -23,12 +23,10 @@ export function ThemeComponent({ name, ...props }: ThemeComponentProps) { if (!Component) { return (

- Component - {' '} + Component{" "} {name} - - {' '} + {" "} not found in registry.

) @@ -38,14 +36,14 @@ export function ThemeComponent({ name, ...props }: ThemeComponentProps) { }, [name, config.style]) return ( -
+
Loading...
- )} + } > {Preview} diff --git a/apps/web/components/theme-switcher.tsx b/apps/web/components/theme-switcher.tsx index c99fa917..70026de9 100644 --- a/apps/web/components/theme-switcher.tsx +++ b/apps/web/components/theme-switcher.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import * as React from 'react' -import { useSelectedLayoutSegment } from 'next/navigation' +import { useSelectedLayoutSegment } from "next/navigation" +import * as React from "react" -import { useConfig } from '~/hooks/use-config' +import { useConfig } from "~/hooks/use-config" export function ThemeSwitcher() { const [config] = useConfig() @@ -15,9 +15,8 @@ export function ThemeSwitcher() { document.body.classList.remove(className) }) - const theme = segment === 'themes' ? config.theme : null - if (theme) - return document.body.classList.add(`theme-${theme}`) + const theme = segment === "themes" ? config.theme : null + if (theme) return document.body.classList.add(`theme-${theme}`) }, [segment, config]) return null diff --git a/apps/web/components/theme-wrapper2.tsx b/apps/web/components/theme-wrapper2.tsx index 1e3b4168..764e5134 100644 --- a/apps/web/components/theme-wrapper2.tsx +++ b/apps/web/components/theme-wrapper2.tsx @@ -1,9 +1,9 @@ -'use client' +"use client" -import { ny } from '~/lib/utils' -import { useConfig } from '~/hooks/use-config' +import { useConfig } from "~/hooks/use-config" +import { ny } from "~/lib/utils" -interface ThemeWrapperProps extends React.ComponentProps<'div'> { +interface ThemeWrapperProps extends React.ComponentProps<"div"> { defaultTheme?: string } @@ -17,13 +17,13 @@ export function ThemeWrapper({ return (
diff --git a/apps/web/components/toc.tsx b/apps/web/components/toc.tsx index 04270c9d..aac61ec3 100644 --- a/apps/web/components/toc.tsx +++ b/apps/web/components/toc.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from "react" -import type { TableOfContents } from '~/lib/toc' -import { useMounted } from '~/lib/use-mounted' -import { ny } from '~/lib/utils' +import type { TableOfContents } from "~/lib/toc" +import { useMounted } from "~/lib/use-mounted" +import { ny } from "~/lib/utils" interface TocProps { toc: TableOfContents @@ -31,10 +31,13 @@ export function TableOfContents({ toc }: TocProps) { () => refinedToc.items ? refinedToc.items - .flatMap(item => [item.url, item?.items?.map(item => item.url)]) - .flat() - .filter(Boolean) - .map(id => id?.split('#')[1]) + .flatMap((item) => [ + item.url, + item?.items?.map((item) => item.url), + ]) + .flat() + .filter(Boolean) + .map((id) => id?.split("#")[1]) : [], [refinedToc], ) as string[] @@ -96,32 +99,32 @@ interface TreeProps { } function Tree({ tree, level = 1, activeItem }: TreeProps) { - return tree?.items?.length && level < 3 - ? ( - - ) - : null + return tree?.items?.length && level < 3 ? ( +
    + {tree.items.map((item, index) => { + return ( +
  • + + {item.title} + + {item.items?.length ? ( + + ) : null} +
    • + ) + })} +
+ ) : null } diff --git a/apps/web/components/ui/accordion.tsx b/apps/web/components/ui/accordion.tsx index 14629bf6..53d6cd75 100644 --- a/apps/web/components/ui/accordion.tsx +++ b/apps/web/components/ui/accordion.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import * as AccordionPrimitive from '@radix-ui/react-accordion' -import { ChevronDownIcon } from '@radix-ui/react-icons' -import * as React from 'react' +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDownIcon } from "@radix-ui/react-icons" +import * as React from "react" -import { ny } from '~/lib/utils' +import { ny } from "~/lib/utils" const Accordion = AccordionPrimitive.Root @@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef< >(({ className, ...props }, ref) => ( )) -AccordionItem.displayName = 'AccordionItem' +AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, @@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef< svg]:rotate-180', + "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className, )} {...props} @@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef< className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" {...props} > -
{children}
+
{children}
)) AccordionContent.displayName = AccordionPrimitive.Content.displayName diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx index 267b7b44..d377f459 100644 --- a/apps/web/components/ui/button.tsx +++ b/apps/web/components/ui/button.tsx @@ -1,52 +1,52 @@ -import { Slot } from '@radix-ui/react-slot' -import { type VariantProps, cva } from 'class-variance-authority' -import * as React from 'react' +import { Slot } from "@radix-ui/react-slot" +import { type VariantProps, cva } from "class-variance-authority" +import * as React from "react" -import { ny } from '~/lib/utils' +import { ny } from "~/lib/utils" const buttonVariants = cva( - 'inline-flex items-center justify-center rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', + "inline-flex items-center justify-center rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { - 'default': - 'bg-primary text-primary-foreground shadow hover:bg-primary/90', - 'destructive': - 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', - 'outline': - 'border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground', - 'secondary': - 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', - 'ghost': 'hover:bg-accent hover:text-accent-foreground', - 'link': 'text-primary underline-offset-4 hover:underline', - 'rainbow': - 'group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]', - 'rainbow-outline': - 'group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]', + default: + "bg-primary text-primary-foreground shadow hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + outline: + "border border-input bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + rainbow: + "group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]", + "rainbow-outline": + "group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]", }, size: { - default: 'h-9 px-4 py-2', - sm: 'h-8 rounded-xl px-3 text-xs', - lg: 'h-11 rounded-xl px-8', - icon: 'h-9 w-9', + default: "h-9 px-4 py-2", + sm: "h-8 rounded-xl px-3 text-xs", + lg: "h-11 rounded-xl px-8", + icon: "h-9 w-9", }, }, defaultVariants: { - variant: 'default', - size: 'default', + variant: "default", + size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { + VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button' + const Comp = asChild ? Slot : "button" return ( ( ) }, ) -Button.displayName = 'Button' +Button.displayName = "Button" export { Button, buttonVariants } diff --git a/apps/web/components/ui/calendar.tsx b/apps/web/components/ui/calendar.tsx index 380a5313..6c021abd 100644 --- a/apps/web/components/ui/calendar.tsx +++ b/apps/web/components/ui/calendar.tsx @@ -1,11 +1,11 @@ -'use client' +"use client" -import * as React from 'react' -import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons' -import { DayPicker } from 'react-day-picker' +import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" +import type * as React from "react" +import { DayPicker } from "react-day-picker" -import { ny } from '~/lib/utils' -import { buttonVariants } from '~/components/ui/button' +import { buttonVariants } from "~/components/ui/button" +import { ny } from "~/lib/utils" export type CalendarProps = React.ComponentProps @@ -18,54 +18,57 @@ function Calendar({ return ( .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md' - : '[&:has([aria-selected])]:rounded-md', + "[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20", + props.mode === "range" + ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" + : "[&:has([aria-selected])]:rounded-md", ), day: ny( - buttonVariants({ variant: 'ghost' }), - 'size-8 p-0 font-normal aria-selected:opacity-100', + buttonVariants({ variant: "ghost" }), + "size-8 p-0 font-normal aria-selected:opacity-100", ), - day_range_start: 'day-range-start', - day_range_end: 'day-range-end', + day_range_start: "day-range-start", + day_range_end: "day-range-end", day_selected: - 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', - day_today: 'bg-accent text-accent-foreground', - day_outside: 'text-muted-foreground opacity-50', - day_disabled: 'text-muted-foreground opacity-50', + "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", + day_today: "bg-accent text-accent-foreground", + day_outside: "text-muted-foreground opacity-50", + day_disabled: "text-muted-foreground opacity-50", day_range_middle: - 'aria-selected:bg-accent aria-selected:text-accent-foreground', - day_hidden: 'invisible', + "aria-selected:bg-accent aria-selected:text-accent-foreground", + day_hidden: "invisible", ...classNames, }} components={{ IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => , + IconRight: ({ ...props }) => ( + + ), }} {...props} /> ) } -Calendar.displayName = 'Calendar' +Calendar.displayName = "Calendar" export { Calendar } diff --git a/apps/web/components/ui/collapsible.tsx b/apps/web/components/ui/collapsible.tsx index 1bbaed5a..9fa48946 100644 --- a/apps/web/components/ui/collapsible.tsx +++ b/apps/web/components/ui/collapsible.tsx @@ -1,6 +1,6 @@ -'use client' +"use client" -import * as CollapsiblePrimitive from '@radix-ui/react-collapsible' +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" const Collapsible = CollapsiblePrimitive.Root diff --git a/apps/web/components/ui/command.tsx b/apps/web/components/ui/command.tsx index 4f368688..14f13061 100644 --- a/apps/web/components/ui/command.tsx +++ b/apps/web/components/ui/command.tsx @@ -1,12 +1,12 @@ -'use client' +"use client" -import * as React from 'react' -import type { DialogProps } from '@radix-ui/react-dialog' -import { MagnifyingGlassIcon } from '@radix-ui/react-icons' -import { Command as CommandPrimitive } from 'cmdk' +import type { DialogProps } from "@radix-ui/react-dialog" +import { MagnifyingGlassIcon } from "@radix-ui/react-icons" +import { Command as CommandPrimitive } from "cmdk" +import * as React from "react" -import { ny } from '~/lib/utils' -import { Dialog, DialogContent } from '~/components/ui/dialog' +import { Dialog, DialogContent } from "~/components/ui/dialog" +import { ny } from "~/lib/utils" const Command = React.forwardRef< React.ElementRef, @@ -15,7 +15,7 @@ const Command = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -89,7 +92,7 @@ const CommandGroup = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -117,7 +120,7 @@ const CommandItem = React.forwardRef< ) } -CommandShortcut.displayName = 'CommandShortcut' +CommandShortcut.displayName = "CommandShortcut" export { Command, diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx index cf9458f1..3fee876f 100644 --- a/apps/web/components/ui/dialog.tsx +++ b/apps/web/components/ui/dialog.tsx @@ -1,8 +1,8 @@ -import * as DialogPrimitive from '@radix-ui/react-dialog' -import { Cross2Icon } from '@radix-ui/react-icons' -import * as React from 'react' +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { Cross2Icon } from "@radix-ui/react-icons" +import * as React from "react" -import { ny } from '~/lib/utils' +import { ny } from "~/lib/utils" const Dialog = DialogPrimitive.Root @@ -17,7 +17,7 @@ const DialogOverlay = React.forwardRef< ) } -DialogHeader.displayName = 'DialogHeader' +DialogHeader.displayName = "DialogHeader" function DialogFooter({ className, @@ -72,14 +72,14 @@ function DialogFooter({ return (
) } -DialogFooter.displayName = 'DialogFooter' +DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, @@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef< (({ className, ...props }, ref) => ( )) diff --git a/apps/web/components/ui/dropdown-menu.tsx b/apps/web/components/ui/dropdown-menu.tsx index 9bfae431..396c9a6c 100644 --- a/apps/web/components/ui/dropdown-menu.tsx +++ b/apps/web/components/ui/dropdown-menu.tsx @@ -1,10 +1,10 @@ -'use client' +"use client" -import * as React from 'react' -import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' -import { Check, ChevronRight, Circle } from 'lucide-react' +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { Check, ChevronRight, Circle } from "lucide-react" +import * as React from "react" -import { ny } from '~/lib/utils' +import { ny } from "~/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root @@ -27,8 +27,8 @@ const DropdownMenuSubTrigger = React.forwardRef< )) -DropdownMenuSubTrigger.displayName - = DropdownMenuPrimitive.SubTrigger.displayName +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -47,14 +47,14 @@ const DropdownMenuSubContent = React.forwardRef< )) -DropdownMenuSubContent.displayName - = DropdownMenuPrimitive.SubContent.displayName +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={ny( - 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md', + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md", className, )} {...props} @@ -83,8 +83,8 @@ const DropdownMenuItem = React.forwardRef< )) -DropdownMenuCheckboxItem.displayName - = DropdownMenuPrimitive.CheckboxItem.displayName +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef< (({ className, ...props }, ref) => ( )) @@ -174,12 +174,12 @@ function DropdownMenuShortcut({ }: React.HTMLAttributes) { return ( ) } -DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, diff --git a/apps/web/components/ui/nyx-toc.tsx b/apps/web/components/ui/nyx-toc.tsx index 2f980916..9f0b2573 100644 --- a/apps/web/components/ui/nyx-toc.tsx +++ b/apps/web/components/ui/nyx-toc.tsx @@ -1,16 +1,36 @@ -'use client' - -import * as React from 'react' -import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, RefObject } from 'react' -import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react' -import type { PopoverContentProps, PopoverTriggerProps } from '@radix-ui/react-popover' -import { AlignLeft, ChevronRight } from 'lucide-react' -import scrollIntoView from 'scroll-into-view-if-needed' -import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area' -import { Popover, PopoverContent, PopoverTrigger } from '~/registry/miami/ui/popover' -import { ny } from '~/lib/utils' -import { useAnchorObserver } from '~/hooks/use-anchor-observer' -import { useOnChange } from '~/hooks/use-on-change' +"use client" + +import type { + PopoverContentProps, + PopoverTriggerProps, +} from "@radix-ui/react-popover" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" +import { AlignLeft, ChevronRight } from "lucide-react" +import * as React from "react" +import type { + AnchorHTMLAttributes, + HTMLAttributes, + ReactNode, + RefObject, +} from "react" +import { + createContext, + forwardRef, + useContext, + useEffect, + useMemo, + useRef, + useState, +} from "react" +import scrollIntoView from "scroll-into-view-if-needed" +import { useAnchorObserver } from "~/hooks/use-anchor-observer" +import { useOnChange } from "~/hooks/use-on-change" +import { ny } from "~/lib/utils" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "~/registry/miami/ui/popover" // #region Types export interface TOCItemType { @@ -36,7 +56,7 @@ export interface PageStyles { } export interface TOCItemProps - extends Omit, 'href'> { + extends Omit, "href"> { href: string onActiveChange?: (v: boolean) => void @@ -49,7 +69,7 @@ const ScrollArea = React.forwardRef< >(({ className, children, ...props }, ref) => ( {children} @@ -66,7 +86,7 @@ const ScrollViewport = React.forwardRef< >(({ className, children, ...props }, ref) => ( {children} @@ -78,14 +98,14 @@ ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName const ScrollBar = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef ->(({ className, orientation = 'vertical', ...props }, ref) => ( +>(({ className, orientation = "vertical", ...props }, ref) => ( ([]) -const ScrollContext = createContext>({ current: null }) +const ScrollContext = createContext>({ + current: null, +}) const StylesContext = createContext({ - tocNav: 'xl:hidden', - toc: 'max-xl:hidden', + tocNav: "xl:hidden", + toc: "max-xl:hidden", }) // #region Hooks @@ -128,19 +150,16 @@ function isDifferent(a: unknown, b: unknown): boolean { function mergeRefs(...refs: React.Ref[]): React.RefCallback { return (value) => { refs.forEach((ref) => { - if (typeof ref === 'function') - ref(value) - else if (ref !== null && typeof ref === 'object') + if (typeof ref === "function") ref(value) + else if (ref !== null && typeof ref === "object") (ref as React.MutableRefObject).current = value }) } } function getItemOffset(depth: number): number { - if (depth <= 2) - return 14 - if (depth === 3) - return 26 + if (depth <= 2) return 14 + if (depth === 3) return 26 return 36 } @@ -173,7 +192,7 @@ export function AnchorProvider({ children?: ReactNode }): React.ReactElement { const headings = useMemo(() => { - return toc.map(item => item.url.split('#')[1]) + return toc.map((item) => item.url.split("#")[1]) }, [toc]) return ( @@ -194,15 +213,14 @@ export const TOCItem = forwardRef( useOnChange(isActive, (v) => { const element = anchorRef.current - if (!element) - return + if (!element) return if (v && containerRef.current) { scrollIntoView(element, { - behavior: 'smooth', - block: 'center', - inline: 'center', - scrollMode: 'always', + behavior: "smooth", + block: "center", + inline: "center", + scrollMode: "always", boundary: containerRef.current, }) } @@ -218,7 +236,7 @@ export const TOCItem = forwardRef( }, ) -TOCItem.displayName = 'TOCItem' +TOCItem.displayName = "TOCItem" export function TocThumb({ containerRef, @@ -232,24 +250,27 @@ export function TocThumb({ activeRef.current = active function calc(container: HTMLElement, active: string[]): TOCThumb { - if (active.length === 0 || container.clientHeight === 0) - return [0, 0] + if (active.length === 0 || container.clientHeight === 0) return [0, 0] let upper = Number.MAX_VALUE let lower = 0 for (const item of active) { - const element = container.querySelector(`a[href="#${item}"]`) - if (!element) - continue + const element = container.querySelector( + `a[href="#${item}"]`, + ) + if (!element) continue const styles = getComputedStyle(element) - upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop)) + upper = Math.min( + upper, + element.offsetTop + Number.parseFloat(styles.paddingTop), + ) lower = Math.max( lower, - element.offsetTop - + element.clientHeight - - Number.parseFloat(styles.paddingBottom), + element.offsetTop + + element.clientHeight - + Number.parseFloat(styles.paddingBottom), ) } @@ -257,18 +278,16 @@ export function TocThumb({ } function update(element: HTMLElement, info: TOCThumb): void { - element.style.setProperty('--nyx-top', `${info[0]}px`) - element.style.setProperty('--nyx-height', `${info[1]}px`) + element.style.setProperty("--nyx-top", `${info[0]}px`) + element.style.setProperty("--nyx-height", `${info[1]}px`) } useEffect(() => { - if (!containerRef.current) - return + if (!containerRef.current) return const container = containerRef.current const onResize = (): void => { - if (!thumbRef.current) - return + if (!thumbRef.current) return update(thumbRef.current, calc(container, activeRef.current)) } @@ -282,8 +301,7 @@ export function TocThumb({ }, [containerRef]) useOnChange(active, () => { - if (!containerRef.current || !thumbRef.current) - return + if (!containerRef.current || !thumbRef.current) return update(thumbRef.current, calc(containerRef.current, active)) }) @@ -307,14 +325,17 @@ export function Toc(props: HTMLAttributes) { id="nyx-toc" {...props} className={ny( - 'top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12', + "top-nyx-layout-top sticky h-[var(--nyx-toc-height)] pb-2 pt-12", toc, props.className, )} - style={{ - ...props.style, - '--nyx-toc-height': 'calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))', - } as any} + style={ + { + ...props.style, + "--nyx-toc-height": + "calc(100dvh - var(--nyx-banner-height) - var(--nyx-nav-height))", + } as any + } >
{props.children} @@ -343,13 +364,11 @@ export function NyxTOCItems({ }>() useEffect(() => { - if (!containerRef.current) - return + if (!containerRef.current) return const container = containerRef.current function onResize(): void { - if (container.clientHeight === 0) - return + if (container.clientHeight === 0) return let w = 0 let h = 0 const d: string[] = [] @@ -357,23 +376,25 @@ export function NyxTOCItems({ const element: HTMLElement | null = container.querySelector( `a[href="#${items[i].url.slice(1)}"]`, ) - if (!element) - continue + if (!element) continue const styles = getComputedStyle(element) const offset = getLineOffset(items[i].depth) + 1 const top = element.offsetTop + Number.parseFloat(styles.paddingTop) - const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom) + const bottom = + element.offsetTop + + element.clientHeight - + Number.parseFloat(styles.paddingBottom) w = Math.max(offset, w) h = Math.max(h, bottom) - d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`) + d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`) d.push(`L${offset} ${bottom}`) } setSvg({ - path: d.join(' '), + path: d.join(" "), width: w + 1, height: h, }) @@ -385,8 +406,7 @@ export function NyxTOCItems({ return () => observer.disconnect() }, [items]) - if (items.length === 0) - return + if (items.length === 0) return return ( <> @@ -396,30 +416,28 @@ export function NyxTOCItems({ {label} )} - + - {svg - ? ( -
`, - ) - }")`, - }} - > - -
- ) - : null} + {svg ? ( +
`, + ) + }")`, + }} + > + +
+ ) : null}
{items.map((item, i) => ( @@ -447,14 +465,14 @@ export function TocPopoverTrigger({ }: PopoverTriggerProps & { items: TOCItemType[] }) { const active = useActiveAnchor() const current = useMemo(() => { - return items.find(item => active === item.url.slice(1))?.title + return items.find((item) => active === item.url.slice(1))?.title }, [items, active]) return ( @@ -480,7 +498,7 @@ export function TocPopoverContent(props: PopoverContentProps) { data-toc-popover="" {...props} className={ny( - 'flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3', + "flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3", props.className, )} > @@ -510,29 +528,27 @@ function LocalTOCItem({ }} className="prose text-muted-foreground data-[active=true]:text-primary relative py-1.5 text-sm transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0" > - {offset !== upperOffset - ? ( - - - - ) - : null} + {offset !== upperOffset ? ( + + + + ) : null}
, @@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef< >(({ className, children, ...props }, ref) => ( @@ -25,17 +25,19 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, orientation = 'vertical', ...props }, ref) => ( + React.ComponentPropsWithoutRef< + typeof ScrollAreaPrimitive.ScrollAreaScrollbar + > +>(({ className, orientation = "vertical", ...props }, ref) => ( , React.ComponentPropsWithoutRef >( ( - { className, orientation = 'horizontal', decorative = true, ...props }, + { className, orientation = "horizontal", decorative = true, ...props }, ref, ) => ( (({ className, ...props }, ref) => ( , - VariantProps {} + VariantProps {} const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps ->(({ side = 'right', className, children, ...props }, ref) => ( +>(({ side = "right", className, children, ...props }, ref) => ( ) } -SheetHeader.displayName = 'SheetHeader' +SheetHeader.displayName = "SheetHeader" function SheetFooter({ className, @@ -97,14 +96,14 @@ function SheetFooter({ return (
) } -SheetFooter.displayName = 'SheetFooter' +SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, @@ -112,7 +111,7 @@ const SheetTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -124,7 +123,7 @@ const SheetDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )) diff --git a/apps/web/components/ui/sonner.tsx b/apps/web/components/ui/sonner.tsx index f6677d6c..be4efaf1 100644 --- a/apps/web/components/ui/sonner.tsx +++ b/apps/web/components/ui/sonner.tsx @@ -1,26 +1,25 @@ -'use client' +"use client" -import { useTheme } from 'next-themes' -import { Toaster as Sonner } from 'sonner' +import { useTheme } from "next-themes" +import { Toaster as Sonner } from "sonner" type ToasterProps = React.ComponentProps function Toaster({ ...props }: ToasterProps) { - const { theme = 'system' } = useTheme() + const { theme = "system" } = useTheme() return ( + - -### Installation +## Installation @@ -29,15 +31,26 @@ npx nyxb@latest add shine-border -Copy and paste the following code into your project. +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + +Update `tailwind.config.js` + +Add the following animations to your `tailwind.config.js` file: -```ts -// tailwind.config.ts +```js title="tailwind.config.js" {5-14} +/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { + animation: { + shine: "shine var(--duration) infinite linear", + }, keyframes: { - "shine-pulse": { + shine: { "0%": { "background-position": "0% 0%", }, @@ -54,12 +67,6 @@ module.exports = { }; ``` -```text -components/ui/shine-border.tsx -``` - - - @@ -68,18 +75,17 @@ components/ui/shine-border.tsx ## Examples -### Silver +### Monotone ## Props -| Prop | Type | Description | Default | -| ------------ | ------------------------------ | --------------------------------------------------- | ---------- | -| className | string | The class name to be applied to the component. | | -| duration | number | Defines the animation duration to be applied on the shining border. | 14 seconds | -| color | `#${string}` OR `#${string}`[] | A string or string array to define border color. | #FFFFFF | -| borderRadius | number | Defines the radius of the border. | 8px | -| borderWidth | number | Defines the width of the border. | 1px | -| children | ReactNode | Contains react node elements. | {} | - +| Prop | Type | Default | Description | +| -------------- | ----------- | --------- | ------------------------------------------------------------------- | +| `className` | `string` | `-` | The class name to be applied to the component. | +| `duration` | `number` | `14` | Defines the animation duration to be applied on the shining border. | +| `color` | `string` | `#FFFFFF` | Defines the color of the border. | +| `borderRadius` | `number` | `8` | Defines the radius of the border. | +| `borderWidth` | `number` | `1` | Defines the width of the border. | +| `children` | `ReactNode` | `{}` | Contains react node elements. | diff --git a/apps/web/content/pages/home.mdx b/apps/web/content/pages/home.mdx index 2f944ab1..05742aa5 100644 --- a/apps/web/content/pages/home.mdx +++ b/apps/web/content/pages/home.mdx @@ -3,17 +3,17 @@ title: Components description: A collection of components that are used to build the landing page of a website. --- - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/apps/web/hooks/use-anchor-observer.ts b/apps/web/hooks/use-anchor-observer.ts index f5daf522..cd2b190c 100644 --- a/apps/web/hooks/use-anchor-observer.ts +++ b/apps/web/hooks/use-anchor-observer.ts @@ -1,6 +1,6 @@ -'use client' +"use client" -import { useEffect, useState } from 'react' +import { useEffect, useState } from "react" /** * Find the active heading of page @@ -21,35 +21,31 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] { for (const entry of entries) { if (entry.isIntersecting && !visible.includes(entry.target.id)) { visible = [...visible, entry.target.id] - } - else if ( - !entry.isIntersecting - && visible.includes(entry.target.id) + } else if ( + !entry.isIntersecting && + visible.includes(entry.target.id) ) { - visible = visible.filter(v => v !== entry.target.id) + visible = visible.filter((v) => v !== entry.target.id) } } - if (visible.length > 0) - setActiveAnchor(visible) + if (visible.length > 0) setActiveAnchor(visible) }, { - rootMargin: single ? '-80px 0% -70% 0%' : `-20px 0% -40% 0%`, + rootMargin: single ? "-80px 0% -70% 0%" : `-20px 0% -40% 0%`, threshold: 1, }, ) function onScroll(): void { const element = document.scrollingElement - if (!element) - return + if (!element) return if (element.scrollTop === 0 && single) { setActiveAnchor(watch.slice(0, 1)) - } - else if ( - element.scrollTop + element.clientHeight - >= element.scrollHeight - 6 + } else if ( + element.scrollTop + element.clientHeight >= + element.scrollHeight - 6 ) { setActiveAnchor((active) => { return active.length > 0 && !single @@ -62,14 +58,13 @@ export function useAnchorObserver(watch: string[], single: boolean): string[] { for (const heading of watch) { const element = document.getElementById(heading) - if (element) - observer.observe(element) + if (element) observer.observe(element) } onScroll() - window.addEventListener('scroll', onScroll) + window.addEventListener("scroll", onScroll) return () => { - window.removeEventListener('scroll', onScroll) + window.removeEventListener("scroll", onScroll) observer.disconnect() } }, [single, watch]) diff --git a/apps/web/hooks/use-chart-config.ts b/apps/web/hooks/use-chart-config.ts index 5b2fc178..5b1810db 100644 --- a/apps/web/hooks/use-chart-config.ts +++ b/apps/web/hooks/use-chart-config.ts @@ -1,7 +1,7 @@ -import useSWR from 'swr' +import useSWR from "swr" export function useChartConfig() { - const { data, mutate } = useSWR('chart:config', null) + const { data, mutate } = useSWR("chart:config", null) return { chartConfig: data, setChartConfig: mutate } } diff --git a/apps/web/hooks/use-colors.ts b/apps/web/hooks/use-colors.ts index 12addc61..1389f75e 100644 --- a/apps/web/hooks/use-colors.ts +++ b/apps/web/hooks/use-colors.ts @@ -1,15 +1,15 @@ -import { useAtom } from 'jotai' -import { atomWithStorage } from 'jotai/utils' +import { useAtom } from "jotai" +import { atomWithStorage } from "jotai/utils" -import type { ColorFormat } from '~/lib/colors' -import { useMounted } from '~/hooks/use-mounted' +import { useMounted } from "~/hooks/use-mounted" +import type { ColorFormat } from "~/lib/colors" interface Config { format: ColorFormat } -const colorsAtom = atomWithStorage('colors', { - format: 'hsl', +const colorsAtom = atomWithStorage("colors", { + format: "hsl", }) export function useColors() { diff --git a/apps/web/hooks/use-config.ts b/apps/web/hooks/use-config.ts index 9b67f5ba..6e0f55a1 100644 --- a/apps/web/hooks/use-config.ts +++ b/apps/web/hooks/use-config.ts @@ -1,18 +1,18 @@ -import { useAtom } from 'jotai' -import { atomWithStorage } from 'jotai/utils' +import { useAtom } from "jotai" +import { atomWithStorage } from "jotai/utils" -import type { BaseColor } from '~/registry/registry-base-colors' -import type { Style } from '~/registry/registry-styles' +import type { BaseColor } from "~/registry/registry-base-colors" +import type { Style } from "~/registry/registry-styles" interface Config { - style: Style['name'] - theme: BaseColor['name'] + style: Style["name"] + theme: BaseColor["name"] radius: number } -const configAtom = atomWithStorage('config', { - style: 'default', - theme: 'zinc', +const configAtom = atomWithStorage("config", { + style: "default", + theme: "zinc", radius: 0.5, }) diff --git a/apps/web/hooks/use-copy-to-clipboard.ts b/apps/web/hooks/use-copy-to-clipboard.ts index 6e366703..684d2b7a 100644 --- a/apps/web/hooks/use-copy-to-clipboard.ts +++ b/apps/web/hooks/use-copy-to-clipboard.ts @@ -1,6 +1,6 @@ -'use client' +"use client" -import * as React from 'react' +import * as React from "react" export function useCopyToClipboard({ timeout = 2000, @@ -12,12 +12,11 @@ export function useCopyToClipboard({ const [isCopied, setIsCopied] = React.useState(false) const copyToClipboard = (value: string) => { - if (typeof window === 'undefined' || !navigator.clipboard.writeText) { + if (typeof window === "undefined" || !navigator.clipboard.writeText) { return } - if (!value) - return + if (!value) return navigator.clipboard.writeText(value).then(() => { setIsCopied(true) diff --git a/apps/web/hooks/use-lift-mode.ts b/apps/web/hooks/use-lift-mode.ts index b5dc5269..6cf7afe3 100644 --- a/apps/web/hooks/use-lift-mode.ts +++ b/apps/web/hooks/use-lift-mode.ts @@ -1,7 +1,7 @@ -import { useAtom } from 'jotai' -import { atomWithStorage } from 'jotai/utils' +import { useAtom } from "jotai" +import { atomWithStorage } from "jotai/utils" -const configAtom = atomWithStorage('lift-mode', []) +const configAtom = atomWithStorage("lift-mode", []) export function useLiftMode(name: string) { const [chunks, setChunks] = useAtom(configAtom) @@ -9,7 +9,7 @@ export function useLiftMode(name: string) { function toggleLiftMode(name: string) { setChunks((prev) => { return prev.includes(name) - ? prev.filter(n => n !== name) + ? prev.filter((n) => n !== name) : [...prev, name] }) } diff --git a/apps/web/hooks/use-lock-body.ts b/apps/web/hooks/use-lock-body.ts index e48d343e..48fdbba7 100644 --- a/apps/web/hooks/use-lock-body.ts +++ b/apps/web/hooks/use-lock-body.ts @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react" // @see https://usehooks.com/useLockBodyScroll. export function useLockBody() { @@ -6,7 +6,7 @@ export function useLockBody() { const originalStyle: string = window.getComputedStyle( document.body, ).overflow - document.body.style.overflow = 'hidden' + document.body.style.overflow = "hidden" return () => (document.body.style.overflow = originalStyle) }, []) } diff --git a/apps/web/hooks/use-media-query.tsx b/apps/web/hooks/use-media-query.tsx index 57a0b5a5..eca86bf5 100644 --- a/apps/web/hooks/use-media-query.tsx +++ b/apps/web/hooks/use-media-query.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react" export function useMediaQuery(query: string) { const [value, setValue] = React.useState(false) @@ -9,10 +9,10 @@ export function useMediaQuery(query: string) { } const result = matchMedia(query) - result.addEventListener('change', onChange) + result.addEventListener("change", onChange) setValue(result.matches) - return () => result.removeEventListener('change', onChange) + return () => result.removeEventListener("change", onChange) }, [query]) return value diff --git a/apps/web/hooks/use-mounted.ts b/apps/web/hooks/use-mounted.ts index cba2168b..d9c212ba 100644 --- a/apps/web/hooks/use-mounted.ts +++ b/apps/web/hooks/use-mounted.ts @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react" export function useMounted() { const [mounted, setMounted] = React.useState(false) diff --git a/apps/web/hooks/use-mutation-observer.ts b/apps/web/hooks/use-mutation-observer.ts index 485551e6..9223dde8 100644 --- a/apps/web/hooks/use-mutation-observer.ts +++ b/apps/web/hooks/use-mutation-observer.ts @@ -1,11 +1,15 @@ -import * as React from 'react' +import * as React from "react" -export function useMutationObserver(ref: React.MutableRefObject, callback: MutationCallback, options = { - attributes: true, - characterData: true, - childList: true, - subtree: true, -}) { +export function useMutationObserver( + ref: React.MutableRefObject, + callback: MutationCallback, + options = { + attributes: true, + characterData: true, + childList: true, + subtree: true, + }, +) { React.useEffect(() => { if (ref.current) { const observer = new MutationObserver(callback) diff --git a/apps/web/hooks/use-on-change.ts b/apps/web/hooks/use-on-change.ts index 3e317f0a..24688422 100644 --- a/apps/web/hooks/use-on-change.ts +++ b/apps/web/hooks/use-on-change.ts @@ -1,6 +1,6 @@ -'use client' +"use client" -import { useState } from 'react' +import { useState } from "react" function isDifferent(a: unknown, b: unknown): boolean { if (Array.isArray(a) && Array.isArray(b)) { diff --git a/apps/web/hooks/use-themes-config.ts b/apps/web/hooks/use-themes-config.ts index 737f08dc..840c98d4 100644 --- a/apps/web/hooks/use-themes-config.ts +++ b/apps/web/hooks/use-themes-config.ts @@ -1,14 +1,14 @@ -import { useAtom } from 'jotai' -import { atomWithStorage } from 'jotai/utils' +import { useAtom } from "jotai" +import { atomWithStorage } from "jotai/utils" -import type { Theme } from '~/lib/themes' -import { THEMES } from '~/lib/themes' +import type { Theme } from "~/lib/themes" +import { THEMES } from "~/lib/themes" interface ThemesConfig { activeTheme: Theme } -const configAtom = atomWithStorage('themes:config', { +const configAtom = atomWithStorage("themes:config", { activeTheme: THEMES[0], }) diff --git a/apps/web/lib/chart-themes.ts b/apps/web/lib/chart-themes.ts index d767adc1..d3fe2d71 100644 --- a/apps/web/lib/chart-themes.ts +++ b/apps/web/lib/chart-themes.ts @@ -1,470 +1,470 @@ -import { themeColorsToCssVariables } from '~/lib/charts' +import { themeColorsToCssVariables } from "~/lib/charts" export const CHART_THEMES = [ { - name: 'Default', - id: 'default-nyxb', + name: "Default", + id: "default-nyxb", colors: { - 'background': '0 0% 100%', - 'foreground': '240 10% 3.9%', - 'card': '0 0% 100%', - 'card-foreground': '240 10% 3.9%', - 'popover': '0 0% 100%', - 'popover-foreground': '240 10% 3.9%', - 'primary': '240 5.9% 10%', - 'primary-foreground': '0 0% 98%', - 'secondary': '240 4.8% 95.9%', - 'secondary-foreground': '240 5.9% 10%', - 'muted': '240 4.8% 95.9%', - 'muted-foreground': '240 3.8% 46.1%', - 'accent': '240 4.8% 95.9%', - 'accent-foreground': '240 5.9% 10%', - 'destructive': '0 84.2% 60.2%', - 'destructive-foreground': '0 0% 98%', - 'border': '240 5.9% 90%', - 'input': '240 5.9% 90%', - 'ring': '240 10% 3.9%', - 'chart-1': '173 58% 39%', - 'chart-2': '12 76% 61%', - 'chart-3': '197 37% 24%', - 'chart-4': '43 74% 66%', - 'chart-5': '27 87% 67%', + background: "0 0% 100%", + foreground: "240 10% 3.9%", + card: "0 0% 100%", + "card-foreground": "240 10% 3.9%", + popover: "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + primary: "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + secondary: "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%", + muted: "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + accent: "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + destructive: "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + border: "240 5.9% 90%", + input: "240 5.9% 90%", + ring: "240 10% 3.9%", + "chart-1": "173 58% 39%", + "chart-2": "12 76% 61%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%", }, colorsDark: { - 'background': '240 10% 3.9%', - 'foreground': '0 0% 98%', - 'card': '240 10% 3.9%', - 'card-foreground': '0 0% 98%', - 'popover': '240 10% 3.9%', - 'popover-foreground': '0 0% 98%', - 'primary': '0 0% 98%', - 'primary-foreground': '240 5.9% 10%', - 'secondary': '240 3.7% 15.9%', - 'secondary-foreground': '0 0% 98%', - 'muted': '240 3.7% 15.9%', - 'muted-foreground': '240 5% 64.9%', - 'accent': '240 3.7% 15.9%', - 'accent-foreground': '0 0% 98%', - 'destructive': '0 62.8% 30.6%', - 'destructive-foreground': '0 0% 98%', - 'border': '240 3.7% 15.9%', - 'input': '240 3.7% 15.9%', - 'ring': '240 4.9% 83.9%', - 'chart-1': '220 70% 50%', - 'chart-5': '160 60% 45%', - 'chart-3': '30 80% 55%', - 'chart-4': '280 65% 60%', - 'chart-2': '340 75% 55%', + background: "240 10% 3.9%", + foreground: "0 0% 98%", + card: "240 10% 3.9%", + "card-foreground": "0 0% 98%", + popover: "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + primary: "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + secondary: "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%", + muted: "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + accent: "240 3.7% 15.9%", + "accent-foreground": "0 0% 98%", + destructive: "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + border: "240 3.7% 15.9%", + input: "240 3.7% 15.9%", + ring: "240 4.9% 83.9%", + "chart-1": "220 70% 50%", + "chart-5": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-2": "340 75% 55%", }, fontFamily: { heading: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, body: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, }, radius: 0.5, }, { - name: 'Palette', - id: 'default-palette', + name: "Palette", + id: "default-palette", colors: { - 'background': '0 0% 100%', - 'foreground': '240 10% 3.9%', - 'card': '0 0% 100%', - 'card-foreground': '240 10% 3.9%', - 'popover': '0 0% 100%', - 'popover-foreground': '240 10% 3.9%', - 'primary': '240 5.9% 10%', - 'primary-foreground': '0 0% 98%', - 'secondary': '240 4.8% 95.9%', - 'secondary-foreground': '240 5.9% 10%', - 'muted': '240 4.8% 95.9%', - 'muted-foreground': '240 3.8% 46.1%', - 'accent': '240 4.8% 95.9%', - 'accent-foreground': '240 5.9% 10%', - 'destructive': '0 84.2% 60.2%', - 'destructive-foreground': '0 0% 98%', - 'border': '240 5.9% 90%', - 'input': '240 5.9% 90%', - 'ring': '240 10% 3.9%', - 'chart-1': '12 76% 61%', - 'chart-2': '173 58% 39%', - 'chart-3': '197 37% 24%', - 'chart-4': '43 74% 66%', - 'chart-5': '27 87% 67%', + background: "0 0% 100%", + foreground: "240 10% 3.9%", + card: "0 0% 100%", + "card-foreground": "240 10% 3.9%", + popover: "0 0% 100%", + "popover-foreground": "240 10% 3.9%", + primary: "240 5.9% 10%", + "primary-foreground": "0 0% 98%", + secondary: "240 4.8% 95.9%", + "secondary-foreground": "240 5.9% 10%", + muted: "240 4.8% 95.9%", + "muted-foreground": "240 3.8% 46.1%", + accent: "240 4.8% 95.9%", + "accent-foreground": "240 5.9% 10%", + destructive: "0 84.2% 60.2%", + "destructive-foreground": "0 0% 98%", + border: "240 5.9% 90%", + input: "240 5.9% 90%", + ring: "240 10% 3.9%", + "chart-1": "12 76% 61%", + "chart-2": "173 58% 39%", + "chart-3": "197 37% 24%", + "chart-4": "43 74% 66%", + "chart-5": "27 87% 67%", }, colorsDark: { - 'background': '240 10% 3.9%', - 'foreground': '0 0% 98%', - 'card': '240 10% 3.9%', - 'card-foreground': '0 0% 98%', - 'popover': '240 10% 3.9%', - 'popover-foreground': '0 0% 98%', - 'primary': '0 0% 98%', - 'primary-foreground': '240 5.9% 10%', - 'secondary': '240 3.7% 15.9%', - 'secondary-foreground': '0 0% 98%', - 'muted': '240 3.7% 15.9%', - 'muted-foreground': '240 5% 64.9%', - 'accent': '240 3.7% 15.9%', - 'accent-foreground': '0 0% 98%', - 'destructive': '0 62.8% 30.6%', - 'destructive-foreground': '0 0% 98%', - 'border': '240 3.7% 15.9%', - 'input': '240 3.7% 15.9%', - 'ring': '240 4.9% 83.9%', - 'chart-1': '220 70% 50%', - 'chart-2': '160 60% 45%', - 'chart-3': '30 80% 55%', - 'chart-4': '280 65% 60%', - 'chart-5': '340 75% 55%', + background: "240 10% 3.9%", + foreground: "0 0% 98%", + card: "240 10% 3.9%", + "card-foreground": "0 0% 98%", + popover: "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + primary: "0 0% 98%", + "primary-foreground": "240 5.9% 10%", + secondary: "240 3.7% 15.9%", + "secondary-foreground": "0 0% 98%", + muted: "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + accent: "240 3.7% 15.9%", + "accent-foreground": "0 0% 98%", + destructive: "0 62.8% 30.6%", + "destructive-foreground": "0 0% 98%", + border: "240 3.7% 15.9%", + input: "240 3.7% 15.9%", + ring: "240 4.9% 83.9%", + "chart-1": "220 70% 50%", + "chart-2": "160 60% 45%", + "chart-3": "30 80% 55%", + "chart-4": "280 65% 60%", + "chart-5": "340 75% 55%", }, fontFamily: { heading: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, body: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, }, radius: 0.5, }, { - name: 'Sapphire', - id: 'default-sapphire', + name: "Sapphire", + id: "default-sapphire", colors: { - 'background': '0 0% 100%', - 'foreground': '222.2 84% 4.9%', - 'card': '0 0% 100%', - 'cardForeground': '222.2 84% 4.9%', - 'popover': '0 0% 100%', - 'popoverForeground': '222.2 84% 4.9%', - 'primary': '221.2 83.2% 53.3%', - 'primaryForeground': '210 40% 98%', - 'secondary': '210 40% 96.1%', - 'secondaryForeground': '222.2 47.4% 11.2%', - 'muted': '210 40% 96.1%', - 'mutedForeground': '215.4 16.3% 44%', - 'accent': '210 40% 96.1%', - 'accentForeground': '222.2 47.4% 11.2%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '210 40% 98%', - 'border': '214.3 31.8% 91.4%', - 'input': '214.3 31.8% 91.4%', - 'ring': '221.2 83.2% 53.3%', - 'chart-1': '221.2 83.2% 53.3%', - 'chart-2': '212 95% 68%', - 'chart-3': '216 92% 60%', - 'chart-4': '210 98% 78%', - 'chart-5': '212 97% 87%', + background: "0 0% 100%", + foreground: "222.2 84% 4.9%", + card: "0 0% 100%", + cardForeground: "222.2 84% 4.9%", + popover: "0 0% 100%", + popoverForeground: "222.2 84% 4.9%", + primary: "221.2 83.2% 53.3%", + primaryForeground: "210 40% 98%", + secondary: "210 40% 96.1%", + secondaryForeground: "222.2 47.4% 11.2%", + muted: "210 40% 96.1%", + mutedForeground: "215.4 16.3% 44%", + accent: "210 40% 96.1%", + accentForeground: "222.2 47.4% 11.2%", + destructive: "0 72% 51%", + destructiveForeground: "210 40% 98%", + border: "214.3 31.8% 91.4%", + input: "214.3 31.8% 91.4%", + ring: "221.2 83.2% 53.3%", + "chart-1": "221.2 83.2% 53.3%", + "chart-2": "212 95% 68%", + "chart-3": "216 92% 60%", + "chart-4": "210 98% 78%", + "chart-5": "212 97% 87%", }, colorsDark: { - 'background': '240 10% 3.9%', - 'foreground': '0 0% 98%', - 'card': '240 10% 3.9%', - 'card-foreground': '0 0% 98%', - 'popover': '240 10% 3.9%', - 'popover-foreground': '0 0% 98%', - 'primary': '221.2 83.2% 53.3%', - 'primaryForeground': '210 40% 98%', - 'secondary': '210 40% 96.1%', - 'secondaryForeground': '222.2 47.4% 11.2%', - 'muted': '240 3.7% 15.9%', - 'muted-foreground': '240 5% 64.9%', - 'accent': '210 40% 96.1%', - 'accentForeground': '222.2 47.4% 11.2%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '210 40% 98%', - 'border': '240 3.7% 15.9%', - 'input': '240 3.7% 15.9%', - 'ring': '221.2 83.2% 53.3%', - 'chart-1': '221.2 83.2% 53.3%', - 'chart-2': '212 95% 68%', - 'chart-3': '216 92% 60%', - 'chart-4': '210 98% 78%', - 'chart-5': '212 97% 87%', + background: "240 10% 3.9%", + foreground: "0 0% 98%", + card: "240 10% 3.9%", + "card-foreground": "0 0% 98%", + popover: "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + primary: "221.2 83.2% 53.3%", + primaryForeground: "210 40% 98%", + secondary: "210 40% 96.1%", + secondaryForeground: "222.2 47.4% 11.2%", + muted: "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + accent: "210 40% 96.1%", + accentForeground: "222.2 47.4% 11.2%", + destructive: "0 72% 51%", + destructiveForeground: "210 40% 98%", + border: "240 3.7% 15.9%", + input: "240 3.7% 15.9%", + ring: "221.2 83.2% 53.3%", + "chart-1": "221.2 83.2% 53.3%", + "chart-2": "212 95% 68%", + "chart-3": "216 92% 60%", + "chart-4": "210 98% 78%", + "chart-5": "212 97% 87%", }, fontFamily: { heading: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, body: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, }, radius: 0.5, }, { - name: 'Ruby', - id: 'default-ruby', + name: "Ruby", + id: "default-ruby", colors: { - 'background': '0 0% 100%', - 'foreground': '240 10% 3.9%', - 'card': '0 0% 100%', - 'cardForeground': '240 10% 3.9%', - 'popover': '0 0% 100%', - 'popoverForeground': '240 10% 3.9%', - 'primary': '346.8 77.2% 49.8%', - 'primaryForeground': '355.7 100% 99%', - 'secondary': '240 4.8% 95.9%', - 'secondaryForeground': '240 5.9% 10%', - 'muted': '240 4.8% 95.9%', - 'mutedForeground': '240 3.8% 45%', - 'accent': '240 4.8% 95.9%', - 'accentForeground': '240 5.9% 10%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '0 0% 98%', - 'border': '240 5.9% 90%', - 'input': '240 5.9% 90%', - 'ring': '346.8 77.2% 49.8%', - 'chart-1': '347 77% 50%', - 'chart-2': '352 83% 91%', - 'chart-3': '350 80% 72%', - 'chart-4': '351 83% 82%', - 'chart-5': '349 77% 62%', + background: "0 0% 100%", + foreground: "240 10% 3.9%", + card: "0 0% 100%", + cardForeground: "240 10% 3.9%", + popover: "0 0% 100%", + popoverForeground: "240 10% 3.9%", + primary: "346.8 77.2% 49.8%", + primaryForeground: "355.7 100% 99%", + secondary: "240 4.8% 95.9%", + secondaryForeground: "240 5.9% 10%", + muted: "240 4.8% 95.9%", + mutedForeground: "240 3.8% 45%", + accent: "240 4.8% 95.9%", + accentForeground: "240 5.9% 10%", + destructive: "0 72% 51%", + destructiveForeground: "0 0% 98%", + border: "240 5.9% 90%", + input: "240 5.9% 90%", + ring: "346.8 77.2% 49.8%", + "chart-1": "347 77% 50%", + "chart-2": "352 83% 91%", + "chart-3": "350 80% 72%", + "chart-4": "351 83% 82%", + "chart-5": "349 77% 62%", }, colorsDark: { - 'background': '240 10% 3.9%', - 'foreground': '0 0% 98%', - 'card': '240 10% 3.9%', - 'card-foreground': '0 0% 98%', - 'popover': '240 10% 3.9%', - 'popover-foreground': '0 0% 98%', - 'primary': '346.8 77.2% 49.8%', - 'primaryForeground': '355.7 100% 99%', - 'secondary': '240 4.8% 95.9%', - 'secondaryForeground': '240 5.9% 10%', - 'muted': '240 3.7% 15.9%', - 'muted-foreground': '240 5% 64.9%', - 'accent': '240 4.8% 95.9%', - 'accentForeground': '240 5.9% 10%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '0 0% 98%', - 'border': '240 3.7% 15.9%', - 'input': '240 3.7% 15.9%', - 'ring': '221.2 83.2% 53.3%', - 'chart-1': '347 77% 50%', - 'chart-2': '349 77% 62%', - 'chart-3': '350 80% 72%', - 'chart-4': '351 83% 82%', - 'chart-5': '352 83% 91%', + background: "240 10% 3.9%", + foreground: "0 0% 98%", + card: "240 10% 3.9%", + "card-foreground": "0 0% 98%", + popover: "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + primary: "346.8 77.2% 49.8%", + primaryForeground: "355.7 100% 99%", + secondary: "240 4.8% 95.9%", + secondaryForeground: "240 5.9% 10%", + muted: "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + accent: "240 4.8% 95.9%", + accentForeground: "240 5.9% 10%", + destructive: "0 72% 51%", + destructiveForeground: "0 0% 98%", + border: "240 3.7% 15.9%", + input: "240 3.7% 15.9%", + ring: "221.2 83.2% 53.3%", + "chart-1": "347 77% 50%", + "chart-2": "349 77% 62%", + "chart-3": "350 80% 72%", + "chart-4": "351 83% 82%", + "chart-5": "352 83% 91%", }, fontFamily: { heading: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, body: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, }, radius: 0.5, }, { - name: 'Emerald', - id: 'default-emerald', + name: "Emerald", + id: "default-emerald", colors: { - 'background': '0 0% 100%', - 'foreground': '240 10% 3.9%', - 'card': '0 0% 100%', - 'cardForeground': '240 10% 3.9%', - 'popover': '0 0% 100%', - 'popoverForeground': '240 10% 3.9%', - 'primary': '142 86% 28%', - 'primaryForeground': '356 29% 98%', - 'secondary': '240 4.8% 95.9%', - 'secondaryForeground': '240 5.9% 10%', - 'muted': '240 4.8% 95.9%', - 'mutedForeground': '240 3.8% 45%', - 'accent': '240 4.8% 95.9%', - 'accentForeground': '240 5.9% 10%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '0 0% 98%', - 'border': '240 5.9% 90%', - 'input': '240 5.9% 90%', - 'ring': '142 86% 28%', - 'chart-1': '139 65% 20%', - 'chart-2': '140 74% 44%', - 'chart-3': '142 88% 28%', - 'chart-4': '137 55% 15%', - 'chart-5': '141 40% 9%', + background: "0 0% 100%", + foreground: "240 10% 3.9%", + card: "0 0% 100%", + cardForeground: "240 10% 3.9%", + popover: "0 0% 100%", + popoverForeground: "240 10% 3.9%", + primary: "142 86% 28%", + primaryForeground: "356 29% 98%", + secondary: "240 4.8% 95.9%", + secondaryForeground: "240 5.9% 10%", + muted: "240 4.8% 95.9%", + mutedForeground: "240 3.8% 45%", + accent: "240 4.8% 95.9%", + accentForeground: "240 5.9% 10%", + destructive: "0 72% 51%", + destructiveForeground: "0 0% 98%", + border: "240 5.9% 90%", + input: "240 5.9% 90%", + ring: "142 86% 28%", + "chart-1": "139 65% 20%", + "chart-2": "140 74% 44%", + "chart-3": "142 88% 28%", + "chart-4": "137 55% 15%", + "chart-5": "141 40% 9%", }, colorsDark: { - 'background': '240 10% 3.9%', - 'foreground': '0 0% 98%', - 'card': '240 10% 3.9%', - 'card-foreground': '0 0% 98%', - 'popover': '240 10% 3.9%', - 'popover-foreground': '0 0% 98%', - 'primary': '142 86% 28%', - 'primaryForeground': '356 29% 98%', - 'secondary': '240 4.8% 95.9%', - 'secondaryForeground': '240 5.9% 10%', - 'muted': '240 3.7% 15.9%', - 'muted-foreground': '240 5% 64.9%', - 'accent': '240 4.8% 95.9%', - 'accentForeground': '240 5.9% 10%', - 'destructive': '0 72% 51%', - 'destructiveForeground': '0 0% 98%', - 'border': '240 3.7% 15.9%', - 'input': '240 3.7% 15.9%', - 'ring': '142 86% 28%', - 'chart-1': '142 88% 28%', - 'chart-2': '139 65% 20%', - 'chart-3': '140 74% 24%', - 'chart-4': '137 55% 15%', - 'chart-5': '141 40% 9%', + background: "240 10% 3.9%", + foreground: "0 0% 98%", + card: "240 10% 3.9%", + "card-foreground": "0 0% 98%", + popover: "240 10% 3.9%", + "popover-foreground": "0 0% 98%", + primary: "142 86% 28%", + primaryForeground: "356 29% 98%", + secondary: "240 4.8% 95.9%", + secondaryForeground: "240 5.9% 10%", + muted: "240 3.7% 15.9%", + "muted-foreground": "240 5% 64.9%", + accent: "240 4.8% 95.9%", + accentForeground: "240 5.9% 10%", + destructive: "0 72% 51%", + destructiveForeground: "0 0% 98%", + border: "240 3.7% 15.9%", + input: "240 3.7% 15.9%", + ring: "142 86% 28%", + "chart-1": "142 88% 28%", + "chart-2": "139 65% 20%", + "chart-3": "140 74% 24%", + "chart-4": "137 55% 15%", + "chart-5": "141 40% 9%", }, fontFamily: { heading: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, body: { - name: 'Inter', - type: 'sans-serif', + name: "Inter", + type: "sans-serif", }, }, radius: 0.5, }, { - name: 'Daylight', - id: 'default-daylight', + name: "Daylight", + id: "default-daylight", colors: { - 'background': '36 39% 88%', - 'foreground': '36 45% 15%', - 'primary': '36 45% 70%', - 'primaryForeground': '36 45% 11%', - 'secondary': '40 35% 77%', - 'secondaryForeground': '36 45% 25%', - 'accent': '36 64% 57%', - 'accentForeground': '36 72% 17%', - 'destructive': '0 84% 37%', - 'destructiveForeground': '0 0% 98%', - 'muted': '36 33% 75%', - 'mutedForeground': '36 45% 25%', - 'card': '36 46% 82%', - 'cardForeground': '36 45% 20%', - 'popover': '0 0% 100%', - 'popoverForeground': '240 10% 3.9%', - 'border': '36 45% 60%', - 'input': '36 45% 60%', - 'ring': '36 45% 30%', - 'chart-1': '25 34% 28%', - 'chart-2': '26 36% 34%', - 'chart-3': '28 40% 40%', - 'chart-4': '31 41% 48%', - 'chart-5': '35 43% 53%', + background: "36 39% 88%", + foreground: "36 45% 15%", + primary: "36 45% 70%", + primaryForeground: "36 45% 11%", + secondary: "40 35% 77%", + secondaryForeground: "36 45% 25%", + accent: "36 64% 57%", + accentForeground: "36 72% 17%", + destructive: "0 84% 37%", + destructiveForeground: "0 0% 98%", + muted: "36 33% 75%", + mutedForeground: "36 45% 25%", + card: "36 46% 82%", + cardForeground: "36 45% 20%", + popover: "0 0% 100%", + popoverForeground: "240 10% 3.9%", + border: "36 45% 60%", + input: "36 45% 60%", + ring: "36 45% 30%", + "chart-1": "25 34% 28%", + "chart-2": "26 36% 34%", + "chart-3": "28 40% 40%", + "chart-4": "31 41% 48%", + "chart-5": "35 43% 53%", }, colorsDark: { - 'background': '36 39% 88%', - 'foreground': '36 45% 15%', - 'primary': '36 45% 70%', - 'primaryForeground': '36 45% 11%', - 'secondary': '40 35% 77%', - 'secondaryForeground': '36 45% 25%', - 'accent': '36 64% 57%', - 'accentForeground': '36 72% 17%', - 'destructive': '0 84% 37%', - 'destructiveForeground': '0 0% 98%', - 'muted': '36 33% 75%', - 'mutedForeground': '36 45% 25%', - 'card': '36 46% 82%', - 'cardForeground': '36 45% 20%', - 'popover': '0 0% 100%', - 'popoverForeground': '240 10% 3.9%', - 'border': '36 45% 60%', - 'input': '36 45% 60%', - 'ring': '36 45% 30%', - 'chart-1': '25 34% 28%', - 'chart-2': '26 36% 34%', - 'chart-3': '28 40% 40%', - 'chart-4': '31 41% 48%', - 'chart-5': '35 43% 53%', + background: "36 39% 88%", + foreground: "36 45% 15%", + primary: "36 45% 70%", + primaryForeground: "36 45% 11%", + secondary: "40 35% 77%", + secondaryForeground: "36 45% 25%", + accent: "36 64% 57%", + accentForeground: "36 72% 17%", + destructive: "0 84% 37%", + destructiveForeground: "0 0% 98%", + muted: "36 33% 75%", + mutedForeground: "36 45% 25%", + card: "36 46% 82%", + cardForeground: "36 45% 20%", + popover: "0 0% 100%", + popoverForeground: "240 10% 3.9%", + border: "36 45% 60%", + input: "36 45% 60%", + ring: "36 45% 30%", + "chart-1": "25 34% 28%", + "chart-2": "26 36% 34%", + "chart-3": "28 40% 40%", + "chart-4": "31 41% 48%", + "chart-5": "35 43% 53%", }, fontFamily: { heading: { - name: 'DM Sans', - type: 'sans-serif', + name: "DM Sans", + type: "sans-serif", }, body: { - name: 'Space Mono', - type: 'monospace', + name: "Space Mono", + type: "monospace", }, }, }, { - name: 'Midnight', - id: 'default-midnight', + name: "Midnight", + id: "default-midnight", colors: { - 'background': '240 5% 6%', - 'foreground': '60 5% 90%', - 'primary': '240 0% 90%', - 'primaryForeground': '60 0% 0%', - 'secondary': '240 4% 15%', - 'secondaryForeground': '60 5% 85%', - 'accent': '240 0% 13%', - 'accentForeground': '60 0% 100%', - 'destructive': '0 60% 50%', - 'destructiveForeground': '0 0% 98%', - 'muted': '240 5% 25%', - 'mutedForeground': '60 5% 85%', - 'card': '240 4% 10%', - 'cardForeground': '60 5% 90%', - 'popover': '240 5% 15%', - 'popoverForeground': '60 5% 85%', - 'border': '240 6% 20%', - 'input': '240 6% 20%', - 'ring': '240 5% 90%', - 'chart-1': '359 2% 90%', - 'chart-2': '240 1% 74%', - 'chart-3': '240 1% 58%', - 'chart-4': '240 1% 42%', - 'chart-5': '240 2% 26%', + background: "240 5% 6%", + foreground: "60 5% 90%", + primary: "240 0% 90%", + primaryForeground: "60 0% 0%", + secondary: "240 4% 15%", + secondaryForeground: "60 5% 85%", + accent: "240 0% 13%", + accentForeground: "60 0% 100%", + destructive: "0 60% 50%", + destructiveForeground: "0 0% 98%", + muted: "240 5% 25%", + mutedForeground: "60 5% 85%", + card: "240 4% 10%", + cardForeground: "60 5% 90%", + popover: "240 5% 15%", + popoverForeground: "60 5% 85%", + border: "240 6% 20%", + input: "240 6% 20%", + ring: "240 5% 90%", + "chart-1": "359 2% 90%", + "chart-2": "240 1% 74%", + "chart-3": "240 1% 58%", + "chart-4": "240 1% 42%", + "chart-5": "240 2% 26%", }, colorsDark: { - 'background': '240 5% 6%', - 'foreground': '60 5% 90%', - 'primary': '240 0% 90%', - 'primaryForeground': '60 0% 0%', - 'secondary': '240 4% 15%', - 'secondaryForeground': '60 5% 85%', - 'accent': '240 0% 13%', - 'accentForeground': '60 0% 100%', - 'destructive': '0 60% 50%', - 'destructiveForeground': '0 0% 98%', - 'muted': '240 5% 25%', - 'mutedForeground': '60 5% 85%', - 'card': '240 4% 10%', - 'cardForeground': '60 5% 90%', - 'popover': '240 5% 15%', - 'popoverForeground': '60 5% 85%', - 'border': '240 6% 20%', - 'input': '240 6% 20%', - 'ring': '240 5% 90%', - 'chart-1': '359 2% 90%', - 'chart-2': '240 1% 74%', - 'chart-3': '240 1% 58%', - 'chart-4': '240 1% 42%', - 'chart-5': '240 2% 26%', + background: "240 5% 6%", + foreground: "60 5% 90%", + primary: "240 0% 90%", + primaryForeground: "60 0% 0%", + secondary: "240 4% 15%", + secondaryForeground: "60 5% 85%", + accent: "240 0% 13%", + accentForeground: "60 0% 100%", + destructive: "0 60% 50%", + destructiveForeground: "0 0% 98%", + muted: "240 5% 25%", + mutedForeground: "60 5% 85%", + card: "240 4% 10%", + cardForeground: "60 5% 90%", + popover: "240 5% 15%", + popoverForeground: "60 5% 85%", + border: "240 6% 20%", + input: "240 6% 20%", + ring: "240 5% 90%", + "chart-1": "359 2% 90%", + "chart-2": "240 1% 74%", + "chart-3": "240 1% 58%", + "chart-4": "240 1% 42%", + "chart-5": "240 2% 26%", }, fontFamily: { heading: { - name: 'Manrope', - type: 'sans-serif', + name: "Manrope", + type: "sans-serif", }, body: { - name: 'Manrope', - type: 'sans-serif', + name: "Manrope", + type: "sans-serif", }, }, radius: 0.5, @@ -474,7 +474,7 @@ export const CHART_THEMES = [ export type ChartTheme = ReturnType[number] export function getChartThemes() { - return CHART_THEMES.map(theme => ({ + return CHART_THEMES.map((theme) => ({ ...theme, cssVars: { light: themeColorsToCssVariables(theme.colors), diff --git a/apps/web/lib/charts.ts b/apps/web/lib/charts.ts index 1489b007..9b26840a 100644 --- a/apps/web/lib/charts.ts +++ b/apps/web/lib/charts.ts @@ -3,13 +3,12 @@ export function themeColorsToCssVariables( ): Record { const cssVars = colors ? Object.fromEntries( - Object.entries(colors).map(([name, value]) => { - if (value === undefined) - return [] - const cssName = themeColorNameToCssVariable(name) - return [cssName, value] - }), - ) + Object.entries(colors).map(([name, value]) => { + if (value === undefined) return [] + const cssName = themeColorNameToCssVariable(name) + return [cssName, value] + }), + ) : {} // for (const key of Array.from({ length: 5 }, (_, index) => index)) { @@ -22,5 +21,5 @@ export function themeColorsToCssVariables( } export function themeColorNameToCssVariable(name: string) { - return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}` + return `--${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}` } diff --git a/apps/web/lib/colors.ts b/apps/web/lib/colors.ts index 21326702..f9f30341 100644 --- a/apps/web/lib/colors.ts +++ b/apps/web/lib/colors.ts @@ -1,6 +1,6 @@ -import { z } from 'zod' +import { z } from "zod" -import { colors } from '~/registry/registry-colors' +import { colors } from "~/registry/registry-colors" const colorSchema = z.object({ name: z.string(), @@ -44,7 +44,7 @@ export function getColors() { colors: color.map((color) => { const rgb = color.rgb.replace( /^rgb\((\d+),(\d+),(\d+)\)$/, - '$1 $2 $3', + "$1 $2 $3", ) return { @@ -55,7 +55,7 @@ export function getColors() { rgb, hsl: color.hsl.replace( /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, - '$1 $2 $3', + "$1 $2 $3", ), foreground: getForegroundFromBackground(rgb), } @@ -68,20 +68,18 @@ export function getColors() { return tailwindColors } -export type Color = ReturnType[number]['colors'][number] +export type Color = ReturnType[number]["colors"][number] function getForegroundFromBackground(rgb: string) { - const [r, g, b] = rgb.split(' ').map(Number) + const [r, g, b] = rgb.split(" ").map(Number) function toLinear(number: number): number { const base = number / 255 - return base <= 0.04045 - ? base / 12.92 - : ((base + 0.055) / 1.055) ** 2.4 + return base <= 0.04045 ? base / 12.92 : ((base + 0.055) / 1.055) ** 2.4 } - const luminance - = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b) + const luminance = + 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b) - return luminance > 0.179 ? '#000' : '#fff' + return luminance > 0.179 ? "#000" : "#fff" } diff --git a/apps/web/lib/events.ts b/apps/web/lib/events.ts index 9ea8dbcf..9c185352 100644 --- a/apps/web/lib/events.ts +++ b/apps/web/lib/events.ts @@ -1,20 +1,20 @@ -import va from '@vercel/analytics' -import { z } from 'zod' +import va from "@vercel/analytics" +import { z } from "zod" const eventSchema = z.object({ name: z.enum([ - 'copy_npm_command', - 'copy_usage_import_code', - 'copy_usage_code', - 'copy_primitive_code', - 'copy_theme_code', - 'copy_block_code', - 'copy_chunk_code', - 'enable_lift_mode', - 'copy_chart_code', - 'copy_chart_theme', - 'copy_chart_data', - 'copy_color', + "copy_npm_command", + "copy_usage_import_code", + "copy_usage_code", + "copy_primitive_code", + "copy_theme_code", + "copy_block_code", + "copy_chunk_code", + "enable_lift_mode", + "copy_chart_code", + "copy_chart_theme", + "copy_chart_data", + "copy_color", ]), // declare type AllowedPropertyValues = string | number | boolean | null properties: z diff --git a/apps/web/lib/fonts.ts b/apps/web/lib/fonts.ts index 6f0e909f..b86baae6 100644 --- a/apps/web/lib/fonts.ts +++ b/apps/web/lib/fonts.ts @@ -1,9 +1,9 @@ -import { GeistSans } from 'geist/font/sans' -import { JetBrains_Mono as FontMono } from 'next/font/google' +import { GeistSans } from "geist/font/sans" +import { JetBrains_Mono as FontMono } from "next/font/google" export const fontSans = GeistSans export const fontMono = FontMono({ - subsets: ['latin'], - variable: '--font-mono', + subsets: ["latin"], + variable: "--font-mono", }) diff --git a/apps/web/lib/highlighter-theme.json b/apps/web/lib/highlighter-theme.json index d1a46c3b..2d0cf748 100644 --- a/apps/web/lib/highlighter-theme.json +++ b/apps/web/lib/highlighter-theme.json @@ -1,380 +1,380 @@ { - "name": "Lambda Studio — Blackout", - "semanticHighlighting": true, - "colors": { - "editorLink.activeForeground": "#ca8a0488", - "foreground": "#fff8", - "button.background": "#fff", - "button.foreground": "#000", - "button.hoverBackground": "#fffb", - "list.highlightForeground": "#fff", - "textLink.foreground": "#fff", - "scrollbar.shadow": "#000", - "textLink.activeForeground": "#fff8", - "editor.lineHighlightBackground": "#8881", - "editor.lineHighlightBorder": "#8882", - "editorCursor.foreground": "#fff", - "editor.findMatchBackground": "#fff8", - "editor.findMatchHighlightBackground": "#fff2", - "list.activeSelectionForeground": "#fff", - "list.focusForeground": "#fff", - "list.hoverForeground": "#fff", - "list.inactiveSelectionForeground": "#fff", - "list.inactiveSelectionBackground": "#000", - "list.focusBackground": "#000", - "list.focusAndSelectionOutline": "#000", - "list.focusHighlightForeground": "#fff", - "list.hoverBackground": "#000", - "list.focusOutline": "#000", - "list.activeSelectionBackground": "#000", - "editorIndentGuide.background": "#fff2", - "editor.background": "#000", - "editor.foreground": "#fff", - "editor.foldBackground": "#000", - "editor.hoverHighlightBackground": "#000", - "editor.selectionBackground": "#8888", - "editor.inactiveSelectionBackground": "#8882", - "gitDecoration.modifiedResourceForeground": "#fff", - "gitDecoration.untrackedResourceForeground": "#a7cb7b", - "gitDecoration.conflictingResourceForeground": "#ca8a04", - "gitDecoration.deletedResourceForeground": "#c97b89", - "listFilterWidget.background": "#000", - "input.background": "#fff1", - "titleBar.activeForeground": "#fff", - "editorWidget.background": "#000", - "editorGutter.background": "#000", - "debugToolBar.background": "#000", - "commandCenter.background": "#000", - "sideBarSectionHeader.background": "#000", - "focusBorder": "#fff8", - "titleBar.activeBackground": "#000", - "titleBar.inactiveBackground": "#000", - "breadcrumb.background": "#000", - "activityBar.background": "#000", - "activityBar.foreground": "#fff8", - "panel.background": "#000", - "sideBar.background": "#000", - "sideBarTitle.foreground": "#fff8", - "tab.hoverBackground": "#000", - "terminal.background": "#000", - "statusBar.background": "#000", - "statusBar.foreground": "#fff8", - "selection.background": "#fff2", - "editorPane.background": "#000", - "badge.background": "#000", - "banner.background": "#000", - "menu.background": "#000", - "activityBarBadge.background": "#000", - "activityBarBadge.foreground": "#fff8", - "editorLineNumber.foreground": "#fff2", - "editorLineNumber.activeForeground": "#fff8", - "statusBarItem.errorBackground": "#f43f5e" - }, - "semanticTokenColors": { - "comment": { - "foreground": "#fff4" - }, - "keyword": { - "foreground": "#fff8" - }, - "string": { - "foreground": "#fff8" - }, - "selfKeyword": { - "foreground": "#fff", - "bold": true - }, - "method.declaration": { - "foreground": "#fff", - "bold": true - }, - "method.definition": { - "foreground": "#fff", - "bold": true - }, - "method": { - "foreground": "#fff", - "bold": false - }, - "function.declaration": { - "foreground": "#fff", - "bold": true - }, - "function.definition": { - "foreground": "#fff", - "bold": true - }, - "function": { - "foreground": "#fff", - "bold": false - }, - "property": { - "foreground": "#fff" - }, - "enumMember": { + "name": "Lambda Studio — Blackout", + "semanticHighlighting": true, + "colors": { + "editorLink.activeForeground": "#ca8a0488", "foreground": "#fff8", - "bold": false - }, - "enum": { - "foreground": "#fff", - "bold": true - }, - "boolean": { - "foreground": "#fff8" - }, - "number": { - "foreground": "#fff8" - }, - "type": { - "foreground": "#fff", - "bold": true - }, - "typeAlias": { - "foreground": "#fff", - "bold": true - }, - "class": { - "foreground": "#fff", - "bold": true - }, - "selfTypeKeyword": { - "foreground": "#fff", - "bold": true - }, - "builtinType": { - "foreground": "#fff", - "bold": true - }, - "interface": { - "foreground": "#fff8", - "bold": false - }, - "typeParameter": { - "foreground": "#fff", - "bold": true - }, - "lifetime": { - "foreground": "#fff8", - "italic": false, - "bold": false - }, - "namespace": { - "foreground": "#fff" - }, - "macro": { - "foreground": "#fff", - "bold": false - }, - "decorator": { - "foreground": "#fff", - "bold": false - }, - "builtinAttribute": { - "foreground": "#fff", - "bold": false - }, - "generic.attribute": { - "foreground": "#fff" - }, - "derive": { - "foreground": "#fff" - }, - "operator": { - "foreground": "#fff8" - }, - "variable": { - "foreground": "#fff" - }, - "variable.readonly": { - "foreground": "#fff8" - }, - "parameter": { - "foreground": "#fff" - }, - "variable.mutable": { - "underline": true - }, - "parameter.mutable": { - "underline": true - }, - "selfKeyword.mutable": { - "underline": true - }, - "variable.constant": { - "foreground": "#fff8" - }, - "struct": { - "foreground": "#fff", - "bold": true - } - }, - "tokenColors": [ - { - "name": "Fallback Operator", - "scope": ["keyword.operator"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback keywords", - "scope": [ - "storage.type.ts", - "keyword", - "keyword.other", - "keyword.control", - "storage.type", - "storage.modifier" - ], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback strings", - "scope": ["string"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback JSON Properties", - "scope": ["support.type.property-name.json"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback string variables", - "scope": ["string variable", "string meta.interpolation"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback comments", - "scope": ["comment"], - "settings": { - "foreground": "#fff4" - } - }, - { - "name": "Fallback constants", - "scope": ["constant"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback self/this", - "scope": ["variable.language.this"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback types", - "scope": [ - "entity.other.alias", - "source.php support.class", - "entity.name.type", - "meta.function-call support.class", - "keyword.other.type", - "entity.other.inherited-class" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "bold" - } - }, - { - "name": "Fallback method calls", - "scope": ["meta.method-call entity.name.function"], - "settings": { - "foreground": "#fff", - "fontStyle": "" - } - }, - { - "name": "Fallback function calls", - "scope": [ - "meta.function-call entity.name.function", - "meta.function-call support.function", - "meta.function.call entity.name.function" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "" - } - }, - { - "name": "Fallback enums & constants", - "scope": ["constant.enum", "constant.other"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback Properties & func arguments", - "scope": [ - "variable.other.property", - "entity.name.goto-label", - "entity.name.variable.parameter" - ], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback functions & methods declarations", - "scope": [ - "entity.name.function", - "support.function", - "support.function.constructor", - "entity.name.function meta.function-call meta.method-call" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "bold" - } - }, - { - "name": "HTML Tags", - "scope": [ - "meta.tag entity.name.tag.html", - "entity.name.tag.template.html" - ], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "HTML Attributes", - "scope": ["entity.other.attribute-name.html"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "HTML Custom Tag", - "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "HTML Keywords", - "scope": ["text.html keyword"], - "settings": { - "foreground": "#fff" + "button.background": "#fff", + "button.foreground": "#000", + "button.hoverBackground": "#fffb", + "list.highlightForeground": "#fff", + "textLink.foreground": "#fff", + "scrollbar.shadow": "#000", + "textLink.activeForeground": "#fff8", + "editor.lineHighlightBackground": "#8881", + "editor.lineHighlightBorder": "#8882", + "editorCursor.foreground": "#fff", + "editor.findMatchBackground": "#fff8", + "editor.findMatchHighlightBackground": "#fff2", + "list.activeSelectionForeground": "#fff", + "list.focusForeground": "#fff", + "list.hoverForeground": "#fff", + "list.inactiveSelectionForeground": "#fff", + "list.inactiveSelectionBackground": "#000", + "list.focusBackground": "#000", + "list.focusAndSelectionOutline": "#000", + "list.focusHighlightForeground": "#fff", + "list.hoverBackground": "#000", + "list.focusOutline": "#000", + "list.activeSelectionBackground": "#000", + "editorIndentGuide.background": "#fff2", + "editor.background": "#000", + "editor.foreground": "#fff", + "editor.foldBackground": "#000", + "editor.hoverHighlightBackground": "#000", + "editor.selectionBackground": "#8888", + "editor.inactiveSelectionBackground": "#8882", + "gitDecoration.modifiedResourceForeground": "#fff", + "gitDecoration.untrackedResourceForeground": "#a7cb7b", + "gitDecoration.conflictingResourceForeground": "#ca8a04", + "gitDecoration.deletedResourceForeground": "#c97b89", + "listFilterWidget.background": "#000", + "input.background": "#fff1", + "titleBar.activeForeground": "#fff", + "editorWidget.background": "#000", + "editorGutter.background": "#000", + "debugToolBar.background": "#000", + "commandCenter.background": "#000", + "sideBarSectionHeader.background": "#000", + "focusBorder": "#fff8", + "titleBar.activeBackground": "#000", + "titleBar.inactiveBackground": "#000", + "breadcrumb.background": "#000", + "activityBar.background": "#000", + "activityBar.foreground": "#fff8", + "panel.background": "#000", + "sideBar.background": "#000", + "sideBarTitle.foreground": "#fff8", + "tab.hoverBackground": "#000", + "terminal.background": "#000", + "statusBar.background": "#000", + "statusBar.foreground": "#fff8", + "selection.background": "#fff2", + "editorPane.background": "#000", + "badge.background": "#000", + "banner.background": "#000", + "menu.background": "#000", + "activityBarBadge.background": "#000", + "activityBarBadge.foreground": "#fff8", + "editorLineNumber.foreground": "#fff2", + "editorLineNumber.activeForeground": "#fff8", + "statusBarItem.errorBackground": "#f43f5e" + }, + "semanticTokenColors": { + "comment": { + "foreground": "#fff4" + }, + "keyword": { + "foreground": "#fff8" + }, + "string": { + "foreground": "#fff8" + }, + "selfKeyword": { + "foreground": "#fff", + "bold": true + }, + "method.declaration": { + "foreground": "#fff", + "bold": true + }, + "method.definition": { + "foreground": "#fff", + "bold": true + }, + "method": { + "foreground": "#fff", + "bold": false + }, + "function.declaration": { + "foreground": "#fff", + "bold": true + }, + "function.definition": { + "foreground": "#fff", + "bold": true + }, + "function": { + "foreground": "#fff", + "bold": false + }, + "property": { + "foreground": "#fff" + }, + "enumMember": { + "foreground": "#fff8", + "bold": false + }, + "enum": { + "foreground": "#fff", + "bold": true + }, + "boolean": { + "foreground": "#fff8" + }, + "number": { + "foreground": "#fff8" + }, + "type": { + "foreground": "#fff", + "bold": true + }, + "typeAlias": { + "foreground": "#fff", + "bold": true + }, + "class": { + "foreground": "#fff", + "bold": true + }, + "selfTypeKeyword": { + "foreground": "#fff", + "bold": true + }, + "builtinType": { + "foreground": "#fff", + "bold": true + }, + "interface": { + "foreground": "#fff8", + "bold": false + }, + "typeParameter": { + "foreground": "#fff", + "bold": true + }, + "lifetime": { + "foreground": "#fff8", + "italic": false, + "bold": false + }, + "namespace": { + "foreground": "#fff" + }, + "macro": { + "foreground": "#fff", + "bold": false + }, + "decorator": { + "foreground": "#fff", + "bold": false + }, + "builtinAttribute": { + "foreground": "#fff", + "bold": false + }, + "generic.attribute": { + "foreground": "#fff" + }, + "derive": { + "foreground": "#fff" + }, + "operator": { + "foreground": "#fff8" + }, + "variable": { + "foreground": "#fff" + }, + "variable.readonly": { + "foreground": "#fff8" + }, + "parameter": { + "foreground": "#fff" + }, + "variable.mutable": { + "underline": true + }, + "parameter.mutable": { + "underline": true + }, + "selfKeyword.mutable": { + "underline": true + }, + "variable.constant": { + "foreground": "#fff8" + }, + "struct": { + "foreground": "#fff", + "bold": true } - }, - { - "name": "Punctuations", - "scope": ["punctuation", "meta.brace"], - "settings": { - "foreground": "#fff8" + }, + "tokenColors": [ + { + "name": "Fallback Operator", + "scope": ["keyword.operator"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback keywords", + "scope": [ + "storage.type.ts", + "keyword", + "keyword.other", + "keyword.control", + "storage.type", + "storage.modifier" + ], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback strings", + "scope": ["string"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback JSON Properties", + "scope": ["support.type.property-name.json"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback string variables", + "scope": ["string variable", "string meta.interpolation"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback comments", + "scope": ["comment"], + "settings": { + "foreground": "#fff4" + } + }, + { + "name": "Fallback constants", + "scope": ["constant"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback self/this", + "scope": ["variable.language.this"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback types", + "scope": [ + "entity.other.alias", + "source.php support.class", + "entity.name.type", + "meta.function-call support.class", + "keyword.other.type", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "bold" + } + }, + { + "name": "Fallback method calls", + "scope": ["meta.method-call entity.name.function"], + "settings": { + "foreground": "#fff", + "fontStyle": "" + } + }, + { + "name": "Fallback function calls", + "scope": [ + "meta.function-call entity.name.function", + "meta.function-call support.function", + "meta.function.call entity.name.function" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "" + } + }, + { + "name": "Fallback enums & constants", + "scope": ["constant.enum", "constant.other"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback Properties & func arguments", + "scope": [ + "variable.other.property", + "entity.name.goto-label", + "entity.name.variable.parameter" + ], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback functions & methods declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.function.constructor", + "entity.name.function meta.function-call meta.method-call" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "bold" + } + }, + { + "name": "HTML Tags", + "scope": [ + "meta.tag entity.name.tag.html", + "entity.name.tag.template.html" + ], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "HTML Attributes", + "scope": ["entity.other.attribute-name.html"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "HTML Custom Tag", + "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "HTML Keywords", + "scope": ["text.html keyword"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Punctuations", + "scope": ["punctuation", "meta.brace"], + "settings": { + "foreground": "#fff8" + } } - } - ] + ] } diff --git a/apps/web/lib/lumos-dark.json b/apps/web/lib/lumos-dark.json index 4858157e..9fb69899 100644 --- a/apps/web/lib/lumos-dark.json +++ b/apps/web/lib/lumos-dark.json @@ -1,51 +1,51 @@ { - "lumos-dark": { - "name": "lumos-dark", - "type": "dark", - "settings": [ - { - "settings": { - "background": "#121212", - "foreground": "#dbd7caee", - "selectionBackground": "#eeeeee15", - "selectionForeground": "#dbd7caee" - } - }, - { - "scope": [ - "comment", - "punctuation.definition.comment", - "string.comment" - ], - "settings": { - "foreground": "#758575dd" - } - }, - { - "scope": [ - "delimiter.bracket", - "delimiter", - "invalid.illegal.character-not-allowed-here.html", - "keyword.operator.rest", - "keyword.operator.spread", - "keyword.operator.type.annotation", - "keyword.operator.relational", - "keyword.operator.assignment", - "meta.brace", - "meta.tag.block.any.html", - "meta.tag.inline.any.html", - "meta.tag.structure.input.void.html", - "meta.type.annotation", - "meta.embedded.block.github-actions-expression", - "storage.type.function.arrow", - "keyword.operator.type", - "meta.objectliteral.ts", - "punctuation" - ], - "settings": { - "foreground": "#FF00F" - } - } - ] - } + "lumos-dark": { + "name": "lumos-dark", + "type": "dark", + "settings": [ + { + "settings": { + "background": "#121212", + "foreground": "#dbd7caee", + "selectionBackground": "#eeeeee15", + "selectionForeground": "#dbd7caee" + } + }, + { + "scope": [ + "comment", + "punctuation.definition.comment", + "string.comment" + ], + "settings": { + "foreground": "#758575dd" + } + }, + { + "scope": [ + "delimiter.bracket", + "delimiter", + "invalid.illegal.character-not-allowed-here.html", + "keyword.operator.rest", + "keyword.operator.spread", + "keyword.operator.type.annotation", + "keyword.operator.relational", + "keyword.operator.assignment", + "meta.brace", + "meta.tag.block.any.html", + "meta.tag.inline.any.html", + "meta.tag.structure.input.void.html", + "meta.type.annotation", + "meta.embedded.block.github-actions-expression", + "storage.type.function.arrow", + "keyword.operator.type", + "meta.objectliteral.ts", + "punctuation" + ], + "settings": { + "foreground": "#FF00F" + } + } + ] + } } diff --git a/apps/web/lib/lumos-dark.ts b/apps/web/lib/lumos-dark.ts index 778860ef..e5db120e 100644 --- a/apps/web/lib/lumos-dark.ts +++ b/apps/web/lib/lumos-dark.ts @@ -1,674 +1,629 @@ -import type { ThemeRegistration } from 'shiki' +import type { ThemeRegistration } from "shiki" export const lumosDarkTheme: ThemeRegistration = { - name: 'lumos-dark', - type: 'dark', + name: "lumos-dark", + type: "dark", colors: { - 'activityBar.activeBorder': '#9945FF', - 'activityBar.background': '#121212', - 'activityBar.border': '#191919', - 'activityBar.foreground': '#dbd7caee', - 'activityBar.inactiveForeground': '#dedcd550', - 'activityBarBadge.background': '#bfbaaa', - 'activityBarBadge.foreground': '#121212', - 'badge.background': '#dedcd590', - 'badge.foreground': '#121212', - 'breadcrumb.activeSelectionForeground': '#eeeeee15', - 'breadcrumb.background': '#181818', - 'breadcrumb.focusForeground': '#dbd7caee', - 'breadcrumb.foreground': '#959da5', - 'breadcrumbPicker.background': '#121212', - 'button.background': '#9945FF', - 'button.foreground': '#121212', - 'button.hoverBackground': '#9945FF', - 'checkbox.background': '#181818', - 'checkbox.border': '#2f363d', - 'debugToolBar.background': '#121212', - 'descriptionForeground': '#dedcd590', - 'diffEditor.insertedTextBackground': '#4d937522', - 'diffEditor.removedTextBackground': '#ab595922', - 'dropdown.background': '#121212', - 'dropdown.border': '#191919', - 'dropdown.foreground': '#dbd7caee', - 'dropdown.listBackground': '#181818', - 'editor.background': '#121212', - 'editor.findMatchBackground': '#e6cc7722', - 'editor.findMatchHighlightBackground': '#e6cc7744', - 'editor.focusedStackFrameHighlightBackground': '#b808', - 'editor.foldBackground': '#eeeeee10', - 'editor.foreground': '#dbd7caee', - 'editor.inactiveSelectionBackground': '#eeeeee08', - 'editor.lineHighlightBackground': '#181818', - 'editor.selectionBackground': '#eeeeee15', - 'editor.selectionHighlightBackground': '#eeeeee08', - 'editor.stackFrameHighlightBackground': '#a707', - 'editor.wordHighlightBackground': '#1c6b4805', - 'editor.wordHighlightStrongBackground': '#1c6b4810', - 'editorBracketHighlight.foreground1': '#00FFFF', - 'editorBracketHighlight.foreground2': '#14F195', - 'editorBracketHighlight.foreground3': '#ff9900', - 'editorBracketHighlight.foreground4': '#EB459E', - 'editorBracketHighlight.foreground5': '#FEE75C', - 'editorBracketHighlight.foreground6': '#5865F2', - 'editorBracketMatch.background': '#4d937520', - 'editorError.foreground': '#ED4245', - 'editorGroup.border': '#191919', - 'editorGroupHeader.tabsBackground': '#121212', - 'editorGroupHeader.tabsBorder': '#191919', - 'editorGutter.addedBackground': '#14F195', - 'editorGutter.commentRangeForeground': '#dedcd550', - 'editorGutter.deletedBackground': '#ED4245', - 'editorGutter.foldingControlForeground': '#dedcd590', - 'editorGutter.modifiedBackground': '#5865F2', - 'editorHint.foreground': '#14F195', - 'editorIndentGuide.activeBackground': '#ffffff30', - 'editorIndentGuide.background': '#ffffff15', - 'editorInfo.foreground': '#5865F2', - 'editorInlayHint.background': '#00000000', - 'editorInlayHint.foreground': '#FF00F', - 'editorLineNumber.activeForeground': '#bfbaaa', - 'editorLineNumber.foreground': '#dedcd550', - 'editorOverviewRuler.border': '#111', - 'editorStickyScroll.background': '#181818', - 'editorStickyScrollHover.background': '#181818', - 'editorWarning.foreground': '#ff9900', - 'editorWhitespace.foreground': '#ffffff15', - 'editorWidget.background': '#121212', - 'errorForeground': '#ED4245', - 'focusBorder': '#00000000', - 'foreground': '#dbd7caee', - 'gitDecoration.addedResourceForeground': '#14F195', - 'gitDecoration.conflictingResourceForeground': '#ff9900', - 'gitDecoration.deletedResourceForeground': '#ED4245', - 'gitDecoration.ignoredResourceForeground': '#dedcd550', - 'gitDecoration.modifiedResourceForeground': '#5865F2', - 'gitDecoration.submoduleResourceForeground': '#dedcd590', - 'gitDecoration.untrackedResourceForeground': '#00FFFF', - 'input.background': '#181818', - 'input.border': '#191919', - 'input.foreground': '#dbd7caee', - 'input.placeholderForeground': '#dedcd590', - 'inputOption.activeBackground': '#dedcd550', - 'list.activeSelectionBackground': '#181818', - 'list.activeSelectionForeground': '#dbd7caee', - 'list.focusBackground': '#181818', - 'list.highlightForeground': '#9945FF', - 'list.hoverBackground': '#181818', - 'list.hoverForeground': '#dbd7caee', - 'list.inactiveFocusBackground': '#121212', - 'list.inactiveSelectionBackground': '#181818', - 'list.inactiveSelectionForeground': '#dbd7caee', - 'menu.separatorBackground': '#191919', - 'notificationCenterHeader.background': '#121212', - 'notificationCenterHeader.foreground': '#959da5', - 'notifications.background': '#121212', - 'notifications.border': '#191919', - 'notifications.foreground': '#dbd7caee', - 'notificationsErrorIcon.foreground': '#ED4245', - 'notificationsInfoIcon.foreground': '#5865F2', - 'notificationsWarningIcon.foreground': '#ff9900', - 'panel.background': '#121212', - 'panel.border': '#191919', - 'panelInput.border': '#2f363d', - 'panelTitle.activeBorder': '#9945FF', - 'panelTitle.activeForeground': '#dbd7caee', - 'panelTitle.inactiveForeground': '#959da5', - 'peekViewEditor.background': '#121212', - 'peekViewEditor.matchHighlightBackground': '#ffd33d33', - 'peekViewResult.background': '#121212', - 'peekViewResult.matchHighlightBackground': '#ffd33d33', - 'pickerGroup.border': '#191919', - 'pickerGroup.foreground': '#dbd7caee', - 'problemsErrorIcon.foreground': '#ED4245', - 'problemsInfoIcon.foreground': '#5865F2', - 'problemsWarningIcon.foreground': '#ff9900', - 'progressBar.background': '#9945FF', - 'quickInput.background': '#121212', - 'quickInput.foreground': '#dbd7caee', - 'quickInputList.focusBackground': '#181818', - 'scrollbar.shadow': '#0000', - 'scrollbarSlider.activeBackground': '#dedcd550', - 'scrollbarSlider.background': '#dedcd510', - 'scrollbarSlider.hoverBackground': '#dedcd550', - 'settings.headerForeground': '#dbd7caee', - 'settings.modifiedItemIndicator': '#9945FF', - 'sideBar.background': '#121212', - 'sideBar.border': '#191919', - 'sideBar.foreground': '#bfbaaa', - 'sideBarSectionHeader.background': '#121212', - 'sideBarSectionHeader.border': '#191919', - 'sideBarSectionHeader.foreground': '#dbd7caee', - 'sideBarTitle.foreground': '#dbd7caee', - 'statusBar.background': '#121212', - 'statusBar.border': '#191919', - 'statusBar.debuggingBackground': '#181818', - 'statusBar.debuggingForeground': '#bfbaaa', - 'statusBar.foreground': '#bfbaaa', - 'statusBar.noFolderBackground': '#121212', - 'statusBarItem.prominentBackground': '#181818', - 'tab.activeBackground': '#121212', - 'tab.activeBorder': '#191919', - 'tab.activeBorderTop': '#9945FF', - 'tab.activeForeground': '#dbd7caee', - 'tab.border': '#191919', - 'tab.hoverBackground': '#181818', - 'tab.inactiveBackground': '#121212', - 'tab.inactiveForeground': '#959da5', - 'tab.unfocusedActiveBorder': '#191919', - 'tab.unfocusedActiveBorderTop': '#191919', - 'tab.unfocusedHoverBackground': '#121212', - 'terminal.ansiBlack': '#393a34', - 'terminal.ansiBlue': '#5865F2', - 'terminal.ansiBrightBlack': '#777777', - 'terminal.ansiBrightBlue': '#5865F2', - 'terminal.ansiBrightCyan': '#00FFFF', - 'terminal.ansiBrightGreen': '#14F195', - 'terminal.ansiBrightMagenta': '#EB459E', - 'terminal.ansiBrightRed': '#ED4245', - 'terminal.ansiBrightWhite': '#ffffff', - 'terminal.ansiBrightYellow': '#FEE75C', - 'terminal.ansiCyan': '#00FFFF', - 'terminal.ansiGreen': '#14F195', - 'terminal.ansiMagenta': '#EB459E', - 'terminal.ansiRed': '#ED4245', - 'terminal.ansiWhite': '#dbd7caee', - 'terminal.ansiYellow': '#FEE75C', - 'terminal.foreground': '#dbd7caee', - 'terminal.selectionBackground': '#eeeeee15', - 'textBlockQuote.background': '#121212', - 'textBlockQuote.border': '#191919', - 'textCodeBlock.background': '#121212', - 'textLink.activeForeground': '#9945FF', - 'textLink.foreground': '#9945FF', - 'textPreformat.foreground': '#d1d5da', - 'textSeparator.foreground': '#586069', - 'titleBar.activeBackground': '#121212', - 'titleBar.activeForeground': '#bfbaaa', - 'titleBar.border': '#181818', - 'titleBar.inactiveBackground': '#121212', - 'titleBar.inactiveForeground': '#959da5', - 'tree.indentGuidesStroke': '#2f363d', - 'welcomePage.buttonBackground': '#2f363d', - 'welcomePage.buttonHoverBackground': '#444d56', + "activityBar.activeBorder": "#9945FF", + "activityBar.background": "#121212", + "activityBar.border": "#191919", + "activityBar.foreground": "#dbd7caee", + "activityBar.inactiveForeground": "#dedcd550", + "activityBarBadge.background": "#bfbaaa", + "activityBarBadge.foreground": "#121212", + "badge.background": "#dedcd590", + "badge.foreground": "#121212", + "breadcrumb.activeSelectionForeground": "#eeeeee15", + "breadcrumb.background": "#181818", + "breadcrumb.focusForeground": "#dbd7caee", + "breadcrumb.foreground": "#959da5", + "breadcrumbPicker.background": "#121212", + "button.background": "#9945FF", + "button.foreground": "#121212", + "button.hoverBackground": "#9945FF", + "checkbox.background": "#181818", + "checkbox.border": "#2f363d", + "debugToolBar.background": "#121212", + descriptionForeground: "#dedcd590", + "diffEditor.insertedTextBackground": "#4d937522", + "diffEditor.removedTextBackground": "#ab595922", + "dropdown.background": "#121212", + "dropdown.border": "#191919", + "dropdown.foreground": "#dbd7caee", + "dropdown.listBackground": "#181818", + "editor.background": "#121212", + "editor.findMatchBackground": "#e6cc7722", + "editor.findMatchHighlightBackground": "#e6cc7744", + "editor.focusedStackFrameHighlightBackground": "#b808", + "editor.foldBackground": "#eeeeee10", + "editor.foreground": "#dbd7caee", + "editor.inactiveSelectionBackground": "#eeeeee08", + "editor.lineHighlightBackground": "#181818", + "editor.selectionBackground": "#eeeeee15", + "editor.selectionHighlightBackground": "#eeeeee08", + "editor.stackFrameHighlightBackground": "#a707", + "editor.wordHighlightBackground": "#1c6b4805", + "editor.wordHighlightStrongBackground": "#1c6b4810", + "editorBracketHighlight.foreground1": "#00FFFF", + "editorBracketHighlight.foreground2": "#14F195", + "editorBracketHighlight.foreground3": "#ff9900", + "editorBracketHighlight.foreground4": "#EB459E", + "editorBracketHighlight.foreground5": "#FEE75C", + "editorBracketHighlight.foreground6": "#5865F2", + "editorBracketMatch.background": "#4d937520", + "editorError.foreground": "#ED4245", + "editorGroup.border": "#191919", + "editorGroupHeader.tabsBackground": "#121212", + "editorGroupHeader.tabsBorder": "#191919", + "editorGutter.addedBackground": "#14F195", + "editorGutter.commentRangeForeground": "#dedcd550", + "editorGutter.deletedBackground": "#ED4245", + "editorGutter.foldingControlForeground": "#dedcd590", + "editorGutter.modifiedBackground": "#5865F2", + "editorHint.foreground": "#14F195", + "editorIndentGuide.activeBackground": "#ffffff30", + "editorIndentGuide.background": "#ffffff15", + "editorInfo.foreground": "#5865F2", + "editorInlayHint.background": "#00000000", + "editorInlayHint.foreground": "#FF00F", + "editorLineNumber.activeForeground": "#bfbaaa", + "editorLineNumber.foreground": "#dedcd550", + "editorOverviewRuler.border": "#111", + "editorStickyScroll.background": "#181818", + "editorStickyScrollHover.background": "#181818", + "editorWarning.foreground": "#ff9900", + "editorWhitespace.foreground": "#ffffff15", + "editorWidget.background": "#121212", + errorForeground: "#ED4245", + focusBorder: "#00000000", + foreground: "#dbd7caee", + "gitDecoration.addedResourceForeground": "#14F195", + "gitDecoration.conflictingResourceForeground": "#ff9900", + "gitDecoration.deletedResourceForeground": "#ED4245", + "gitDecoration.ignoredResourceForeground": "#dedcd550", + "gitDecoration.modifiedResourceForeground": "#5865F2", + "gitDecoration.submoduleResourceForeground": "#dedcd590", + "gitDecoration.untrackedResourceForeground": "#00FFFF", + "input.background": "#181818", + "input.border": "#191919", + "input.foreground": "#dbd7caee", + "input.placeholderForeground": "#dedcd590", + "inputOption.activeBackground": "#dedcd550", + "list.activeSelectionBackground": "#181818", + "list.activeSelectionForeground": "#dbd7caee", + "list.focusBackground": "#181818", + "list.highlightForeground": "#9945FF", + "list.hoverBackground": "#181818", + "list.hoverForeground": "#dbd7caee", + "list.inactiveFocusBackground": "#121212", + "list.inactiveSelectionBackground": "#181818", + "list.inactiveSelectionForeground": "#dbd7caee", + "menu.separatorBackground": "#191919", + "notificationCenterHeader.background": "#121212", + "notificationCenterHeader.foreground": "#959da5", + "notifications.background": "#121212", + "notifications.border": "#191919", + "notifications.foreground": "#dbd7caee", + "notificationsErrorIcon.foreground": "#ED4245", + "notificationsInfoIcon.foreground": "#5865F2", + "notificationsWarningIcon.foreground": "#ff9900", + "panel.background": "#121212", + "panel.border": "#191919", + "panelInput.border": "#2f363d", + "panelTitle.activeBorder": "#9945FF", + "panelTitle.activeForeground": "#dbd7caee", + "panelTitle.inactiveForeground": "#959da5", + "peekViewEditor.background": "#121212", + "peekViewEditor.matchHighlightBackground": "#ffd33d33", + "peekViewResult.background": "#121212", + "peekViewResult.matchHighlightBackground": "#ffd33d33", + "pickerGroup.border": "#191919", + "pickerGroup.foreground": "#dbd7caee", + "problemsErrorIcon.foreground": "#ED4245", + "problemsInfoIcon.foreground": "#5865F2", + "problemsWarningIcon.foreground": "#ff9900", + "progressBar.background": "#9945FF", + "quickInput.background": "#121212", + "quickInput.foreground": "#dbd7caee", + "quickInputList.focusBackground": "#181818", + "scrollbar.shadow": "#0000", + "scrollbarSlider.activeBackground": "#dedcd550", + "scrollbarSlider.background": "#dedcd510", + "scrollbarSlider.hoverBackground": "#dedcd550", + "settings.headerForeground": "#dbd7caee", + "settings.modifiedItemIndicator": "#9945FF", + "sideBar.background": "#121212", + "sideBar.border": "#191919", + "sideBar.foreground": "#bfbaaa", + "sideBarSectionHeader.background": "#121212", + "sideBarSectionHeader.border": "#191919", + "sideBarSectionHeader.foreground": "#dbd7caee", + "sideBarTitle.foreground": "#dbd7caee", + "statusBar.background": "#121212", + "statusBar.border": "#191919", + "statusBar.debuggingBackground": "#181818", + "statusBar.debuggingForeground": "#bfbaaa", + "statusBar.foreground": "#bfbaaa", + "statusBar.noFolderBackground": "#121212", + "statusBarItem.prominentBackground": "#181818", + "tab.activeBackground": "#121212", + "tab.activeBorder": "#191919", + "tab.activeBorderTop": "#9945FF", + "tab.activeForeground": "#dbd7caee", + "tab.border": "#191919", + "tab.hoverBackground": "#181818", + "tab.inactiveBackground": "#121212", + "tab.inactiveForeground": "#959da5", + "tab.unfocusedActiveBorder": "#191919", + "tab.unfocusedActiveBorderTop": "#191919", + "tab.unfocusedHoverBackground": "#121212", + "terminal.ansiBlack": "#393a34", + "terminal.ansiBlue": "#5865F2", + "terminal.ansiBrightBlack": "#777777", + "terminal.ansiBrightBlue": "#5865F2", + "terminal.ansiBrightCyan": "#00FFFF", + "terminal.ansiBrightGreen": "#14F195", + "terminal.ansiBrightMagenta": "#EB459E", + "terminal.ansiBrightRed": "#ED4245", + "terminal.ansiBrightWhite": "#ffffff", + "terminal.ansiBrightYellow": "#FEE75C", + "terminal.ansiCyan": "#00FFFF", + "terminal.ansiGreen": "#14F195", + "terminal.ansiMagenta": "#EB459E", + "terminal.ansiRed": "#ED4245", + "terminal.ansiWhite": "#dbd7caee", + "terminal.ansiYellow": "#FEE75C", + "terminal.foreground": "#dbd7caee", + "terminal.selectionBackground": "#eeeeee15", + "textBlockQuote.background": "#121212", + "textBlockQuote.border": "#191919", + "textCodeBlock.background": "#121212", + "textLink.activeForeground": "#9945FF", + "textLink.foreground": "#9945FF", + "textPreformat.foreground": "#d1d5da", + "textSeparator.foreground": "#586069", + "titleBar.activeBackground": "#121212", + "titleBar.activeForeground": "#bfbaaa", + "titleBar.border": "#181818", + "titleBar.inactiveBackground": "#121212", + "titleBar.inactiveForeground": "#959da5", + "tree.indentGuidesStroke": "#2f363d", + "welcomePage.buttonBackground": "#2f363d", + "welcomePage.buttonHoverBackground": "#444d56", }, semanticHighlighting: true, semanticTokenColors: { - class: '#CCFF00', - interface: '#FF078A', - namespace: '#FF780A', - property: '#9945FF', - type: '#FF078A', + class: "#CCFF00", + interface: "#FF078A", + namespace: "#FF780A", + property: "#9945FF", + type: "#FF078A", }, tokenColors: [ { - scope: ['comment', 'punctuation.definition.comment', 'string.comment'], + scope: ["comment", "punctuation.definition.comment", "string.comment"], settings: { - foreground: '#758575dd', + foreground: "#758575dd", }, }, { scope: [ - 'delimiter.bracket', - 'delimiter', - 'invalid.illegal.character-not-allowed-here.html', - 'keyword.operator.rest', - 'keyword.operator.spread', - 'keyword.operator.type.annotation', - 'keyword.operator.relational', - 'keyword.operator.assignment', - 'meta.brace', - 'meta.tag.block.any.html', - 'meta.tag.inline.any.html', - 'meta.tag.structure.input.void.html', - 'meta.type.annotation', - 'meta.embedded.block.github-actions-expression', - 'storage.type.function.arrow', - 'keyword.operator.type', - 'meta.objectliteral.ts', - 'punctuation', + "delimiter.bracket", + "delimiter", + "invalid.illegal.character-not-allowed-here.html", + "keyword.operator.rest", + "keyword.operator.spread", + "keyword.operator.type.annotation", + "keyword.operator.relational", + "keyword.operator.assignment", + "meta.brace", + "meta.tag.block.any.html", + "meta.tag.inline.any.html", + "meta.tag.structure.input.void.html", + "meta.type.annotation", + "meta.embedded.block.github-actions-expression", + "storage.type.function.arrow", + "keyword.operator.type", + "meta.objectliteral.ts", + "punctuation", ], settings: { - foreground: '#FF00F', + foreground: "#FF00F", }, }, { scope: [ - 'constant', - 'entity.name.constant', - 'variable.language', - 'meta.definition.variable', + "constant", + "entity.name.constant", + "variable.language", + "meta.definition.variable", ], settings: { - foreground: '#CCFF00', + foreground: "#CCFF00", }, }, { - scope: [ - 'entity', - 'entity.name', - ], + scope: ["entity", "entity.name"], settings: { - foreground: '#FEE75C', + foreground: "#FEE75C", }, }, { - scope: 'variable.parameter.function', + scope: "variable.parameter.function", settings: { - foreground: '#dbd7caee', + foreground: "#dbd7caee", }, }, { - scope: [ - 'entity.name.tag', - 'tag.html', - ], + scope: ["entity.name.tag", "tag.html"], settings: { - foreground: '#14F195', + foreground: "#14F195", }, }, { - scope: 'entity.name.function', + scope: "entity.name.function", settings: { - foreground: '#FEE75C', + foreground: "#FEE75C", }, }, { - scope: [ - 'keyword', - 'storage.type.class.jsdoc', - ], + scope: ["keyword", "storage.type.class.jsdoc"], settings: { - foreground: '#14F195', + foreground: "#14F195", }, }, { scope: [ - 'storage', - 'storage.type', - 'support.type.builtin', - 'constant.language.undefined', - 'constant.language.null', + "storage", + "storage.type", + "support.type.builtin", + "constant.language.undefined", + "constant.language.null", ], settings: { - foreground: '#14F195', + foreground: "#14F195", }, }, { scope: [ - 'text.html.derivative', - 'storage.modifier.package', - 'storage.modifier.import', - 'storage.type.java', + "text.html.derivative", + "storage.modifier.package", + "storage.modifier.import", + "storage.type.java", ], settings: { - foreground: '#dbd7caee', + foreground: "#dbd7caee", }, }, { scope: [ - 'string', - 'string punctuation.section.embedded source', - 'attribute.value', + "string", + "string punctuation.section.embedded source", + "attribute.value", ], settings: { - foreground: '#ff9900', + foreground: "#ff9900", }, }, { scope: [ - 'punctuation.definition.string', - 'punctuation.support.type.property-name', + "punctuation.definition.string", + "punctuation.support.type.property-name", ], settings: { - foreground: '#ff990099', + foreground: "#ff990099", }, }, { - scope: 'support', + scope: "support", settings: { - foreground: '#9945FF', + foreground: "#9945FF", }, }, { scope: [ - 'property', - 'meta.property-name', - 'meta.object-literal.key', - 'entity.name.tag.yaml', - 'attribute.name', + "property", + "meta.property-name", + "meta.object-literal.key", + "entity.name.tag.yaml", + "attribute.name", ], settings: { - foreground: '#9945FF', + foreground: "#9945FF", }, }, { scope: [ - 'entity.other.attribute-name', - 'invalid.deprecated.entity.other.attribute-name.html', + "entity.other.attribute-name", + "invalid.deprecated.entity.other.attribute-name.html", ], settings: { - foreground: '#00FFFF', + foreground: "#00FFFF", }, }, { - scope: [ - 'variable', - 'identifier', - ], + scope: ["variable", "identifier"], settings: { - foreground: '#00FFFF', + foreground: "#00FFFF", }, }, { - scope: [ - 'support.type.primitive', - 'entity.name.type', - ], + scope: ["support.type.primitive", "entity.name.type"], settings: { - foreground: '#CCFF00', + foreground: "#CCFF00", }, }, { - scope: 'namespace', + scope: "namespace", settings: { - foreground: '#FF780A', + foreground: "#FF780A", }, }, { scope: [ - 'keyword.operator', - 'keyword.operator.assignment.compound', - 'meta.var.expr.ts', + "keyword.operator", + "keyword.operator.assignment.compound", + "meta.var.expr.ts", ], settings: { - foreground: '#FF00FF', + foreground: "#FF00FF", }, }, { - scope: 'invalid.broken', + scope: "invalid.broken", settings: { - fontStyle: 'italic', - foreground: '#fdaeb7', + fontStyle: "italic", + foreground: "#fdaeb7", }, }, { - scope: 'invalid.deprecated', + scope: "invalid.deprecated", settings: { - fontStyle: 'italic', - foreground: '#fdaeb7', + fontStyle: "italic", + foreground: "#fdaeb7", }, }, { - scope: 'invalid.illegal', + scope: "invalid.illegal", settings: { - fontStyle: 'italic', - foreground: '#fdaeb7', + fontStyle: "italic", + foreground: "#fdaeb7", }, }, { - scope: 'invalid.unimplemented', + scope: "invalid.unimplemented", settings: { - fontStyle: 'italic', - foreground: '#fdaeb7', + fontStyle: "italic", + foreground: "#fdaeb7", }, }, { - scope: 'carriage-return', + scope: "carriage-return", settings: { - background: '#f97583', - fontStyle: 'italic underline', - foreground: '#24292e', + background: "#f97583", + fontStyle: "italic underline", + foreground: "#24292e", }, }, { - scope: 'message.error', + scope: "message.error", settings: { - foreground: '#fdaeb7', + foreground: "#fdaeb7", }, }, { - scope: 'string variable', + scope: "string variable", settings: { - foreground: '#ff9900', + foreground: "#ff9900", }, }, { - scope: [ - 'source.regexp', - 'string.regexp', - ], + scope: ["source.regexp", "string.regexp"], settings: { - foreground: '#ffea7f', + foreground: "#ffea7f", }, }, { scope: [ - 'string.regexp.character-class', - 'string.regexp constant.character.escape', - 'string.regexp source.ruby.embedded', - 'string.regexp string.regexp.arbitrary-repitition', + "string.regexp.character-class", + "string.regexp constant.character.escape", + "string.regexp source.ruby.embedded", + "string.regexp string.regexp.arbitrary-repitition", ], settings: { - foreground: '#ff9900', + foreground: "#ff9900", }, }, { - scope: 'string.regexp constant.character.escape', + scope: "string.regexp constant.character.escape", settings: { - foreground: '#FEE75C', + foreground: "#FEE75C", }, }, { - scope: [ - 'support.constant', - ], + scope: ["support.constant"], settings: { - foreground: '#CCFF00', + foreground: "#CCFF00", }, }, { - scope: [ - 'constant.numeric', - 'number', - ], + scope: ["constant.numeric", "number"], settings: { - foreground: '#FEE75C', + foreground: "#FEE75C", }, }, { - scope: [ - 'keyword.other.unit', - ], + scope: ["keyword.other.unit"], settings: { - foreground: '#14F195', + foreground: "#14F195", }, }, { - scope: [ - 'constant.language.boolean', - 'constant.language', - ], + scope: ["constant.language.boolean", "constant.language"], settings: { - foreground: '#FF078A', + foreground: "#FF078A", }, }, { - scope: 'meta.module-reference', + scope: "meta.module-reference", settings: { - foreground: '#9945FF', + foreground: "#9945FF", }, }, { - scope: 'punctuation.definition.list.begin.markdown', + scope: "punctuation.definition.list.begin.markdown", settings: { - foreground: '#ff9900', + foreground: "#ff9900", }, }, { - scope: [ - 'markup.heading', - 'markup.heading entity.name', - ], + scope: ["markup.heading", "markup.heading entity.name"], settings: { - fontStyle: 'bold', - foreground: '#9945FF', + fontStyle: "bold", + foreground: "#9945FF", }, }, { - scope: 'markup.quote', + scope: "markup.quote", settings: { - foreground: '#FF078A', + foreground: "#FF078A", }, }, { - scope: 'markup.italic', + scope: "markup.italic", settings: { - fontStyle: 'italic', - foreground: '#dbd7caee', + fontStyle: "italic", + foreground: "#dbd7caee", }, }, { - scope: 'markup.bold', + scope: "markup.bold", settings: { - fontStyle: 'bold', - foreground: '#dbd7caee', + fontStyle: "bold", + foreground: "#dbd7caee", }, }, { - scope: 'markup.raw', + scope: "markup.raw", settings: { - foreground: '#9945FF', + foreground: "#9945FF", }, }, { scope: [ - 'markup.deleted', - 'meta.diff.header.from-file', - 'punctuation.definition.deleted', + "markup.deleted", + "meta.diff.header.from-file", + "punctuation.definition.deleted", ], settings: { - background: '#86181d', - foreground: '#fdaeb7', + background: "#86181d", + foreground: "#fdaeb7", }, }, { scope: [ - 'markup.inserted', - 'meta.diff.header.to-file', - 'punctuation.definition.inserted', + "markup.inserted", + "meta.diff.header.to-file", + "punctuation.definition.inserted", ], settings: { - background: '#144620', - foreground: '#85e89d', + background: "#144620", + foreground: "#85e89d", }, }, { - scope: [ - 'markup.changed', - 'punctuation.definition.changed', - ], + scope: ["markup.changed", "punctuation.definition.changed"], settings: { - background: '#c24e00', - foreground: '#ffab70', + background: "#c24e00", + foreground: "#ffab70", }, }, { - scope: [ - 'markup.ignored', - 'markup.untracked', - ], + scope: ["markup.ignored", "markup.untracked"], settings: { - background: '#79b8ff', - foreground: '#2f363d', + background: "#79b8ff", + foreground: "#2f363d", }, }, { - scope: 'meta.diff.range', + scope: "meta.diff.range", settings: { - fontStyle: 'bold', - foreground: '#b392f0', + fontStyle: "bold", + foreground: "#b392f0", }, }, { - scope: 'meta.diff.header', + scope: "meta.diff.header", settings: { - foreground: '#79b8ff', + foreground: "#79b8ff", }, }, { - scope: 'meta.separator', + scope: "meta.separator", settings: { - fontStyle: 'bold', - foreground: '#79b8ff', + fontStyle: "bold", + foreground: "#79b8ff", }, }, { - scope: 'meta.output', + scope: "meta.output", settings: { - foreground: '#79b8ff', + foreground: "#79b8ff", }, }, { scope: [ - 'brackethighlighter.tag', - 'brackethighlighter.curly', - 'brackethighlighter.round', - 'brackethighlighter.square', - 'brackethighlighter.angle', - 'brackethighlighter.quote', + "brackethighlighter.tag", + "brackethighlighter.curly", + "brackethighlighter.round", + "brackethighlighter.square", + "brackethighlighter.angle", + "brackethighlighter.quote", ], settings: { - foreground: '#d1d5da', + foreground: "#d1d5da", }, }, { - scope: 'brackethighlighter.unmatched', + scope: "brackethighlighter.unmatched", settings: { - foreground: '#fdaeb7', + foreground: "#fdaeb7", }, }, { scope: [ - 'constant.other.reference.link', - 'string.other.link', - 'punctuation.definition.string.begin.markdown', - 'punctuation.definition.string.end.markdown', + "constant.other.reference.link", + "string.other.link", + "punctuation.definition.string.begin.markdown", + "punctuation.definition.string.end.markdown", ], settings: { - foreground: '#ff9900', + foreground: "#ff9900", }, }, { - scope: [ - 'markup.underline.link.markdown', - ], + scope: ["markup.underline.link.markdown"], settings: { - fontStyle: 'underline', - foreground: '#dedcd590', + fontStyle: "underline", + foreground: "#dedcd590", }, }, { - scope: [ - 'type.identifier', - ], + scope: ["type.identifier"], settings: { - foreground: '#CCFF00', + foreground: "#CCFF00", }, }, { - scope: [ - 'entity.other.attribute-name.html.vue', - ], + scope: ["entity.other.attribute-name.html.vue"], settings: { - foreground: '#FEE75C', + foreground: "#FEE75C", }, }, { - scope: [ - 'invalid.illegal.unrecognized-tag.html', - ], + scope: ["invalid.illegal.unrecognized-tag.html"], settings: { - fontStyle: 'normal', + fontStyle: "normal", }, }, ], diff --git a/apps/web/lib/octokit.ts b/apps/web/lib/octokit.ts index e74ff4cf..5d6acd5f 100644 --- a/apps/web/lib/octokit.ts +++ b/apps/web/lib/octokit.ts @@ -1,4 +1,4 @@ -import { Octokit } from 'octokit' +import { Octokit } from "octokit" export const octokit = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN, diff --git a/apps/web/lib/registry.test.ts b/apps/web/lib/registry.test.ts index ce73803d..1e7d88b0 100644 --- a/apps/web/lib/registry.test.ts +++ b/apps/web/lib/registry.test.ts @@ -1,26 +1,28 @@ -import { describe, expect, it } from 'vitest' +import { describe, expect, it } from "vitest" -import { createFileTreeForRegistryItemFiles } from '~/lib/registry' +import { createFileTreeForRegistryItemFiles } from "~/lib/registry" -describe('createFileTreeForRegistryItemFiles', () => { - it('should create a nested file tree structure', async () => { +describe("createFileTreeForRegistryItemFiles", () => { + it("should create a nested file tree structure", async () => { const files = [ - { path: 'page.tsx' }, - { path: 'components/foo.tsx' }, - { path: 'components/baz.tsx' }, - { path: 'components/boo/quip.tsx' }, + { path: "page.tsx" }, + { path: "components/foo.tsx" }, + { path: "components/baz.tsx" }, + { path: "components/boo/quip.tsx" }, ] const expectedOutput = [ - { name: 'page.tsx', path: 'page.tsx' }, + { name: "page.tsx", path: "page.tsx" }, { - name: 'components', + name: "components", children: [ - { name: 'foo.tsx', path: 'components/foo.tsx' }, - { name: 'baz.tsx', path: 'components/baz.tsx' }, + { name: "foo.tsx", path: "components/foo.tsx" }, + { name: "baz.tsx", path: "components/baz.tsx" }, { - name: 'boo', - children: [{ name: 'quip.tsx', path: 'components/boo/quip.tsx' }], + name: "boo", + children: [ + { name: "quip.tsx", path: "components/boo/quip.tsx" }, + ], }, ], }, @@ -30,7 +32,7 @@ describe('createFileTreeForRegistryItemFiles', () => { expect(result).toEqual(expectedOutput) }) - it('should return an empty array for empty input', async () => { + it("should return an empty array for empty input", async () => { const result = await createFileTreeForRegistryItemFiles([]) expect(result).toEqual([]) }) diff --git a/apps/web/lib/rehype-component.ts b/apps/web/lib/rehype-component.ts index cb5d0ab5..ff12bc63 100644 --- a/apps/web/lib/rehype-component.ts +++ b/apps/web/lib/rehype-component.ts @@ -1,26 +1,26 @@ -import fs from 'fs' -import path from 'path' -import type { UnistNode, UnistTree } from 'types/unist' -import { u } from 'unist-builder' -import { visit } from 'unist-util-visit' +import fs from "fs" +import path from "path" +import type { UnistNode, UnistTree } from "types/unist" +import { u } from "unist-builder" +import { visit } from "unist-util-visit" -import { Index } from '../__registry__' -import { styles } from '../registry/registry-styles' +import { Index } from "../__registry__" +import { styles } from "../registry/registry-styles" export function rehypeComponent() { return async (tree: UnistTree) => { visit(tree, (node: UnistNode) => { - // src prop overrides both name and fileName. - const { value: srcPath } - = (getNodeAttributeByName(node, 'src') as { - name: string - value?: string - type?: string - }) || {} + // src prop overrides both name and fileName. + const { value: srcPath } = + (getNodeAttributeByName(node, "src") as { + name: string + value?: string + type?: string + }) || {} - if (node.name === 'ComponentSource') { - const name = getNodeAttributeByName(node, 'name')?.value as string - const fileName = getNodeAttributeByName(node, 'fileName')?.value as + if (node.name === "ComponentSource") { + const name = getNodeAttributeByName(node, "name")?.value as string + const fileName = getNodeAttributeByName(node, "fileName")?.value as | string | undefined @@ -34,56 +34,55 @@ export function rehypeComponent() { if (srcPath) { src = srcPath - } - else { + } else { const component = Index[style.name][name] src = fileName ? component.files.find((file: string) => { - return ( - file.endsWith(`${fileName}.tsx`) - || file.endsWith(`${fileName}.ts`) - ) - }) || component.files[0]?.path + return ( + file.endsWith(`${fileName}.tsx`) || + file.endsWith(`${fileName}.ts`) + ) + }) || component.files[0]?.path : component.files[0]?.path } // Read the source file. const filePath = src - let source = fs.readFileSync(filePath, 'utf8') + let source = fs.readFileSync(filePath, "utf8") // Replace imports. // TODO: Use @swc/core and a visitor to replace this. // For now a simple regex should do. source = source.replaceAll( - `~/registry/${style.name}/`, - '~/components/', + `~/registry/${style.name}/`, + "~/components/", ) - source = source.replaceAll('export default', 'export') + source = source.replaceAll("export default", "export") // Add code as children so that rehype can take over at build time. node.children?.push( - u('element', { - tagName: 'pre', + u("element", { + tagName: "pre", properties: { __src__: src, __style__: style.name, }, attributes: [ { - name: 'styleName', - type: 'mdxJsxAttribute', + name: "styleName", + type: "mdxJsxAttribute", value: style.name, }, ], children: [ - u('element', { - tagName: 'code', + u("element", { + tagName: "code", properties: { - className: ['language-tsx'], + className: ["language-tsx"], }, children: [ { - type: 'text', + type: "text", value: source, }, ], @@ -92,14 +91,13 @@ export function rehypeComponent() { }), ) } - } - catch (error) { + } catch (error) { console.error(error) } } - if (node.name === 'ComponentPreview') { - const name = getNodeAttributeByName(node, 'name')?.value as string + if (node.name === "ComponentPreview") { + const name = getNodeAttributeByName(node, "name")?.value as string if (!name) { return null @@ -112,33 +110,33 @@ export function rehypeComponent() { // Read the source file. const filePath = src - let source = fs.readFileSync(filePath, 'utf8') + let source = fs.readFileSync(filePath, "utf8") // Replace imports. // TODO: Use @swc/core and a visitor to replace this. // For now a simple regex should do. source = source.replaceAll( - `~/registry/${style.name}/`, - '~/components/', + `~/registry/${style.name}/`, + "~/components/", ) - source = source.replaceAll('export default', 'export') + source = source.replaceAll("export default", "export") // Add code as children so that rehype can take over at build time. node.children?.push( - u('element', { - tagName: 'pre', + u("element", { + tagName: "pre", properties: { __src__: src, }, children: [ - u('element', { - tagName: 'code', + u("element", { + tagName: "code", properties: { - className: ['language-tsx'], + className: ["language-tsx"], }, children: [ { - type: 'text', + type: "text", value: source, }, ], @@ -147,8 +145,7 @@ export function rehypeComponent() { }), ) } - } - catch (error) { + } catch (error) { console.error(error) } } @@ -235,40 +232,40 @@ export function rehypeComponent() { // return // } - // // Replace the Source component with a pre element. - // node.children?.push( - // u("element", { - // tagName: "pre", - // properties: { - // __src__: src, - // }, - // children: [ - // u("element", { - // tagName: "code", - // properties: { - // className: ["language-tsx"], - // }, - // children: [ - // { - // type: "text", - // value: source, - // }, - // ], - // }), - // ], - // }) - // ) - // } + // // Replace the Source component with a pre element. + // node.children?.push( + // u("element", { + // tagName: "pre", + // properties: { + // __src__: src, + // }, + // children: [ + // u("element", { + // tagName: "code", + // properties: { + // className: ["language-tsx"], + // }, + // children: [ + // { + // type: "text", + // value: source, + // }, + // ], + // }), + // ], + // }) + // ) + // } }) } } function getNodeAttributeByName(node: UnistNode, name: string) { - return node.attributes?.find(attribute => attribute.name === name) + return node.attributes?.find((attribute) => attribute.name === name) } function getComponentSourceFileContent(node: UnistNode) { - const src = getNodeAttributeByName(node, 'src')?.value as string + const src = getNodeAttributeByName(node, "src")?.value as string if (!src) { return null @@ -276,7 +273,7 @@ function getComponentSourceFileContent(node: UnistNode) { // Read the source file. const filePath = path.join(process.cwd(), src) - const source = fs.readFileSync(filePath, 'utf8') + const source = fs.readFileSync(filePath, "utf8") return source } diff --git a/apps/web/lib/rehype-npm-command.ts b/apps/web/lib/rehype-npm-command.ts index 0e964b12..f3bbf405 100644 --- a/apps/web/lib/rehype-npm-command.ts +++ b/apps/web/lib/rehype-npm-command.ts @@ -1,64 +1,64 @@ -import type { UnistNode, UnistTree } from 'types/unist' -import { visit } from 'unist-util-visit' +import type { UnistNode, UnistTree } from "types/unist" +import { visit } from "unist-util-visit" export function rehypeNpmCommand() { return (tree: UnistTree) => { visit(tree, (node: UnistNode) => { - if (node.type !== 'element' || node?.tagName !== 'pre') { + if (node.type !== "element" || node?.tagName !== "pre") { return } // npm install. - if (node.properties?.__rawString__?.startsWith('npm install')) { + if (node.properties?.__rawString__?.startsWith("npm install")) { const npmCommand = node.properties?.__rawString__ node.properties.__npmCommand__ = npmCommand node.properties.__yarnCommand__ = npmCommand.replace( - 'npm install', - 'yarn add', + "npm install", + "yarn add", ) node.properties.__pnpmCommand__ = npmCommand.replace( - 'npm install', - 'pnpm add', + "npm install", + "pnpm add", ) node.properties.__bunCommand__ = npmCommand.replace( - 'npm install', - 'bun add', + "npm install", + "bun add", ) } // npx create. - if (node.properties?.__rawString__?.startsWith('npx create-')) { + if (node.properties?.__rawString__?.startsWith("npx create-")) { const npmCommand = node.properties?.__rawString__ node.properties.__npmCommand__ = npmCommand node.properties.__yarnCommand__ = npmCommand.replace( - 'npx create-', - 'yarn create ', + "npx create-", + "yarn create ", ) node.properties.__pnpmCommand__ = npmCommand.replace( - 'npx create-', - 'pnpm create ', + "npx create-", + "pnpm create ", ) node.properties.__bunCommand__ = npmCommand.replace( - 'npx', - 'bunx --bun', + "npx", + "bunx --bun", ) } // npx. if ( - node.properties?.__rawString__?.startsWith('npx') - && !node.properties?.__rawString__?.startsWith('npx create-') + node.properties?.__rawString__?.startsWith("npx") && + !node.properties?.__rawString__?.startsWith("npx create-") ) { const npmCommand = node.properties?.__rawString__ node.properties.__npmCommand__ = npmCommand node.properties.__yarnCommand__ = npmCommand node.properties.__pnpmCommand__ = npmCommand.replace( - 'npx', - 'pnpm dlx', + "npx", + "pnpm dlx", ) node.properties.__bunCommand__ = npmCommand.replace( - 'npx', - 'bunx --bun', + "npx", + "bunx --bun", ) } }) diff --git a/apps/web/lib/toc.ts b/apps/web/lib/toc.ts index b527c60d..79160a03 100644 --- a/apps/web/lib/toc.ts +++ b/apps/web/lib/toc.ts @@ -1,14 +1,13 @@ -import { toc } from 'mdast-util-toc' -import { remark } from 'remark' -import { visit } from 'unist-util-visit' +import { toc } from "mdast-util-toc" +import { remark } from "remark" +import { visit } from "unist-util-visit" -const textTypes = ['text', 'emphasis', 'strong', 'inlineCode'] +const textTypes = ["text", "emphasis", "strong", "inlineCode"] function flattenNode(node: any) { const p: any[] = [] visit(node, (node) => { - if (!textTypes.includes(node.type)) - return + if (!textTypes.includes(node.type)) return p.push(node.value) }) return p.join(``) @@ -25,33 +24,29 @@ interface Items { } function getItems(node: any, current: any): Items { - if (!node) - return {} + if (!node) return {} - if (node.type === 'paragraph') { + if (node.type === "paragraph") { visit(node, (item) => { - if (item.type === 'link') { + if (item.type === "link") { current.url = item.url current.title = flattenNode(node) } - if (item.type === 'text') - current.title = flattenNode(node) + if (item.type === "text") current.title = flattenNode(node) }) return current } - if (node.type === 'list') { + if (node.type === "list") { current.items = node.children.map((i: any) => getItems(i, {})) return current - } - else if (node.type === 'listItem') { + } else if (node.type === "listItem") { const heading = getItems(node.children[0], {}) - if (node.children.length > 1) - getItems(node.children[1], heading) + if (node.children.length > 1) getItems(node.children[1], heading) return heading } diff --git a/apps/web/lib/use-mounted.ts b/apps/web/lib/use-mounted.ts index cba2168b..d9c212ba 100644 --- a/apps/web/lib/use-mounted.ts +++ b/apps/web/lib/use-mounted.ts @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react" export function useMounted() { const [mounted, setMounted] = React.useState(false) diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts index e5a9477b..c2ed1b86 100644 --- a/apps/web/lib/utils.ts +++ b/apps/web/lib/utils.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from 'clsx' -import type { Metadata } from 'next' -import { twMerge } from 'tailwind-merge' +import { type ClassValue, clsx } from "clsx" +import type { Metadata } from "next" +import { twMerge } from "tailwind-merge" // Funktion zum Kombinieren von Klassennamen export function ny(...inputs: ClassValue[]) { @@ -10,10 +10,10 @@ export function ny(...inputs: ClassValue[]) { // Funktion zum Formatieren von Datum export function formatDate(input: string | number): string { const date = new Date(input) - return date.toLocaleDateString('en-US', { - month: 'long', - day: 'numeric', - year: 'numeric', + return date.toLocaleDateString("en-US", { + month: "long", + day: "numeric", + year: "numeric", }) } @@ -24,14 +24,13 @@ export function absoluteUrl(path: string) { // Funktion zum Kürzen eines Strings export function truncate(str: string | null, length: number) { - if (!str || str.length <= length) - return str + if (!str || str.length <= length) return str return `${str.slice(0, length - 3)}...` } // Fetch-Wrapper zum Abrufen von JSON-Daten export function fetcher(...args: Parameters) { - return fetch(...args).then(res => res.json()) + return fetch(...args).then((res) => res.json()) } /** @@ -41,15 +40,17 @@ export function fetcher(...args: Parameters) { * @return {string} */ export function capitalize(str: string, lower = false) { - return (lower ? str.toLowerCase() : str).replace(/(?:^|[\s"'([{])+\S/g, match => - match.toUpperCase()) + return (lower ? str.toLowerCase() : str).replace( + /(?:^|[\s"'([{])+\S/g, + (match) => match.toUpperCase(), + ) } // Funktion zum Konstruieren von Metadaten export function constructMetadata({ - title = 'Nyxb UI - Modern React + Tailwind CSS components & Templates', - description = 'Nyxb UI is a curated collection of the best landing page components built using React + Tailwind CSS + Framer Motion', - image = absoluteUrl('/api/og'), + title = "Nyxb UI - Modern React + Tailwind CSS components & Templates", + description = "Nyxb UI is a curated collection of the best landing page components built using React + Tailwind CSS + Framer Motion", + image = absoluteUrl("/api/og"), ...props }: { title?: string @@ -61,17 +62,17 @@ export function constructMetadata({ title, description, keywords: [ - 'React', - 'Tailwind CSS', - 'Framer Motion', - 'Landing Page', - 'Components', - 'Next.js', + "React", + "Tailwind CSS", + "Framer Motion", + "Landing Page", + "Components", + "Next.js", ], openGraph: { title, description, - type: 'website', + type: "website", images: [ { url: image, @@ -82,21 +83,21 @@ export function constructMetadata({ ], }, twitter: { - card: 'summary_large_image', + card: "summary_large_image", title, description, images: [image], - creator: '@nyxb0', + creator: "@nyxb0", }, - icons: '/favicon.ico', - metadataBase: new URL('https://nyxbui.design'), + icons: "/favicon.ico", + metadataBase: new URL("https://nyxbui.design"), authors: [ { - name: 'nyxb', - url: 'https://twitter.com/nyxb0', + name: "nyxb", + url: "https://twitter.com/nyxb0", }, ], - creator: 'nyxb', + creator: "nyxb", ...props, } } diff --git a/apps/web/lib/validations/log.ts b/apps/web/lib/validations/log.ts index e084fca4..6e538b29 100644 --- a/apps/web/lib/validations/log.ts +++ b/apps/web/lib/validations/log.ts @@ -1,6 +1,6 @@ -import { z } from 'zod' +import { z } from "zod" export const logSchema = z.object({ - event: z.enum(['copy_primitive']), + event: z.enum(["copy_primitive"]), data: z.record(z.string()), }) diff --git a/apps/web/lib/validations/og.ts b/apps/web/lib/validations/og.ts index cfecb4e4..7d9629fb 100644 --- a/apps/web/lib/validations/og.ts +++ b/apps/web/lib/validations/og.ts @@ -1,7 +1,7 @@ -import { z } from 'zod' +import { z } from "zod" export const ogImageSchema = z.object({ heading: z.string(), type: z.string(), - mode: z.enum(['light', 'dark']).default('dark'), + mode: z.enum(["light", "dark"]).default("dark"), }) diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs index 7466fb84..3d6773c4 100644 --- a/apps/web/postcss.config.mjs +++ b/apps/web/postcss.config.mjs @@ -1,10 +1,10 @@ /** @type {import('postcss-load-config').Config} */ const config = { plugins: { - 'postcss-import': {}, - 'tailwindcss/nesting': 'postcss-nesting', - 'tailwindcss': {}, - 'autoprefixer': {}, + "postcss-import": {}, + "tailwindcss/nesting": "postcss-nesting", + tailwindcss: {}, + autoprefixer: {}, }, } diff --git a/apps/web/public/r/styles/default/_sink.json b/apps/web/public/r/styles/default/_sink.json index 55d2b47c..de376a94 100644 --- a/apps/web/public/r/styles/default/_sink.json +++ b/apps/web/public/r/styles/default/_sink.json @@ -1,451 +1,451 @@ { - "name": "_sink", - "type": "registry:block", - "description": "", - "registryDependencies": [ - "accordion", - "alert", - "alert-dialog", - "aspect-ratio", - "avatar", - "badge", - "breadcrumb", - "button", - "calendar", - "card", - "carousel", - "chart", - "checkbox", - "collapsible", - "command", - "context-menu", - "dialog", - "drawer", - "dropdown-menu", - "hover-card", - "input", - "input-otp", - "label", - "menubar", - "navigation-menu", - "pagination", - "popover", - "progress", - "radio-group", - "resizable", - "scroll-area", - "select", - "separator", - "sheet", - "sidebar", - "skeleton", - "slider", - "sonner", - "switch", - "table", - "tabs", - "textarea", - "toast", - "toggle", - "toggle-group", - "tooltip" - ], - "files": [ - { - "path": "block/_sink/page.tsx", - "content": "import { AccordionDemo } from '~/registry/default/block/_sink/components/accordion-demo'\nimport { AlertDemo } from '~/registry/default/block/_sink/components/alert-demo'\nimport { AlertDialogDemo } from '~/registry/default/block/_sink/components/alert-dialog-demo'\nimport { AppSidebar } from '~/registry/default/block/_sink/components/app-sidebar'\nimport { AspectRatioDemo } from '~/registry/default/block/_sink/components/aspect-ratio-demo'\nimport { AvatarDemo } from '~/registry/default/block/_sink/components/avatar-demo'\nimport { BadgeDemo } from '~/registry/default/block/_sink/components/badge-demo'\nimport { BadgeDestructive } from '~/registry/default/block/_sink/components/badge-destructive'\nimport { BadgeOutline } from '~/registry/default/block/_sink/components/badge-outline'\nimport { BadgeSecondary } from '~/registry/default/block/_sink/components/badge-secondary'\nimport { BreadcrumbDemo } from '~/registry/default/block/_sink/components/breadcrumb-demo'\nimport { ButtonDemo } from '~/registry/default/block/_sink/components/button-demo'\nimport { ButtonDestructive } from '~/registry/default/block/_sink/components/button-destructive'\nimport { ButtonGhost } from '~/registry/default/block/_sink/components/button-ghost'\nimport { ButtonLink } from '~/registry/default/block/_sink/components/button-link'\nimport { ButtonLoading } from '~/registry/default/block/_sink/components/button-loading'\nimport { ButtonOutline } from '~/registry/default/block/_sink/components/button-outline'\nimport { ButtonSecondary } from '~/registry/default/block/_sink/components/button-secondary'\nimport { ButtonWithIcon } from '~/registry/default/block/_sink/components/button-with-icon'\nimport { CalendarDemo } from '~/registry/default/block/_sink/components/calendar-demo'\nimport { CardDemo } from '~/registry/default/block/_sink/components/card-demo'\nimport { CarouselDemo } from '~/registry/default/block/_sink/components/carousel-demo'\nimport { CheckboxDemo } from '~/registry/default/block/_sink/components/checkbox-demo'\nimport { CollapsibleDemo } from '~/registry/default/block/_sink/components/collapsible-demo'\nimport { ComboboxDemo } from '~/registry/default/block/_sink/components/combobox-demo'\nimport { CommandDemo } from '~/registry/default/block/_sink/components/command-demo'\nimport { ComponentWrapper } from '~/registry/default/block/_sink/components/component-wrapper'\nimport { ContextMenuDemo } from '~/registry/default/block/_sink/components/context-menu-demo'\nimport { DatePickerDemo } from '~/registry/default/block/_sink/components/date-picker-demo'\nimport { DialogDemo } from '~/registry/default/block/_sink/components/dialog-demo'\nimport { DrawerDemo } from '~/registry/default/block/_sink/components/drawer-demo'\nimport { DropdownMenuDemo } from '~/registry/default/block/_sink/components/dropdown-menu-demo'\nimport { HoverCardDemo } from '~/registry/default/block/_sink/components/hover-card-demo'\nimport { InputDemo } from '~/registry/default/block/_sink/components/input-demo'\nimport { InputOTPDemo } from '~/registry/default/block/_sink/components/input-otp-demo'\nimport { LabelDemo } from '~/registry/default/block/_sink/components/label-demo'\nimport { MenubarDemo } from '~/registry/default/block/_sink/components/menubar-demo'\nimport { NavigationMenuDemo } from '~/registry/default/block/_sink/components/navigation-menu-demo'\nimport { PaginationDemo } from '~/registry/default/block/_sink/components/pagination-demo'\nimport { PopoverDemo } from '~/registry/default/block/_sink/components/popover-demo'\nimport { ProgressDemo } from '~/registry/default/block/_sink/components/progress-demo'\nimport { RadioGroupDemo } from '~/registry/default/block/_sink/components/radio-group-demo'\nimport { ResizableHandleDemo } from '~/registry/default/block/_sink/components/resizable-handle'\nimport { ScrollAreaDemo } from '~/registry/default/block/_sink/components/scroll-area-demo'\nimport { SelectDemo } from '~/registry/default/block/_sink/components/select-demo'\nimport { SeparatorDemo } from '~/registry/default/block/_sink/components/separator-demo'\nimport { SheetDemo } from '~/registry/default/block/_sink/components/sheet-demo'\nimport { SkeletonDemo } from '~/registry/default/block/_sink/components/skeleton-demo'\nimport { SliderDemo } from '~/registry/default/block/_sink/components/slider-demo'\nimport { SonnerDemo } from '~/registry/default/block/_sink/components/sonner-demo'\nimport { SwitchDemo } from '~/registry/default/block/_sink/components/switch-demo'\nimport { TableDemo } from '~/registry/default/block/_sink/components/table-demo'\nimport { TabsDemo } from '~/registry/default/block/_sink/components/tabs-demo'\nimport { TextareaDemo } from '~/registry/default/block/_sink/components/textarea-demo'\nimport { ToastDemo } from '~/registry/default/block/_sink/components/toast-demo'\nimport { ToggleDemo } from '~/registry/default/block/_sink/components/toggle-demo'\nimport { ToggleDisabled } from '~/registry/default/block/_sink/components/toggle-disabled'\nimport { ToggleGroupDemo } from '~/registry/default/block/_sink/components/toggle-group-demo'\nimport { ToggleOutline } from '~/registry/default/block/_sink/components/toggle-outline'\nimport { ToggleWithText } from '~/registry/default/block/_sink/components/toggle-with-text'\nimport { TooltipDemo } from '~/registry/default/block/_sink/components/tooltip-demo'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport { Separator } from '~/registry/default/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '~/registry/default/ui/sidebar'\n\nexport default function SinkPage() {\n return (\n \n \n \n
\n
\n \n \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n
\n
\n \n \n )\n}\n", - "type": "registry:page", - "target": "app/sink/page.tsx" - }, - { - "path": "block/_sink/components/app-sidebar.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AudioWaveform,\n BookOpen,\n Bot,\n Command,\n Frame,\n GalleryVerticalEnd,\n Map,\n PieChart,\n Settings2,\n SquareTerminal,\n} from 'lucide-react'\n\nimport { NavMain } from '~/registry/default/block/sidebar-07/components/nav-main'\nimport { NavProjects } from '~/registry/default/block/sidebar-07/components/nav-projects'\nimport { NavUser } from '~/registry/default/block/sidebar-07/components/nav-user'\nimport { TeamSwitcher } from '~/registry/default/block/sidebar-07/components/team-switcher'\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarRail,\n} from '~/registry/default/ui/sidebar'\n\n// This is sample data.\nconst data = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n avatar: '/avatars/nyxb.jpg',\n },\n teams: [\n {\n name: 'Acme Inc',\n logo: GalleryVerticalEnd,\n plan: 'Enterprise',\n },\n {\n name: 'Acme Corp.',\n logo: AudioWaveform,\n plan: 'Startup',\n },\n {\n name: 'Evil Corp.',\n logo: Command,\n plan: 'Free',\n },\n ],\n navMain: [\n {\n title: 'Playground',\n url: '#',\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: 'History',\n url: '#',\n },\n {\n title: 'Starred',\n url: '#',\n },\n {\n title: 'Settings',\n url: '#',\n },\n ],\n },\n {\n title: 'Models',\n url: '#',\n icon: Bot,\n items: [\n {\n title: 'Genesis',\n url: '#',\n },\n {\n title: 'Explorer',\n url: '#',\n },\n {\n title: 'Quantum',\n url: '#',\n },\n ],\n },\n {\n title: 'Documentation',\n url: '#',\n icon: BookOpen,\n items: [\n {\n title: 'Introduction',\n url: '#',\n },\n {\n title: 'Get Started',\n url: '#',\n },\n {\n title: 'Tutorials',\n url: '#',\n },\n {\n title: 'Changelog',\n url: '#',\n },\n ],\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings2,\n items: [\n {\n title: 'General',\n url: '#',\n },\n {\n title: 'Team',\n url: '#',\n },\n {\n title: 'Billing',\n url: '#',\n },\n {\n title: 'Limits',\n url: '#',\n },\n ],\n },\n ],\n projects: [\n {\n name: 'Design Engineering',\n url: '#',\n icon: Frame,\n },\n {\n name: 'Sales & Marketing',\n url: '#',\n icon: PieChart,\n },\n {\n name: 'Travel',\n url: '#',\n icon: Map,\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/component-wrapper.tsx", - "content": "import { ny } from '~/registry/default/lib/utils'\n\nexport function ComponentWrapper({\n className,\n name,\n children,\n ...props\n}: React.ComponentPropsWithoutRef<'div'> & { name: string }) {\n return (\n \n
\n
{name}
\n
\n
div]:max-w-full\">\n {children}\n
\n
\n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/nav-main.tsx", - "content": "'use client'\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react'\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n return (\n \n Platform\n \n {items.map(item => (\n \n \n \n \n {item.icon && }\n {item.title}\n \n \n \n \n \n {item.items?.map(subItem => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n \n ))}\n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/nav-projects.tsx", - "content": "'use client'\n\nimport {\n Folder,\n Forward,\n type LucideIcon,\n MoreHorizontal,\n Trash2,\n} from 'lucide-react'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavProjects({\n projects,\n}: {\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Projects\n \n {projects.map(item => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/nav-user.tsx", - "content": "'use client'\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-react'\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/team-switcher.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronsUpDown, Plus } from 'lucide-react'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '~/registry/default/ui/sidebar'\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string\n logo: React.ElementType\n plan: string\n }[]\n}) {\n const { isMobile } = useSidebar()\n const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n return (\n \n \n \n \n \n
\n \n
\n
\n \n {activeTeam.name}\n \n {activeTeam.plan}\n
\n \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n className=\"gap-2 p-2\"\n >\n
\n \n
\n {team.name}\n \n ⌘\n {index + 1}\n \n \n ))}\n \n \n
\n \n
\n
Add team
\n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/accordion-demo.tsx", - "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '~/registry/default/ui/accordion'\n\nexport function AccordionDemo() {\n return (\n \n \n Is it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other\n components' aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you prefer.\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/alert-demo.tsx", - "content": "import { Terminal } from 'lucide-react'\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from '~/registry/default/ui/alert'\n\nexport function AlertDemo() {\n return (\n \n \n Heads up!\n \n You can add components to your app using the cli.\n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/alert-dialog-demo.tsx", - "content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from '~/registry/default/ui/alert-dialog'\nimport { Button } from '~/registry/default/ui/button'\n\nexport function AlertDialogDemo() {\n return (\n \n \n \n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/aspect-ratio-demo.tsx", - "content": "import Image from 'next/image'\n\nimport { AspectRatio } from '~/registry/default/ui/aspect-ratio'\n\nexport function AspectRatioDemo() {\n return (\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/avatar-demo.tsx", - "content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '~/registry/default/ui/avatar'\n\nexport function AvatarDemo() {\n return (\n \n \n CN\n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/badge-demo.tsx", - "content": "import { Badge } from '~/registry/default/ui/badge'\n\nexport function BadgeDemo() {\n return Badge\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/breadcrumb-demo.tsx", - "content": "import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '~/registry/default/ui/breadcrumb'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport function BreadcrumbDemo() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/button-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\n\nexport function ButtonDemo() {\n return \n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/calendar-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Calendar } from '~/registry/default/ui/calendar'\n\nexport function CalendarDemo() {\n const [date, setDate] = React.useState(new Date())\n\n return (\n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/card-demo.tsx", - "content": "import { BellRing, Check } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from '~/registry/default/ui/card'\nimport { Switch } from '~/registry/default/ui/switch'\n\nconst notifications = [\n {\n title: 'Your call has been confirmed.',\n description: '1 hour ago',\n },\n {\n title: 'You have a new message!',\n description: '1 hour ago',\n },\n {\n title: 'Your subscription is expiring soon!',\n description: '2 hours ago',\n },\n]\n\ntype CardProps = React.ComponentProps\n\nexport function CardDemo({ className, ...props }: CardProps) {\n return (\n \n \n Notifications\n You have 3 unread messages.\n \n \n
\n \n
\n

\n Push Notifications\n

\n

\n Send notifications to device.\n

\n
\n \n
\n
\n {notifications.map((notification, index) => (\n \n \n
\n

\n {notification.title}\n

\n

\n {notification.description}\n

\n
\n
\n ))}\n
\n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/carousel-demo.tsx", - "content": "import * as React from 'react'\n\nimport { Card, CardContent } from '~/registry/default/ui/card'\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from '~/registry/default/ui/carousel'\n\nexport function CarouselDemo() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/checkbox-demo.tsx", - "content": "'use client'\n\nimport { Checkbox } from '~/registry/default/ui/checkbox'\n\nexport function CheckboxDemo() {\n return (\n
\n \n \n Accept terms and conditions\n \n
\n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/collapsible-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronsUpDown } from 'lucide-react'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '~/registry/default/ui/collapsible'\n\nexport function CollapsibleDemo() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/combobox-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, ChevronsUpDown } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '~/registry/default/ui/command'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nconst frameworks = [\n {\n value: 'next.js',\n label: 'Next.js',\n },\n {\n value: 'sveltekit',\n label: 'SvelteKit',\n },\n {\n value: 'nuxt.js',\n label: 'Nuxt.js',\n },\n {\n value: 'remix',\n label: 'Remix',\n },\n {\n value: 'astro',\n label: 'Astro',\n },\n]\n\nexport function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState('')\n\n return (\n \n \n \n {value\n ? frameworks.find(framework => framework.value === value)?.label\n : 'Select framework...'}\n \n \n \n \n \n \n \n No framework found.\n \n {frameworks.map(framework => (\n {\n setValue(currentValue === value ? '' : currentValue)\n setOpen(false)\n }}\n >\n {framework.label}\n \n \n ))}\n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/command-demo.tsx", - "content": "import {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from 'lucide-react'\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from '~/registry/default/ui/command'\n\nexport function CommandDemo() {\n return (\n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Calculator\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/context-menu-demo.tsx", - "content": "import {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from '~/registry/default/ui/context-menu'\n\nexport function ContextMenuDemo() {\n return (\n \n \n Right click here\n \n \n \n Back\n ⌘[\n \n \n Forward\n ⌘]\n \n \n Reload\n ⌘R\n \n \n More Tools\n \n \n Save Page As...\n ⇧⌘S\n \n Create Shortcut...\n Name Window...\n \n Developer Tools\n \n \n \n \n Show Bookmarks Bar\n ⌘⇧B\n \n Show Full URLs\n \n \n People\n \n \n Pedro Duarte\n \n Colm Tuite\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/date-picker-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport { format } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\n\nimport { ny } from '~/lib/utils'\nimport { Button } from '~/registry/default/ui/button'\nimport { Calendar } from '~/registry/default/ui/calendar'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nexport function DatePickerDemo() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n \n \n {date ? format(date, 'PPP') : Pick a date}\n \n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/dialog-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '~/registry/default/ui/dialog'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\n\nexport function DialogDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/drawer-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport { Minus, Plus } from 'lucide-react'\nimport { Bar, BarChart, ResponsiveContainer } from 'recharts'\n\nimport { Button } from '~/registry/default/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '~/registry/default/ui/drawer'\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n \n \n \n \n \n
\n \n Move Goal\n Set your daily activity goal.\n \n
\n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/dropdown-menu-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from '~/registry/default/ui/dropdown-menu'\n\nexport function DropdownMenuDemo() {\n return (\n \n \n \n \n \n My Account\n \n \n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n \n Email\n Message\n \n More...\n \n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/hover-card-demo.tsx", - "content": "import { CalendarIcon } from 'lucide-react'\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '~/registry/default/ui/avatar'\nimport { Button } from '~/registry/default/ui/button'\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from '~/registry/default/ui/hover-card'\n\nexport function HoverCardDemo() {\n return (\n \n \n \n \n \n
\n \n \n VC\n \n
\n

@nextjs

\n

\n The React Framework – created and maintained by @vercel.\n

\n
\n \n {' '}\n \n Joined December 2021\n \n
\n
\n
\n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/input-demo.tsx", - "content": "import { Input } from '~/registry/default/ui/input'\n\nexport function InputDemo() {\n return \n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/input-otp-demo.tsx", - "content": "import {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '~/registry/default/ui/input-otp'\n\nexport function InputOTPDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/label-demo.tsx", - "content": "import { Checkbox } from '~/registry/default/ui/checkbox'\nimport { Label } from '~/registry/default/ui/label'\n\nexport function LabelDemo() {\n return (\n
\n
\n \n \n
\n
\n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/menubar-demo.tsx", - "content": "import {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n MenubarItem,\n MenubarMenu,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n} from '~/registry/default/ui/menubar'\n\nexport function MenubarDemo() {\n return (\n \n \n File\n \n \n New Tab\n {' '}\n ⌘T\n \n \n New Window\n {' '}\n ⌘N\n \n New Incognito Window\n \n \n Share\n \n Email link\n Messages\n Notes\n \n \n \n \n Print...\n {' '}\n ⌘P\n \n \n \n \n Edit\n \n \n Undo\n {' '}\n ⌘Z\n \n \n Redo\n {' '}\n ⇧⌘Z\n \n \n \n Find\n \n Search the web\n \n Find...\n Find Next\n Find Previous\n \n \n \n Cut\n Copy\n Paste\n \n \n \n View\n \n Always Show Bookmarks Bar\n \n Always Show Full URLs\n \n \n \n Reload\n {' '}\n ⌘R\n \n \n Force Reload\n {' '}\n ⇧⌘R\n \n \n Toggle Fullscreen\n \n Hide Sidebar\n \n \n \n Profiles\n \n \n Andy\n Benoit\n Luis\n \n \n Edit...\n \n Add Profile...\n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/navigation-menu-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\n\nimport { ny } from '~/lib/utils'\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from '~/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n {\n title: 'Alert Dialog',\n href: '/docs/primitives/alert-dialog',\n description:\n 'A modal dialog that interrupts the user with important content and expects a response.',\n },\n {\n title: 'Hover Card',\n href: '/docs/primitives/hover-card',\n description:\n 'For sighted users to preview content available behind a link.',\n },\n {\n title: 'Progress',\n href: '/docs/primitives/progress',\n description:\n 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n },\n {\n title: 'Scroll-area',\n href: '/docs/primitives/scroll-area',\n description: 'Visually or semantically separates content.',\n },\n {\n title: 'Tabs',\n href: '/docs/primitives/tabs',\n description:\n 'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n },\n {\n title: 'Tooltip',\n href: '/docs/primitives/tooltip',\n description:\n 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n },\n]\n\nexport function NavigationMenuDemo() {\n return (\n \n \n \n Getting started\n \n
    \n
  • \n \n \n
    \n shadcn/ui\n
    \n

    \n Beautifully designed components built with Radix UI and\n Tailwind CSS.\n

    \n \n     \n
    • \n \n Re-usable components built using Radix UI and Tailwind CSS.\n \n \n How to install dependencies and structure your app.\n \n \n Styles for headings, paragraphs, lists...etc\n \n
\n \n \n \n Components\n \n
    \n {components.map(component => (\n \n {component.description}\n \n ))}\n
\n \n \n \n \n \n Documentation\n \n \n \n \n \n )\n}\n\nconst ListItem = React.forwardRef<\n React.ElementRef<'a'>,\n React.ComponentPropsWithoutRef<'a'>\n>(({ className, title, children, ...props }, ref) => {\n return (\n
  • \n \n \n
    {title}
    \n

    \n {children}\n

    \n \n     \n
    • \n )\n})\nListItem.displayName = 'ListItem'\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/pagination-demo.tsx", - "content": "import {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n} from '~/registry/default/ui/pagination'\n\nexport function PaginationDemo() {\n return (\n \n \n \n \n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/popover-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '~/registry/default/ui/popover'\n\nexport function PopoverDemo() {\n return (\n \n \n \n \n \n
    \n
    \n

    Dimensions

    \n

    \n Set the dimensions for the layer.\n

    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n     \n     \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/progress-demo.tsx", - "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Progress } from '~/registry/default/ui/progress'\n\nexport function ProgressDemo() {\n const [progress, setProgress] = React.useState(13)\n\n React.useEffect(() => {\n const timer = setTimeout(() => setProgress(66), 500)\n return () => clearTimeout(timer)\n }, [])\n\n return \n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/radio-group-demo.tsx", - "content": "import { Label } from '~/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '~/registry/default/ui/radio-group'\n\nexport function RadioGroupDemo() {\n return (\n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n     \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/resizable-handle.tsx", - "content": "import {\n ResizableHandle,\n ResizablePanel,\n ResizablePanelGroup,\n} from '~/registry/default/ui/resizable'\n\nexport function ResizableHandleDemo() {\n return (\n \n \n
    \n Sidebar\n
    \n     \n \n \n
    \n Content\n
    \n     \n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/scroll-area-demo.tsx", - "content": "import * as React from 'react'\n\nimport { ScrollArea } from '~/registry/default/ui/scroll-area'\nimport { Separator } from '~/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n\nexport function ScrollAreaDemo() {\n return (\n \n
    \n

    Tags

    \n {tags.map(tag => (\n \n
    {tag}
    \n \n     \n ))}\n
    \n     \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/select-demo.tsx", - "content": "import * as React from 'react'\n\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} from '~/registry/default/ui/select'\n\nexport function SelectDemo() {\n return (\n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/separator-demo.tsx", - "content": "import { Separator } from '~/registry/default/ui/separator'\n\nexport function SeparatorDemo() {\n return (\n
    \n
    \n

    Radix Primitives

    \n

    \n An open-source UI component library.\n

    \n
    \n \n
    \n
    Blog
    \n \n
    Docs
    \n \n
    Source
    \n
    \n
    \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/sheet-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '~/registry/default/ui/sheet'\n\nexport function SheetDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n     \n     \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/skeleton-demo.tsx", - "content": "import { Skeleton } from '~/registry/default/ui/skeleton'\n\nexport function SkeletonDemo() {\n return (\n
    \n \n
    \n \n \n
    \n
    \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/slider-demo.tsx", - "content": "import { ny } from '~/lib/utils'\nimport { Slider } from '~/registry/default/ui/slider'\n\ntype SliderProps = React.ComponentProps\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n return (\n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/sonner-demo.tsx", - "content": "'use client'\n\nimport { toast } from 'sonner'\n\nimport { Button } from '~/registry/default/ui/button'\n\nexport function SonnerDemo() {\n return (\n \n toast('Event has been created', {\n description: 'Sunday, December 03, 2023 at 9:00 AM',\n action: {\n label: 'Undo',\n // eslint-disable-next-line no-console\n onClick: () => console.log('Undo'),\n },\n })}\n >\n Show Toast\n \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/switch-demo.tsx", - "content": "import { Label } from '~/registry/default/ui/label'\nimport { Switch } from '~/registry/default/ui/switch'\n\nexport function SwitchDemo() {\n return (\n
    \n \n \n
    \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/table-demo.tsx", - "content": "import {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n} from '~/registry/default/ui/table'\n\nconst invoices = [\n {\n invoice: 'INV001',\n paymentStatus: 'Paid',\n totalAmount: '$250.00',\n paymentMethod: 'Credit Card',\n },\n {\n invoice: 'INV002',\n paymentStatus: 'Pending',\n totalAmount: '$150.00',\n paymentMethod: 'PayPal',\n },\n {\n invoice: 'INV003',\n paymentStatus: 'Unpaid',\n totalAmount: '$350.00',\n paymentMethod: 'Bank Transfer',\n },\n {\n invoice: 'INV004',\n paymentStatus: 'Paid',\n totalAmount: '$450.00',\n paymentMethod: 'Credit Card',\n },\n {\n invoice: 'INV005',\n paymentStatus: 'Paid',\n totalAmount: '$550.00',\n paymentMethod: 'PayPal',\n },\n {\n invoice: 'INV006',\n paymentStatus: 'Pending',\n totalAmount: '$200.00',\n paymentMethod: 'Bank Transfer',\n },\n {\n invoice: 'INV007',\n paymentStatus: 'Unpaid',\n totalAmount: '$300.00',\n paymentMethod: 'Credit Card',\n },\n]\n\nexport function TableDemo() {\n return (\n
    \n A list of your recent invoices.\n \n \n Invoice\n Status\n Method\n Amount\n \n \n \n {invoices.map(invoice => (\n \n {invoice.invoice}\n {invoice.paymentStatus}\n {invoice.paymentMethod}\n {invoice.totalAmount}\n \n ))}\n \n \n \n Total\n $2,500.00\n \n \n
    \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/tabs-demo.tsx", - "content": "import { Button } from '~/registry/default/ui/button'\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from '~/registry/default/ui/card'\nimport { Input } from '~/registry/default/ui/input'\nimport { Label } from '~/registry/default/ui/label'\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from '~/registry/default/ui/tabs'\n\nexport function TabsDemo() {\n return (\n \n \n Account\n Password\n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're done.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n     \n \n \n \n     \n     \n \n \n \n Password\n \n Change your password here. After saving, you'll be logged out.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n     \n \n \n \n     \n     \n     \n )\n}\n", - "type": "registry:component", - "target": "" - }, - { - "path": "block/_sink/components/textarea-demo.tsx", - "content": "import { Textarea } from '~/registry/default/ui/textarea'\n\nexport function TextareaDemo() {\n return