@hanzo/ui 4.6.0 → 4.7.0

package/tailwind/typo-plugin/index.js

@@ -1,141 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-import merge from 'lodash.merge'
-import castArray from 'lodash.castarray'
-import getStyles from './get-plugin-styles'
-import { commonTrailingPseudos } from './utils'
-
-let baseFontSize = 16
-
-const computed = {
-  // Reserved for future "magic properties", for example:
-  // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
-}
-
-function inWhere(selector, { className, modifier, prefix }) {
-  let prefixedNot = prefix(`.not-${className}`).slice(1)
-  let selectorPrefix = selector.startsWith('>')
-    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
-    : ''
-
-  // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
-  let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
-
-  if (trailingPseudo) {
-    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
-  }
-
-  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
-}
-
-function isObject(value) {
-  return typeof value === 'object' && value !== null
-}
-
-function configToCss(config = {}, { target, className, modifier, prefix }) {
-  function updateSelector(k, v) {
-    if (target === 'legacy') {
-      return [k, v]
-    }
-
-    if (Array.isArray(v)) {
-      return [k, v]
-    }
-
-    if (isObject(v)) {
-      let nested = Object.values(v).some(isObject)
-      if (nested) {
-        return [
-          inWhere(k, { className, modifier, prefix }),
-          v,
-          Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
-        ]
-      }
-
-      return [inWhere(k, { className, modifier, prefix }), v]
-    }
-
-    return [k, v]
-  }
-
-  return Object.fromEntries(
-    Object.entries(
-      merge(
-        {},
-        ...Object.keys(config)
-          .filter((key) => computed[key])
-          .map((key) => computed[key](config[key])),
-        ...castArray(config.css || {})
-      )
-    ).map(([k, v]) => updateSelector(k, v))
-  )
-}
-
-export default plugin.withOptions(
-  ({ className = 'prose', target = 'modern', base = 16 } = {}) => {
-    baseFontSize = base
-    return function ({ addVariant, addComponents, theme, prefix }) {
-      let modifiers = theme('typography')
-
-      let options = { className, prefix }
-
-      for (let [name, ...selectors] of [
-        ['headings', 'h1', 'h2', 'h3', /* 'h4', 'h5', 'h6', 'th' */],
-        ['h1'],
-        ['h2'],
-        ['h3'],
-        ['h4'],
-        ['h5'],
-        ['h6'],
-        ['p'],
-        ['a'],
-        ['blockquote'],
-        ['figure'],
-        ['figcaption'],
-        ['strong'],
-        ['em'],
-        ['code'],
-        ['pre'],
-        ['ol'],
-        ['ul'],
-        ['li'],
-        ['table'],
-        ['thead'],
-        ['tr'],
-        ['th'],
-        ['td'],
-        ['img'],
-        ['video'],
-        ['hr'],
-      ]) {
-        selectors = selectors.length === 0 ? [name] : selectors
-
-        let selector =
-          target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
-
-        addVariant(
-          `${className}-${name}`,
-          target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
-        )
-      }
-
-      addComponents(
-        Object.keys(modifiers).map((modifier) => ({
-          [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
-            modifiers[modifier],
-            {
-              target,
-              className,
-              modifier,
-              prefix,
-            }
-          ),
-        }))
-      )
-    }
-  },
-  () => {
-    return {
-      theme: { typography: getStyles(baseFontSize) },
-    }
-  }
-)

package/tailwind/typo-plugin/utils.js

@@ -1,60 +0,0 @@
-import isPlainObject from 'lodash.isplainobject'
-import parser from 'postcss-selector-parser'
-
-const parseSelector = parser()
-
-export function isUsableColor(color, values) {
-  return isPlainObject(values) && color !== 'gray' && values[600]
-}
-
-/**
- * @param {string} selector
- */
-export function commonTrailingPseudos(selector) {
-  let ast = parseSelector.astSync(selector)
-
-  /** @type {import('postcss-selector-parser').Pseudo[][]} */
-  let matrix = []
-
-  // Put the pseudo elements in reverse order in a sparse, column-major 2D array
-  for (let [i, sel] of ast.nodes.entries()) {
-    for (const [j, child] of [...sel.nodes].reverse().entries()) {
-      // We only care about pseudo elements
-      if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
-        break
-      }
-
-      matrix[j] = matrix[j] || []
-      matrix[j][i] = child
-    }
-  }
-
-  let trailingPseudos = parser.selector()
-
-  // At this point the pseudo elements are in a column-major 2D array
-  // This means each row contains one "column" of pseudo elements from each selector
-  // We can compare all the pseudo elements in a row to see if they are the same
-  for (const pseudos of matrix) {
-    // It's a sparse 2D array so there are going to be holes in the rows
-    // We skip those
-    if (!pseudos) {
-      continue
-    }
-
-    let values = new Set([...pseudos.map((p) => p.value)])
-
-    // The pseudo elements are not the same
-    if (values.size > 1) {
-      break
-    }
-
-    pseudos.forEach((pseudo) => pseudo.remove())
-    trailingPseudos.prepend(pseudos[0])
-  }
-
-  if (trailingPseudos.nodes.length) {
-    return [trailingPseudos.toString(), ast.toString()]
-  }
-
-  return [null, selector]
-}

