diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx index fe6bf3072..6a5211f0d 100644 --- a/packages/keychain/src/components/ErrorBoundary.tsx +++ b/packages/keychain/src/components/ErrorBoundary.tsx @@ -4,7 +4,7 @@ import { AlertIcon, ExternalIcon, Button } from "@cartridge/ui-next"; import { useConnection } from "@/hooks/connection"; import { CARTRIDGE_DISCORD_LINK } from "@/const"; import { Link } from "react-router-dom"; -import { usePostHog } from "@/context/posthog"; +import { usePostHog } from "@/hooks/posthog"; import { useEffect } from "react"; export class ErrorBoundary extends React.Component< diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx index aa7d2e6fc..f0cc0c4df 100644 --- a/packages/keychain/src/components/connect/create/CreateController.tsx +++ b/packages/keychain/src/components/connect/create/CreateController.tsx @@ -10,7 +10,7 @@ import { useCreateController } from "./useCreateController"; import { ErrorAlert } from "@/components/ErrorAlert"; import { VerifiableControllerTheme } from "@/context/theme"; import InAppSpy from "inapp-spy"; -import { usePostHog } from "@/context/posthog"; +import { usePostHog } from "@/hooks/posthog"; interface CreateControllerViewProps { theme: VerifiableControllerTheme; diff --git a/packages/keychain/src/components/home.tsx b/packages/keychain/src/components/home.tsx index dd6ec8e27..2961ec683 100644 --- a/packages/keychain/src/components/home.tsx +++ b/packages/keychain/src/components/home.tsx @@ -13,7 +13,7 @@ import { Settings } from "./settings"; import { SignMessage } from "./SignMessage"; import { PageLoading } from "./Loading"; import { execute } from "@/utils/connection/execute"; -import { usePostHog } from "@/context/posthog"; +import { usePostHog } from "@/hooks/posthog"; export function Home() { const { context, setContext, controller, error, policies, upgrade } = diff --git a/packages/keychain/src/components/provider/index.tsx b/packages/keychain/src/components/provider/index.tsx index 915c1d94f..14e28cde9 100644 --- a/packages/keychain/src/components/provider/index.tsx +++ b/packages/keychain/src/components/provider/index.tsx @@ -4,12 +4,12 @@ import { useConnectionValue } from "@/hooks/connection"; import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge"; import { ENDPOINT } from "@/utils/graphql"; import { ConnectionContext } from "./connection"; +import { PostHogProvider } from "./posthog"; import { ControllerThemeProvider } from "./theme"; import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core"; import { sepolia, mainnet } from "@starknet-react/chains"; import { constants, num } from "starknet"; import { BrowserRouter } from "react-router-dom"; -import { PostHogProvider } from "@/context/posthog"; export function Provider({ children }: PropsWithChildren) { const connection = useConnectionValue(); diff --git a/packages/keychain/src/components/provider/posthog.tsx b/packages/keychain/src/components/provider/posthog.tsx new file mode 100644 index 000000000..22dec6c75 --- /dev/null +++ b/packages/keychain/src/components/provider/posthog.tsx @@ -0,0 +1,16 @@ +import { PropsWithChildren } from "react"; +import { PostHogContext, PostHogWrapper } from "@/context/posthog"; + +export function PostHogProvider({ children }: PropsWithChildren) { + const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, { + host: import.meta.env.VITE_POSTHOG_HOST, + persistence: "memory", + autocapture: false, + }); + + return ( + + {children} + + ); +} diff --git a/packages/keychain/src/context/posthog.tsx b/packages/keychain/src/context/posthog.tsx index 9f73e20be..bc590bc87 100644 --- a/packages/keychain/src/context/posthog.tsx +++ b/packages/keychain/src/context/posthog.tsx @@ -1,10 +1,10 @@ -import { createContext, useContext, PropsWithChildren } from "react"; +import { createContext } from "react"; import PostHog from "posthog-js-lite"; // eslint-disable-next-line @typescript-eslint/no-explicit-any type Properties = Record; -class PostHogWrapper extends PostHog { +export class PostHogWrapper extends PostHog { isLocal = typeof window !== "undefined" && window.location.hostname.includes("localhost"); @@ -87,26 +87,6 @@ interface PostHogContextType { posthog: PostHogWrapper; } -const PostHogContext = createContext(undefined); - -export function PostHogProvider({ children }: PropsWithChildren) { - const posthog = new PostHogWrapper(import.meta.env.VITE_POSTHOG_KEY!, { - host: import.meta.env.VITE_POSTHOG_HOST, - persistence: "memory", - autocapture: false, - }); - - return ( - - {children} - - ); -} - -export function usePostHog() { - const context = useContext(PostHogContext); - if (!context) { - return undefined; - } - return context.posthog; -} +export const PostHogContext = createContext( + undefined, +); diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts index 7c7151c09..8a59fc00b 100644 --- a/packages/keychain/src/hooks/connection.ts +++ b/packages/keychain/src/hooks/connection.ts @@ -18,7 +18,7 @@ import { ConnectionContextValue, } from "@/components/provider/connection"; import { UpgradeInterface, useUpgrade } from "./upgrade"; -import { usePostHog } from "@/context/posthog"; +import { usePostHog } from "@/hooks/posthog"; import { Policies } from "@cartridge/presets"; import { defaultTheme, diff --git a/packages/keychain/src/hooks/posthog.tsx b/packages/keychain/src/hooks/posthog.tsx new file mode 100644 index 000000000..9b42db60f --- /dev/null +++ b/packages/keychain/src/hooks/posthog.tsx @@ -0,0 +1,10 @@ +import { useContext } from "react"; +import { PostHogContext } from "@/context/posthog"; + +export function usePostHog() { + const context = useContext(PostHogContext); + if (!context) { + return undefined; + } + return context.posthog; +} diff --git a/packages/profile/src/components/achievements/trophy.tsx b/packages/profile/src/components/achievements/trophy.tsx index 53e274a51..f6a6aa93e 100644 --- a/packages/profile/src/components/achievements/trophy.tsx +++ b/packages/profile/src/components/achievements/trophy.tsx @@ -442,7 +442,7 @@ Do you have what it takes to carve your name into history? )}&url=${encodeURIComponent(url)}`; window.open(twitterUrl, "_blank", "noopener,noreferrer"); - }, [url, xhandle, title, earning, date]); + }, [url, xhandle, title, earning, date, percentage]); if (!url || !xhandle) return null; diff --git a/packages/profile/src/components/context/data.tsx b/packages/profile/src/components/context/data.tsx deleted file mode 100644 index f4deaf0cf..000000000 --- a/packages/profile/src/components/context/data.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { createContext, useState, ReactNode } from "react"; -import { useAchievements } from "@/hooks/achievements"; - -type DataContextType = { - trophies: ReturnType; - setAccountAddress: (address: string | undefined) => void; -}; - -const initialState: DataContextType = { - trophies: { - achievements: [], - players: [], - isLoading: false, - }, - setAccountAddress: () => {}, -}; - -export const DataContext = createContext(initialState); - -export function DataProvider({ children }: { children: ReactNode }) { - const [accountAddress, setAccountAddress] = useState( - undefined, - ); - - const trophies = useAchievements(accountAddress); - - return ( - - {children} - - ); -} diff --git a/packages/profile/src/components/context/index.tsx b/packages/profile/src/components/context/index.tsx deleted file mode 100644 index 7bb7874b7..000000000 --- a/packages/profile/src/components/context/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export { ArcadeContext } from "./arcade"; -export { ConnectionContext } from "./connection"; -export { DataContext } from "./data"; -export { ThemeContext } from "./theme"; -export { Provider } from "./provider"; diff --git a/packages/profile/src/components/context/arcade.tsx b/packages/profile/src/components/provider/arcade.tsx similarity index 89% rename from packages/profile/src/components/context/arcade.tsx rename to packages/profile/src/components/provider/arcade.tsx index 4950f5172..c5e83918d 100644 --- a/packages/profile/src/components/context/arcade.tsx +++ b/packages/profile/src/components/provider/arcade.tsx @@ -1,5 +1,4 @@ import { - createContext, ReactNode, useCallback, useContext, @@ -19,25 +18,10 @@ import { RegistryOptions, } from "@bal7hazar/arcade-sdk"; import { constants } from "starknet"; +import { ArcadeContext } from "@/context/arcade"; const CHAIN_ID = constants.StarknetChainId.SN_SEPOLIA; -/** - * Interface defining the shape of the Arcade context. - */ -interface ArcadeContextType { - /** The Arcade client instance */ - chainId: string; - provider: ExternalProvider; - pins: { [playerId: string]: string[] }; - games: { [gameId: string]: GameModel }; -} - -/** - * React context for sharing Arcade-related data throughout the application. - */ -export const ArcadeContext = createContext(null); - /** * Provider component that makes Arcade context available to child components. * diff --git a/packages/profile/src/components/context/connection.tsx b/packages/profile/src/components/provider/connection.tsx similarity index 74% rename from packages/profile/src/components/context/connection.tsx rename to packages/profile/src/components/provider/connection.tsx index 99eb0627f..96beee06e 100644 --- a/packages/profile/src/components/context/connection.tsx +++ b/packages/profile/src/components/provider/connection.tsx @@ -1,58 +1,19 @@ import { connectToParent } from "@cartridge/penpal"; -import { - createContext, - useState, - ReactNode, - useEffect, - useCallback, -} from "react"; +import { useState, ReactNode, useEffect, useCallback } from "react"; import { ETH_CONTRACT_ADDRESS, - isIframe, normalize, STRK_CONTRACT_ADDRESS, } from "@cartridge/utils"; -import { Call, constants, getChecksumAddress, RpcProvider } from "starknet"; +import { constants, getChecksumAddress, RpcProvider } from "starknet"; import { useNavigate, useSearchParams } from "react-router-dom"; +import { + ConnectionContext, + initialState, + ParentMethods, +} from "@/context/connection"; -type ConnectionContextType = { - origin: string; - parent: ParentMethods; - provider: RpcProvider; - chainId: string; - erc20: string[]; - project?: string; - namespace?: string; - version?: string; - isVisible: boolean; - setIsVisible: (isVisible: boolean) => void; -}; - -type ParentMethods = { - close: () => void; - openSettings: () => void; - openPurchaseCredits: () => void; - openExecute: (calls: Call[], chain?: string) => Promise; -}; - -const initialState: ConnectionContextType = { - origin: location.origin, - parent: { - close: () => {}, - openSettings: () => {}, - openPurchaseCredits: () => {}, - openExecute: async () => false, - }, - provider: new RpcProvider({ nodeUrl: import.meta.env.VITE_RPC_SEPOLIA }), - chainId: "", - erc20: [], - isVisible: !isIframe(), - setIsVisible: () => {}, -}; - -export const ConnectionContext = - createContext(initialState); - +import { ConnectionContextType } from "@/context/connection"; export function ConnectionProvider({ children }: { children: ReactNode }) { const [state, setState] = useState(initialState); diff --git a/packages/profile/src/components/provider/data.tsx b/packages/profile/src/components/provider/data.tsx new file mode 100644 index 000000000..9c57dfca6 --- /dev/null +++ b/packages/profile/src/components/provider/data.tsx @@ -0,0 +1,17 @@ +import { useState, ReactNode } from "react"; +import { useAchievements } from "@/hooks/achievements"; +import { DataContext } from "@/context/data"; + +export function DataProvider({ children }: { children: ReactNode }) { + const [accountAddress, setAccountAddress] = useState( + undefined, + ); + + const trophies = useAchievements(accountAddress); + + return ( + + {children} + + ); +} diff --git a/packages/profile/src/components/context/provider.tsx b/packages/profile/src/components/provider/index.tsx similarity index 100% rename from packages/profile/src/components/context/provider.tsx rename to packages/profile/src/components/provider/index.tsx diff --git a/packages/profile/src/components/context/theme.tsx b/packages/profile/src/components/provider/theme.tsx similarity index 81% rename from packages/profile/src/components/context/theme.tsx rename to packages/profile/src/components/provider/theme.tsx index f2d7c76e9..f9045747b 100644 --- a/packages/profile/src/components/context/theme.tsx +++ b/packages/profile/src/components/provider/theme.tsx @@ -4,33 +4,17 @@ import { ControllerTheme, } from "@cartridge/presets"; import { useThemeEffect } from "@cartridge/ui-next"; -import { createContext, useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; import { useConnection } from "@/hooks/context"; +import { ColorScheme, ThemeContext, initialState } from "@/context/theme"; -type ColorScheme = "dark" | "light" | "system"; - -type ThemeProviderProps = { +export type ThemeProviderProps = { children: React.ReactNode; defaultScheme?: ColorScheme; storageKey?: string; }; -type ThemeProviderContextType = { - colorScheme: ColorScheme; - setColorScheme: (colorMode: ColorScheme) => void; - theme: ControllerTheme; -}; - -const initialState: ThemeProviderContextType = { - colorScheme: "system", - setColorScheme: () => null, - theme: defaultTheme, -}; - -export const ThemeContext = - createContext(initialState); - export function ThemeProvider({ children, defaultScheme = "system", diff --git a/packages/profile/src/context/arcade.ts b/packages/profile/src/context/arcade.ts new file mode 100644 index 000000000..8b429b717 --- /dev/null +++ b/packages/profile/src/context/arcade.ts @@ -0,0 +1,18 @@ +import { ArcadeProvider, GameModel } from "@bal7hazar/arcade-sdk"; +import { createContext } from "react"; + +/** + * Interface defining the shape of the Arcade context. + */ +interface ArcadeContextType { + /** The Arcade client instance */ + chainId: string; + provider: ArcadeProvider; + pins: { [playerId: string]: string[] }; + games: { [gameId: string]: GameModel }; +} + +/** + * React context for sharing Arcade-related data throughout the application. + */ +export const ArcadeContext = createContext(null); diff --git a/packages/profile/src/context/connection.ts b/packages/profile/src/context/connection.ts new file mode 100644 index 000000000..b8dcaa5a3 --- /dev/null +++ b/packages/profile/src/context/connection.ts @@ -0,0 +1,41 @@ +import { isIframe } from "@cartridge/utils"; +import { createContext } from "react"; +import { Call, RpcProvider } from "starknet"; + +export type ConnectionContextType = { + origin: string; + parent: ParentMethods; + provider: RpcProvider; + chainId: string; + erc20: string[]; + project?: string; + namespace?: string; + version?: string; + isVisible: boolean; + setIsVisible: (isVisible: boolean) => void; +}; + +export type ParentMethods = { + close: () => void; + openSettings: () => void; + openPurchaseCredits: () => void; + openExecute: (calls: Call[], chain?: string) => Promise; +}; + +export const initialState: ConnectionContextType = { + origin: location.origin, + parent: { + close: () => {}, + openSettings: () => {}, + openPurchaseCredits: () => {}, + openExecute: async () => false, + }, + provider: new RpcProvider({ nodeUrl: import.meta.env.VITE_RPC_SEPOLIA }), + chainId: "", + erc20: [], + isVisible: !isIframe(), + setIsVisible: () => {}, +}; + +export const ConnectionContext = + createContext(initialState); diff --git a/packages/profile/src/context/data.ts b/packages/profile/src/context/data.ts new file mode 100644 index 000000000..0bde35c8a --- /dev/null +++ b/packages/profile/src/context/data.ts @@ -0,0 +1,18 @@ +import { useAchievements } from "@/hooks/achievements"; +import { createContext } from "react"; + +export type DataContextType = { + trophies: ReturnType; + setAccountAddress: (address: string | undefined) => void; +}; + +const initialState: DataContextType = { + trophies: { + achievements: [], + players: [], + isLoading: false, + }, + setAccountAddress: () => {}, +}; + +export const DataContext = createContext(initialState); diff --git a/packages/profile/src/context/theme.ts b/packages/profile/src/context/theme.ts new file mode 100644 index 000000000..88f6f851c --- /dev/null +++ b/packages/profile/src/context/theme.ts @@ -0,0 +1,19 @@ +import { createContext } from "react"; +import { defaultTheme, ControllerTheme } from "@cartridge/presets"; + +export type ColorScheme = "dark" | "light" | "system"; + +type ThemeProviderContextType = { + colorScheme: ColorScheme; + setColorScheme: (colorMode: ColorScheme) => void; + theme: ControllerTheme; +}; + +export const initialState: ThemeProviderContextType = { + colorScheme: "system", + setColorScheme: () => null, + theme: defaultTheme, +}; + +export const ThemeContext = + createContext(initialState); diff --git a/packages/profile/src/hooks/account.ts b/packages/profile/src/hooks/account.ts index 8b8874eeb..ab5eaf885 100644 --- a/packages/profile/src/hooks/account.ts +++ b/packages/profile/src/hooks/account.ts @@ -120,14 +120,7 @@ export function useAccountInfo({ nameOrAddress }: { nameOrAddress: string }) { return "Please input a valid Starknet address"; } return ""; - }, [ - starkError, - controllerError, - address, - walletError, - controllerName, - starkName, - ]); + }, [starkError, controllerError, address, controllerName, starkName]); const warning = useMemo(() => { return walletError; diff --git a/packages/profile/src/hooks/arcade.ts b/packages/profile/src/hooks/arcade.ts index c2dbf0010..79cf5494c 100644 --- a/packages/profile/src/hooks/arcade.ts +++ b/packages/profile/src/hooks/arcade.ts @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { ArcadeContext } from "../components/context/arcade"; +import { ArcadeContext } from "@/context/arcade"; /** * Custom hook to access the Arcade context and account information. diff --git a/packages/profile/src/hooks/collection.ts b/packages/profile/src/hooks/collection.ts index 84a84fc82..a5d3d3963 100644 --- a/packages/profile/src/hooks/collection.ts +++ b/packages/profile/src/hooks/collection.ts @@ -75,7 +75,7 @@ export function useCollection({ tokenIds = [] }: { tokenIds?: string[] }) { collection, assets, }; - }, [data, indexerUrl]); + }, [data?.tokenBalances?.edges, indexerUrl, tokenIds]); return { collection, assets, status }; } diff --git a/packages/profile/src/hooks/context.ts b/packages/profile/src/hooks/context.ts index ea9576d20..5a2d40bc1 100644 --- a/packages/profile/src/hooks/context.ts +++ b/packages/profile/src/hooks/context.ts @@ -1,9 +1,7 @@ import { useContext } from "react"; -import { - ThemeContext, - ConnectionContext, - DataContext, -} from "@/components/context"; +import { ThemeContext } from "@/context/theme"; +import { ConnectionContext } from "@/context/connection"; +import { DataContext } from "@/context/data"; export function useTheme() { return useContext(ThemeContext); diff --git a/packages/profile/src/main.tsx b/packages/profile/src/main.tsx index 5b1571d4b..7c12d5b0f 100644 --- a/packages/profile/src/main.tsx +++ b/packages/profile/src/main.tsx @@ -2,7 +2,7 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { SonnerToaster } from "@cartridge/ui-next"; import { App } from "@/components/app"; -import { Provider } from "@/components/context"; +import { Provider } from "@/components/provider"; import "./index.css"; diff --git a/packages/ui-next/src/components/primitives/alert-dialog.tsx b/packages/ui-next/src/components/primitives/alert-dialog.tsx index 9a8655ad2..cb161842b 100644 --- a/packages/ui-next/src/components/primitives/alert-dialog.tsx +++ b/packages/ui-next/src/components/primitives/alert-dialog.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; import { cn } from "@/utils"; -import { buttonVariants } from "@/components/primitives/button"; +import { buttonVariants } from "@/components/primitives/button/utils"; const AlertDialog = AlertDialogPrimitive.Root; diff --git a/packages/ui-next/src/components/primitives/badge.tsx b/packages/ui-next/src/components/primitives/badge.tsx index 36209e8b8..58639e2fd 100644 --- a/packages/ui-next/src/components/primitives/badge.tsx +++ b/packages/ui-next/src/components/primitives/badge.tsx @@ -29,10 +29,8 @@ export interface BadgeProps extends React.HTMLAttributes, VariantProps {} -function Badge({ className, variant, ...props }: BadgeProps) { +export function Badge({ className, variant, ...props }: BadgeProps) { return (
); } - -export { Badge, badgeVariants }; diff --git a/packages/ui-next/src/components/primitives/button/index.tsx b/packages/ui-next/src/components/primitives/button/index.tsx new file mode 100644 index 000000000..58dcb2eb6 --- /dev/null +++ b/packages/ui-next/src/components/primitives/button/index.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { type VariantProps } from "class-variance-authority"; +import { cn } from "@/utils"; +import { Spinner } from "@/components/spinner"; +import { buttonVariants } from "./utils"; + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; + isLoading?: boolean; +} + +export const Button = React.forwardRef( + ( + { + className, + variant, + size, + asChild = false, + isLoading, + children, + disabled, + ...props + }, + ref, + ) => { + const Comp = asChild ? Slot : "button"; + return ( + + {isLoading ? : children} + + ); + }, +); +Button.displayName = "Button"; diff --git a/packages/ui-next/src/components/primitives/button.tsx b/packages/ui-next/src/components/primitives/button/utils.ts similarity index 55% rename from packages/ui-next/src/components/primitives/button.tsx rename to packages/ui-next/src/components/primitives/button/utils.ts index 03b83be6e..f210bd0a9 100644 --- a/packages/ui-next/src/components/primitives/button.tsx +++ b/packages/ui-next/src/components/primitives/button/utils.ts @@ -1,10 +1,6 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/utils"; -import { Spinner } from "../spinner"; +import { cva } from "class-variance-authority"; -const buttonVariants = cva( +export const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 uppercase font-mono gap-1.5", { variants: { @@ -34,41 +30,3 @@ const buttonVariants = cva( }, }, ); - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; - isLoading?: boolean; -} - -const Button = React.forwardRef( - ( - { - className, - variant, - size, - asChild = false, - isLoading, - children, - disabled, - ...props - }, - ref, - ) => { - const Comp = asChild ? Slot : "button"; - return ( - - {isLoading ? : children} - - ); - }, -); -Button.displayName = "Button"; - -export { Button, buttonVariants }; diff --git a/packages/ui-next/src/components/primitives/toggle-group.tsx b/packages/ui-next/src/components/primitives/toggle-group.tsx index ac360df2a..d74182ed9 100644 --- a/packages/ui-next/src/components/primitives/toggle-group.tsx +++ b/packages/ui-next/src/components/primitives/toggle-group.tsx @@ -5,7 +5,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; import { VariantProps } from "class-variance-authority"; import { cn } from "@/utils"; -import { toggleVariants } from "@/components/primitives/toggle"; +import { toggleVariants } from "@/components/primitives/toggle/utils"; const ToggleGroupContext = React.createContext< VariantProps diff --git a/packages/ui-next/src/components/primitives/toggle/index.tsx b/packages/ui-next/src/components/primitives/toggle/index.tsx new file mode 100644 index 000000000..624b1228c --- /dev/null +++ b/packages/ui-next/src/components/primitives/toggle/index.tsx @@ -0,0 +1,21 @@ +"use client"; + +import * as React from "react"; +import * as TogglePrimitive from "@radix-ui/react-toggle"; +import { type VariantProps } from "class-variance-authority"; +import { cn } from "@/utils"; +import { toggleVariants } from "./utils"; + +export const Toggle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, size, ...props }, ref) => ( + +)); + +Toggle.displayName = TogglePrimitive.Root.displayName; diff --git a/packages/ui-next/src/components/primitives/toggle.tsx b/packages/ui-next/src/components/primitives/toggle/utils.ts similarity index 51% rename from packages/ui-next/src/components/primitives/toggle.tsx rename to packages/ui-next/src/components/primitives/toggle/utils.ts index a516aab4c..7eca27ce9 100644 --- a/packages/ui-next/src/components/primitives/toggle.tsx +++ b/packages/ui-next/src/components/primitives/toggle/utils.ts @@ -1,12 +1,6 @@ -"use client"; +import { cva } from "class-variance-authority"; -import * as React from "react"; -import * as TogglePrimitive from "@radix-ui/react-toggle"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "@/utils"; - -const toggleVariants = cva( +export const toggleVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", { variants: { @@ -27,19 +21,3 @@ const toggleVariants = cva( }, }, ); - -const Toggle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, variant, size, ...props }, ref) => ( - -)); - -Toggle.displayName = TogglePrimitive.Root.displayName; - -export { Toggle, toggleVariants };