@hanzo/ui 2.5.1 → 3.0.1

package/blocks/components/card-block.tsx

@@ -14,7 +14,7 @@ import {
   type TypographySize
 } from '../../primitives'
 
-import { Icons } from '../../common'
+import { Icons } from '../../primitives'
 
 import {
   getSpecifierData, 

package/blocks/components/screenful-block/content.tsx

@@ -90,8 +90,8 @@ const Content: React.FC<{
   className='',
 }) => {
 
-
-  const layoutClx = 'flex flex-col gap-2 sm:gap-4 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
+  // We need to set h-full when we have more than 1 column too, so the grid takes full height - Firefox and Safari fix.
+  const layoutClx = 'flex flex-col gap-2 sm:gap-4 h-full pt-11 lg:pt-20 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
 
   const orderclx = (columnIndex: number): string => {
     const orderIndex = b.mobileOrder?.indexOf(columnIndex)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "2.5.1",
+  "version": "3.0.1",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -29,7 +29,6 @@
     "clean": "rm -rf dist && rm -rf node_modules"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.2",
     "@next/third-parties": "^14.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -54,29 +53,30 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
+    "embla-carousel-autoplay": "8.0.0-rc15",
     "embla-carousel-react": "8.0.0-rc15",
     "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
-    "lucide-react": "^0.344.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.14.0",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-interaction-media": "^0.1.0",
-    "validator": "^13.11.0",
-    "zod": "3.21.4"
+    "tailwindcss-animate": "^1.0.6",
+    "tailwindcss-interaction-media": "^0.1.0"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "lucide-react": "^0.344.0",
     "next": "^14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
+    "validator": "^13.11.0",
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",
@@ -85,7 +85,7 @@
     "@types/gtag.js": "^0.0.19",
     "@types/lodash.merge": "^4.6.9",
     "@types/mdx": "^2.0.9",
-    "@types/react": "^18.2.48",
+    "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.18",
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3"

package/primitives/carousel.tsx

@@ -5,6 +5,7 @@ import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from 'embla-carousel-react'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
+import Autoplay from "embla-carousel-autoplay"
 
 import { cn } from '../util'
 import { Button } from '.'
@@ -260,4 +261,5 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  Autoplay as CarouselAutoplayPlugin
 }

package/primitives/icons/index.ts

@@ -0,0 +1,18 @@
+import {
+  Moon as moon,
+  SunMedium as sun,
+  Menu as burger,
+  ArrowUpRight as linkOut,
+} from 'lucide-react'
+
+import youtube from './youtube-logo'
+import gitHub from './github'
+
+export {
+  sun,
+  moon,
+  burger,
+  gitHub,
+  linkOut,
+  youtube,
+}

package/primitives/index.ts

@@ -132,11 +132,13 @@ export {
 } from './input-otp'
 
 export {
+  type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  CarouselAutoplayPlugin,
 } from './carousel'
 
 export { Toggle, toggleVariants } from './toggle'
@@ -165,3 +167,4 @@ export { default as NavItems} from './nav-items'
 export { default as Main } from './main'
 export { default as ListBox } from './list-box'
 
+export * as Icons from './icons'

package/primitives/toggle-group.tsx

@@ -26,7 +26,7 @@ const ToggleGroup = React.forwardRef<
     {...props}
   >
     <ToggleGroupContext.Provider value={{ variant, size, rounded }}>
-      {children}
+      {children as React.ReactNode}
     </ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
 ))

package/primitives/youtube-embed.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import Image from 'next/image'
 
-import * as Icons from '../common/icons'
+import * as Icons from './icons'
 
 // Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
 // (https://github.com/a-trost/fableton)

package/style/hanzo-default-colors.css

