@gardenfi/garden-book 0.3.3 → 0.3.4-beta.1

package/dist/Logo/index.js

@@ -1,78 +1,118 @@
 import { ArbitrumLogo as e } from "./ArbitrumLogo.js";
 import { BTCLogo as m } from "./BTCLogo.js";
-import { CatalogLogo as p } from "./CatalogLogo.js";
-import { Coinbase as a } from "./Coinbase.js";
+import { CatalogLogo as l } from "./CatalogLogo.js";
+import { Coinbase as f } from "./Coinbase.js";
 import { EthereumLogo as g } from "./EthereumLogo.js";
-import { GardenExplorer as L } from "./GardenExplorer.js";
-import { GardenFullLogo as G } from "./GardenFullLogo.js";
-import { GardenLogo as C } from "./GardenLogo.js";
-import { GardenLogoText as T } from "./GardenLogoText.js";
-import { GardenStrokeIcon as D } from "./GardenStrokeIcon.js";
-import { GMXLogo as I } from "./GMXLogo.js";
-import { PhantomIcon as s } from "./PhantomIcon.js";
-import { PolygonLogo as M } from "./PolygonLogo.js";
-import { RadiantLogo as b } from "./RadiantLogo.js";
-import { TrailOfBits as P } from "./TrailOfBits.js";
-import { TrustWallet as A } from "./TrustWallet.js";
-import { WalletConnect as O } from "./WalletConnect.js";
-import { SwellBTC as W } from "./SwellBTC.js";
-import { DLCBTC as v } from "./DLCBTC.js";
-import { TraderJoe as J } from "./TraderJoe.js";
-import { Debridge as V } from "./Debridge.js";
-import { Camelot as q } from "./Camelot.js";
-import { GMX as H } from "./GMX.js";
+import { GardenExplorer as n } from "./GardenExplorer.js";
+import { GardenFullLogo as i } from "./GardenFullLogo.js";
+import { GardenLogo as d } from "./GardenLogo.js";
+import { GardenLogoText as C } from "./GardenLogoText.js";
+import { GardenStrokeIcon as s } from "./GardenStrokeIcon.js";
+import { GMXLogo as h } from "./GMXLogo.js";
+import { PhantomIcon as M } from "./PhantomIcon.js";
+import { PolygonLogo as b } from "./PolygonLogo.js";
+import { RadiantLogo as D } from "./RadiantLogo.js";
+import { TrailOfBits as A } from "./TrailOfBits.js";
+import { TrustWallet as P } from "./TrustWallet.js";
+import { WalletConnect as R } from "./WalletConnect.js";
+import { SwellBTC as v } from "./SwellBTC.js";
+import { DLCBTC as J } from "./DLCBTC.js";
+import { TraderJoe as W } from "./TraderJoe.js";
+import { Debridge as H } from "./Debridge.js";
+import { Camelot as N } from "./Camelot.js";
+import { GMX as j } from "./GMX.js";
 import { Solv as Q } from "./Solv.js";
 import { PancakeSwap as Y } from "./PancakeSwap.js";
 import { Dodo as _ } from "./DODO.js";
 import { Vertex as oo } from "./Vertex.js";
 import { Radiant as eo } from "./Radiant.js";
 import { GardenIcon as mo } from "./GardenIcon.js";
-import { GardenIconOutline as po } from "./GardenIconOutline.js";
-import { NFTIcon as ao } from "./NFTIcon.js";
+import { GardenIconOutline as lo } from "./GardenIconOutline.js";
+import { NFTIcon as fo } from "./NFTIcon.js";
 import { GardenExplorerAlt as go } from "./GardenExplorerAlt.js";
-import { GardenDocs as lo } from "./GardenDocs.js";
+import { GardenDocs as no } from "./GardenDocs.js";
 import { GardenLogoMarkDark as io } from "./GardenLogoMarkDark.js";
