@hanzo/ui 1.0.15 → 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.15",
+  "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/",

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

@@ -157,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/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

package/common/contact-dialog/contact-form.tsx

@@ -1,111 +0,0 @@
-'use client'
-
-import React, { useTransition } from 'react'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
-import * as z from 'zod'
-  // @ts-ignore
-import validator from 'validator'
-
-import { Loader2 } from 'lucide-react'
-
-import {
-  Button,
-  Input,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '../../primitives'
-
-import type { ContactInfo, SubmitServerAction } from '../../types'
-
-const ValidationSchema = z.object({
-  email: z
-    .string()
-    .min(1, { message: "Email must be provided." })
-    .email("Invalid email."),
-  phone: z
-    .string()
-    .min(1, { message: "Telephone must be provided." })
-    .refine(validator.isMobilePhone, { message: "Invalid format." })
-})
-
-const ContactForm: React.FC<{
-  onSubmit: SubmitServerAction
-  enclosure: any
-}> = ({
-  onSubmit,
-  enclosure
-}) => {
-
-  const form = useForm<ContactInfo>({
-      // @ts-ignore (pnpm linking / tsc bug )
-    resolver: zodResolver(ValidationSchema),
-    defaultValues: {
-      email: '',
-      phone: '',
-    },
-  })
-
-  const [isPending, startTransition] = useTransition()
-
-  const onFormSubmit: SubmitHandler<ContactInfo> = (data) => {
-    // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
-    // @ts-ignore
-    startTransition(async () => {
-      await onSubmit(data, enclosure)
-    })
-  }
-
-  const MyFormItem: React.FC<{ 
-    field: ControllerRenderProps<ContactInfo, 'email'> | ControllerRenderProps<ContactInfo, 'phone'>  
-    placeholder: string
-  }> = ({
-    field,
-    placeholder
-  }) => (
-  <FormItem className="space-y-0" >
-    <FormControl>
-      <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
-    </FormControl>
-    <div className="flex flex-row justify-start items-stretch gap-2">
-      <FormMessage />
-    </div>
-  </FormItem>
-)
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)} className="w-3/4">
-        <div className='flex flex-col justify-start items-stretch mt-4'>
-        <FormField
-          control={form.control}
-          name='email'
-            // @ts-ignore
-          render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
-        />
-        <FormField
-          control={form.control}
-          name='phone'
-            // @ts-ignore
-          render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
-        />
-          <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
-            {isPending ? (<>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Please wait
-              </>
-            ) : (
-              <>Submit</>
-            )}
-          </Button>
-        </div>
-      </form>
-    </Form>
-  )
-}
-
-export default ContactForm

package/common/contact-dialog/disclaimer.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-const Disclaimer: React.FC = () => (
-  <div>
-    By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
-    Message and data rates may apply. Message frequency varies. 
-    You can unsubscribe at any time by replying STOP. 
-    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
-  </div>
-)
-
-export default Disclaimer
-