@hanzo/ui 4.8.5 → 4.9.0

package/blocks/def/bullet-cards-block.ts

@@ -1,22 +0,0 @@
-import type Block from './block'
-
-import type { BulletItem, GridDef } from '../../types'
-
-interface BulletCardsBlock extends Block {
-  blockType: 'bullet-cards'
-    /**
-     * no-card-border
-     * mobile-small-text
-     * borders-muted-1 / borders-muted-3 
-     * default: 2 
-     */
-  specifiers?: string
-  grid: GridDef
-  cards: BulletItem[]
-    /** in px */
-  iconSize?: number 
-}
-
-export {
-  type BulletCardsBlock as default
-}

package/blocks/def/card-block.ts

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import type CTABlock from './cta-block'
-import type Block from './block'
-import type ImageBlock from './image-block'
-import type VideoBlock from './video-block'
-
-interface CardBlock extends Block {
-  blockType: 'card'
-  specifiers?: string // 'media-left' or 'appear-disabled' or 'no-borders', etc... can be combined
-  title?: string
-  byline?: string
-  icon?: React.ReactNode // for title area
-  iconAfter?: boolean
-  media?: ImageBlock | VideoBlock // TODO: Media Stack
-  content?: React.ReactNode
-  cta?: CTABlock
-}
-
-export {
-  type CardBlock as default
-}

package/blocks/def/carte-blanche-block.ts

@@ -1,21 +0,0 @@
-
-import type Block from './block'
-import type CTABlock from './cta-block'
-import type EnhHeadingBlock from './enh-heading-block'
-
-interface CarteBlancheBlock extends Block {
-  blockType: 'carte-blanche'
-    // big-padding
-    // no-outer-borders
-    // no-internal-borders
-    // style-ghost (no-internal-borders, no outer border, no padding)
-  specifiers?: string 
-  topContent?: Block[] 
-  heading?: EnhHeadingBlock
-  content?: Block[] 
-  cta?: CTABlock
-}
-
-export {
-  type CarteBlancheBlock as default
-}

package/blocks/def/cta-block.ts

@@ -1,19 +0,0 @@
-import type { LinkDef, ButtonDef } from '../../types'
-import type Block from './block'
-
-interface CTABlock extends Block {
-  blockType: 'cta'
-    // fill: fills the parent width with the elements
-    // left / right: (>= md) left or right justify the elements (default is center)
-    // mobile-2-columns: mobile defaults to rendering each element full width,
-    //   on it's own line. This renders them in two columns instead. 
-    // mobile-center-first-if-odd: if (mobile-2-columns) and length is odd, 
-    //   default is to center last 
-    // mobile-odd-full-width: fills the full two columns w the centered element
-  specifiers?: string
-  elements: (LinkDef | ButtonDef)[]
-}
-
-export {
-  type CTABlock as default
-}

package/blocks/def/element-block.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-import type Block from './block'
-
-interface ElementBlock extends Block {
-  blockType: 'element'
-  element: React.ReactNode | JSX.Element
-}
-
-export {
-  type ElementBlock as default 
-}

package/blocks/def/enh-heading-block.ts

@@ -1,44 +0,0 @@
-import type Block from './block'
-
-  // level is heading tag level. 1 renders as <h1>, etc... 0 renders as <p>
-  //
-  // mb: is bottom margin in tw units. 'mb-1' produces 0.25rem, so a value of 4 would produce 1rem
-  //    These are dynamically generated from a template string. mb-1 --> mb-12 have been safelisted.
-  //    Any higher values used would have to explicitly safelisted in tailwind config. 
-  //    The margin will only be applied if the next element down is present. 
-  //    (eg, heading mb applies only if there is a byline.) 
-
-interface EnhHeadingBlock extends Block {
-  blockType: 'enh-heading'
-    // tbd: icon-w-heading (if preheading is present), 
-    // tbd: icon-w-byline (if preheading and heading is present), 
-    // tbd: icon-above: above first element
-    // tbd: icon-to-right: to right of corresponding element or right justified if 'icon-above'
-    // mobile-heading-centered
-    // left / right / center for preheading and heading (byline stays left)
-    // byline-left / byline-right / byline-center
-    // preheading-heading-font
-  specifiers?: string  
-    // By default, appears inline to left of first element (preheading or heading) 
-    // unless indicated otherwise in specifiers 
-  icon?: React.ReactNode  // ReactNode or url string to asset
-  iconSize?: number     // if url string, this sets the size
-  preheading?: {
-    text: string
-    level?: number  // default: 4 
-    mb?: number     // default: 2    
-  }
-  heading: {
-    text: string
-    level?: number  // default: 1
-    mb?: number     // default: 2
-  }
-  byline?: {
-    text: string
-    level?: number  // default: 6
-  }
-}
-
-export {
-  type EnhHeadingBlock as default 
-}