-import { GardenLogoMarkLight as co } from "./GardenLogoMarkLight.js";
-import { GardenLogoDark as ko } from "./GardenLogoDark.js";
-import { GardenLogoLight as uo } from "./GardenLogoLight.js";
-import { Code4renaLogo as ho } from "./Code4renaLogo.js";
+import { GardenLogoMarkLight as Go } from "./GardenLogoMarkLight.js";
+import { GardenLogoDark as co } from "./GardenLogoDark.js";
+import { GardenLogoLight as To } from "./GardenLogoLight.js";
+import { Code4renaLogo as ko } from "./Code4renaLogo.js";
+import { AmberLogoFull as So } from "./AmberLogoFull.js";
+import { ArbitrumLogoFull as Bo } from "./ArbitrumLogoFull.js";
+import { BaseLogoFull as Io } from "./BaseLogoFull.js";
+import { BnbChainLogoFull as Eo } from "./BnbChainLogoFull.js";
+import { HyperliquidLogoFull as wo } from "./HyperliquidLogoFull.js";
+import { JumperLogoFull as Xo } from "./JumperLogoFull.js";
+import { LiFiLogoFull as yo } from "./LiFiLogoFull.js";
+import { LightsparkLogoFull as Oo } from "./LightsparkLogoFull.js";
+import { LitecoinLogoFull as qo } from "./LitecoinLogoFull.js";
+import { MaestroLogoFull as Ko } from "./MaestroLogoFull.js";
+import { MegaEthLogoFull as Vo } from "./MegaEthLogoFull.js";
+import { MonadLogoFull as zo } from "./MonadLogoFull.js";
+import { MulticoinCapitalLogoFull as Uo } from "./MulticoinCapitalLogoFull.js";
+import { PhantomLogoFull as Zo } from "./PhantomLogoFull.js";
+import { RangoLogoFull as $o } from "./RangoLogoFull.js";
+import { SolanaLogoFull as rr } from "./SolanaLogoFull.js";
+import { StarknetLogoFull as tr } from "./StarknetLogoFull.js";
+import { SwapKitLogoFull as pr } from "./SwapKitLogoFull.js";
+import { XverseLogoFull as xr } from "./XverseLogoFull.js";
+import { SatsTerminalLogoFull as ar } from "./SatsTerminalLogoFull.js";
 export {
+  So as AmberLogoFull,
   e as ArbitrumLogo,
+  Bo as ArbitrumLogoFull,
   m as BTCLogo,
-  q as Camelot,
-  p as CatalogLogo,
-  ho as Code4renaLogo,
-  a as Coinbase,
-  v as DLCBTC,
-  V as Debridge,
+  Io as BaseLogoFull,
+  Eo as BnbChainLogoFull,
+  N as Camelot,
+  l as CatalogLogo,
+  ko as Code4renaLogo,
+  f as Coinbase,
+  J as DLCBTC,
+  H as Debridge,
   _ as Dodo,
   g as EthereumLogo,
-  H as GMX,
-  I as GMXLogo,
-  lo as GardenDocs,
-  L as GardenExplorer,
+  j as GMX,
+  h as GMXLogo,
+  no as GardenDocs,
+  n as GardenExplorer,
   go as GardenExplorerAlt,
-  G as GardenFullLogo,
+  i as GardenFullLogo,
   mo as GardenIcon,
-  po as GardenIconOutline,
-  C as GardenLogo,
-  ko as GardenLogoDark,
-  uo as GardenLogoLight,
+  lo as GardenIconOutline,
+  d as GardenLogo,
+  co as GardenLogoDark,
+  To as GardenLogoLight,
   io as GardenLogoMarkDark,
-  co as GardenLogoMarkLight,
-  T as GardenLogoText,
-  D as GardenStrokeIcon,
-  ao as NFTIcon,
+  Go as GardenLogoMarkLight,
+  C as GardenLogoText,
+  s as GardenStrokeIcon,
+  wo as HyperliquidLogoFull,
+  Xo as JumperLogoFull,
+  yo as LiFiLogoFull,
+  Oo as LightsparkLogoFull,
+  qo as LitecoinLogoFull,
+  Ko as MaestroLogoFull,
+  Vo as MegaEthLogoFull,
+  zo as MonadLogoFull,
+  Uo as MulticoinCapitalLogoFull,
+  fo as NFTIcon,
   Y as PancakeSwap,
-  s as PhantomIcon,
-  M as PolygonLogo,
+  M as PhantomIcon,
+  Zo as PhantomLogoFull,
+  b as PolygonLogo,
   eo as Radiant,
-  b as RadiantLogo,
+  D as RadiantLogo,
+  $o as RangoLogoFull,
+  ar as SatsTerminalLogoFull,
+  rr as SolanaLogoFull,
   Q as Solv,
-  W as SwellBTC,
-  J as TraderJoe,
-  P as TrailOfBits,
-  A as TrustWallet,
+  tr as StarknetLogoFull,
+  pr as SwapKitLogoFull,
+  v as SwellBTC,
+  W as TraderJoe,
+  A as TrailOfBits,
+  P as TrustWallet,
   oo as Vertex,
-  O as WalletConnect
+  R as WalletConnect,
+  xr as XverseLogoFull
 };

