@luxfi/ui 8.1.0 → 8.2.0

package/src/site/components/header/mobile-bag-drawer.tsx

@@ -0,0 +1,51 @@
+'use client'
+import React from 'react'
+
+import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui'
+import { CartPanel } from '@hanzo/commerce'
+
+import BagButton from '../commerce/bag-button'
+
+const MobileBagDrawer: React.FC<{
+  open: boolean,
+  setOpen: (b: boolean) => void
+  handleCheckout: () => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  handleCheckout,
+  className='',
+}) => {
+  
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerContent className={cn('rounded-t-xl mt-6 pb-12 h-auto', className)} >
+        <CartPanel 
+          handleCheckout={handleCheckout} 
+          className='mt-4 mb-4 border-none py-0 px-4 w-full '
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          itemClx='mt-2'
+          totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <BagButton 
+              animateOnHover={false} 
+              showIfEmpty 
+              className=
+              'mr-2 relative w-6 h-7'
+              iconClx='fill-foreground '
+            />
+            <p className='font-heading text-foreground text-default'>Your Bag</p>
+          </div>
+          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
+        </CartPanel>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default MobileBagDrawer

package/src/site/components/header/mobile-menu-toggle-button.tsx

@@ -0,0 +1,34 @@
+'use client'
+import React, { useState } from 'react'
+
+import { Plus } from 'lucide-react'
+
+import { Button } from '@hanzo/ui/primitives'
+import { cn, css } from '@hanzo/ui'
+const MobileMenuToggleButton: React.FC<{
+  open: boolean
+  setOpen: (b: boolean) => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  className=''
+}) => {
+
+  return (
+    <Button 
+      variant='ghost' 
+      size='default' 
+      className={cn('rounded-full', cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className))}
+      onClick={() => {setOpen(!open)}} 
+      
+    >
+      <Plus width={28} height={28} style={css(
+        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
+        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
+      )} />
+    </Button>
+  )
+}
+
+export default MobileMenuToggleButton

package/src/site/components/header/mobile-nav-menu-ai.tsx

@@ -0,0 +1,52 @@
+'use client'
+import React, { useState } from 'react'
+import { Box, cn, css } from '@hanzo/ui'
+import { ArrowRight, Plus } from 'lucide-react'
+import { Button, Card } from '@hanzo/ui/primitives'
+import { Logo } from '..'
+
+interface MobileNavMenuAIProps {
+    setMenuOpen: (open: boolean) => void
+}
+
+const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return (
+        <>
+            <Box className="w-full  text-2xl cursor-pointer">
+                <div className='flex justify-between'>
+                    <Logo variant='wordmark' size='md' outerClx={'p-6 h-full'} />
+                    <Box tag="span" className={cn('grid', 'block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 ' +
+                        (!open ? 'rotate-none' : 'rotate-[135deg] scale-110'))}>
+                      <Plus width={28} height={28} style={css('w-full h-full')} onClick={() => setMenuOpen(false)} />
+                    </Box>
+                </div>
+                <Box className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6">
+                    <Box className="text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2" onClick={() => setIsOpen(true)}>
+                        <span className='text-base pl-2 font-light'>Ask AI a question</span>
+                        <ArrowRight />
+                    </Box>
+                </Box>
+            </Box>
+            <Box className={
+                'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+                'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+                (isOpen ? 'flex' : 'hidden')
+            }>
+                <Card className='flex flex-col h-full w-full'>
+                    <div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
+                        <h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
+                        <Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
+                            <Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform' />
+                        </Button>
+                    </div>
+                    <iframe src="https://lux.chat/iframe" className='h-full' />
+                </Card>
+            </Box>
+
+        </>
+    )
+};
+
+export default MobileNavMenuAI;

package/src/site/components/header/mobile-nav-menu-item.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Box } from '@hanzo/ui'
+import Link from 'next/link'
+
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { LeftArrow, RightArrow } from '../icons'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+
+const MobileNavMenuItem: React.FC<{
+  link: LinkDefExtended,
+  setMenuOpen: (open: boolean) => void
+}> = ({
+  link,
+  setMenuOpen
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+      <>
+          <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
+              <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
+              <span className='flex-1'>{link.title}</span>
+              <RightArrow className='' />
+          </Box>
+          <Box className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+              <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+              <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
+                  <LeftArrow />
+                  <Box tag="span" className="text-white">{link.title}</Box>
+              </Box>
+              <Box className="flex flex-col">
+                  {link.childMenu?.map((menu, index) => {
+                      return (
+                          <Link href={menu.href}>
+                              <Box className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                                  <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
+                                  <span className='flex-1'>{menu.title}</span>
+                              </Box>
+                          </Link>
+                      )
+                  })}
+              </Box>
+          </Box>
+      </>
+  )
+}
+
+export default MobileNavMenuItem