package/tailwind/typography-test.mdx

@@ -1,35 +0,0 @@
-import { LinkElement as Link } from '@hanzo/ui/primitives'
-
-###### In a galaxy far, far away
-##### Join the global rush to own silver
-#### And the global rush to gold
-### As well as the rush to crypto
-## THE SILVER RUSH IS HERE
-# THE GOLD RUSH IS HERE
-
-
-*Lorem* ipsum dolor sit amet, **consectetur** adipiscing elit, sed do eiusmod tempor 
-incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
-nostrud exercitation ullamco 
-laboris nisi ut aliquip ex ea commodo consequat. 
-
-1) Duis aute irure 
-2) dolor in reprehenderit 
-3) in voluptate velit esse 
-
-Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaefam cupidatat non proident,
-
-- sunt in culpa 
-- qui officia deserunt 
-- mollit anim id est laborum.
-
-Lorem ipsum dolor sit [amet]('/'), adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-<Link 
-  def={{
-    title: 'Enter App',
-    href: 'https://app.lux.market',
-    variant: 'primary',
-  }}
-  size='lg'
-/>

package/tailwind/z-index.tailwind.js

@@ -1,71 +0,0 @@
-const zIndex = {
-
-  auto: 'auto',
-  unset: 'unset',
-
-  ...{
-    'below-content-3': '-3',
-    'below-content-2': '-2',
-    'below-content-1': '-1',
-    'below-content': '-1',
-    'content': '0',
-    'above-content': '1',
-    'above-content-1': '1',
-    'above-content-2': '2',
-    'above-content-3': '3',
-  },
-    // popups that may scroll w content, appear below header, etc
-    // for larger, modal popups, please use 'modal'
-  ...{
-    'below-popup-3': '7',
-    'below-popup-2': '8',
-    'below-popup-1': '9',
-    'below-popup': '9',
-    'popup': '10',
-    'above-popup': '11',
-    'above-popup-1': '11',
-    'above-popup-2': '12',
-    'above-popup-3': '13',
-  },
-  ...{
-    'below-header-3': '17',
-    'below-header-2': '18',
-    'below-header-1': '19',
-    'below-header': '19',
-    'header': '20',
-    'above-header': '21',
-    'above-header-1': '21',
-    'above-header-2': '22',
-    'above-header-3': '23',
-  },
-    // drawer, dialog, full screen menu
-  ...{
-    'below-modal-3': '27',
-    'below-modal-2': '28',
-    'below-modal-1': '29',
-    'below-modal': '29',
-    'modal': '30',
-    'above-modal': '31',
-    'above-modal-1': '31',
-    'above-modal-2': '32',
-    'above-modal-3': '33',
-  },
-    // "highest": help button, other UI that floats above everything.
-  ...{
-    'below-floating-3': '37',
-    'below-floating-2': '38',
-    'below-floating-1': '39',
-    'below-floating': '39',
-    'floating': '40',
-    'above-floating': '41',
-    'above-floating-1': '41',
-    'above-floating-2': '42',
-    'above-floating-3': '43',
-  },
-}
-
-for (let i = 0; i <= 50; i++) {
-  zIndex[`${i}`] = `${i}` 
-}
-
-export default zIndex

package/test/test-registry.js

@@ -1,73 +0,0 @@
-// Small test for the registry functionality
-// This script checks if the registry is accessible
-const https = require('https');
-
-function fetchJson(url) {
-  return new Promise((resolve, reject) => {
-    https.get(url, (res) => {
-      let data = '';
-      
-      // Handle HTTP errors
-      if (res.statusCode !== 200) {
-        reject(new Error(`HTTP error: ${res.statusCode} ${res.statusMessage}`));
-        return;
-      }
-      
-      // Collect data chunks
-      res.on('data', (chunk) => {
-        data += chunk;
-      });
-      
-      // Process complete response
-      res.on('end', () => {
-        try {
-          const parsed = JSON.parse(data);
-          resolve(parsed);
-        } catch (error) {
-          reject(new Error(`Invalid JSON: ${error.message}`));
-        }
-      });
-      
-    }).on('error', (err) => {
-      reject(err);
-    });
-  });
-}
-
-async function main() {
-  try {
-    // Define registry URL
-    const registryUrl = "https://ui.hanzo.ai/registry/registry.json";
-    
-    // Fetch the registry
-    console.log(`Fetching registry from ${registryUrl}...`);
-    const registry = await fetchJson(registryUrl);
-    
-    console.log(`Successfully fetched registry with ${registry.items.length} items`);
-    
-    // Display some basic information
-    console.log(`Registry name: ${registry.name}`);
-    console.log(`Homepage: ${registry.homepage || 'Not specified'}`);
-    
-    // Count items by type
-    const typeCount = {};
-    registry.items.forEach(item => {
-      const type = item.type;
-      typeCount[type] = (typeCount[type] || 0) + 1;
-    });
-    
-    console.log("Items by type:");
-    Object.entries(typeCount).forEach(([type, count]) => {
-      console.log(`  ${type}: ${count} items`);
-    });
-    
-    // Test complete
-    console.log("Registry test completed successfully!");
-  } catch (error) {
-    console.error("Error testing registry:", error);
-    process.exit(1);
-  }
-}
-
-// Run the test
-main();