package/blocks/def/grid-block.ts

@@ -1,16 +0,0 @@
-import type Block from "./block"
-import type GridDef from "../../types/grid-def"
-
-interface GridBlock {
-  blockType: 'grid'
-  specifiers?: string
-  grid: GridDef
-    /**
-     * Ignored if children are supplied to the GridBlockComp
-     */ 
-  cells?: Block[] 
-}
-
-export {
-  type GridBlock as default
-}

package/blocks/def/group-block.ts

@@ -1,11 +0,0 @@
-import type Block from './block'
-
-interface GroupBlock extends Block {
-  blockType: 'group'
-  specifiers?: string // grid-2 slider disabled or whatever
-  elements: Block[]
-}
-
-export {
-  type GroupBlock as default
-}

package/blocks/def/heading-block.ts

@@ -1,15 +0,0 @@
-import type Block from './block'
-
-interface HeadingBlock extends Block {
-  blockType: 'heading'
-  heading: string
-  byline?: string
-  level?: number
-  bylineLevel?: number
-  spaceBetween?: number 
-  spaceAfter?: number 
-}
-
-export {
-  type HeadingBlock as default 
-}

package/blocks/def/image-block.ts

@@ -1,31 +0,0 @@
-import type { ImageDef } from '../../types'
-import type Block from './block'
-
-  /**
-   * See {@link ImageDef}
-   * see https://nextjs.org/docs/app/api-reference/components/image
-   * as well as React.ImgHTMLAttributes. 
-   */
-interface ImageBlock extends Block, ImageDef {
-  blockType: 'image'
-
-  /**
-   * Alignement: 'left' (default) / 'right' / 'center' (must be in flex-col parent)
-   * 'mobile-no-scale': By default, scales to 3/4 height (mobile and w < 'md')
-   * 'mobile-full-width': Overrides dim, etc. and renders full width (maintaining aspect ratio)
-   */
-  specifiers?: string
-    /** @deprecated Please use 'mobile-full-width' in specifiers  */
-  fullWidthOnMobile?: boolean
-    /** Next props */
-  props?: {
-    sizes?: string
-      /** if true, any alignement specifiers are ignored */
-    fill?: boolean  
-    style?: any
-  }
-}
-
-export {
-  type ImageBlock as default,
-}

package/blocks/def/index.ts

@@ -1,35 +0,0 @@
-import type AccordianBlock from './accordian-block'
-import type Block from './block'
-import type BulletCardsBlock from './bullet-cards-block'
-import type CardBlock from './card-block'
-import type CarteBlancheBlock from './carte-blanche-block'
-import type CTABlock from './cta-block'
-import type ElementBlock from './element-block'
-import type GridBlock from './grid-block'
-import type GroupBlock from './group-block'
-import type EnhHeadingBlock from './enh-heading-block'
-import type HeadingBlock from './heading-block'
-import type ImageBlock from './image-block'
-import type VideoBlock from './video-block'
-import type SpaceBlock from './space-block'
-import { SPACE_DEFAULTS } from './space-block'
-import type ScreenfulBlock from './screenful-block'
-
-export { 
-   type AccordianBlock, 
-   type Block,
-   type BulletCardsBlock,
-   type CardBlock,
-   type CarteBlancheBlock,
-   type CTABlock,
-   type ElementBlock,
-   type GridBlock,
-   type GroupBlock,
-   type HeadingBlock,
-   type EnhHeadingBlock, 
-   type ImageBlock,
-   type VideoBlock,
-   type SpaceBlock,
-   type ScreenfulBlock,
-   SPACE_DEFAULTS
-}

package/blocks/def/screenful-block.ts

