@hanzo/ui 0.5.23 → 1.0.8

package/common/drawer-menu.tsx

@@ -9,12 +9,16 @@ import { Sheet, SheetContent, SheetTrigger } from '../primitives/sheet'
 const DrawerMenu: React.FC<PropsWithChildren & {
   trigger: ReactNode
   className?: string
-  showLogo?: boolean
+  showLogo?: boolean,
+  propogate?: boolean
+  asChild?: boolean
 }> = ({
   trigger,
   children,
   className='',
-  showLogo=true
+  showLogo=true,
+  propogate=true,
+  asChild=false
 }) => {
 
   const [open, setOpen] = React.useState(false)
@@ -31,14 +35,13 @@ const DrawerMenu: React.FC<PropsWithChildren & {
 
   return (
     <Sheet open={open} onOpenChange={setOpen} >
-      <SheetTrigger>
+      <SheetTrigger className={className} asChild={asChild}>
         {trigger}
       </SheetTrigger>
       <SheetContent 
         side="right" 
-        className={className} 
         closeButtonClass='text-inherit opacity-90' 
-        onClick={onAction}
+        onClick={propogate ? onAction : () => {}}
         closeElement={<LucideX className='h-6 w-6 text-inherit'/>}
         centerElement={showLogo ? <Logo size='xs' className='' /> : null}
       >

package/common/header/index.tsx

@@ -19,36 +19,45 @@ const Header: React.FC<{
   const allElements = (featured) ? [...common, ...featured] : common
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
-  const navItemClx = 'font-nav h-8 tracking-[-0.3px] !text-[13px]/[13px]'
+  const navItemClx = 'font-nav h-8 !text-[13px]/[13px]'
 
   return (
     <header className={cn('bg-background sticky z-10 top-0 ', className)} >
       {/* md or larger */}
-      <div className="hidden md:flex flex-row md:h-[80px] items-center justify-between px-[32px] 2xl:mx-auto max-w-screen-2xl">
+      <div className={
+        'hidden md:flex flex-row md:h-[80px] items-center justify-between ' +
+        'px-[32px] 2xl:mx-auto max-w-screen-2xl'
+      }>
         <Logo size='md' className='hidden lg:flex' key='two'/>
         <Logo size='sm' className='hidden md:flex lg:hidden' key='one'/>
         {/* md or larger */}
-        <NavItems 
-          currentAs={siteDef.currentAs}
-          items={allElements} 
-          className='hidden md:flex md:gap-4 lg:justify-between lg:gap-7 ' 
-          itemClx={navItemClx} 
-          key='three'
-        />
+        <div className='flex gap-7 items-center'>
+          <NavItems 
+            currentAs={siteDef.currentAs}
+            items={allElements} 
+            className='hidden md:flex md:gap-4 lg:justify-between lg:gap-7 ' 
+            itemClx={navItemClx} 
+            key='three'
+          />
+          {siteDef.nav.cart}
+        </div>
       </div>
       {/* smaller than md: mobile style drawer menu */}
       <div className="flex md:hidden h-[44px] items-center justify-between px-2">
         <Logo size='sm' />
-        <DrawerMenu 
-          className='p-0 text-primary' // ui has 'text-inherit', so need this for close buttons to appear.
-          trigger={<Icons.burger className='h-7 w-7'/>}
-        >
-          <MobileNav 
-            siteDef={siteDef}
-            className='pt-12' 
-            commonItemClx='px-10 text-l h-10 justify-start border-b rounded-none' 
-          />
-        </DrawerMenu>
+        <div className='flex gap-4'>
+          {siteDef.nav.cart}
+          <DrawerMenu 
+            className='p-0 text-primary' // ui has 'text-inherit', so need this for close buttons to appear.
+            trigger={<Icons.burger className='h-7 w-7'/>}
+          >
+            <MobileNav 
+              siteDef={siteDef}
+              className='pt-12' 
+              commonItemClx='px-10 text-l h-10 justify-start border-b rounded-none' 
+            />
+          </DrawerMenu>
+        </div>
       </div>
     </header>
   )

package/next/analytics/fpixel.ts

@@ -7,10 +7,12 @@ declare global {
 export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
 
 export const pageview = () => {
+    // @ts-ignore
   window.fbq('track', 'PageView')
 }
 
 // https://developers.facebook.com/docs/facebook-pixel/advanced/
 export const event = (name: string, options = {}) => {
+    // @ts-ignore
   window.fbq('track', name, options)
 }

package/next/not-found-content.mdx

@@ -1,4 +1,5 @@
 ### ...Huh?
 #### Sorry, we're fresh out of those.
 <br/>
-#### ...try something from the [Home Page](/)?
+#### ...try something from the [Home Page](/)?
+

package/next/not-found.tsx

@@ -12,7 +12,7 @@ const NotFound: React.FC<{
 }>  = ({
   siteDef
 }) => (<>
-  <Main className='h-[700px]'>
+  <Main className='xs:h-[100svh] xs:px-8 sm:px-10 sm:h-[700px]'>
     <ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
       <NotFoundMDX />
     </ApplyTypography>

package/next/root-layout.tsx

@@ -1,18 +1,20 @@
 import React, { type PropsWithChildren } from 'react'
 
+import type { Viewport } from 'next'
+
 import Header from '../common/header'
 import type { SiteDef } from '../types'
 import getAppRouterBodyFontClasses from './get-app-router-font-classes'
 import { FacebookPixelHead, FacebookPixel } from './analytics/pixel-analytics'
 import { GoogleAnalytics } from '@next/third-parties/google'
 
-  // Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
+// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
 const viewport = {
   themeColor: [
     { media: '(prefers-color-scheme: light)', color: 'white' },
     { media: '(prefers-color-scheme: dark)', color: 'black' },
   ],
-}
+} satisfies Viewport
 
 /*
   These '.variable' fields are actually autogenerate css classnames that *define* the actual

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "0.5.23",
+  "version": "1.0.8",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -11,7 +11,7 @@
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hanzoai/ui.git",
+    "url": "git+https://github.com/hanzoai/react-sdk.git",
     "directory": "pkgs/hanzo-ui"
   },
   "files": [
@@ -46,6 +46,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@next/third-parties": "^14.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -53,6 +54,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
@@ -60,6 +62,8 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -76,20 +80,17 @@
     "react-intersection-observer": "^9.7.0",
     "react-social-icons": "^6.4.0",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.6",
     "tailwindcss-interaction-media": "^0.1.0",
     "validator": "^13.11.0",
     "zod": "3.21.4"
   },
   "peerDependencies": {
-    "@next/mdx": "^14.1.0",
     "next": "^14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@mdx-js/esbuild": "^3.0.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@types/facebook-pixel": "^0.0.30",
@@ -98,11 +99,7 @@
     "@types/mdx": "^2.0.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.16",
-    "path": "^0.12.7",
-    "postcss": "^8.4.33",
-    "postcss-import": "^16.0.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "5.3.3"
   }
 }

package/primitives/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+"use client"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+const AspectRatio = AspectRatioPrimitive.Root
+
+export default AspectRatio

package/primitives/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "../util"
 
 const variant = {
   primary: "bg-primary text-primary-fg hover:bg-primary-hover font-nav whitespace-nowrap not-typography",
-  secondary: "bg-secondary text-secondary-fg hover:bg-secondary/80 font-nav whitespace-nowrap not-typography",
+  secondary: "bg-secondary text-secondary-fg hover:bg-secondary-hover font-nav whitespace-nowrap not-typography",
   outline: "text-foreground bg-background border border-muted-4 hover:bg-level-1 hover:text-accent hover:border-accent font-nav whitespace-nowrap not-typography",
   destructive: "bg-destructive text-destructive-fg font-sans whitespace-nowrap hover:bg-destructive-hover",
   ghost: "text-foreground hover:bg-level-1 hover:text-accent whitespace-nowrap font-sans ",
@@ -16,25 +16,38 @@ const variant = {
 
 const size = {
   link: '',
-  sm: "h-9 px-3 text-xs ",
+  xs: "h-8 px-2 text-xs",
+  sm: "h-9 px-3 text-xs",
   square: 'h-10 py-2 px-2 text-sm aspect-square',
   default: "h-10 py-2 px-4 text-sm lg:min-w-[220px]",
-  lg: "h-10 px-8 rounded-lg text-sm md:text-base min-w-0 md:min-w-[260px] lg:min-w-[300px]",
+  lg: "h-10 px-8 text-sm md:text-base min-w-0 md:min-w-[260px] lg:min-w-[300px]",
   icon: "h-10 w-10",
 }
 
+const rounded = {
+  full: 'rounded-full',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  none: ''
+}
+
+
 const buttonVariants = cva(
-  "flex items-center justify-center rounded-md font-medium transition-colors " +
+  "flex items-center justify-center font-medium transition-colors " +
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
   "disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
   {
     variants: {
       variant,
-      size
+      size,
+      rounded
     },
     defaultVariants: {
       variant: "primary",
       size: "default",
+      rounded: 'md'
     },
   }
 )
@@ -50,11 +63,11 @@ interface ButtonProps extends
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, rounded, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, rounded }), className )}
         ref={ref}
         {...props}
       />

package/primitives/dialog.tsx

@@ -50,7 +50,7 @@ const DialogClose = React.forwardRef<
     <DialogPrimitive.Close
         ref={ref}
         className={cn(
-            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-muted transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center",
+            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-muted transition hover:text- focus:outline-none rounded-full items-center",
             className
         )}
         {...props}
@@ -71,7 +71,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-secondary-800 p-4 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-sm sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-level-1 p-4 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-sm sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
                 className
             )}
             {...props}
@@ -118,7 +118,7 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
         ref={ref}
         className={cn(
-            "text-lg font-semibold leading-none tracking-tight text-primary-text",
+            "text-lg font-semibold leading-none tracking-tight text-foreground",
             className
         )}
         {...props}
@@ -132,7 +132,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={cn("text-sm text-secondary-text", className)}
+        className={cn("text-sm text-muted", className)}
         {...props}
     />
 ))

package/primitives/index.ts

@@ -124,11 +124,18 @@ export {
   AvatarFallback 
 } from './avatar'
 
+export { Toggle, toggleVariants } from './toggle'
+export { ToggleGroup, ToggleGroupItem } from './toggle-group'
+
+
 export { ScrollArea, ScrollBar } from './scroll-area' 
 
 export { Toaster } from './toaster'
 export { useToast, toast } from './use-toast'
+export { RadioGroup, RadioGroupItem } from './radio-group'
 
+export { default as AspectRatio } from './aspect-ratio'
+export { default as Badge } from './badge'
 export { default as VideoPlayer } from './video-player'
 export { default as YouTubeEmbed } from './youtube-embed'
 export { default as Switch } from './switch' 
@@ -141,4 +148,5 @@ export { default as Skeleton } from './skeleton'
 export { default as InlineIcon } from './inline-icon' 
 export { default as NavItems} from './nav-items'
 export { default as Main } from './main'
+export { default as ListBox } from './list-box'
 

package/primitives/list-box.tsx

@@ -0,0 +1,74 @@
+'use client'
+import React from 'react'
+import { cn } from '../util'
+
+function Item<T>({
+  value,
+  label,
+  className,
+  onClick,
+  first=false,
+  last=false,
+  selected=false
+}:{
+  value: T
+  label: string
+  className: string
+  onClick: (val: T) => void
+  first?: boolean
+  last?: boolean
+  selected?: boolean
+}) {
+
+  return (
+    <div 
+      className={cn(
+        'font-normal text-muted-1 px-3 py-1 cursor-pointer hover:text-foreground ', 
+        last ? '' : 'border-b', 
+        selected ? 'font-semibold text-accent hover:text-accent' : '', 
+        className
+      )} 
+      onClick={() => {onClick(value)}}
+    >
+      <span>{label}</span>
+    </div>
+  )
+}
+
+function ListBox<T>({
+  values,
+  labels,
+  onValueChange,
+  value,
+  isEqual,
+  outClx = '',
+  itemClx = '' 
+}:{
+  values: T[]
+  labels: string[]
+  onValueChange: (val: T) => void
+  value: T | undefined
+  isEqual: (v1: T, v2: T) => boolean
+  outClx?: string
+  itemClx?: string 
+}): JSX.Element {
+
+  return (
+    <div className={cn('border rounded-md select-none', outClx)} >
+    {values.map((val, i) => (
+      <Item<T> 
+        value={val} 
+        label={labels[i]} 
+        onClick={onValueChange} 
+        className={itemClx}
+        first={i === 0}
+        last={i === values.length - 1}
+        selected={value && isEqual(val, value)}
+        key={labels[i]}
+      />
+    ))}
+    </div>
+  )
+}
+
+export default ListBox

package/primitives/main.tsx

@@ -5,11 +5,15 @@ const c = 'max-w-screen-2xl 2xl:w-[1500px] lg:mx-auto ' +
   'flex flex-col justify-start items-stretch ' +
   'p-4 md:px-6 lg:px-8 '
 
-const Main: React.FC<PropsWithChildren & { className?: string }> = ({
+const Main: React.FC<PropsWithChildren & { 
+  id?: string
+  className?: string 
+}> = ({
   children,
   className='',
+  id
 }) => (
-  <main className={cn(c, className)}>
+  <main id={id ?? 'HZO_UI_MAIN'} className={cn(c, className)}>
     {children}
   </main>
 )

package/primitives/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "../util"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-muted text-foreground ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/primitives/sheet.tsx

@@ -32,7 +32,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300',
+  'fixed z-50 gap-4 bg-background p-3 sm:p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300',
   {
     variants: {
       side: {

package/primitives/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      className={cn('animate-pulse rounded-md bg-level-2', className)}
       {...props}
     />
   )

package/primitives/toggle-group.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '../util'
+import { toggleVariants } from './toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+  rounded: 'md'
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, rounded, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size, rounded }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, rounded, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+          rounded: context.rounded || rounded,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/primitives/toggle.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../util'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center text-sm font-medium ' + 
+  'ring-offset-background ' + 
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' + 
+  'focus-visible:ring-offset-2 disabled:pointer-events-none ' +
+  'active:bg-level-3 active:text-accent ',
+  {
+    variants: {
+      variant: {
+        default: 'text-muted-1 hover:text-accent ' + 
+          'data-[state=off]:bg-level-1 hover:data-[state=off]:text-foreground ' + 
+          'data-[state=on]:text-foreground data-[state=on]:bg-level-3  ' + 
+          'data-[state=on]:hover:bg-level-3 ',
+
+        outline: 'border border-muted-3 text-muted-1 ' +
+          'data-[state=off]:bg-level-1 hover:data-[state=off]:text-foreground ' + 
+          'data-[state=on]:bg-level-3 data-[state=on]:border-muted data-[state=on]:text-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-5',
+      },
+      rounded: {
+        full: 'rounded-full',
+        sm: 'rounded-sm',
+        lsm: 'rounded-l-sm',
+        rsm: 'rounded-r-sm',
+        md: 'rounded-md',
+        lmd: 'rounded-l-md',
+        rmd: 'rounded-r-md',
+        lg: 'rounded-lg',
+        llg: 'rounded-l-lg',
+        rlg: 'rounded-r-lg',
+        xl: 'rounded-xl',
+        lxl: 'rounded-l-xl',
+        rxl: 'rounded-r-xl',
+        none: 'rounded-none'
+      }
+      
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      rounded: 'md'
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, rounded, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, rounded} ), className  )}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/tailwind/fonts.tailwind.ts

@@ -17,7 +17,7 @@ export const fontFamily = (ignoreTheme: any): {
 }
 
 export const fontSize = {
-  xxs: ['0.6.5rem', { lineHeight: '0.8rem' }],    // very fine print               
+  xxs: ['0.65rem', { lineHeight: '0.8rem' }],    // very fine print               
   xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
   sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)
   base: ['1rem', { lineHeight: 1.4 }],     

package/tailwind/tailwind.config.base.js

@@ -611,6 +611,7 @@ export default {
       ...breakpoints(theme('screens')),
     }),
     minHeight: {
+      ...spacing,
       0: '0px',
       full: '100%',
       screen: '100vh',
@@ -618,13 +619,15 @@ export default {
       max: 'max-content',
       fit: 'fit-content',
     },
-    minWidth: {
+    minWidth: ({ theme, breakpoints }) => ({
+      ...spacing,
       0: '0px',
       full: '100%',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
+      ...breakpoints(theme('screens')),
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -769,7 +772,10 @@ export default {
       2: '2',
     },
     supports: {},
-    data: {},
+    data: {
+      on: 'state~="on"',
+      off: 'state~="off"',
+    },
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
     textDecorationThickness: {

package/types/site-def.ts

@@ -7,7 +7,9 @@ interface SiteDef {
       /** common elements (will auto-select currentAs if it's provide) */
       /** optional feature element. right-most after 'elements' (any min-w is ignored) */
     common: LinkDef[]       
-    featured?: LinkDef[]     
+    featured?: LinkDef[]
+    auth?: boolean
+    cart?: React.ReactNode
   }
 
     /**