@@ -3,7 +3,7 @@
 
 @layer base {
 
-  :root, .lux-light-theme {
+  :root, .hanzo-ui-light-theme {
     --hz-ui-fg-0: hsl(0 0% 0%);
     --hz-ui-fg-body: hsl(0 0% 10%);
     --hz-ui-fg-1: hsl(0 0% 20%);
@@ -49,7 +49,7 @@
     --hz-ui-radius: 0.5rem;
   }
  
-  .lux-dark-theme {
+  .hanzo-ui-dark-theme {
 
     --hz-ui-fg-0: hsl(0 0% 100%);
     --hz-ui-fg-body: hsl(0, 0%, 97%);

package/{context-providers → style}/theme-provider.tsx

@@ -9,8 +9,8 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) =>
     attribute="class" 
     {...props}
     value={{
-      light: 'lux-light-theme',
-      dark: 'lux-dark-theme'
+      light: 'hanzo-ui-light-theme',
+      dark: 'hanzo-ui-dark-theme'
     }}
   >
     {children}

package/tailwind/fontFamily.tailwind.ts

@@ -0,0 +1,7 @@
+export default {
+  sans: ['sans-serif'],
+  heading: ['serif'],
+  nav: ['serif'],
+  serif: ['serif'],
+  mono: ['monospace']
+} 

package/tailwind/{fonts.tailwind.ts → fontSize.tailwind.ts}

@@ -1,22 +1,4 @@
-import luxTwFonts  from './lux-tw-fonts'
-import type TwFontDesc from './tw-font-desc'
-
-export const fontFamily = (ignoreTheme: any): {
-  [key: string]: string[] 
-} => {
-
-  let result: any = {}
-  luxTwFonts.forEach((font: TwFontDesc) => {
-    result[font.twName] = font.fontFamily
-    // eg: heading: ['var(--font-druk-text-wide)']
-  })
-
-  return result as {
-    [key: string]: string[] 
-  }
-}
-
-export const fontSize = {
+export default {
   xxs: ['0.65rem', { lineHeight: '0.8rem' }],    // very fine print               
   xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
   sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)

package/tailwind/index.ts

@@ -1,18 +1,7 @@
-import colors from './colors.tailwind'
-import { fontFamily, fontSize } from './fonts.tailwind'
-import safelist from './safelist.tailwind'
-import screens from './screens.tailwind'
-import spacing from './spacing.tailwind'
-import typographyPlugin from './typo-plugin'
-import config from './tailwind.config.base'
+import preset from './tailwind.config.hanzo-preset'
+import type TwFontDesc from './tw-font-desc'
 
 export {
-  colors,
-  config,
-  fontFamily,
-  fontSize,
-  safelist,
-  screens,
-  spacing,
-  typographyPlugin
+  preset,
+  type TwFontDesc
 }

package/tailwind/tailwind.config.hanzo-preset.d.ts

@@ -0,0 +1,5 @@
+import type { Config } from 'tailwindcss'
+
+declare const conf: Config
+
+export default conf

package/tailwind/{tailwind.config.base.js → tailwind.config.hanzo-preset.js}

@@ -6,12 +6,14 @@ import colors from './colors.tailwind'
 import safelist from './safelist.tailwind'
 import screens from './screens.tailwind'
 import spacing from './spacing.tailwind'
-import { fontFamily, fontSize} from './fonts.tailwind'
+import fontSize from './fontSize.tailwind'
+import fontFamily from './fontFamily.tailwind'
 import typographyPlugin from './typo-plugin'
 
 export default {
   presets: [],
   darkMode: ["class"],
+  content: [],
   safelist,
   plugins: [
     animatePlugin,
@@ -296,7 +298,7 @@ export default {
       0: '0',
       DEFAULT: '1',
     },
-    fontFamily,
+    fontFamily, 
     fontSize,
     fontWeight: {
       thin: '100',

package/tailwind/typo-plugin/get-plugin-styles.js

@@ -7,29 +7,29 @@ import {
 const typographyColorTheme = {
     // vars are defined in global.css
     // and dark mode is handled at that level.
-  '--tw-prose-body': "var(--hz-ui-fg-body)",
-  '--tw-prose-headings': "var(--hz-ui-fg-0)",
-  '--tw-prose-links': "var(--hz-ui-fg-0)",
-  '--tw-prose-links-hover': "var(--hz-ui-fg-2)",
-  '--tw-prose-bold': "var(--hz-ui-fg-0)",
-  '--tw-prose-counters': "var(--hz-ui-fg-4)",
-  '--tw-prose-bullets': "var(--hz-ui-fg-2)",
-  '--tw-prose-hr': "var(--hz-ui-fg-2)",
-  '--tw-prose-quotes': "var(--hz-ui-fg-body)",
-  '--tw-prose-quote-borders': "var(--hz-ui-fg-3)",
-  '--tw-prose-captions': "var(--hz-ui-fg-2)",
-  '--tw-prose-kbd': "var(--hz-ui-fg-0)",
-  '--tw-prose-kbd-shadows': "var(--hz-ui-fg-1)",
-  '--tw-prose-code': "var(--hz-ui-fg-0)",
-  '--tw-prose-pre-code': "var(--hz-ui-fg-1)",
-  '--tw-prose-pre-bg': "var(--hz-ui-bg-1)",
-  '--tw-prose-th-borders': "var(--hz-ui-fg-2)",
-  '--tw-prose-td-borders': "var(--hz-ui-fg-3)",
+  '--tw-typo-plugin-body': "var(--hz-ui-fg-body)",
+  '--tw-typo-plugin-headings': "var(--hz-ui-fg-0)",
+  '--tw-typo-plugin-links': "var(--hz-ui-fg-0)",
+  '--tw-typo-plugin-links-hover': "var(--hz-ui-fg-2)",
+  '--tw-typo-plugin-bold': "var(--hz-ui-fg-0)",
+  '--tw-typo-plugin-counters': "var(--hz-ui-fg-4)",
+  '--tw-typo-plugin-bullets': "var(--hz-ui-fg-2)",
+  '--tw-typo-plugin-hr': "var(--hz-ui-fg-2)",
+  '--tw-typo-plugin-quotes': "var(--hz-ui-fg-body)",
+  '--tw-typo-plugin-quote-borders': "var(--hz-ui-fg-3)",
+  '--tw-typo-plugin-captions': "var(--hz-ui-fg-2)",
+  '--tw-typo-plugin-kbd': "var(--hz-ui-fg-0)",
+  '--tw-typo-plugin-kbd-shadows': "var(--hz-ui-fg-1)",
+  '--tw-typo-plugin-code': "var(--hz-ui-fg-0)",
+  '--tw-typo-plugin-pre-code': "var(--hz-ui-fg-1)",
+  '--tw-typo-plugin-pre-bg': "var(--hz-ui-bg-1)",
+  '--tw-typo-plugin-th-borders': "var(--hz-ui-fg-2)",
+  '--tw-typo-plugin-td-borders': "var(--hz-ui-fg-3)",
 }
 
 const defaultCSS = {
 
-  color: 'var(--tw-prose-body)',
+  color: 'var(--tw-typo-plugin-body)',
 // YUCK  maxWidth: '65ch',
   p: {
     textAlign: 'inherit'
@@ -37,17 +37,17 @@ const defaultCSS = {
   'p:first-child': {},
   'p:last-child': {},
   a: {
-    color: 'var(--tw-prose-links)',
+    color: 'var(--tw-typo-plugin-links)',
     textDecoration: 'underline',
     fontWeight: '400',
   },
   'a:hover': {
-    color: 'var(--tw-prose-links-hover)',
+    color: 'var(--tw-typo-plugin-links-hover)',
   },
   blockquote: {
     fontWeight: '400',
     fontStyle: 'italic',
-    color: 'var(--tw-prose-quotes)',
+    color: 'var(--tw-typo-plugin-quotes)',
     quotes: '"\\201C""\\201D""\\2018""\\2019"',
   },
   //'blockquote::before': {},
@@ -65,7 +65,7 @@ const defaultCSS = {
     display: 'block',
     fontStyle: 'normal',
     textAlign: 'right',
-    color: 'var(--tw-prose-quotes)',
+    color: 'var(--tw-typo-plugin-quotes)',
   },
   ol: {
     listStyleType: 'decimal',
@@ -75,44 +75,44 @@ const defaultCSS = {
   },
   'ol > li::marker': {
     fontWeight: '400',
-    color: 'var(--tw-prose-counters)',
+    color: 'var(--tw-typo-plugin-counters)',
   },
   'ul > li::marker': {
-    color: 'var(--tw-prose-bullets)',
+    color: 'var(--tw-typo-plugin-bullets)',
   },
   'ul > li::before': {
   },
   hr: {
-    borderColor: 'var(--tw-prose-hr)',
+    borderColor: 'var(--tw-typo-plugin-hr)',
     borderTopWidth: 1,
   },
   h1: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '800',
     textAlign: 'inherit'
   },
   h2: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '700',
     textAlign: 'inherit'
   },
   h3: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h4: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h5: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h6: {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     textAlign: 'inherit'
   },
   img: {},
@@ -124,19 +124,19 @@ const defaultCSS = {
     display: 'block',
   },
   strong: {
-    color: 'var(--tw-prose-bold)',
+    color: 'var(--tw-typo-plugin-bold)',
     fontWeight: '600',
   },
   video: {},
   kbd: {
     fontWeight: '500',
     fontFamily: 'inherit',
-    color: 'var(--tw-prose-kbd)',
+    color: 'var(--tw-typo-plugin-kbd)',
     boxShadow:
-      '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)',
+      '0 0 0 1px rgb(var(--tw-typo-plugin-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-typo-plugin-kbd-shadows) / 10%)',
   },
   code: {
-    color: 'var(--tw-prose-code)',
+    color: 'var(--tw-typo-plugin-code)',
     fontWeight: '500',
   },
   'code::before': {
@@ -173,8 +173,8 @@ const defaultCSS = {
     color: 'inherit',
   },
   pre: {
-    color: 'var(--tw-prose-pre-code)',
-    backgroundColor: 'var(--tw-prose-pre-bg)',
+    color: 'var(--tw-typo-plugin-pre-code)',
+    backgroundColor: 'var(--tw-typo-plugin-pre-bg)',
     overflowX: 'auto',
     fontWeight: '400',
   },
@@ -202,10 +202,10 @@ const defaultCSS = {
   },
   thead: {
     borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-prose-th-borders)',
+    borderBottomColor: 'var(--tw-typo-plugin-th-borders)',
   },
   'thead th': {
-    color: 'var(--tw-prose-headings)',
+    color: 'var(--tw-typo-plugin-headings)',
     fontWeight: '600',
     verticalAlign: 'bottom',
   },
@@ -218,7 +218,7 @@ const defaultCSS = {
   },
   tfoot: {
     borderTopWidth: '1px',
-    borderTopColor: 'var(--tw-prose-th-borders)',
+    borderTopColor: 'var(--tw-typo-plugin-th-borders)',
   },
   'tfoot td': {
     verticalAlign: 'top',
@@ -244,7 +244,7 @@ const defaultModifiers = (base) => ({
         a: {},
         'a:hover': {},
         blockquote: {
-          //color: 'blue', //var(--tw-prose-quotes)',
+          //color: 'blue', //var(--tw-typo-plugin-quotes)',
           //marginTop: pxToEm(32, 20),
           //marginBottom: pxToEm(32, 20),
           //paddingLeft: pxToEm(20, 20),

package/tailwind/typography-test.mdx

@@ -1,4 +1,4 @@
-import Link from '@hanzo/ui/common/link-element'
+import { LinkElement as Link } from '@hanzo/ui/primitives'
 
 ###### In a galaxy far, far away
 ##### Join the global rush to own silver

package/types/index.ts

@@ -11,19 +11,9 @@ export type {default as GridDef, GridColumnSpec} from './grid-def'
 export type { TShirtDimensions, Dimensions } from './dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'
 
-import type BulletItem from './bullet-item'
-import type Icon from './icon'
-import type ImageDef from './image-def'
-import type LinkDef from './link-def'
-import type SiteDef from './site-def'
-import type TShirtSize from './t-shirt-size' 
-
-export {
-  type BulletItem,
-  type Icon,
-  type ImageDef,
-  type LinkDef,
-  type SiteDef,
-  type TShirtSize,
-}
+export type { default as BulletItem } from './bullet-item'
+export type { default as Icon } from './icon'
+export type { default as ImageDef } from './image-def'
+export type { default as LinkDef } from './link-def'
+export type { default as TShirtSize } from './t-shirt-size' 
 

package/common/chat-widget.tsx

@@ -1,75 +0,0 @@
-'use client'
-import React from 'react'
-
-import { X } from 'lucide-react'
-
-import LuxLogo from './icons/lux-logo'
-import { Button, Card } from '../primitives'
-
-const ChatWidget: React.FC<{
-  title: string,
-  chatbotUrl: string,
-  subtitle?: string,
-  question?: string,
-  /* 
-    Currently supports these icons from remix icons (https://remixicon.com/):
-      GlobalLineIcon,
-      ShieldFlashLineIcon,
-      BankCardLineIcon,
-      GroupLineIcon,
-      QuestionnaireLineIcon
-  */
-  suggestedQuestions?: { heading: string, message: string, icon?: string }[]
-}> = ({
-  title,
-  chatbotUrl,
-  subtitle,
-  question,
-  suggestedQuestions
-}) => {
-
-  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
-
-  const onClick = () => { setShowChatbot(!showChatbot) }
-
-  const searchParams = new URLSearchParams()
-  if (question) {
-    searchParams.append('question', question)
-  }
-  if (suggestedQuestions) {
-    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
-    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
-    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
-  }
-
-  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
-
-  return (<>
-    <div className={
-      'fixed bottom-0 sm:bottom-20 right-0 w-full h-full ' +
-      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1002] ' +
-      (showChatbot ? 'flex' : 'hidden')
-    }>
-      <Card className='flex flex-col h-full w-full'>
-        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
-          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
-          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <X />
-          </Button>
-        </div>
-        <iframe src={iframeSrc} className='h-full' />
-      </Card>
-    </div>
-
-    <Button
-      variant='outline'
-      size='link'
-      onClick={onClick}
-      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full z-[1001]'
-    >
-      {showChatbot ? <X /> : <LuxLogo width={24} height={24} className='mt-2' />}
-    </Button>
-  </>)
-}
-
-export default ChatWidget