@hanzo/ui 4.5.0 → 4.5.2

package/dist/util/index-client.d.ts

@@ -0,0 +1,2 @@
+export * from './index';
+export * from './step-animation';

package/dist/util/index-client.js

@@ -0,0 +1,3 @@
+export * from './index';
+// Must be imported from 'use client'
+export * from './step-animation';

package/dist/util/index.d.ts

@@ -0,0 +1,17 @@
+import { type ClassValue } from 'clsx';
+export { cva, type VariantProps } from 'class-variance-authority';
+import type { Dimensions } from '../types';
+export declare const cn: (...inputs: ClassValue[]) => string;
+export declare const markdown: (s: string, options?: any) => JSX.Element;
+export declare const round: (num: number) => string;
+export declare const pxToRem: (px: number, base: number) => string;
+export declare const pxToEm: (px: number, base: number) => string;
+export declare const hexToRgb: (hex: string) => string;
+export declare const asNum: (n: number | `${number}`) => number;
+export declare const constrain: (d: Dimensions, c: Dimensions) => Dimensions;
+export declare const containsToken: (s: string | undefined, toFind: string) => boolean;
+export declare const ldMerge: (result: any, ...sources: any[]) => any;
+export declare const capitalize: (str: string) => string;
+export { default as spreadToTransform } from './spread-to-transform';
+export { default as formatToMaxChar } from './format-to-max-char';
+export { default as formatAndAbbreviateAsCurrency, type FormatThreshold, type QuantityAbbrSymbol } from './format-and-abbreviate-as-currency';

package/dist/util/index.js

@@ -0,0 +1,41 @@
+import { compiler as mdCompiler } from 'markdown-to-jsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export { cva } from 'class-variance-authority';
+import { default as _merge } from 'lodash.merge';
+export const cn = (...inputs) => (twMerge(clsx(inputs)));
+export const markdown = (s, options) => (mdCompiler(s, {
+    wrapper: null,
+    ...options
+}));
+export const round = (num) => (num
+    .toFixed(7)
+    .replace(/(\.[0-9]+?)0+$/, '$1')
+    .replace(/\.0$/, ''));
+export const pxToRem = (px, base) => (`${round(px / base)}rem`);
+export const pxToEm = (px, base) => (`${round(px / base)}em`);
+export const hexToRgb = (hex) => {
+    hex = hex.replace('#', '');
+    hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex;
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `${r} ${g} ${b}`;
+};
+export const asNum = (n) => ((typeof n === 'number') ? n : parseInt(n, 10));
+// https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
+export const constrain = (d, c) => {
+    const ratio = Math.min(c.w / d.w, c.h / d.h);
+    return {
+        w: Math.round(d.w * ratio),
+        h: Math.round(d.h * ratio)
+    };
+};
+export const containsToken = (s, toFind) => (s ? s.split(' ').includes(toFind) : false);
+export const ldMerge = (result, ...sources) => (_merge(result, ...sources));
+export const capitalize = (str) => (str.charAt(0).toUpperCase() + str.slice(1));
+export { default as spreadToTransform } from './spread-to-transform';
+export { default as formatToMaxChar } from './format-to-max-char';
+export { default as formatAndAbbreviateAsCurrency } from './format-and-abbreviate-as-currency';
+// Must be imported from 'use client', so can't include this...
+// export * from './step-animation'

package/dist/util/number-abbreviate.d.ts

@@ -0,0 +1,9 @@
+type QuantityAbbrSymbol = 'K' | 'M' | 'B' | 'T';
+declare const ABBR_SYMBOLS_ARRAY: ("K" | "M" | "B" | "T")[];
+declare class NumberAbbreviator {
+    private _units;
+    constructor(units?: QuantityAbbrSymbol[]);
+    private _abbreviate;
+    abbreviate: (n: number, decPlaces: number, log?: boolean) => string;
+}
+export { type QuantityAbbrSymbol, ABBR_SYMBOLS_ARRAY, NumberAbbreviator as default };

package/dist/util/number-abbreviate.js

@@ -0,0 +1,30 @@
+// cf: https://github.com/domharrington/js-number-abbreviate/blob/master/index.js
+const ABBR_SYMBOLS_ARRAY = ['K', 'M', 'B', 'T'];
+class NumberAbbreviator {
+    constructor(units) {
+        this._abbreviate = (n, decPlaces, log = false) => {
+            const _decPlaces = Math.pow(10, decPlaces);
+            let _n = n;
+            let _unit;
+            for (let i = this._units.length - 1; i >= 0; i--) {
+                const size = Math.pow(10, (i + 1) * 3);
+                if (size <= _n) {
+                    _n = Math.round(_n * _decPlaces / size) / _decPlaces;
+                    if ((_n === 1000) && (i < this._units.length - 1)) {
+                        _n = 1;
+                        i++;
+                    }
+                    _unit = this._units[i];
+                    break;
+                }
+            }
+            return _n.toString() + (_unit ?? '');
+        };
+        this.abbreviate = (n, decPlaces, log = false) => {
+            const abbreviatedNumber = this._abbreviate(Math.abs(n), decPlaces, log);
+            return n < 0 ? '-' + abbreviatedNumber : abbreviatedNumber;
+        };
+        this._units = units ?? ABBR_SYMBOLS_ARRAY;
+    }
+}
+export { ABBR_SYMBOLS_ARRAY, NumberAbbreviator as default };