package/test-imports.mjs

@@ -1,19 +0,0 @@
-// Test file to verify all import styles work correctly
-
-// Test 1: Direct import from @hanzo/ui (top-level)
-import { Button, Card } from '@hanzo/ui'
-console.log('✓ Top-level import works:', typeof Button, typeof Card)
-
-// Test 2: Import from /components (same as top-level)
-import { Badge, Alert } from '@hanzo/ui/components'
-console.log('✓ Components import works:', typeof Badge, typeof Alert)
-
-// Test 3: Utility imports
-import { cn } from '@hanzo/ui/lib/utils'
-console.log('✓ Utils import works:', typeof cn)
-
-console.log('\n🎉 All main import styles are working correctly!')
-console.log('\nSupported import styles:')
-console.log('  - import { Button } from "@hanzo/ui"')
-console.log('  - import { Button } from "@hanzo/ui/components"')
-console.log('  - import { cn } from "@hanzo/ui/lib/utils"')

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "extends": "../tsconfig.hanzo.base.json",
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "bin",
-    "test"
-  ],
-  "compilerOptions": {
-    "noEmit": false,
-    "declaration": true,
-    "outDir": "./dist",
-    "skipLibCheck": true,
-    "rootDir": "./src",
-    "types": ["node"],
-    "verbatimModuleSyntax": false
-  }
-}

package/types/animation-def.ts

@@ -1,3 +0,0 @@
-type AnimationDef = string
-
-export { AnimationDef as default }

package/types/breakpoints.ts

@@ -1,11 +0,0 @@
-// @ts-nocheck
-
-import bps from '../tailwind/screens.tailwind'
-
-type Breakpoint = keyof typeof bps
-const Breakpoints = Object.keys(bps)
-
-export {
-  Breakpoints,
-  type Breakpoint
-}

package/types/bullet-item.ts

@@ -1,10 +0,0 @@
-import React from 'react'
-
-interface BulletItem {
-  text: string,
-  icon?: React.ReactNode // Icon = ReactNode; ReactNode can be a string
-}
-
-export {
-  type BulletItem as default
-}

package/types/button-def.ts

@@ -1,39 +0,0 @@
-import { ButtonProps } from '../primitives/button'
-
-type SubmitServerAction = (data: any, enclosure?: any) => Promise<any>
-
-interface ButtonModalProps {
-  open: boolean
-  onOpenChange: (b: boolean) => void
-  buttonText: string
-  buttonProps: ButtonProps
-  title: string
-  byline?: string
-  action: SubmitServerAction
-  actionEnclosure?: any
-}
-
-interface ButtonModalDef {
-  Comp: React.ComponentType<ButtonModalProps>
-  title: string
-  props?: any
-  byline?: string
-  action?: SubmitServerAction
-  actionEnclosure?: any
-}
-
-interface ButtonDef  {
-  text: string
-  props: ButtonProps
-  action: {
-    type: 'modal' /* | future: other types */
-    def: ButtonModalDef /* | future: other supported specifiers, such as Server Actions, or UI Actions or ? */
-  }
-}
-
-export {
-  type ButtonDef,
-  type SubmitServerAction,
-  type ButtonModalProps,
-  type ButtonModalDef,
-}

package/types/dimensions.ts

@@ -1,8 +0,0 @@
-interface Dimensions {
-  w: number
-  h: number
-}
-
-export {
-  type Dimensions as default
-}

package/types/grid-def.ts

