@hanzo/ui 0.5.10

package/common/mini-chart/mini-chart.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { type MiniChartProps } from './mini-chart-props'
+
+const MiniChart: React.FC<MiniChartProps> = ({ 
+  widgetProps,
+  containerStyles = {} 
+}) => {
+
+  const {
+    symbol,
+    exchange,
+    lineColor, 
+    topGradientColor, 
+    bottomGradientColor, 
+    width, 
+    height, 
+    autosize,
+    locale, 
+    ...rest
+  } = widgetProps
+
+  const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
+
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+	useEffect(() => {
+		if (!containerRef.current) {
+      return
+    }
+		const script = document.createElement('script')
+		script.type = 'text/javascript'
+		script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
+		script.async = true
+		script.onload = async () => {
+			const iframe = containerRef.current?.querySelector('iframe')
+			if (iframe && iframe instanceof Element) iframe.style.colorScheme = 'normal'
+
+      const copyDiv = document.querySelector('.tradingview-widget-copyright')
+      if (copyDiv) {
+        setTimeout(() => {
+          copyDiv.classList.remove('invisible')
+        }, 1200) // from experimentation 
+      }
+		}
+		const config = JSON.stringify({
+      symbol: symbolString,
+			width: autosize ? '100%' : (width || 350),
+			height: autosize ? '100%' : (height || 220),
+      locale: locale ?? 'en',
+      isTransparent: 'true',
+			trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
+			underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
+			underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
+			...rest,
+		})
+		script.innerHTML = config
+		containerRef.current.appendChild(script)
+		return () => {
+			while (containerRef.current?.firstChild) {
+				containerRef.current.removeChild(containerRef.current.firstChild)
+			}
+		}
+	}, [ JSON.stringify(widgetProps) ])
+
+	return (<>
+		<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
+    <div className='tradingview-widget-copyright border-t w-full invisible'>
+      <a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
+        <span className="text-[--secondary-2]">{symbol} quotes</span></a>&nbsp;by TradingView
+    </div>
+  </>)
+}
+
+export default MiniChart

package/common/mini-chart/wrapper.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import BaseChart from './mini-chart'
+
+const Wrapper: React.FC<{
+  symbol: string,
+  exchange?: string
+}> = ({
+  symbol,
+  exchange
+}) => (
+  <BaseChart widgetProps ={{
+    symbol,
+    exchange,
+    autosize: true,
+    colorTheme: 'dark',
+    lineColor: "rgb(114, 27, 228)",
+    bottomGradientColor: "rgba(255, 255, 255, 0.1)",
+    dateRange: '60M',
+  }}/>   
+)
+
+export default Wrapper

package/context-providers/index.ts

@@ -0,0 +1 @@
+export { default as ThemeProvider } from './theme-provider'

package/context-providers/theme-provider.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
+  <NextThemesProvider 
+    attribute="class" 
+    {...props}
+    value={{
+      light: 'lux-light-theme',
+      dark: 'lux-dark-theme'
+    }}
+  >
+    {children}
+  </NextThemesProvider>
+)
+
+export default ThemeProvider

package/next/README.md

@@ -0,0 +1,11 @@
+# Next related Lux helpers
+
+### no `index.ts` file, and `load-and-return-lux-next-fonts-on-import.ts`
+
+Next font loading requires the fonts to be assigned to const's in module scope (ie, loaded when the module is evaluated, exactly once).
+
+If there was an `index.ts` "barrel file", and the client code imported anything from this package, it would have resulted in evaluting all the packages imported including the that loaded the fonts. Without the index, the client code knows what modules import it and thus when it happens.
+
+tl;dr: See [this article from Vercel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) about this issue. 
+
+(Previously, not having this safegaurd caused a serious bug becuase the fonts were loaded far too early.)

package/next/determine-device-middleware.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+import { getSelectorsByUserAgent } from 'react-device-detect'
+
+  // writed this way so they can be chained :)
+const determineDeviceMiddleware = async (request: NextRequest) => {
+
+  const ua = userAgent(request)
+  const { isMobileOnly, isTablet, isDesktop } = getSelectorsByUserAgent(ua.ua)
+  const agent = isMobileOnly ? 'phone' : (isTablet ? 'tablet' : (isDesktop ?  'desktop' : 'unknown'))
+  const { nextUrl: url } = request
+  //console.log(`\n=== from ${url.href} on a *${agent && agent.toUpperCase()}* device. ===\n`)
+  url.searchParams.set('agent', agent)
+  return NextResponse.rewrite(url)
+}
+
+export default determineDeviceMiddleware

package/next/get-app-router-font-classes.ts

@@ -0,0 +1,12 @@
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
+import type NextFontDesc from './next-font-desc'
+
+  // These will be injected for <body> in app router app that uses our RootLayout
+
+  // First is assumed to be mapped to the default font and is injected into <body>
+  // as a normal tw font family class.
+export default () => (
+  nextFonts.map(
+      (desc: NextFontDesc) => (desc.nextFont!.variable)
+    ).join(' ') + ` font-${nextFonts[0].twName}`
+)

