@hanzo/ui 5.7.1 → 8.0.0

package/docs/theme/typography/index.ts

@@ -1,201 +0,0 @@
-import * as styles from './styles';
-import plugin from 'tailwindcss/plugin';
-import merge from 'lodash.merge';
-import parser, { type Pseudo } from 'postcss-selector-parser';
-import type { Config } from './styles';
-
-export interface Options {
-  className?: string;
-
-  /**
-   * Disable custom table styles
-   */
-  disableRoundedTable?: boolean;
-}
-
-interface Context {
-  prefix: (v: string) => string;
-  modifier?: string;
-}
-
-function inWhere(
-  selector: string,
-  { className, prefix, modifier }: Options & Context,
-) {
-  const prefixedNot = prefix(`.not-${className}`).slice(1);
-  const 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
-  const [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 configToCss(
-  config: Config = {},
-  { className, modifier, prefix }: Options & Context,
-) {
-  function updateSelector(
-    k: string,
-    v: unknown,
-  ): [k: string, v: unknown, object?] {
-    if (Array.isArray(v)) {
-      return [k, v];
-    }
-
-    if (typeof v === 'object' && v !== null) {
-      const nested = Object.values(v).some((prop) => typeof prop === 'object');
-      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];
-  }
-
-  const css = config.css ?? [];
-  return Object.fromEntries(
-    Object.entries(merge({}, ...(Array.isArray(css) ? css : [css]))).map(
-      ([k, v]) => updateSelector(k, v),
-    ),
-  );
-}
-
-const parseSelector = parser();
-
-function commonTrailingPseudos(selector: string) {
-  const ast = parseSelector.astSync(selector);
-  const matrix: Pseudo[][] = [];
-
-  // Put the pseudo elements in reverse order in a sparse, column-major 2D array
-  for (const [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;
-    }
-  }
-
-  const trailingPseudos = parser.selector({
-    value: '',
-  });
-
-  // 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;
-    }
-
-    const 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];
-}
-
-const SELECTORS = [
-  ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
-  ['h1'],
-  ['h2'],
-  ['h3'],
-  ['h4'],
-  ['h5'],
-  ['h6'],
-  ['p'],
-  ['a'],
-  ['blockquote'],
-  ['figure'],
-  ['figcaption'],
-  ['strong'],
-  ['em'],
-  ['kbd'],
-  ['code'],
-  ['pre'],
-  ['ol'],
-  ['ul'],
-  ['li'],
-  ['table'],
-  ['thead'],
-  ['tr'],
-  ['th'],
-  ['td'],
-  ['img'],
-  ['video'],
-  ['hr'],
-  ['lead', '[class~="lead"]'],
-];
-
-export const typography: unknown = plugin.withOptions<Options>(
-  ({ className = 'prose', ...styleOptions } = {}) => {
-    return ({ addVariant, addComponents, ...rest }) => {
-      const prefix = (rest as unknown as { prefix: Context['prefix'] }).prefix;
-
-      for (const [name, ...values] of SELECTORS) {
-        const selectors = values.length === 0 ? [name] : values;
-        const selector = selectors.join(', ');
-
-        addVariant(
-          `${className}-${name}`,
-          `& :is(${inWhere(selector, {
-            prefix,
-            className,
-          })})`,
-        );
-      }
-
-      addComponents({
-        [`.${className}`]: configToCss(
-          {
-            ...styles.DEFAULT,
-            css: [
-              ...(styles.DEFAULT.css ?? []),
-              styleOptions.disableRoundedTable
-                ? styles.normalTable
-                : styles.roundedTable,
-            ],
-          },
-          {
-            className,
-            modifier: 'DEFAULT',
-            prefix,
-          },
-        ),
-      });
-    };
-  },
-);
-
-export default typography;

package/docs/theme/typography/styles.ts