@@ -1,56 +0,0 @@
-import type { Breakpoint } from './breakpoints'
-
-type GridColumnSpec = number | { columns: number, gap: number}
-
-interface GridDef {
-    /** Must define in ACCENDING order. */
-  at: {
-    [key in (Breakpoint)]?: GridColumnSpec
-  },
-  mobile?: GridColumnSpec
-}
-
-const COMMON_GRID_1_COL = {
-  at: {
-    xs: { columns: 1, gap: 2 },
-    md: { columns: 1, gap: 3 },
-    lg: { columns: 1, gap: 6 }
-  },
-  mobile: { columns: 1, gap: 2 }
-}
-
-const COMMON_GRID_2_COL = { 
-    at: { 
-      xs: {columns: 1, gap: 2}, 
-      md: {columns: 2, gap: 3}, 
-      lg: {columns: 2, gap: 6}
-    },  
-    mobile: {columns: 1, gap: 2}
-} as GridDef
-
-const COMMON_GRID_3_COL = { 
-  at: { 
-    xs: {columns: 1, gap: 2}, 
-    md: {columns: 3, gap: 3}, 
-    lg: {columns: 3, gap: 6}
-  },  
-  mobile: {columns: 1, gap: 2}
-} as GridDef
-
-const COMMON_GRID_4_COL = { 
-  at: { 
-    xs: {columns: 1, gap: 2}, 
-    md: {columns: 2, gap: 3}, 
-    lg: {columns: 4, gap: 6}
-  },  
-  mobile: {columns: 1, gap: 2}
-} as GridDef
-
-export {
-  type GridDef as default,
-  type GridColumnSpec,
-  COMMON_GRID_1_COL,
-  COMMON_GRID_2_COL,
-  COMMON_GRID_3_COL,
-  COMMON_GRID_4_COL
-}

package/types/image-def.ts

@@ -1,32 +0,0 @@
-import type Dimensions from './dimensions'
-
-  /**
-   * Defines a in image to render.
-   * ImageDef is part of {@link LinkDef}
-   */
-interface ImageDef {
-    /** image url */
-  src: string     
-    /** defaults to short filename */ 
-  alt?: string
-    /** See next js docs */
-  sizes?: string
-    /** 
-     * Tailwind class for svg files (usually a text-<color>).  
-     * All affect 'fill' props in the svg file 
-     * must be set to 'currentColor'.
-     */
-  svgFillClass?: string
-    /** rendered dim, unless style prop overrides
-     * in which case the file resolution should
-     * be supplied so that both Next and the browser 
-     * can determine the aspect ratio
-    */
-  dim:  Dimensions 
-
-  rounded?: string // any key from tailwind.config.borderRadius
-}
-
-export {
-  type ImageDef as default
-}

package/types/index.ts

@@ -1,29 +0,0 @@
-
-export type { default as AnimationDef } from './animation-def'
-export { Breakpoint, Breakpoints } from './breakpoints'
-export type { default as BulletItem } from './bullet-item'
-
-export type {
-  ButtonDef,
-  SubmitServerAction,
-  ButtonModalProps,
-  ButtonModalDef,
-} from './button-def'
-
-export type { default as Dimensions } from './dimensions' 
-
-export type { default as GridDef, GridColumnSpec } from './grid-def'
-export { 
-  COMMON_GRID_1_COL, 
-  COMMON_GRID_2_COL, 
-  COMMON_GRID_3_COL, 
-  COMMON_GRID_4_COL 
-} from './grid-def'
-
-export type { default as ImageDef } from './image-def'
-export type { default as LinkDef } from './link-def'
-export type { default as TShirtDimensions } from './tshirt-dimensions' 
-export type { default as TShirtSize } from './t-shirt-size' 
-export type { default as VideoDef } from './video-def'
-
-export type { MediaStackDef, MediaTransform } from './media-stack-def'

package/types/link-def.ts

@@ -1,56 +0,0 @@
-import type { VariantProps } from 'class-variance-authority'
-import type { buttonVariants } from '../primitives/button'
-
-
-  /**
-   * A Conf object for the LinkElement primitive.
-   */
-interface LinkDef extends VariantProps<typeof buttonVariants> {
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  title?: string  
-
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  icon?: React.ReactNode
-
-    /**
-     * If the LinkElement is rendered directly and has children, 
-     * the title, icon, iconAfter fields in the supplied LinkDef 
-     * will be ignored. 
-     */ 
-  iconAfter?: boolean
-
-  href: string
-
-    /**
-     * External links will open in a new tab (via target='_blank') by default, 
-     * while internal ones will open in the same tab.
-     * @field newTab overrides these defaults in both cases.
-     * ('external' means the url starts with 'http') 
-     */
-  newTab?: boolean  
-  
-    /**
-     * rendered as a disabled link, shows default cursor, and eats pointer events.
-     */
-  disabled?: boolean
-    /**
-     *contents for description link.
-     */
-  contents?: string
-
-  childMenu?: LinkDef[]
-  groupName?: string
-}
-
-
-export {
-  type LinkDef as default
-}