package/dist/util/specifier.d.ts

@@ -0,0 +1,7 @@
+import type { Dimensions, TShirtSize } from '../types';
+import type { TypographySize } from '../primitives/apply-typography';
+export declare const getPrimaryStartingWith: (s: string, toFind: string) => string | undefined;
+export declare const getTShirtSize: (s: string) => TShirtSize | undefined;
+export declare const getTypographySize: (s: string) => TypographySize | undefined;
+export declare const getDim: (s: string) => Dimensions | undefined;
+export declare function getSpecifierData<T>(main: string, getPrimary: (s: string) => string | undefined, getData: (s: string) => T | undefined, def?: T): T | undefined;

package/dist/util/specifier.js

@@ -0,0 +1,31 @@
+export const getPrimaryStartingWith = (s, toFind) => {
+    const tokenArray = s.split(' ');
+    return tokenArray.find((tok) => (tok.startsWith(`${toFind}-`)));
+};
+export const getTShirtSize = (s) => {
+    const subTokenArray = s.split('-');
+    return subTokenArray[subTokenArray.length - 1];
+};
+export const getTypographySize = (s) => {
+    const subTokenArray = s.split('-');
+    return subTokenArray[subTokenArray.length - 1];
+};
+export const getDim = (s) => {
+    const subTokenArray = s.split('-');
+    const dimStr = subTokenArray[subTokenArray.length - 1];
+    if (dimStr) {
+        const dimTokenArray = s.split('x');
+        return dimTokenArray ? {
+            w: Number(dimTokenArray[0]),
+            h: Number(dimTokenArray[1])
+        } : undefined;
+    }
+    return undefined;
+};
+export function getSpecifierData(main, getPrimary, getData, def) {
+    const primary = getPrimary(main);
+    if (primary) {
+        return getData(primary) ?? def;
+    }
+    return def ?? undefined;
+}

package/dist/util/spread-to-transform.d.ts

@@ -0,0 +1,7 @@
+import type { MediaTransform } from '../types';
+declare const _default: (t: MediaTransform) => {
+    transform: string;
+} | {
+    transform?: undefined;
+};
+export default _default;

package/dist/util/spread-to-transform.js

@@ -0,0 +1,18 @@
+export default (t) => {
+    let transformStrings = [];
+    const scaleVal = 'scale' in t ? t.scale : undefined;
+    if (scaleVal) {
+        if (typeof scaleVal === 'number') {
+            transformStrings.push(`scale(${scaleVal})`);
+        }
+        else if (Array.isArray(scaleVal) &&
+            scaleVal.length == 2 &&
+            typeof scaleVal[0] === 'number') {
+            transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
+        }
+        else {
+            throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
+        }
+    }
+    return transformStrings.length > 0 ? { transform: transformStrings.join(' ') } : {};
+};

package/dist/util/step-animation.d.ts

@@ -0,0 +1,5 @@
+interface StepAnimation {
+    notPast(step: number): boolean;
+}
+declare const useStepAnimation: (initialStep: () => boolean, intervals: number[]) => StepAnimation;
+export { type StepAnimation, useStepAnimation };

package/dist/util/step-animation.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+import { makeObservable, reaction, computed, observable, action } from 'mobx';
+class MyStepAnimation {
+    /**  initialStep: false -> true: step 0
+                      true -> false: step 1
+         after intervals[0] : step 2
+         after intervals[1] : step 3
+
+        initialStep must contain at least one mobx observable and return boolean
+        see: https://mobx.js.org/reactions.html#reaction
+    */
+    constructor(initialStep, intervals) {
+        this._step = -1;
+        this._reactionDisposer = undefined;
+        // This is separated out because reactions have to be created
+        // once we have a valid doc / window etc. (mobx internals)
+        // Can't just do it in constructor and assign to ref
+        this.initialize = () => {
+            const fireNext = () => {
+                this._setStep(this._step + 1);
+                if (this._step <= this._intervals.length) {
+                    // No need to call clearTimeout(): https://stackoverflow.com/a/7391588/11645689
+                    setTimeout(() => { fireNext(); }, this._intervals[this._step - 1]);
+                }
+            };
+            this._reactionDisposer = reaction(this._initialStep, (triggered) => {
+                if (triggered && this._step === -1) {
+                    this._setStep(0);
+                }
+                // extra safe
+                else if (this._step === 0) {
+                    fireNext();
+                }
+            });
+        };
+        this._setStep = (v) => { this._step = v; };
+        this.dispose = () => {
+            if (this._reactionDisposer) {
+                this._reactionDisposer();
+            }
+        };
+        // https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments
+        this.notPast = (step) => (computed(() => (this._step > -1 && this._step <= step)).get());
+        this._initialStep = initialStep;
+        this._intervals = intervals;
+        makeObservable(this, {
+            _step: observable,
+            _setStep: action
+        });
+    }
+}
+const useStepAnimation = (initialStep, intervals) => {
+    const animRef = useRef(new MyStepAnimation(initialStep, intervals));
+    useEffect(() => {
+        animRef.current.initialize();
+        return animRef.current.dispose;
+    }, []);
+    return animRef.current;
+};
+export { useStepAnimation };

