@aurum-sdk/logos 0.1.0

package/dist/react/index.d.ts

@@ -0,0 +1,153 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { SVGProps } from 'react';
+import { WalletId, WalletName, BorderRadiusToken, BorderRadiusSizeSlot } from '@aurum-sdk/types';
+
+type LogoVariant = 'icon' | 'brand' | 'black' | 'white';
+type AurumLogoVariant = LogoVariant;
+
+interface WalletLogoProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    /** Wallet ID */
+    id?: WalletId;
+    /** Wallet Name (alternative to id) */
+    name?: WalletName;
+    /** Logo variant - defaults to 'icon' */
+    variant?: LogoVariant;
+    /** Size in pixels (sets width and height) */
+    size?: number;
+    /** Border radius config token - defaults to 'md' */
+    radius?: BorderRadiusToken;
+    /** Size slot for border radius scaling (xs, sm, md, lg, xl) */
+    sizeSlot?: BorderRadiusSizeSlot;
+    /** Accessible title - when provided, removes aria-hidden and adds accessible label */
+    title?: string;
+}
+declare function WalletLogo({ id, name, variant, size, width, height, radius, sizeSlot, title, style, ...props }: WalletLogoProps): react_jsx_runtime.JSX.Element | null;
+
+interface AurumLogoProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    /** Logo variant - 'icon' | 'brand' | 'black' | 'white' */
+    variant?: AurumLogoVariant;
+    /** Size in pixels (sets width and height) */
+    size?: number;
+    /** Border radius config token - defaults to 'md' */
+    radius?: BorderRadiusToken;
+    /** Size slot for border radius scaling (xs, sm, md, lg, xl) */
+    sizeSlot?: BorderRadiusSizeSlot;
+    /** Accessible title - when provided, removes aria-hidden and adds accessible label */
+    title?: string;
+    /** Optional color override for the hood path */
+    color?: string;
+}
+/**
+ * Aurum brand logo component.
+ *
+ * @example
+ * <AurumLogo variant="brand" size={48} />
+ * <AurumLogo variant="icon" size={24} radius="lg" />
+ */
+declare function AurumLogo({ variant, size, width, height, radius, sizeSlot, title, color, style, ...props }: AurumLogoProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Gets the border radius for a logo based on the config token and size slot.
+ * Uses the shared scale system to ensure consistency with other UI elements.
+ *
+ * @param token - The border radius config (none, sm, md, lg, xl) - from brandConfig.borderRadius
+ * @param slot - The element size slot (xs, sm, md, lg, xl) - defaults to 'sm'
+ * @returns The border radius as a CSS string (e.g., "10px")
+ *
+ * @example
+ * getLogoRadius('xl', 'xs')  // => "10px" (for ~32px logos)
+ * getLogoRadius('xl', 'sm')  // => "18px" (for ~54px logos)
+ * getLogoRadius('xl', 'md')  // => "26px" (for ~80px logos)
+ */
+declare function getLogoRadius(token: BorderRadiusToken, slot?: BorderRadiusSizeSlot): string;
+
+declare function AppkitBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function AppkitBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function AppkitIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function AppkitWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function BraveBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function BraveBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function BraveIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function BraveWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CoinbaseWalletBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CoinbaseWalletBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CoinbaseWalletIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function CoinbaseWalletWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function LedgerBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function LedgerBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function LedgerIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function LedgerWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function MetamaskBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function MetamaskBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function MetamaskIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function MetamaskWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function PhantomBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function PhantomBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function PhantomIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function PhantomWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function RabbyBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function RabbyBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function RabbyIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function RabbyWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function WalletconnectBlack(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function WalletconnectBrand(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function WalletconnectIcon(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function WalletconnectWhite(props: SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+interface AurumIconProps extends SVGProps<SVGSVGElement> {
+    /** Optional color override for the hood path */
+    color?: string;
+}
+declare function AurumIcon({ color, ...props }: AurumIconProps): react_jsx_runtime.JSX.Element;
+
+interface AurumBrandProps extends SVGProps<SVGSVGElement> {
+    /** Optional color override for the hood path */
+    color?: string;
+}
+declare function AurumBrand({ color, ...props }: AurumBrandProps): react_jsx_runtime.JSX.Element;
+
+interface AurumBlackProps extends SVGProps<SVGSVGElement> {
+    /** Optional color override for the hood path */
+    color?: string;
+}
+declare function AurumBlack({ color, ...props }: AurumBlackProps): react_jsx_runtime.JSX.Element;
+
+interface AurumWhiteProps extends SVGProps<SVGSVGElement> {
+    /** Optional color override for the hood path */
+    color?: string;
+}
+declare function AurumWhite({ color, ...props }: AurumWhiteProps): react_jsx_runtime.JSX.Element;
+
+export { AppkitBlack, AppkitBrand, AppkitIcon, AppkitWhite, AurumBlack, AurumBrand, AurumIcon, AurumLogo, type AurumLogoProps, type AurumLogoVariant, AurumWhite, BraveBlack, BraveBrand, BraveIcon, BraveWhite, CoinbaseWalletBlack, CoinbaseWalletBrand, CoinbaseWalletIcon, CoinbaseWalletWhite, LedgerBlack, LedgerBrand, LedgerIcon, LedgerWhite, MetamaskBlack, MetamaskBrand, MetamaskIcon, MetamaskWhite, PhantomBlack, PhantomBrand, PhantomIcon, PhantomWhite, RabbyBlack, RabbyBrand, RabbyIcon, RabbyWhite, WalletLogo, type WalletLogoProps, WalletconnectBlack, WalletconnectBrand, WalletconnectIcon, WalletconnectWhite, getLogoRadius };