package/next/load-and-return-lux-next-fonts-on-import.ts

@@ -0,0 +1,68 @@
+import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
+
+import type NextFontDesc from './next-font-desc'
+import type TwFontDesc from '../tailwind/tw-font-desc'
+
+import twFonts from '../tailwind/lux-tw-fonts'
+
+/*
+  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! 
+
+  Also, requires that "Font loaders must be called and assigned to a const in the module scope"
+
+*/
+
+const drukTextWide = localFont({
+  src: [
+    {
+      path: './fonts/DrukTextWide-Medium-Trial.otf',
+      weight: '500',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukTextWide-Bold-Trial.otf',
+      weight: '700',
+      style: 'normal'
+    },
+    {
+      path: './fonts/DrukTextWide-Heavy-Trial.otf',
+      weight: '800',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-druk-text-wide' ,
+})
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+})
+  
+export default [
+  {
+    font: inter,
+    twName: 'sans'
+  }, 
+  {
+    font: drukTextWide,
+    twName: 'heading'
+  } 
+].map (
+  (el) => {
+    const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
+    if (!twFont) {
+      throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
+    }
+
+    return ({
+      ...twFont,
+      nextFont: el.font,
+    })
+  }
+) as NextFontDesc[]
+
+

package/next/next-font-desc.ts

@@ -0,0 +1,28 @@
+import type TwFontDesc from '../tailwind/tw-font-desc'
+
+// from next repo
+type NextFont = {
+  className: string
+  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
+}
+
+// from next repo
+type NextFontWithVariable = NextFont & {
+  variable: string
+}
+
+
+/*
+  NextFontDesc and TwFontDesc have to be seperate because they are needed 
+  at different times during the next compile / build.  Otherwise a nasty 
+  race condition happens! That's why they are in different files.
+*/
+
+interface NextFontDesc extends TwFontDesc {
+  nextFont: NextFontWithVariable 
+}
+
+export {
+  type NextFontDesc as default,
+  type NextFontWithVariable,
+}

package/next/not-found-content.mdx

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

package/next/not-found.tsx

@@ -0,0 +1,23 @@
+import React  from 'react'
+
+import Main from '../primitives/main'
+import Footer from '../common/footer'
+import { ApplyTypography } from '../primitives'
+
+import NotFoundMDX from './not-found-content.mdx'
+import type { SiteDef } from '../types'
+
+const NotFound: React.FC<{
+  siteDef: SiteDef
+}>  = ({
+  siteDef
+}) => (<>
+  <Main className='h-[700px]'>
+    <ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
+      <NotFoundMDX />
+    </ApplyTypography>
+  </Main>
+  <Footer siteDef={siteDef}/>
+</>)
+
+export default NotFound

package/next/pages-router-font-vars.tsx

@@ -0,0 +1,18 @@
+
+import nextFonts from './load-and-return-lux-next-fonts-on-import'
+import type NextFontDesc from './next-font-desc'
+
+const PagesRouterFontVars: React.FC = () => {
+
+  const fontVars = nextFonts.map((fd: NextFontDesc) => (
+    `${fd.cssVar}: ${fd.nextFont.style.fontFamily};`
+  )).join('\n')
+
+  return <style jsx global>{`
+    html {
+      ${fontVars}
+    }
+  `}</style>
+}
+
+export default PagesRouterFontVars

package/next/root-layout.tsx

