@hanzo/ui 5.3.26 → 5.3.29

package/docs/theme/typography/index.ts

@@ -0,0 +1,201 @@
+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

@@ -0,0 +1,449 @@
+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

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

package/docs/utils/is-active.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,15 @@
+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;
+      }
+    });
+  };
+}