@@ -1,449 +0,0 @@
-function round(num: number) {
-  return num
-    .toFixed(7)
-    .replace(/(\.[0-9]+?)0+$/, '$1')
-    .replace(/\.0$/, '');
-}
-
-function rem(px: number) {
-  return `${round(px / 16)}rem`;
-}
-
-function em(px: number, base: number) {
-  return `${round(px / base)}em`;
-}
-
-const colors = {
-  '--tw-prose-body':
-    'color-mix(in oklab, var(--color-fd-foreground) 90%, transparent)',
-  '--tw-prose-headings': 'var(--color-fd-foreground)',
-  '--tw-prose-lead': `var(--color-fd-foreground)`,
-  '--tw-prose-links': `var(--color-fd-foreground)`,
-  '--tw-prose-bold': `var(--color-fd-foreground)`,
-  '--tw-prose-counters': `var(--color-fd-muted-foreground)`,
-  '--tw-prose-bullets': `var(--color-fd-muted-foreground)`,
-  '--tw-prose-hr': `var(--color-fd-border)`,
-  '--tw-prose-quotes': `var(--color-fd-foreground)`,
-  '--tw-prose-quote-borders': `var(--color-fd-border)`,
-  '--tw-prose-captions': `var(--color-fd-foreground)`,
-  '--tw-prose-code': `var(--color-fd-foreground)`,
-  '--tw-prose-th-borders': `var(--color-fd-border)`,
-  '--tw-prose-td-borders': `var(--color-fd-border)`,
-  '--tw-prose-kbd': `var(--color-fd-foreground)`,
-  '--tw-prose-kbd-shadows': `color-mix(in oklab, var(--color-fd-primary) 50%, transparent)`,
-};
-
-export const roundedTable = {
-  table: {
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    background: 'var(--color-fd-card)',
-    borderRadius: 'var(--radius-lg)',
-    border: '1px solid var(--color-fd-border)',
-    overflow: 'hidden',
-  },
-  th: {
-    textAlign: 'start',
-    padding: 'calc(var(--spacing) * 2.5)',
-    'border-inline-start': '1px solid var(--color-fd-border)',
-    background: 'var(--color-fd-muted)',
-  },
-  'th:first-child': {
-    'border-inline-start': 'none',
-  },
-  'th:not(tr:last-child *), td:not(tr:last-child *)': {
-    'border-bottom': '1px solid var(--color-fd-border)',
-  },
-  td: {
-    textAlign: 'start',
-    'border-inline-start': '1px solid var(--color-fd-border)',
-    padding: 'calc(var(--spacing) * 2.5)',
-  },
-  'td:first-child': {
-    'border-inline-start': 'none',
-  },
-  'tfoot th, tfoot td': {
-    borderTopWidth: '1px',
-    borderTopColor: 'var(--tw-prose-th-borders)',
-  },
-  'thead th, thead td': {
-    borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-prose-th-borders)',
-  },
-};
-
-export const normalTable = {
-  thead: {
-    borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-prose-th-borders)',
-  },
-  'thead th': {
-    verticalAlign: 'bottom',
-    paddingInlineEnd: em(8, 14),
-    paddingBottom: em(8, 14),
-    paddingInlineStart: em(8, 14),
-  },
-  'thead th:first-child': {
-    paddingInlineStart: '0',
-  },
-  'thead th:last-child': {
-    paddingInlineEnd: '0',
-  },
-  'tbody td, tfoot td': {
-    paddingTop: em(8, 14),
-    paddingInlineEnd: em(8, 14),
-    paddingBottom: em(8, 14),
-    paddingInlineStart: em(8, 14),
-  },
-  'tbody td:first-child, tfoot td:first-child': {
-    paddingInlineStart: '0',
-  },
-  'tbody td:last-child, tfoot td:last-child': {
-    paddingInlineEnd: '0',
-  },
-  'tbody tr': {
-    borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-prose-td-borders)',
-  },
-  'tbody tr:last-child': {
-    borderBottomWidth: '0',
-  },
-  'tbody td': {
-    verticalAlign: 'baseline',
-  },
-  tfoot: {
-    borderTopWidth: '1px',
-    borderTopColor: 'var(--tw-prose-th-borders)',
-  },
-  'tfoot td': {
-    verticalAlign: 'top',
-  },
-  'th, td': {
-    textAlign: 'start',
-  },
-};
-
-export interface Config {
-  css?: Record<string, string | Record<string, string>>[];
-}
-
-export const DEFAULT: Config = {
-  css: [
-    {
-      color: 'var(--tw-prose-body)',
-      maxWidth: 'none',
-      fontSize: rem(16),
-      lineHeight: '1.75rem',
-
-      '[class~="lead"]': {
-        fontSize: em(20, 16),
-        lineHeight: round(32 / 20),
-        marginTop: em(24, 20),
-        marginBottom: em(24, 20),
-        color: 'var(--tw-prose-lead)',
-      },
-      ul: {
-        paddingInlineStart: '1rem',
-        listStyleType: 'disc',
-        marginTop: em(20, 16),
-        marginBottom: em(20, 16),
-      },
-      li: {
-        marginTop: em(8, 16),
-        marginBottom: em(8, 16),
-      },
-      'ol > li': {
-        paddingInlineStart: em(6, 16),
-      },
-      'ul > li': {
-        paddingInlineStart: '0',
-      },
-      '> ul > li p': {
-        marginTop: em(12, 16),
-        marginBottom: em(12, 16),
-      },
-      '> ul > li > p:first-child': {
-        marginTop: em(20, 16),
-      },
-      '> ul > li > p:last-child': {
-        marginBottom: em(20, 16),
-      },
-      '> ol > li > p:first-child': {
-        marginTop: em(20, 16),
-      },
-      '> ol > li > p:last-child': {
-        marginBottom: em(20, 16),
-      },
-      'ul ul, ul ol, ol ul, ol ol': {
-        marginTop: em(12, 16),
-        marginBottom: em(12, 16),
-      },
-      dl: {
-        marginTop: em(20, 16),
-        marginBottom: em(20, 16),
-      },
-      dt: {
-        color: 'var(--tw-prose-headings)',
-        fontWeight: '600',
-        marginTop: em(20, 16),
-      },
-      dd: {
-        marginTop: em(8, 16),
-        paddingInlineStart: em(26, 16),
-      },
-      hr: {
-        borderColor: 'var(--tw-prose-hr)',
-        borderTopWidth: '1px',
-        marginTop: em(48, 16),
-        marginBottom: em(48, 16),
-      },
-      p: {
-        marginTop: em(20, 16),
-        marginBottom: em(20, 16),
-      },
-      strong: {
-        color: 'var(--tw-prose-bold)',
-        fontWeight: '500',
-      },
-      'a strong': {
-        color: 'inherit',
-      },
-      'blockquote strong': {
-        color: 'inherit',
-      },
-      'thead th strong': {
-        color: 'inherit',
-      },
-      ol: {
-        listStyleType: 'decimal',
-        marginTop: em(20, 16),
-        marginBottom: em(20, 16),
-        paddingInlineStart: em(26, 16),
-      },
-      'ol[type="A"]': {
-        listStyleType: 'upper-alpha',
-      },
-      'ol[type="a"]': {
-        listStyleType: 'lower-alpha',
-      },
-      'ol[type="A" s]': {
-        listStyleType: 'upper-alpha',
-      },
-      'ol[type="a" s]': {
-        listStyleType: 'lower-alpha',
-      },
-      'ol[type="I"]': {
-        listStyleType: 'upper-roman',
-      },
-      'ol[type="i"]': {
-        listStyleType: 'lower-roman',
-      },
-      'ol[type="I" s]': {
-        listStyleType: 'upper-roman',
-      },
-      'ol[type="i" s]': {
-        listStyleType: 'lower-roman',
-      },
-      'ol[type="1"]': {
-        listStyleType: 'decimal',
-      },
-      'ol > li::marker': {
-        fontWeight: '400',
-        color: 'var(--tw-prose-counters)',
-      },
-      'ul > li::marker': {
-        color: 'var(--tw-prose-bullets)',
-      },
-      blockquote: {
-        marginTop: em(32, 20),
-        marginBottom: em(32, 20),
-        paddingInlineStart: em(20, 20),
-        fontWeight: '500',
-        fontStyle: 'italic',
-        color: 'var(--tw-prose-quotes)',
-        borderInlineStartWidth: '0.25rem',
-        borderInlineStartColor: 'var(--tw-prose-quote-borders)',
-        quotes: '"\\201C""\\201D""\\2018""\\2019"',
-      },
-      'blockquote p:first-of-type::before': {
-        content: 'open-quote',
-      },
-      'blockquote p:last-of-type::after': {
-        content: 'close-quote',
-      },
-      h1: {
-        color: 'var(--tw-prose-headings)',
-        fontWeight: '800',
-        fontSize: 'var(--text-3xl)',
-        marginTop: '0',
-        marginBottom: em(32, 36),
-        lineHeight: round(40 / 36),
-      },
-      'h1 strong': {
-        fontWeight: '900',
-        color: 'inherit',
-      },
-      h2: {
-        color: 'var(--tw-prose-headings)',
-        fontSize: em(24, 16),
-        marginTop: em(48, 24),
-        marginBottom: em(24, 24),
-        lineHeight: round(32 / 24),
-        fontWeight: '600',
-      },
-      'h2 strong': {
-        fontWeight: '800',
-        color: 'inherit',
-      },
-      h3: {
-        color: 'var(--tw-prose-headings)',
-        fontWeight: '600',
-        fontSize: em(20, 16),
-        marginTop: em(32, 20),
-        marginBottom: em(12, 20),
-        lineHeight: round(32 / 20),
-      },
-      'h3 strong': {
-        fontWeight: '700',
-        color: 'inherit',
-      },
-      h4: {
-        color: 'var(--tw-prose-headings)',
-        fontWeight: '600',
-        marginTop: em(24, 16),
-        marginBottom: em(8, 16),
-        lineHeight: round(24 / 16),
-      },
-      'h4 strong': {
-        fontWeight: '700',
-        color: 'inherit',
-      },
-      'hr + *': {
-        marginTop: '0',
-      },
-      'h2 + *': {
-        marginTop: '0',
-      },
-      'h3 + *': {
-        marginTop: '0',
-      },
-      'h4 + *': {
-        marginTop: '0',
-      },
-      img: {
-        marginTop: em(32, 16),
-        marginBottom: em(32, 16),
-      },
-      picture: {
-        display: 'block',
-        marginTop: em(32, 16),
-        marginBottom: em(32, 16),
-      },
-      'picture > img': {
-        marginTop: '0',
-        marginBottom: '0',
-      },
-      video: {
-        marginTop: em(32, 16),
-        marginBottom: em(32, 16),
-      },
-      kbd: {
-        fontSize: em(14, 16),
-        borderRadius: rem(5),
-        paddingTop: em(3, 16),
-        paddingInlineEnd: em(6, 16),
-        paddingBottom: em(3, 16),
-        paddingInlineStart: em(6, 16),
-        fontWeight: '500',
-        fontFamily: 'inherit',
-        color: 'var(--tw-prose-kbd)',
-        boxShadow:
-          '0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)',
-      },
-      code: {
-        padding: '3px',
-        border: 'solid 1px',
-        fontSize: '13px',
-        borderColor: `var(--color-fd-border)`,
-        borderRadius: '5px',
-        fontWeight: '400',
-        background: `var(--color-fd-muted)`,
-        color: 'var(--tw-prose-code)',
-      },
-      'a code': {
-        color: 'inherit',
-      },
-      'h1 code': {
-        color: 'inherit',
-        fontSize: 'var(--text-2xl)',
-      },
-      'h2 code': {
-        color: 'inherit',
-        fontSize: em(21, 24),
-      },
-      'h3 code': {
-        color: 'inherit',
-        fontSize: em(18, 20),
-      },
-      'h4 code': {
-        color: 'inherit',
-      },
-      'blockquote code': {
-        color: 'inherit',
-      },
-      'thead th code': {
-        color: 'inherit',
-      },
-
-      table: {
-        fontSize: em(14, 16),
-        lineHeight: round(24 / 14),
-        width: '100%',
-        tableLayout: 'auto',
-        marginTop: em(32, 16),
-        marginBottom: em(32, 16),
-      },
-      'thead th': {
-        color: 'var(--tw-prose-headings)',
-        fontWeight: '600',
-      },
-
-      figure: {
-        marginTop: em(32, 16),
-        marginBottom: em(32, 16),
-      },
-      'figure > *': {
-        marginTop: '0',
-        marginBottom: '0',
-      },
-      figcaption: {
-        color: 'var(--tw-prose-captions)',
-        fontSize: em(14, 16),
-        lineHeight: round(20 / 14),
-        marginTop: em(12, 14),
-      },
-
-      'a:not([data-card])': {
-        color: 'var(--tw-prose-links)',
-        transition: 'opacity .2s',
-        fontWeight: '500',
-        textDecoration: 'underline',
-        textUnderlineOffset: '3.5px',
-        textDecorationColor: 'var(--color-fd-primary)',
-        textDecorationThickness: '1.5px',
-      },
-      'a:not([data-card]):hover': {
-        opacity: '80%',
-      },
-    },
-    colors,
-    {
-      '> :first-child': {
-        marginTop: '0',
-      },
-      '> :last-child': {
-        marginBottom: '0',
-      },
-    },
-  ],
-};

package/docs/utils/cn.ts

@@ -1 +0,0 @@
-export { twMerge as cn } from 'tailwind-merge';

package/docs/utils/is-active.ts

@@ -1,23 +0,0 @@
-import type { SidebarTab } from '@/components/sidebar/tabs';
-
-function normalize(url: string) {
-  if (url.length > 1 && url.endsWith('/')) return url.slice(0, -1);
-  return url;
-}
-
-export function isActive(
-  url: string,
-  pathname: string,
-  nested = true,
-): boolean {
-  url = normalize(url);
-  pathname = normalize(pathname);
-
-  return url === pathname || (nested && pathname.startsWith(`${url}/`));
-}
-
-export function isTabActive(tab: SidebarTab, pathname: string) {
-  if (tab.urls) return tab.urls.has(normalize(pathname));
-
-  return isActive(tab.url, pathname, true);
-}

package/docs/utils/merge-refs.ts

@@ -1,15 +0,0 @@
-import type * as React from 'react';
-
-export function mergeRefs<T>(
-  ...refs: (React.Ref<T> | undefined)[]
-): React.RefCallback<T> {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref) {
-        ref.current = value;
-      }
-    });
-  };
-}