@@ -0,0 +1,53 @@
+import React, { type PropsWithChildren } from 'react'
+
+import Header from '../common/header'
+import type { SiteDef } from '../types'
+import getAppRouterBodyFontClasses from './get-app-router-font-classes'
+
+// 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' },
+  ],
+}
+
+/*
+  These '.variable' fields are actually autogenerate css classnames that *define* the actual
+  css variables ('--<ugly-name>') that one asks for in the tailwind classes. 
+  They are what make them available in the global scope. So this MUST
+  be done like this for the tailwind font classes to work.
+  
+  (...not to be confused with the css var itself.  This field should be named something else!)
+*/
+
+/*
+  re body: overflow-y-hidden overflow-x-hidden, h-full
+  We cannot have these on body tag for scroll-snap to work on iOS!
+*/
+const bodyClasses = 'bg-background text-foreground flex flex-col min-h-full ' + getAppRouterBodyFontClasses() 
+    
+const RootLayout: React.FC<PropsWithChildren & { 
+  siteDef: SiteDef 
+  header?: boolean
+}> = ({ 
+  header = true,
+  siteDef,
+  children,
+}) =>  (
+  <html lang='en' suppressHydrationWarning className='lux-dark-theme'>
+    <head >
+      {/* https://stackoverflow.com/a/75716588/11645689 */ }
+      <base target='_blank' />
+    </head>
+    <body className={bodyClasses}>
+      {header && <Header siteDef={siteDef}/>}
+      {children}
+    </body>
+  </html>
+)
+
+export {
+  RootLayout as default,
+  viewport
+}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@hanzo/ui",
+  "version": "0.5.10",
+  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@hanzo"
+  },
+  "author": "Hanzo AI, Inc.",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/ui.git",
+    "directory": "pkgs/hanzo-ui"
+  },
+  "files": [
+    "assets",
+    "blocks",
+    "common",
+    "context-providers",
+    "dist",
+    "next",
+    "primitives",
+    "siteDef",
+    "style",
+    "tailwind",
+    "types",
+    "util"
+  ],
+  "keywords": [
+    "components",
+    "ui",
+    "radix-ui",
+    "hanzoai",
+    "hanzo"
+  ],
+  "scripts": {
+    "latest": "npm show @hanzo/ui version",
+    "pub": "npm publish",
+    "build": "tsc",
+    "tc": "tsc",
+    "clean": "rm -rf dist && rm -rf node_modules"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "cmdk": "^0.2.0",
+    "lodash.castarray": "^4.4.0",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.merge": "^4.6.2",
+    "lucide-react": "^0.307.0",
+    "markdown-to-jsx": "^7.3.2",
+    "postcss-selector-parser": "^6.0.13",
+    "react-day-picker": "^8.7.1",
+    "react-device-detect": "^2.2.3",
+    "react-hook-form": "^7.47.0",
+    "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/lodash.merge": "^4.6.9",
+    "@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"
+  }
+}

package/primitives/accordion.tsx

@@ -0,0 +1,61 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../util"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/primitives/action-button.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+import { cn } from '../util'
+
+import type { ButtonDef, ButtonModalDef } from '../types'
+import type { ButtonSizes } from './button'
+
+  // The DVC must be rendered client-side since it accesses the DOM directly.
+  // There is no need for a loading UI since the dialog only opens
+  // once it's been rendered and the user is already waiting.
+  // https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
+const DynamicDVC = dynamic(() => (import('./dialog-video-controller')), {ssr: false})
+
+const ActionButton: React.FC<{
+  def: ButtonDef
+  size?: ButtonSizes
+  className?: string
+}> = ({
+  def,
+  size, // no default.  overrides!
+  className=''
+}) => {
+  if (def.action.type === 'modal') {
+    const m = def.action.def as ButtonModalDef
+    const Modal = m.Comp
+    const sizeToSpread = size ? {size} : {}
+    return (
+      <DynamicDVC>
+        <Modal 
+          title={m.title}
+          byline={m.byline}
+          buttonText={def.text}
+          buttonProps={{...def.props, ...sizeToSpread, className: cn((def.props?.className ?? ''), className)}}
+          action={m.action}
+          actionEnclosure={m.actionEnclosure}
+          {...m.props}
+        />
+      </DynamicDVC>
+    )
+  }
+    // no other types supported yet
+  return <></>
+}
+
+export default ActionButton

package/primitives/apply-typography.tsx

@@ -0,0 +1,55 @@
+import React, { type PropsWithChildren } from 'react'
+
+import { cn } from '../util'
+
+type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl' // if t-shirt size, do *not* be responsive
+
+const ApplyTypography: React.FC<
+  PropsWithChildren & {
+    className?: string,
+    asTag?: 'div' | 'section' | 'nav' | 'main' | 'article',
+    size?: TypographySize
+  }
+> = ({ 
+  children,
+  className='',
+  asTag='div',
+  size='responsive'
+}) => {
+
+    // responsive version by default
+  let typoClasses = 
+    'typography gap-3 ' +
+    'xs:typography-sm ' + 
+    'sm:typography sm:gap-4 ' +
+    'lg:typography-lg lg:gap-5 ' + 
+    'xl:typography-xl xl:gap-6 ' + 
+    'typography-headings:font-heading ' // only effects h1-h3 (in plugin)
+
+  switch (size) {
+    case 'sm': {
+      typoClasses = 'typography typography-sm gap-3 typography-headings:font-heading typography-p:text-sm '
+    } break
+    case 'base': {
+      typoClasses = 'typography gap-4 typography-headings:font-heading '
+    } break
+    case 'lg': {
+      typoClasses = 'typography typography-lg gap-5 typography-headings:font-heading typography-p:text-lg '
+    } break
+    case 'xl': {
+      typoClasses = 'typography typography-xl gap-6 typography-headings:font-heading typography-p:text-lg '
+    } break
+  }
+  
+  const Tag = asTag
+  return (
+    <Tag className={cn(typoClasses, className)}>
+      {children}
+    </Tag>
+  )
+}
+
+export {
+  type TypographySize,
+  ApplyTypography as default
+}