Update patch version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",
@@ -44,7 +44,6 @@
     "eslint-plugin-storybook": "^0.8.0",
     "rollup-plugin-css-only": "^4.5.2",
     "storybook": "^8.0.9",
-    "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
     "vite-plugin-dts": "^3.9.0",

src/components/Link/index.tsx

@@ -0,0 +1,25 @@
+import { styled } from "@pigment-css/react";
+
+export const Link = styled("a", { shouldForwardProp: (prop) => prop !== "outlined" })<{
+  outlined?: boolean;
+}>(({ theme }) => ({
+  fontSize: "1rem",
+  background: "rgba(0 0 0 / 0.04)",
+  padding: "0.8rem 1rem",
+  letterSpacing: "1px",
+  borderRadius: "8px",
+  textAlign: "center",
+  ...theme.applyStyles("dark", {
+    background: "rgba(255 255 255 / 0.1)",
+  }),
+  variants: [
+    {
+      props: { outlined: true },
+      style: {
+        background: "transparent",
+        color: `hsl(${theme.vars.palette.primary})`,
+        border: `1px solid hsl(${theme.vars.palette.border})`,
+      },
+    },
+  ],
+}));

src/components/NeynarAuthButton/index.tsx

@@ -1,9 +1,11 @@
-import { styled } from "@pigment-css/react";
 import React from "react";
+import { styled } from "@pigment-css/react";
+import PlanetBlackIcon from "./icons/PlanetBlackIcon";
 
 interface ButtonProps {
   label?: string;
   onClick?: () => void;
+  children?: React.ReactNode;
 }
 
 const Button = styled.button`
@@ -28,4 +30,9 @@ const Button = styled.button`
 export const NeynarAuthButton: React.FC<ButtonProps> = ({
   label = "Sign in with Neynar",
   onClick,
-}) => <Button onClick={onClick}>{label}</Button>;
+}) => (
+  <Button onClick={onClick}>
+    <PlanetBlackIcon />
+    <span>{label}</span>
+  </Button>
+);

src/components/index.tsx

@@ -1 +1,2 @@
 export { NeynarAuthButton } from "./NeynarAuthButton";
+export { Link } from "./Link";

src/types/global.d.ts

@@ -0,0 +1,19 @@
+import type {} from "@pigment-css/react/theme";
+import type { ExtendTheme } from "@pigment-css/react";
+
+declare module "@pigment-css/react/theme" {
+  export interface ThemeArgs {
+    theme: ExtendTheme<{
+      colorScheme: "light" | "dark";
+      tokens: {
+        palette: {
+          background: string;
+          foreground: string;
+          primary: string;
+          primaryForeground: string;
+          border: string;
+        };
+      };
+    }>;
+  }
+}

vite.config.ts

@@ -1,14 +1,40 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { pigment, extendTheme } from "@pigment-css/vite-plugin";
 import tsconfigPaths from "vite-tsconfig-paths";
 import dts from "vite-plugin-dts";
-import { pigment } from "@pigment-css/vite-plugin";
 
+const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        primary: "240 5.9% 10%",
+        border: "240 5.9% 90%",
+      },
+    },
+    dark: {
+      palette: {
+        background: "240 10% 3.9%",
+        foreground: "0 0% 80%",
+        primary: "0 0% 98%",
+        border: "240 3.7% 15.9%",
+      },
+    },
+  },
+  getSelector: (colorScheme) =>
+    colorScheme ? `.theme-${colorScheme}` : ":root",
+});
+
+// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    pigment({ theme: {} }),
-    react(), // Supports React JSX
-    tsconfigPaths(), // Supports TS path aliasing
+    pigment({
+      theme,
+    }),
+    react(),
+    tsconfigPaths(),
     dts({
       insertTypesEntry: true, // This option adds an entry for the type definitions in your package.json
     }),
@@ -20,14 +46,14 @@ export default defineConfig({
       formats: ["es", "cjs"],
       fileName: (format) => `bundle.${format}.js`,
     },
-    rollupOptions: {
-      external: ["react", "react-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
+    // rollupOptions: {
+    //   external: ["react", "react-dom"],
+    //   output: {
+    //     globals: {
+    //       react: "React",
+    //       "react-dom": "ReactDOM",
+    //     },
+    //   },
+    // },
   },
 });

yarn.lock

@@ -6721,7 +6721,7 @@ tslib@^1.13.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2:
+tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==