package/src/site/components/header/mobile-nav-menu.tsx

@@ -0,0 +1,103 @@
+'use client'
+import React from 'react'
+import type { LinkDef } from '@hanzo/ui/types'
+import { Box, cn, css } from '@hanzo/ui'
+import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+import MobileNavMenuItem from './mobile-nav-menu-item'
+import AuthWidget from '../auth/widget'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+
+const MobileNav: React.FC<{
+  currentAs: string | undefined
+  links: LinkDefExtended[]
+  className?: string
+  commonItemClx?: string | ((def: LinkDef) => string)
+  setChatbotOpen: (open: boolean) => void
+  setMenuOpen: (open: boolean) => void
+  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
+}> = ({
+  currentAs,
+  links,
+  setMenuState,
+  className = '',
+  commonItemClx,
+  setChatbotOpen,
+  setMenuOpen
+}) => (
+    links.length > 0 ? (
+      <Box className={cn('flex flex-col h-full', className)}>
+        <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+        <Box className="flex flex-col flex-1 overflow-auto">
+          <Accordion type="single" collapsible className='w-full h-full'>
+            {links.map((el, index) => {
+              const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
+              const variant = el.variant ?? 'link'
+              let internalClx = variant === 'link'
+                ? ' text-muted hover:text-foreground active:text-accent rounded-none'
+                : ' min-w-0'
+
+              if (currentAs && currentAs === el.href) {
+                internalClx += ' pointer-events-none'
+                if (variant === 'link') {
+                  internalClx += ' text-accent'
+                }
+              }
+
+              if (!el.isAIMenu) {
+                return (
+                  <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0 px-6'>
+                    <AccordionTrigger className={cn(internalClx, itemClx, '')}>
+                      <Box className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
+                        {el.title}
+                      </Box>
+                      <ChevronDown style={css('w-4 h-4 mr-3')} />
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {el.childMenu && (
+                        <Box className="px-4">
+                          {Object.entries(el.childMenu.reduce((acc, child) => {
+                            const group = acc[child.groupName ? child.groupName : ""] || []
+                            group.push(child)
+                            acc[child.groupName ? child.groupName : ""] = group
+                            return acc
+                          }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
+                            <div key={groupName}>
+                              <Box className="mt-4 mb-4 font-light text-muted-1">{groupName}</Box>
+                              {children.map((child, childIndex) => (
+                                <Box key={childIndex} className="m-2">
+                                  <Box className="flex items-center py-1">
+                                    <span>
+                                      {child.icon && child.icon}
+                                    </span>
+                                    <Link
+                                      href={child.href}
+                                      target={child.newTab ? '_blank' : '_self'}
+                                      rel="noopener noreferrer"
+                                    >
+                                      <Box tag="span" className="text-muted-2 hover:underline ml-5 hover:text-primary">
+                                      {child.title}
+                                      </Box>
+                                    </Link>
+                                  </Box>
+                                </Box>
+                              ))}
+                            </div>
+                          ))}
+                        </Box>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                )
+              }
+            })}
+          </Accordion>
+        </Box>
+        <AuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+      </Box>
+    ) : null
+  );
+
+export default MobileNav;

package/src/site/components/header/mobile.tsx

@@ -0,0 +1,169 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { Box, cn } from '@hanzo/ui'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import Login from '../auth/login'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+import { Avatar, Bag } from '../icons'
+import { Logo } from '..'
+
+import MenuToggleButton from './mobile-menu-toggle-button'
+import BagButton from '../commerce/bag-button'
+import MobileBagDrawer from './mobile-bag-drawer'
+import NavMenu from './mobile-nav-menu'
+
+const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
+  'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' +
+  'sm:animate-in sm:zoom-in-90 '
+
+const MobileHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+  setChatbotOpen: (open: boolean) => void
+  noAuth?: boolean
+  noCommerce?: boolean
+}> = ({
+  currentAs,
+  links,
+  className = '',
+  setChatbotOpen,
+  noAuth=false,   // :aa TODO
+  noCommerce=false // :aa TODO
+}) => {
+    const cmmc = useCommerce()
+    const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
+    const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
+    const router = useRouter()
+
+    useEffect(() => {
+      if (menuState === 'bag' || bagDrawerOpen) {
+        sendGAEvent('view_cart', {
+          items: cmmc.cartItems.map((item) => ({
+            item_id: item.sku,
+            item_name: item.title,
+            item_category: item.familyId,
+            price: item.price,
+            quantity: item.quantity
+          })),
+          value: cmmc.cartTotal,
+          currency: 'USD',
+        })
+      }
+    }, [menuState, bagDrawerOpen])
+
+    const menuOpen = () => (menuState !== 'closed')
+
+    const onLoginChanged = (token: string) => {
+      // by def, menu was in state 'login'
+      if (!!token) { setMenuState('nav') }
+    }
+
+    const setMenuOpen = (open: boolean) => {
+      if (!open) {
+        setMenuState('closed')
+      }
+      else {
+        setMenuState('nav')
+      }
+    }
+
+    const handleCheckout = () => {
+      setMenuState('closed')
+      setBagDrawerOpen(false)
+      router.push('/checkout')
+    }
+
+    const openBag = () => {
+      if (menuOpen()) {
+        setMenuState('bag')
+      }
+      else {
+        setBagDrawerOpen(true)
+      }
+    }
+    // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
+    return (<>
+      <Box tag="header" id='MOBILE_HEADER' className={cn(
+        `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
+        className
+      )}>
+        {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
+        <div className='w-full h-full flex flex-row justify-between items-center font-bold pr-5'>
+          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='wordmark' />
+          {/* Not that key to the cross-fade effect 
+            is that this is **on top of** the logo. */}
+          {menuOpen() && (
+            <Box className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            'flex flex-row ' +
+            'bg-background animate-mobile-menu-open'
+          }>
+              <Avatar className='self-center ' />
+            </Box>
+          )}
+          <div className='flex gap-0 flex-row'>
+            <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
+            <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
+          </div>
+
+        </div>
+      </Box>
+      {!noCommerce && (
+        <MobileBagDrawer
+          className=''
+          open={bagDrawerOpen}
+          setOpen={setBagDrawerOpen}
+          handleCheckout={handleCheckout}
+        />
+      )}
+
+      {menuOpen() && (
+        <Box className={
+          'fixed top-0 left-0 w-full h-full ' +
+          // z must below header itself
+          'flex flex-column bg-background z-below-header animate-mobile-menu-open'
+        }>
+          {(!!!noAuth && menuState === 'login') ? (
+            <Login onSuccess={onLoginChanged} className='sm:animate-in sm:zoom-in-90 m-auto w-full max-w-sm px-8' />
+          ) : (
+            (!!!noCommerce && menuState === 'bag') ? (
+
+              <CartPanel
+                handleCheckout={() => { router.push('/checkout') }}
+                className={bagClx}
+                listClx='rounded-sm'
+                scrollAfter={6}
+                scrollHeightClx='h-[80vh]'
+                itemClx='mt-2'
+                totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-level-1'
+                buttonClx='max-w-[220px] flex-none'
+              >
+                <div className='flex flex-row items-center flex-none justify-center '>
+                  <Bag className='mr-2 relative w-4 h-5 fill-foreground ' />
+                  <p className='font-heading text-foreground text-default'>Your Bag</p>
+                </div>
+                <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none' />
+              </CartPanel>
+
+            ) : ( /* menuState === 'nav' */
+              <NavMenu
+                currentAs={currentAs}
+                links={links}
+                className='sm:animate-in sm:zoom-in-90 w-full'
+                commonItemClx='px-0 text-xl h-16 justify-start '
+                setMenuState={setMenuState}
+                setChatbotOpen={setChatbotOpen}
+                setMenuOpen={setMenuOpen}
+              />
+            )
+          )}
+        </Box>
+      ) /* menuOpen */}
+    </>)
+  }
+
+export default MobileHeader

package/src/site/components/header/theme-toggle.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@hanzo/ui/primitives'
+
+const ThemeToggle: React.FC = () => {
+
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
+    >
+      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
+      <Moon className='hidden h-5 w-5 dark:block' />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  )
+}
+
+export default ThemeToggle

package/src/site/components/icons/avatar.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Avatar: React.FC<LucideProps> = (props: LucideProps) => (
+    <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z" fill="white" />
+        <path d="M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z" fill="white" />
+    </svg>
+)
+
+export default Avatar

package/src/site/components/icons/bag-icon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
+    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
+  </svg>
+)
+
+export default BagIcon

package/src/site/components/icons/index.ts

@@ -0,0 +1,5 @@
+export { default as Avatar } from './avatar'
+export { default as Bag } from './bag-icon'
+export { default as LeftArrow } from './left-arrow'
+export { default as RightArrow } from './right-arrow'
+export { default as SocialIcon, type SocialIconProps } from './social-icon'

package/src/site/components/icons/left-arrow.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const LeftArrow: React.FC<LucideProps> = (props: LucideProps) => (   
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<path d="M1.06975 7.44328C0.679224 7.83381 0.679224 8.46697 1.06975 8.8575L7.43371 15.2215C7.82423 15.612 8.4574 15.612 8.84792 15.2215C9.23845 14.8309 9.23845 14.1978 8.84792 13.8072L3.19107 8.15039L8.84792 2.49354C9.23845 2.10301 9.23845 1.46985 8.84792 1.07932C8.4574 0.688798 7.82423 0.688798 7.43371 1.07932L1.06975 7.44328ZM1.77686 9.15039H2.49037V7.15039H1.77686V9.15039Z" fill="white"/>
+</svg>
+)
+
+export default LeftArrow
+

package/src/site/components/icons/right-arrow.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const RightArrow: React.FC<LucideProps> = (props: LucideProps) => (
+    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.33797 7.58293C8.72849 7.97346 8.72849 8.60662 8.33797 8.99715L1.97401 15.3611C1.58348 15.7516 0.950316 15.7516 0.559792 15.3611C0.169267 14.9706 0.169267 14.3374 0.559792 13.9469L6.21665 8.29004L0.559792 2.63318C0.169267 2.24266 0.169267 1.6095 0.559792 1.21897C0.950316 0.828447 1.58348 0.828447 1.97401 1.21897L8.33797 7.58293ZM7.63086 9.29004H6.91734V7.29004H7.63086V9.29004Z" fill="white"/>
+    </svg>
+)
+
+export default RightArrow

package/src/site/components/icons/social-icon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { SocialIcon as BaseSocialIcon } from 'react-social-icons'
+
+import { cn } from '@hanzo/ui'
+import './social-svg.css'
+
+interface SocialIconProps {
+    // one of these: https://github.com/couetilc/react-social-icons/tree/main/db
+  network: string
+  size: number
+  className?: string
+}
+
+const SocialIcon: React.FC<SocialIconProps> = ({
+  network,
+  size,
+  className = ''
+}) => (
+  <BaseSocialIcon 
+    network={network}
+    as='div' 
+      // This is set up so the enclosing element sets the color.
+      // For example, something like 'color-foreground hover:color-muted-1' 
+    className={cn('color-inherit', className)}
+    bgColor='transparent' 
+    fgColor='currentColor'
+    style={{height: size, width: size, flex: 'none' }} 
+  />
+)
+
+export {
+  type SocialIconProps,
+  SocialIcon as default
+}

package/src/site/components/icons/social-svg.css

@@ -0,0 +1,3 @@
+.social-icon svg {
+    transform: scale(1.25);
+}

package/src/site/components/index.ts

@@ -0,0 +1,26 @@
+export { default as AccessCodeInput } from './access-code-input'
+export { default as ChatWidget } from './chat-widget'
+export { default as ContactDialog } from './contact-dialog'
+export { default as Copyright} from './copyright'
+export { default as Footer } from './footer'
+export { default as Header } from './header'
+export * as Icons from './icons'
+export { default as Logo, type LogoVariant } from './logo'
+export { default as Main } from './main'
+export { default as MiniChart } from './mini-chart'
+export { default as NotFound } from './not-found'
+
+export { default as Auth } from './auth/provider'
+export { default as Login } from './auth/login'
+export { default as BackButton } from './back-button'
+export { default as BuyDrawer } from './commerce/drawer'
+export { default as DrawerMargin } from './drawer-margin'
+export { default as BuyButton } from './commerce/buy-button'
+export { default as CheckoutButton } from './commerce/checkout-button'
+export { default as CheckoutPanel } from './commerce/checkout-panel'
+export { default as LoginPanel } from './auth/login-panel'
+export { default as Analytics } from './analytics'
+export { default as Tooltip } from './tooltip';
+
+export { default as EmblaAutoplay } from 'embla-carousel-autoplay'
+