@@ -1,54 +0,0 @@
-import type { ReactNode } from 'react'
-
-import type Block from './block'
-import type VideoBlock from './video-block'
-
-  /**
-   * A common screenful of content
-   * An optional banner image or video
-   * Content can be in columns
-   */
-interface ScreenfulBlock extends Block {
-  blockType: 'screenful'
-
-
-    /**
-     * Either an image URL, or a Video Block
-     * 
-     * If VideoBlock, then it's poster will be rendered server-side
-     * and the <video> component will be lazy-loaded client-side.
-     * 
-     * If in a scrolling situation, the video will autoplay when 75% in view
-     */
-  banner?: string | VideoBlock // TODO: should be VideoDef 
-    
-    /** Specifies rendering and layout hints and variants for block as a whole */ 
-  specifiers?: string
-
-    /** Specifies rendering and layout hints and variants for corresponding column */ 
-  columnSpecifiers?: string[]
-
-    /**
-     * Mobile: The order in the single column mobile layout in which the columns appear.
-     * Overrides column order.
-     * eg, if you want the second tile of three at the top: [1, 0, 2] 
-     */
-  mobileOrder?: number[]
-
-    /**
-     * Content Blocks for 1-3 columns. 
-     * (More than that is allowed, but impractical at many resolutions!) 
-     * If > 1, it will be enclosed in a 'grid grid-cols-<x>' div. 
-     */
-  contentColumns: Block[][]
-
-    /** optional footer element below the grid */
-  footer?: ReactNode
-
-    /** optional id for linking to this slide / screenful */
-  anchorId?: string  
-}
-
-export {
-  type ScreenfulBlock as default
-}

package/blocks/def/space-block.ts

@@ -1,64 +0,0 @@
-import type { Breakpoint } from '../../types'
-
-import type Block from './block'
-
-type TWSpaceUnit = number // TODO, pull from tw conf 
-type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6
-
-const SPACE_DEFAULTS = {
-  xs: 2,
-  sm: 4,
-  md: 5,
-  lg: 6,
-  xl: 8
-} satisfies {
-  [key in (Breakpoint)]?: TWSpaceUnit
-}
-
-
-interface SpaceBlock extends Block {
-  blockType: 'space'
-
-  /**
-   * TW units of vertical space, applied at Breakpoints
-   * or
-   * if just a number, that number at all Breakpoints
-   * 
-   * default {
-   *  xs: 2,
-   *  sm: 4,
-   *  md: 5,
-   *  lg: 6,
-   *  xl: 8
-   * }
-   * 
-   * Any provided values will be merge w the defaults
-   * And applied as if they were tw classes in ascending
-   * order. 
-   * 
-   * impl: <div className='invisible w-[1px] xs:h-<xsval> sm:h-<smval> etc...' />
-   */
-  sizes?: {
-    [key in (Breakpoint)]?: TWSpaceUnit
-  } | TWSpaceUnit
-
-  /**
-   * Heading levels.  Gives the vertical space that the corresponding
-   * h tag would give. 
-   * default: 3 (height of <h3>) 
-   * 0 = 1rem (plus any gaps), 
-   * For example, 1 = <h1 style={visibility: hidden}>&nbsp;</h1> 
-   *   As <ApplyTypography> would render it, plus any gap.
-   */
-  level?: HeadingLevel
-
-  test?: boolean
-
-}
-
-export {
-  type SpaceBlock as default,
-  type TWSpaceUnit,
-  type HeadingLevel,
-  SPACE_DEFAULTS
-}

package/blocks/def/video-block.ts

@@ -1,9 +0,0 @@
-import type { VideoDef } from '../../types'
-
-interface VideoBlock extends VideoDef {
-  blockType: 'video'
-}
-
-export {
-  type VideoBlock as default,
-}

package/blocks/ecommerce/checkout.tsx

