@hanzo/ui 5.0.2 → 5.1.0

package/blocks/data-display/stats-grid.tsx

@@ -1,194 +0,0 @@
-'use client'
-
-import { cn } from '@hanzo/ui/util'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@hanzo/ui/primitives'
-import type { LucideIcon } from 'lucide-react'
-import { ArrowUp, ArrowDown, Minus } from 'lucide-react'
-
-interface Stat {
-  title: string
-  value: string | number
-  description?: string
-  change?: number
-  changeLabel?: string
-  icon?: LucideIcon
-  trend?: 'up' | 'down' | 'neutral'
-}
-
-interface StatsGridProps extends React.ComponentPropsWithoutRef<'div'> {
-  stats: Stat[]
-  columns?: 2 | 3 | 4
-  variant?: 'default' | 'compact' | 'detailed'
-}
-
-export function StatsGrid({
-  className,
-  stats,
-  columns = 4,
-  variant = 'default',
-  ...props
-}: StatsGridProps) {
-  const gridCols = {
-    2: 'sm:grid-cols-2',
-    3: 'sm:grid-cols-2 lg:grid-cols-3',
-    4: 'sm:grid-cols-2 lg:grid-cols-4',
-  }[columns]
-
-  const getTrendIcon = (trend?: 'up' | 'down' | 'neutral') => {
-    switch (trend) {
-      case 'up':
-        return <ArrowUp className="h-4 w-4 text-green-500" />
-      case 'down':
-        return <ArrowDown className="h-4 w-4 text-red-500" />
-      case 'neutral':
-        return <Minus className="h-4 w-4 text-muted-foreground" />
-      default:
-        return null
-    }
-  }
-
-  const getTrendColor = (change?: number) => {
-    if (!change) return 'text-muted-foreground'
-    return change > 0 ? 'text-green-500' : 'text-red-500'
-  }
-
-  if (variant === 'compact') {
-    return (
-      <div className={cn('grid gap-4', gridCols, className)} {...props}>
-        {stats.map((stat, i) => {
-          const Icon = stat.icon
-          return (
-            <Card key={i}>
-              <CardHeader className="pb-2">
-                <CardDescription className="flex items-center justify-between">
-                  {stat.title}
-                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-baseline justify-between">
-                  <div className="text-2xl font-bold">{stat.value}</div>
-                  {(stat.change !== undefined || stat.trend) && (
-                    <div className="flex items-center gap-1">
-                      {getTrendIcon(stat.trend)}
-                      {stat.change !== undefined && (
-                        <span className={cn('text-xs', getTrendColor(stat.change))}>
-                          {stat.change > 0 && '+'}
-                          {stat.change}%
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-                {stat.changeLabel && (
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {stat.changeLabel}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-    )
-  }
-
-  if (variant === 'detailed') {
-    return (
-      <div className={cn('grid gap-6', gridCols, className)} {...props}>
-        {stats.map((stat, i) => {
-          const Icon = stat.icon
-          return (
-            <Card key={i}>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-sm font-medium">
-                    {stat.title}
-                  </CardTitle>
-                  {Icon && (
-                    <div className="rounded-lg bg-primary/10 p-2">
-                      <Icon className="h-5 w-5 text-primary" />
-                    </div>
-                  )}
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-1">
-                  <div className="text-3xl font-bold">{stat.value}</div>
-                  {stat.description && (
-                    <CardDescription>{stat.description}</CardDescription>
-                  )}
-                  {(stat.change !== undefined || stat.trend || stat.changeLabel) && (
-                    <div className="flex items-center gap-2 pt-2">
-                      <div className="flex items-center gap-1">
-                        {getTrendIcon(stat.trend)}
-                        {stat.change !== undefined && (
-                          <span
-                            className={cn(
-                              'text-sm font-medium',
-                              getTrendColor(stat.change)
-                            )}
-                          >
-                            {stat.change > 0 && '+'}
-                            {stat.change}%
-                          </span>
-                        )}
-                      </div>
-                      {stat.changeLabel && (
-                        <span className="text-sm text-muted-foreground">
-                          {stat.changeLabel}
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-    )
-  }
-
-  // Default variant
-  return (
-    <div className={cn('grid gap-4', gridCols, className)} {...props}>
-      {stats.map((stat, i) => {
-        const Icon = stat.icon
-        return (
-          <Card key={i}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                {stat.title}
-              </CardTitle>
-              {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{stat.value}</div>
-              {stat.description && (
-                <p className="text-xs text-muted-foreground">
-                  {stat.description}
-                </p>
-              )}
-              {(stat.change !== undefined || stat.changeLabel) && (
-                <div className="mt-2 flex items-center text-xs">
-                  {stat.change !== undefined && (
-                    <span className={getTrendColor(stat.change)}>
-                      {stat.change > 0 && '+'}
-                      {stat.change}%
-                    </span>
-                  )}
-                  {stat.changeLabel && (
-                    <span className="ml-1 text-muted-foreground">
-                      {stat.changeLabel}
-                    </span>
-                  )}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}

package/blocks/def/accordian-block.ts

@@ -1,14 +0,0 @@
-import React from 'react'
-import type Block from './block'
-
-interface AccordianBlock extends Block {
-  blockType: 'accordian'
-  items: {
-    trigger: string
-    content: React.ReactNode 
-  }[]
-}
-
-export {
-  type AccordianBlock as default
-}

package/blocks/def/block.ts

@@ -1,7 +0,0 @@
-interface Block {
-  blockType: string
-}
-
-export {
-  type Block as default
-}

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,
-}