@hanzo/ui 5.0.2 → 5.1.0

package/tailwind/typo-plugin/index.js

@@ -1,141 +0,0 @@
-import plugin from 'tailwindcss/plugin.js'
-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/types/animation-def.ts

@@ -1,3 +0,0 @@
-type AnimationDef = string
-
-export type { 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,30 +0,0 @@
-
-export type { default as AnimationDef } from './animation-def'
-export type { Breakpoint } from './breakpoints'
-export { 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
-}

package/types/media-stack-def.ts

@@ -1,31 +0,0 @@
-import type AnimationDef from './animation-def'
-import type ImageDef from './image-def'
-import type VideoDef from './video-def'
-
-  /** 
-   * This will be implemented via css transforms, 
-   * so will be a subset of those capabilities.
-   * Individual transforms will be added as they 
-   * are needed.
-   */
-interface MediaTransform {
-    /** (X and Y) or [X, Y] */ 
-  scale?: number | number[]  
-}
-
-interface MediaStackDef {
-  img?: ImageDef
-  video?: VideoDef
-  animation?: AnimationDef
-  mediaTransform?: MediaTransform
-    /** prefered order of precedence.  
-     * If an type is missing, it will not be used.
-     * default (inMediaStack component): ['a', 'v', 'i']
-     * */ 
-  order?: ('a' | 'v' | 'i')[]  
-}
-
-export type { 
-  MediaStackDef,
-  MediaTransform  
-}

package/types/t-shirt-size.ts

@@ -1,5 +0,0 @@
-type TShirtSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export {
-  type TShirtSize as default
-}

package/types/tshirt-dimensions.ts

@@ -1,20 +0,0 @@
-type ConcreteDimensions = {
-  w: number
-  h: number
-}
-
-  // TODO: This is only used by VideoDef. 
-  // Is there a better way w @next/video?  
-type TShirtDimensions = { 
-  xs?: ConcreteDimensions            
-  sm?: ConcreteDimensions 
-  md:  ConcreteDimensions 
-  lg?: ConcreteDimensions 
-  xl?: ConcreteDimensions
-}
-
-export {
-  type TShirtDimensions as default
-}
-
-  

package/types/video-def.ts

@@ -1,25 +0,0 @@
-import type TShirtDimensions from './tshirt-dimensions'
-
-interface VideoDef {
-  videoProps?: any   // For example,
-    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      videoProps: {
-        autoPlay: true, 
-        loop: true, 
-        muted: true, 
-        playsInline: true
-      }, 
-
-      Valueless props are boolean.  
-      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
-    ~~~~~~~~~~~~~~~~~~~~~~~~ */
-  poster?: string      
-  sources?: string[]
-  dim: TShirtDimensions 
-    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
-  sizing?: any
-}
-
-export {
-  type VideoDef as default
-}

package/util/blob.ts

@@ -1,33 +0,0 @@
-export const blobToBase64 = (blob: Blob): Promise<string> => {
-  const reader = new FileReader();
-  reader.readAsDataURL(blob);
-  return new Promise((resolve) => {
-    reader.onloadend = () => {
-      resolve(reader.result as string);
-    };
-  });
-};
-
-export const dataUrlToFile = (
-  dataUrl: string,
-  filename: string,
-): File | undefined => {
-  const arr = dataUrl.split(',');
-  if (arr.length < 2) {
-    return undefined;
-  }
-  const mimeArr = arr[0].match(/:(.*?);/);
-  if (!mimeArr || mimeArr.length < 2) {
-    return undefined;
-  }
-  const mime = mimeArr[1];
-
-  // Convert base64 to binary string, then to Uint8Array (browser-compatible)
-  const binaryString = atob(arr[1]);
-  const bytes = new Uint8Array(binaryString.length);
-  for (let i = 0; i < binaryString.length; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-
-  return new File([bytes], filename, { type: mime });
-};