feat: adjust playground add avatar classname for styling

packages/@holaplexui-playground/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@holaplexui/react": "*",
+    "@holaplex/ui-libarary-react": "*",
     "@next/font": "13.1.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",

packages/@holaplexui-playground/pages/avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarSize } from '@holaplexui/react';
+import { Avatar, AvatarSize } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/buttongroup.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup } from '@holaplexui/react';
+import { ButtonGroup } from '@holaplex/ui-library-react';
 import { useState } from 'react';
 
 export default function App() {

packages/@holaplexui-playground/pages/buttons.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@holaplexui/react';
+import { Button } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/flex.tsx

@@ -1,4 +1,4 @@
-import { Flex, FlexDirection } from '@holaplexui/react';
+import { Flex, FlexDirection } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/grid.tsx

@@ -1,4 +1,4 @@
-import { Row, Col } from '@holaplexui/react';
+import { Row, Col } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/icons.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@holaplexui/react';
+import { Icon } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/image.tsx

@@ -1,4 +1,4 @@
-import { Img, ImgBackdrop } from '@holaplexui/react';
+import { Img, ImgBackdrop } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/list.tsx

@@ -1,4 +1,4 @@
-import { List, ListGridSize } from '@holaplexui/react';
+import { List, ListGridSize } from '@holaplex/ui-library-react';
 import Image from 'next/image';
 import { useState } from 'react';
 

packages/@holaplexui-playground/pages/modal.tsx

@@ -1,4 +1,4 @@
-import { Modal } from '@holaplexui/react';
+import { Modal } from '@holaplex/ui-library-react';
 import { useState } from 'react';
 
 export default function App() {

packages/@holaplexui-playground/pages/price.tsx

@@ -1,4 +1,4 @@
-import { Price } from '@holaplexui/react';
+import { Price } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/search.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Search } from '@holaplexui/react';
+import { Search } from '@holaplex/ui-library-react';
 import { useRef } from 'react';
 
 export default function App() {

packages/@holaplexui-playground/pages/select.tsx

@@ -1,4 +1,4 @@
-import { Select } from '@holaplexui/react';
+import { Select } from '@holaplex/ui-library-react';
 import { useState } from 'react';
 
 export default function App() {

packages/@holaplexui-playground/pages/share.tsx

@@ -1,4 +1,4 @@
-import { Share } from '@holaplexui/react';
+import { Share } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/pages/spinners.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from '@holaplexui/react';
+import { Spinner } from '@holaplex/ui-library-react';
 
 export default function App() {
   return (

packages/@holaplexui-playground/styles/globals.css

@@ -109,3 +109,33 @@ a {
     color-scheme: dark;
   }
 }
+
+.spinner-border {
+  vertical-align: -0.125em;
+  border: solid currentColor;
+  border-right-color: transparent;
+}
+
+.form-label {
+  @apply mb-6 flex flex-col gap-2;
+}
+
+.avatar {
+  @apply bg-blue-500;
+}
+
+.form-label-text {
+  @apply font-semibold text-white;
+}
+
+.form-error {
+  @apply whitespace-nowrap text-left text-sm text-red-500;
+}
+
+.form-input {
+  @apply flex w-full flex-row items-center justify-start rounded-md border border-gray-800 bg-gray-800 p-2 text-white focus-within:border-white focus:ring-0 focus:ring-offset-0;
+}
+
+.form-input-error {
+  @apply border-red-500;
+}

packages/@holaplexui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "type": "module",

packages/@holaplexui-react/src/components/Avatar.tsx

@@ -42,15 +42,15 @@ export function Avatar({ src, circle, size, handle }: AvatarProps) {
           src={src}
           alt="avatar"
           className={clsx(
-            'aspect-square object-cover',
+            'avatar aspect-square object-cover',
             'duration-100 ease-out group-hover:origin-center group-hover:scale-105 group-hover:ease-in'
           )}
         />
       ) : (
         <div
           className={clsx(
             'aspect-square',
-            'bg-theme-default text-white',
+            'avatar',
             'font-semibold',
             'duration-100 ease-out group-hover:origin-center group-hover:scale-105 group-hover:ease-in',
             'flex flex-col justify-center items-center',

packages/@holaplexui-react/src/components/style.css

@@ -1,25 +0,0 @@
-.spinner-border {
-  vertical-align: -0.125em;
-  border: solid currentColor;
-  border-right-color: transparent;
-}
-
-.form-label {
-  @apply mb-6 flex flex-col gap-2;
-}
-
-.form-label-text {
-  @apply font-semibold text-white;
-}
-
-.form-error {
-  @apply whitespace-nowrap text-left text-sm text-red-500;
-}
-
-.form-input {
-  @apply flex w-full flex-row items-center justify-start rounded-md border border-gray-800 bg-gray-800 p-2 text-white focus-within:border-white focus:ring-0 focus:ring-offset-0;
-}
-
-.form-input-error {
-  @apply border-red-500;
-}