package/dist/util/two-way-map.d.ts

@@ -0,0 +1,8 @@
+declare class TwoWayReadonlyMap<T, K> {
+    map: Map<T, K>;
+    reverseMap: Map<K, T>;
+    constructor(map: Map<T, K>);
+    get(key: T): K | undefined;
+    revGet(key: K): T | undefined;
+}
+export default TwoWayReadonlyMap;

package/dist/util/two-way-map.js

@@ -0,0 +1,16 @@
+class TwoWayReadonlyMap {
+    constructor(map) {
+        this.map = map;
+        this.reverseMap = new Map();
+        map.forEach((value, key) => {
+            this.reverseMap.set(value, key);
+        });
+    }
+    get(key) {
+        return this.map.get(key);
+    }
+    revGet(key) {
+        return this.reverseMap.get(key);
+    }
+}
+export default TwoWayReadonlyMap;

package/mcp/README.md

@@ -0,0 +1,141 @@
+# Hanzo UI MCP Server
+
+The Hanzo UI MCP (Model Context Protocol) server provides AI assistants with comprehensive access to the Hanzo UI component library, enabling them to browse, search, and help developers use Hanzo UI components effectively.
+
+## Quick Start
+
+### For AI Clients
+
+Configure your AI client to use the Hanzo UI MCP server:
+
+**Claude Desktop** (`.mcp.json`):
+```json
+{
+  "mcpServers": {
+    "hanzo-ui": {
+      "command": "npx",
+      "args": ["@hanzo/ui@latest", "mcp"]
+    }
+  }
+}
+```
+
+**Cursor** (`.cursor/mcp.json`):
+```json
+{
+  "mcpServers": {
+    "hanzo-ui": {
+      "command": "npx",
+      "args": ["@hanzo/ui@latest", "mcp"]
+    }
+  }
+}
+```
+
+**VS Code** (`.vscode/mcp.json`):
+```json
+{
+  "mcpServers": {
+    "hanzo-ui": {
+      "command": "npx",
+      "args": ["@hanzo/ui@latest", "mcp"]
+    }
+  }
+}
+```
+
+### Manual Usage
+
+```bash
+# Run the MCP server (stdio mode for AI clients)
+npx @hanzo/ui mcp
+
+# Run in HTTP mode for testing
+npx @hanzo/ui mcp --http --port 3333
+
+# Use custom registry
+npx @hanzo/ui mcp --registry https://my-registry.com/registry.json
+
+# Legacy command (still works)
+npx @hanzo/ui registry:mcp
+```
+
+## Available Tools
+
+The enhanced MCP server provides comprehensive tools:
+
+1. **Component Management**
+   - `init` - Initialize a new project with Hanzo UI
+   - `list_components` - List all available components
+   - `get_component` - Get detailed component information
+   - `get_component_source` - Get full component source code
+   - `get_component_demo` - Get demo implementation
+   - `add_component` - Get installation instructions
+
+2. **Blocks & Patterns**
+   - `list_blocks` - List UI blocks and patterns
+   - `get_block` - Get block details
+
+3. **Search & Discovery**
+   - `search_registry` - Search components by name/description
+   - `list_styles` - View available styles
+   - `get_installation_guide` - Complete setup guide
+
+## Available Resources
+
+The MCP server exposes these resources:
+- `hanzo://components/list` - Complete component catalog
+- `hanzo://blocks/list` - UI blocks and patterns  
+- `hanzo://installation/guide` - Installation guide
+- `hanzo://theming/guide` - Theming documentation
+
+## Available Prompts
+
+AI-assisted development prompts:
+- `component_usage` - Generate usage examples
+- `build_page` - Build complete pages
+- `component_composition` - Create custom components
+- `accessibility_review` - Review accessibility
+- `theme_customization` - Generate custom themes
+
+## Example Interactions
+
+Ask your AI assistant:
+
+- "Show me all available Hanzo UI components"
+- "How do I use the Dialog component?"
+- "Build a login form using Hanzo UI"
+- "Create a dashboard layout with Hanzo components"
+- "Generate a dark theme with purple accents"
+- "Create a custom date picker using Hanzo primitives"
+
+## Development
+
+To build the MCP server:
+
+```bash
+cd pkg/ui
+pnpm build
+```
+
+This will compile the TypeScript files and make the MCP server available.
+
+## Registry Format
+
+The registry follows the same format as shadcn/ui registries, with items defined as:
+
+```json
+{
+  "name": "button",
+  "type": "registry:component",
+  "description": "A button component with different variants.",
+  "files": [
+    {
+      "path": "components/ui/button.tsx",
+      "type": "registry:component"
+    }
+  ]
+}
+```
+
+To configure your own registry, set the `REGISTRY_URL` environment variable before running the MCP server.