@hanzo/commerce 7.6.5 → 7.7.0

package/components/add-to-cart-widget.tsx

@@ -3,9 +3,12 @@ import React, { useEffect, useRef } from 'react'
 import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
-
+import {
+  Button,
+  buttonVariants,
+  cn,
+  sx,
+} from '@hanzo/ui'
 import Icons from './Icons'
 import type { LineItem } from '../types'
 import { sendFBEvent, sendGAEvent } from '../util/analytics'
@@ -48,7 +51,6 @@ const AddToCartWidget: React.FC<{
   // only for as long as some OTHER file in whatever the consumer scans spells it
   // literally. Tailwind reads source text; a template literal is not a class
   // name, so this one was borrowing a rule it did not ask for.
-  const ROUNDED_VAL = 'lg'          // the `rounded=` variant prop on Button
   const ROUNDED_CLX = ' rounded-lg ' // the class
 
   const ghost = variant === 'minimal'
@@ -115,7 +117,7 @@ const AddToCartWidget: React.FC<{
   return ( item.isInCart ? (
     <div className={cn(
       'flex flex-row items-stretch justify-between ',
-        // should match 'xs' and 'default' button heights
+        // should match 'sm' and 'default' button heights
       (ghost || priSmaller ? 'h-8' : 'h-9'),
       ROUNDED_CLX,
       (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), 
@@ -124,9 +126,9 @@ const AddToCartWidget: React.FC<{
     )}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
-        size={ghost || priSmaller ? 'xs' : 'default'}
+        size={ghost || priSmaller ? 'sm' : 'default'}
         variant={primary || priSmaller ? 'primary' : 'ghost'}
-        rounded={ghost ? 'full' : ROUNDED_VAL}
+        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-start group', 
           (ghost || priSmaller ? 'px-1' : 'px-2'), 
@@ -155,10 +157,10 @@ const AddToCartWidget: React.FC<{
         itemProp='potentialAction'
         itemScope
         itemType='https://schema.org/AddAction'
-        size={ghost || priSmaller ? 'xs' : 'default'}
+        size={ghost || priSmaller ? 'sm' : 'default'}
 
         variant={primary || priSmaller ? 'primary' : 'ghost'}
-        rounded={ghost ? 'full' : ROUNDED_VAL}
+        {...sx(ghost ? 'rounded-full' : 'rounded-lg')}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-end group', 
           (ghost || priSmaller ? 'px-1' : 'px-2'), 
@@ -178,9 +180,9 @@ const AddToCartWidget: React.FC<{
       itemProp='potentialAction'
       itemScope
       itemType='https://schema.org/AddAction'
-      size={ghost || priSmaller ? 'xs' : 'default'}
+      size={ghost || priSmaller ? 'sm' : 'default'}
       variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')}
-      rounded={ROUNDED_VAL}
+      {...sx('rounded-lg')}
       className={cn(buttonClx, className)}
       onClick={inc}
     >

package/components/buy/buy-card.tsx

@@ -3,9 +3,11 @@ import React, { useRef, useEffect, type ComponentType } from 'react'
 import { reaction, type IReactionDisposer } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
-
+import {
+  cn,
+  ApplyTypography,
+  MediaStack,
+} from '@hanzo/ui'
 import type { 
   ItemSelectorProps, 
   ItemSelectorCompProps,
@@ -242,7 +244,7 @@ const BuyCard: React.FC<{
       <TitleArea title={famTitle} clx=''/>
     )}
     {(cmmc.currentItem && showItemMedia) && (
-      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} className={(scroll ? 'shrink-0' : '')}/>
     )} 
     {itemsToShow && (
       <Selector 

package/components/buy/carousel-buy-card.tsx

@@ -7,8 +7,9 @@ import React, {
 } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
+import {
+  cn,
+} from '@hanzo/ui'
 import type { 
   ItemSelectorProps, 
   LineItem, 

package/components/buy/multi-family/all-variants-carousel.tsx

@@ -3,9 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
 import {
+  cn,
   ApplyTypography,
   type CarouselApi,
   Carousel,
@@ -14,8 +13,7 @@ import {
   CarouselPrevious,
   CarouselNext,
   MediaStack,
-} from '@hanzo/ui/primitives'
-
+} from '@hanzo/ui'
 import type { MultiFamilySelectorProps, LineItem } from '../../../types'
 import { 
   formatCurrencyValue, 
@@ -238,7 +236,7 @@ const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({
           <CarouselContent>
           {r.current.items.map((item) => (
             <CarouselItem key={item.sku} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
-              <MediaStack media={item} constrainTo={mediaConstraint} clx='my-4'/>
+              <MediaStack media={item} constrainTo={mediaConstraint} className='my-4'/>
             </CarouselItem>
           ))}
           </CarouselContent>

package/components/buy/multi-family/family-carousel/index.tsx

@@ -1,17 +1,15 @@
 'use client'
 import React, { useCallback, useRef } from 'react'
 
-import { cn } from '@hanzo/ui/util'
-
 import {
+  cn,
   type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-} from '@hanzo/ui/primitives'
-
+} from '@hanzo/ui'
 import type { MultiFamilySelectorProps } from '../../../../types'
 
 import FamilySlide from './slide'

package/components/buy/multi-family/family-carousel/slide.tsx

@@ -3,14 +3,13 @@ import React from 'react'
 
 import {
   ApplyTypography,
-  MediaStack
-} from '@hanzo/ui/primitives'
+  MediaStack,
+  cn,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
 import { ButtonItemSelector } from '../../..'
-import { cn } from '@hanzo/ui/util'
-
 const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
   family: Family
   mediaConstraint: Dimensions

package/components/buy/single-family-selector.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { MediaStack, Skeleton } from '@hanzo/ui/primitives'
+import {
+  MediaStack,
+  Skeleton,
+  cn,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import { useCommerce } from '../..'
@@ -9,9 +13,6 @@ import { useCommerce } from '../..'
 import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
 import TitleAndByline from './title-and-byline'
 import { accessItemOptions } from '../../util'
-import { cn } from '@hanzo/ui/util'
-
-
 const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
 
 const SingleFamilySelector: React.FC<{
@@ -61,7 +62,7 @@ const SingleFamilySelector: React.FC<{
       <MediaStack 
         media={cmmc.currentItem!} 
         constrainTo={mediaConstraint} 
-        clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
+        className={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
       />
     ) : (
       <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>

package/components/buy/title-and-byline.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 
-import { ApplyTypography } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import {
+  ApplyTypography,
+  cn,
+} from '@hanzo/ui'
 const TitleAndByline: React.FC<{
   title: string | undefined
   byline?: string | undefined

package/components/cart/cart-panel/cart-line-item.tsx

@@ -3,9 +3,10 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import { Image } from '@hanzo/ui/primitives'
-
+import {
+  cn,
+  MediaStack,
+} from '@hanzo/ui'
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../add-to-cart-widget'
@@ -53,7 +54,7 @@ const CartLineItem: React.FC<{
     >
       <div className='flex flex-row justify-between items-center gap-1' >
         {item.img ? (
-          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
+          <MediaStack media={item} constrainTo={{w: imgSizePx, h: imgSizePx}} />
         ) : ( // placeholder so things align
           <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
         )}

package/components/cart/cart-panel/index.tsx

@@ -3,9 +3,12 @@ import React, { useLayoutEffect, type PropsWithChildren } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { Button, ScrollArea } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import {
+  Button,
+  ScrollArea,
+  cn,
+  sx,
+} from '@hanzo/ui'
 import type { LineItem } from '../../../types'
 import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
@@ -141,7 +144,7 @@ const CartPanel: React.FC<PropsWithChildren & {
         <Button 
           onClick={_handleCheckout} 
           variant='primary' 
-          rounded='lg' 
+          {...sx('rounded-lg')}
           className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
         >
           Checkout

package/components/cart/cart-panel/promo-code.tsx

@@ -9,18 +9,14 @@ import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check } from 'lucide-react'
 
-import { 
-  Button, 
-  Input 
-} from '@hanzo/ui/primitives'
-
 import {
+  Button,
+  Input,
   Form,
   FormControl,
   FormField,
   FormItem,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import { useCommerce } from '../../../service/context'
 import type { Promo } from '../../../types'
 import getPromoFromApi from '../../../util/promo-codes'

package/components/cart/cart-panel/total-area.tsx

@@ -2,8 +2,9 @@
 import React, { Suspense } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-
+import {
+  cn,
+} from '@hanzo/ui'
 import { formatCurrencyValue } from '../../../util'
 import PromoCode from './promo-code'
 import { useCommerce } from '../../../service/context'

package/components/checkout/payment-step-form/cc-button.tsx

@@ -1,5 +1,6 @@
-import { Button } from '@hanzo/ui/primitives'
-
+import {
+  Button,
+} from '@hanzo/ui'
 import PaymentMethods from './card-icon-row'
 import type { PropsWithChildren } from 'react'
 

package/components/checkout/payment-step-form/contact-form.tsx

@@ -1,13 +1,11 @@
-import { Input } from '@hanzo/ui/primitives'
-
 import {
+  Input,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import type { ContactFormType } from '../../../types'
  
 const ContactForm: React.FC<{

package/components/checkout/payment-step-form/index.tsx

@@ -6,8 +6,12 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
-
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@hanzo/ui'
 import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'

package/components/checkout/payment-step-form/methods/bank-transfer.tsx

@@ -3,8 +3,10 @@
 import React from 'react'
 import { Copy } from 'lucide-react'
 
-import { Button, toast } from '@hanzo/ui/primitives'
-
+import {
+  Button,
+  toast,
+} from '@hanzo/ui'
 import type { PaymentMethodComponentProps } from '../../../../types'
 
 import ContactForm from '../contact-form'

package/components/checkout/payment-step-form/methods/card.tsx

@@ -11,10 +11,8 @@ import {
   Button,
   Separator,
   Skeleton,
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
+  cn,
+} from '@hanzo/ui'
 import { useCommerce } from '../../../../service/context'
 import { processSquareCardPayment } from '../../../../util'
 import type { PaymentMethodComponentProps } from '../../../../types'

package/components/checkout/payment-step-form/methods/crypto.tsx

@@ -6,18 +6,17 @@ import { observer } from 'mobx-react-lite'
 
 import { ethers } from 'ethers'
 
-import { 
-  Button, 
-  Input, 
-  Select, 
-  SelectContent, 
-  SelectGroup, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue, 
-  toast 
-} from '@hanzo/ui/primitives'
-
+import {
+  Button,
+  Input,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  toast,
+} from '@hanzo/ui'
 import Eth from '../crypto-icons/eth'
 import { useCommerce } from '../../../../service/context'
 import type { PaymentMethodComponentProps } from '../../../../types'
@@ -178,7 +177,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
         <div className='flex gap-2 grid grid-cols-3'>
           <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
             <SelectTrigger>
-              <SelectValue defaultValue='eth' />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>

package/components/checkout/shipping-step-form.tsx

@@ -11,17 +11,13 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@hanzo/ui/primitives'
-
-import {
+  SelectValue,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
-} from '@hanzo/ui/form'
-
+} from '@hanzo/ui'
 import { useCommerce } from '../../service/context'
 
 import countries from '../../util/countries'

package/components/item/product-card.tsx

@@ -1,16 +1,14 @@
 import React from 'react'
 
-import { 
+import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
-  MediaStack
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
+  MediaStack,
+  cn,
+} from '@hanzo/ui'
 import { formatCurrencyValue } from '../../util'
 import type { LineItem } from '../../types'
 
@@ -29,7 +27,10 @@ const ProductCard: React.FC<ProductCardProps> = ({
     itemScope
     itemType='https://schema.org/Product'
     className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-    {...props}
+    // A div's whole attribute set, spread onto a cross-platform component that
+    // names a few of them differently. The element a Card renders IS a div, and
+    // it is the one these reach.
+    {...(props as object)}
   >
     {/* Standard schema.org Product microdata. Neutral and analytics-agnostic:
         track.js `annotate`, GA4 Merchant, or any reader picks up the item with
@@ -38,7 +39,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
     <meta itemProp='name' content={item.title} />
     <meta itemProp='sku' content={item.sku} />
     <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      <MediaStack media={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+      <MediaStack media={item} constrainTo={{w: 700, h:700}} className='p-6' />
     </CardHeader>
     <CardContent className='grid gap-2.5 p-4'>
       <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>

package/components/item-selector/button.tsx

@@ -4,13 +4,13 @@ import { observer } from 'mobx-react-lite'
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 
-import { 
-  Image, 
-  Label, 
-  RadioGroup, 
-  ScrollArea 
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import {
+  Label,
+  RadioGroup,
+  ScrollArea,
+  cn,
+  MediaStack,
+} from '@hanzo/ui'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorProps, LineItem } from '../../types'
@@ -70,7 +70,7 @@ const ImageRadioGroupItem = React.forwardRef<
       value={item.sku}
     >
       {img ? (
-        <Image def={img} constrainTo={constrainTo} preload className=''/>
+        <MediaStack media={{img}} constrainTo={constrainTo} />
       ) : ( // placeholder so things align
         <div style={{height: constrainTo.h, width: constrainTo.w}}/>
       )}

package/components/item-selector/carousel/index.tsx

@@ -3,10 +3,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import type { Dimensions } from '@hanzo/ui/types'
-
 import {
+  cn,
   ApplyTypography,
   type CarouselOptions,
   type CarouselApi,
@@ -16,7 +14,8 @@ import {
   CarouselPrevious,
   CarouselNext,
   MediaStack,
-} from '@hanzo/ui/primitives'
+} from '@hanzo/ui'
+import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorProps, LineItem } from '../../../types'
 import { formatCurrencyValue, accessItemOptions } from '../../../util'
@@ -43,7 +42,7 @@ const ItemSlide: React.FC<{
   clx=''
 }) => (
   <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
-    <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
+    <MediaStack media={item} constrainTo={constrainTo} className='my-4' />
   </CarouselItem>
 ) 
 

package/components/item-selector/carousel/slider.tsx

@@ -1,8 +1,9 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 
-import { Slider } from '@hanzo/ui/primitives'
-
+import {
+  Slider,
+} from '@hanzo/ui'
 const ItemCarouselSlider: React.FC<{
   clx?: string
   setScrollTo: (scrollTo: (index: number) => void) => void
@@ -22,11 +23,7 @@ const ItemCarouselSlider: React.FC<{
 
   return ( 
     <Slider 
-      className={clx} 
-      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
-      trackBgClx='bg-level-3'
-      rangeBgClx='bg-level-3'
-      thumbSlidingClx='bg-muted-2' 
+      className={clx}   
       defaultValue={[0]} 
       min={0}
       max={numStops - 1} 

package/components/item-selector/quantity-indicator.tsx

@@ -4,7 +4,9 @@ import { observer } from 'mobx-react-lite'
 
 import { type LucideProps } from 'lucide-react'
 
-import { cn } from '@hanzo/ui/util'
+import {
+  cn,
+} from '@hanzo/ui'
 import type { LineItem } from '../../types'
 
   // Generalize this.