@hanzo/ui 4.9.0 → 5.0.1

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,21 @@
+
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,64 @@
+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

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

package/blocks/ecommerce/checkout.tsx

@@ -0,0 +1,242 @@
+'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

@@ -0,0 +1,7 @@
+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'