package/dist/Typography/Typography.d.ts

@@ -1,12 +1,14 @@
 export type SizeVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type WeightVariants = "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black";
-type breakpointVariants = "xs" | "sm" | "md" | "lg" | "xl";
+export type ColorVariants = "near-black" | "graphite" | "neutral-grey" | "mist" | "rose" | "white";
+type BreakpointVariants = "xs" | "sm" | "md" | "lg" | "xl";
 type Breakpoints = {
-    [K in breakpointVariants]?: SizeVariants;
+    [K in BreakpointVariants]?: SizeVariants;
 };
 type BaseTypographyProps = {
     size?: SizeVariants;
     weight?: WeightVariants;
+    color?: ColorVariants;
     breakpoints?: Breakpoints;
     as?: "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite";
 };
@@ -25,11 +27,12 @@ type TypographyProps = BaseTypographyProps & ((React.HTMLAttributes<HTMLDivEleme
 }));
 /**
  * Typography component
- * @param size - default size of the text => "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+ * @param size - size of the text => "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
  * @param weight - weight of the text => "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"
- * @param breakpoints - Breakpoints for the text size => { [key in ["xs","sm","md","lg","xl"]]: SizeVariants }
- * @param as -HTML element to render as => "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite"
- * @default size - "h3"  weight - "medium" as - "span"
+ * @param color - text color token => "near-black" | "graphite" | "neutral-grey" | "mist" | "rose" | "white"
+ * @param breakpoints - per-breakpoint size overrides => { [key in "xs" | "sm" | "md" | "lg" | "xl"]?: SizeVariants }
+ * @param as - HTML element to render as => "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "cite"
+ * @default size - "h3"  weight - "regular"  color - "near-black"  as - "span"
  */
 export declare const Typography: React.FC<TypographyProps>;
 export {};

package/dist/Typography/index.js