@@ -1,242 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Button } from '@hanzo/ui/primitives'
-import { Input } from '@hanzo/ui/primitives'
-import { Label } from '@hanzo/ui/primitives'
-import { RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import { Separator } from '@hanzo/ui/primitives'
-import { Checkbox } from '@hanzo/ui/primitives'
-
-interface CheckoutProps extends React.ComponentPropsWithoutRef<'div'> {
-  orderSummary: {
-    items: Array<{
-      name: string
-      quantity: number
-      price: number
-    }>
-    subtotal: number
-    shipping: number
-    tax: number
-    total: number
-    currency?: string
-  }
-  onSubmit?: (data: any) => void
-  onBack?: () => void
-}
-
-export function Checkout({
-  className,
-  orderSummary,
-  onSubmit,
-  onBack,
-  ...props
-}: CheckoutProps) {
-  const formatPrice = (price: number, currency = '$') => {
-    return `${currency}${price.toFixed(2)}`
-  }
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formData = new FormData(e.currentTarget)
-    const data = Object.fromEntries(formData.entries())
-    onSubmit?.(data)
-  }
-
-  return (
-    <div className={cn('container py-8', className)} {...props}>
-      <form onSubmit={handleSubmit} className="grid gap-8 lg:grid-cols-3">
-        <div className="lg:col-span-2 space-y-6">
-          {/* Shipping Information */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Shipping Information</CardTitle>
-              <CardDescription>
-                Enter your shipping address details
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-4">
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="grid gap-2">
-                  <Label htmlFor="firstName">First Name</Label>
-                  <Input id="firstName" name="firstName" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="lastName">Last Name</Label>
-                  <Input id="lastName" name="lastName" required />
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input id="email" name="email" type="email" required />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="address">Street Address</Label>
-                <Input id="address" name="address" required />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="address2">Apartment, suite, etc. (optional)</Label>
-                <Input id="address2" name="address2" />
-              </div>
-              <div className="grid gap-4 sm:grid-cols-3">
-                <div className="grid gap-2">
-                  <Label htmlFor="city">City</Label>
-                  <Input id="city" name="city" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="state">State / Province</Label>
-                  <Input id="state" name="state" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="zip">ZIP / Postal Code</Label>
-                  <Input id="zip" name="zip" required />
-                </div>
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="phone">Phone Number</Label>
-                <Input id="phone" name="phone" type="tel" />
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Payment Method */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Payment Method</CardTitle>
-              <CardDescription>
-                Select your payment method
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-6">
-              <RadioGroup defaultValue="card" name="paymentMethod">
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="card" id="card" />
-                  <Label htmlFor="card">Credit Card</Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="paypal" id="paypal" />
-                  <Label htmlFor="paypal">PayPal</Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="crypto" id="crypto" />
-                  <Label htmlFor="crypto">Cryptocurrency</Label>
-                </div>
-              </RadioGroup>
-
-              <div className="grid gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="cardNumber">Card Number</Label>
-                  <Input
-                    id="cardNumber"
-                    name="cardNumber"
-                    placeholder="1234 5678 9012 3456"
-                  />
-                </div>
-                <div className="grid gap-4 sm:grid-cols-3">
-                  <div className="grid gap-2 sm:col-span-2">
-                    <Label htmlFor="expiry">Expiry Date</Label>
-                    <Input
-                      id="expiry"
-                      name="expiry"
-                      placeholder="MM/YY"
-                    />
-                  </div>
-                  <div className="grid gap-2">
-                    <Label htmlFor="cvc">CVC</Label>
-                    <Input
-                      id="cvc"
-                      name="cvc"
-                      placeholder="123"
-                    />
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Billing Address */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Billing Address</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center space-x-2">
-                <Checkbox id="sameAsShipping" name="sameAsShipping" defaultChecked />
-                <label
-                  htmlFor="sameAsShipping"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Same as shipping address
-                </label>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Order Summary */}
-        <div>
-          <Card>
-            <CardHeader>
-              <CardTitle>Order Summary</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                {orderSummary.items.map((item, i) => (
-                  <div key={i} className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {item.name} x {item.quantity}
-                    </span>
-                    <span>
-                      {formatPrice(item.price * item.quantity, orderSummary.currency)}
-                    </span>
-                  </div>
-                ))}
-              </div>
-              <Separator />
-              <div className="space-y-2">
-                <div className="flex justify-between">
-                  <span>Subtotal</span>
-                  <span>{formatPrice(orderSummary.subtotal, orderSummary.currency)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Shipping</span>
-                  <span>{formatPrice(orderSummary.shipping, orderSummary.currency)}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Tax</span>
-                  <span>{formatPrice(orderSummary.tax, orderSummary.currency)}</span>
-                </div>
-              </div>
-              <Separator />
-              <div className="flex justify-between text-lg font-semibold">
-                <span>Total</span>
-                <span>{formatPrice(orderSummary.total, orderSummary.currency)}</span>
-              </div>
-            </CardContent>
-            <CardFooter className="flex-col gap-2">
-              <Button type="submit" className="w-full" size="lg">
-                Complete Order
-              </Button>
-              {onBack && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="w-full"
-                  onClick={onBack}
-                >
-                  Back to Cart
-                </Button>
-              )}
-            </CardFooter>
-          </Card>
-
-          <div className="mt-4 text-xs text-center text-muted-foreground">
-            Your payment information is encrypted and secure.
-            We never store your credit card details.
-          </div>
-        </div>
-      </form>
-    </div>
-  )
-}

package/blocks/ecommerce/index.ts

@@ -1,7 +0,0 @@
-export { ProductGrid } from './product-grid'
-export { ProductDetail } from './product-detail'
-export { ShoppingCart } from './shopping-cart'
-export { Checkout } from './checkout'
-
-export type { Product } from './product-grid'
-export type { CartItem } from './shopping-cart'