@hanzo/ui 1.0.14 → 2.0.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "1.0.14",
+  "version": "2.0.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
+    "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",

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

@@ -124,6 +124,13 @@ export {
   AvatarFallback 
 } from './avatar'
 
+export { 
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from './input-otp'
+
 export { Toggle, toggleVariants } from './toggle'
 export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 
@@ -150,3 +157,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/input-otp.tsx

@@ -0,0 +1,65 @@
+'use client'
+import * as React from 'react'
+
+import { OTPInput, type SlotProps } from 'input-otp'
+import { Dot } from 'lucide-react'
+
+import { cn } from '../util'
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn('flex items-center gap-2', className)}
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  SlotProps & React.ComponentPropsWithoutRef<'div'>
+>(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-2 text-sm ',
+        'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink h-4 w-px bg-foreground duration-1000' />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role='separator' {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

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,21 @@
 import colors from './colors.tailwind'
-import { fontFamily, fontSize } from './fonts.tailwind'
+import fontSize from './fontSize.tailwind'
+import fontFamily from './fontFamily.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,
+  preset,
   fontSize,
+  fontFamily,
   safelist,
   screens,
   spacing,
-  typographyPlugin
+  typographyPlugin,
+  type TwFontDesc
 }

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

@@ -6,7 +6,8 @@ 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 {
@@ -296,7 +297,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 Link from '@hanzo/ui/primitives/link-element'
 
 ###### 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