@@ -1,8 +1,16 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import { cn as h } from "../utils/index.js";
-const e = m(["gf-font-haffer gf-text-dark-grey not-italic"], {
+const p = m(["gf-font-haffer gf-not-italic"], {
   variants: {
+    color: {
+      "near-black": "gf-text-near-black",
+      graphite: "gf-text-graphite",
+      "neutral-grey": "gf-text-neutral-grey",
+      mist: "gf-text-mist",
+      rose: "gf-text-rose",
+      white: "gf-text-white"
+    },
     size: {
       h1: "gf-text-[32px] gf-leading-[40px]",
       h2: "gf-text-xl gf-leading-[20px]",
@@ -20,70 +28,72 @@ const e = m(["gf-font-haffer gf-text-dark-grey not-italic"], {
       bold: "gf-font-bold",
       heavy: "gf-font-heavy",
       black: "gf-font-black"
-    },
-    breakpointSize: {
-      "xs:h1": "xs:gf-text-[32px] xs:gf-leading-[48px]",
-      "xs:h2": "xs:gf-text-xl xs:gf-leading-7",
-      "xs:h3": "xs:gf-text-base xs:gf-leading-6",
-      "xs:h4": "xs:gf-text-sm xs:gf-leading-5",
-      "xs:h5": "xs:gf-text-xs xs:gf-leading-4",
-      "xs:h6": "xs:gf-text-[10px] xs:gf-leading-3",
-      "sm:h1": "sm:gf-text-[32px] sm:gf-leading-[48px]",
-      "sm:h2": "sm:gf-text-xl sm:gf-leading-7",
-      "sm:h3": "sm:gf-text-base sm:gf-leading-6",
-      "sm:h4": "sm:gf-text-sm sm:gf-leading-5",
-      "sm:h5": "sm:gf-text-xs sm:gf-leading-4",
-      "sm:h6": "sm:gf-text-[10px] sm:gf-leading-3",
-      "md:h1": "md:gf-text-[32px] md:gf-leading-[48px]",
-      "md:h2": "md:gf-text-xl md:gf-leading-7",
-      "md:h3": "md:gf-text-base md:gf-leading-6",
-      "md:h4": "md:gf-text-sm md:gf-leading-5",
-      "md:h5": "md:gf-text-xs md:gf-leading-4",
-      "md:h6": "md:gf-text-[10px] md:gf-leading-3",
-      "lg:h1": "lg:gf-text-[32px] lg:gf-leading-[48px]",
-      "lg:h2": "lg:gf-text-xl lg:gf-leading-7",
-      "lg:h3": "lg:gf-text-base lg:gf-leading-6",
-      "lg:h4": "lg:gf-text-sm lg:gf-leading-5",
-      "lg:h5": "lg:gf-text-xs lg:gf-leading-4",
-      "lg:h6": "lg:gf-text-[10px] lg:gf-leading-3",
-      "xl:h1": "xl:gf-text-[32px] xl:gf-leading-[48px]",
-      "xl:h2": "xl:gf-text-xl xl:gf-leading-7",
-      "xl:h3": "xl:gf-text-base xl:gf-leading-6",
-      "xl:h4": "xl:gf-text-sm xl:gf-leading-5",
-      "xl:h5": "xl:gf-text-xs xl:gf-leading-4",
-      "xl:h6": "xl:gf-text-[10px] xl:gf-leading-3"
-    },
-    defaultVariants: {
-      size: "h3",
-      weight: "medium"
     }
+  },
+  defaultVariants: {
+    size: "h3",
+    weight: "regular",
+    color: "near-black"
   }
-}), b = ({
+}), o = {
+  "xs:h1": "xs:gf-text-[32px] xs:gf-leading-[48px]",
+  "xs:h2": "xs:gf-text-xl xs:gf-leading-7",
+  "xs:h3": "xs:gf-text-base xs:gf-leading-6",
+  "xs:h4": "xs:gf-text-sm xs:gf-leading-5",
+  "xs:h5": "xs:gf-text-xs xs:gf-leading-4",
+  "xs:h6": "xs:gf-text-[10px] xs:gf-leading-3",
+  "sm:h1": "sm:gf-text-[32px] sm:gf-leading-[48px]",
+  "sm:h2": "sm:gf-text-xl sm:gf-leading-7",
+  "sm:h3": "sm:gf-text-base sm:gf-leading-6",
+  "sm:h4": "sm:gf-text-sm sm:gf-leading-5",
+  "sm:h5": "sm:gf-text-xs sm:gf-leading-4",
+  "sm:h6": "sm:gf-text-[10px] sm:gf-leading-3",
+  "md:h1": "md:gf-text-[32px] md:gf-leading-[48px]",
+  "md:h2": "md:gf-text-xl md:gf-leading-7",
+  "md:h3": "md:gf-text-base md:gf-leading-6",
+  "md:h4": "md:gf-text-sm md:gf-leading-5",
+  "md:h5": "md:gf-text-xs md:gf-leading-4",
+  "md:h6": "md:gf-text-[10px] md:gf-leading-3",
+  "lg:h1": "lg:gf-text-[32px] lg:gf-leading-[48px]",
+  "lg:h2": "lg:gf-text-xl lg:gf-leading-7",
+  "lg:h3": "lg:gf-text-base lg:gf-leading-6",
+  "lg:h4": "lg:gf-text-sm lg:gf-leading-5",
+  "lg:h5": "lg:gf-text-xs lg:gf-leading-4",
+  "lg:h6": "lg:gf-text-[10px] lg:gf-leading-3",
+  "xl:h1": "xl:gf-text-[32px] xl:gf-leading-[48px]",
+  "xl:h2": "xl:gf-text-xl xl:gf-leading-7",
+  "xl:h3": "xl:gf-text-base xl:gf-leading-6",
+  "xl:h4": "xl:gf-text-sm xl:gf-leading-5",
+  "xl:h5": "xl:gf-text-xs xl:gf-leading-4",
+  "xl:h6": "xl:gf-text-[10px] xl:gf-leading-3"
+}, u = ({
   as: t = "span",
-  size: f,
-  weight: l = "regular",
-  breakpoints: x,
-  className: s,
-  ...a
+  size: e,
+  weight: x,
+  color: f,
+  breakpoints: g,
+  className: l,
+  ...s
 }) => {
-  const d = x ? Object.entries(x).map(([g, i]) => `${g}:${i}`).map(
-    (g) => e({ breakpointSize: g })
+  const a = g ? Object.entries(g).map(
+    ([i, n]) => o[`${i}:${n}`]
   ).join(" ") : "";
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ d(
     t,
     {
       className: h(
-        e({
-          size: f,
-          weight: l,
-          className: s
+        p({
+          size: e,
+          weight: x,
+          color: f,
+          className: l
         }),
-        d
+        a
       ),
-      ...a
+      ...s
     }
   );
 };
 export {
-  b as Typography
+  u as Typography
 };