@opentiny/vue-common

import { 
  setup, 
  $setup, 
  hooks, 
  h,
  defineComponent,
  defineAsyncComponent,
  useBreakpoint,
  useInstanceSlots,
  useRelation,
  useDefer,
  mergeClass,
  stringifyCssClass,
  stringifyCssClassObject,
  stringifyCssClassArray,
  deduplicateCssClass,
  resolveMode,
  resolveTheme,
  filterAttrs,
  version,
  createComponent,
  directive,
  parseVnode,
  isEmptyVnode,
  isVnode,
  useRouter,
  emitter,
  Teleport,
  KeepAlive,
  getElementStatusClass,
  initComponent,
  setupComponent,
  $install
} from "@opentiny/vue-common";

import vueCommon from "@opentiny/vue-common";
// Contains h, directive, parseVnode, isEmptyVnode, useRouter, emitter, createComponent, 
// defineAsyncComponent, filterAttrs, initComponent, setupComponent, svg, $prefix, $props, 
// props, $setup, setup, hooks, getElementStatusClass, $install, isVnode

const { 
  setup, 
  $setup, 
  hooks,
  h,
  defineComponent,
  useBreakpoint,
  useInstanceSlots,
  useRelation,
  useDefer,
  mergeClass,
  stringifyCssClass,
  filterAttrs,
  version,
  createComponent,
  directive,
  parseVnode,
  isEmptyVnode,
  isVnode,
  useRouter,
  emitter,
  Teleport,
  KeepAlive,
  getElementStatusClass,
  initComponent,
  setupComponent,
  $install
} = require("@opentiny/vue-common");

import { setup, hooks, useBreakpoint, mergeClass } from "@opentiny/vue-common";

// Basic component setup with renderless pattern
export default {
  setup(props, context) {
    return setup({
      props,
      context,
      renderless: myRenderless,
      api: ['handleClick', 'state'],
      classes: {
        wrapper: 'tiny-component'
      }
    });
  }
};

// Use responsive breakpoints
const breakpoint = useBreakpoint();
hooks.watch(breakpoint.current, (current) => {
  console.log('Current breakpoint:', current); // 'sm', 'md', 'lg', 'xl', '2xl', 'default'
});

// Merge CSS classes with Tailwind
const className = mergeClass('btn', 'text-blue-500', { 'active': isActive });

function useInstanceSlots(hooks: AdapterHooks): any;
function useRelation(hooks: AdapterHooks): any;
function useDefer(maxCount?: number): {
  defer(n: number): boolean;
  reset(): void;
  cancel(): void;
};

function h(tag: any, props?: any, children?: any): any;
function defineComponent<T>(options: T): DefineComponent;
function defineAsyncComponent(loader: () => Promise<any>): DefineComponent;
function parseVnode(vnode: any): any;
function isEmptyVnode(vnode: any): boolean;
function isVnode(vnode: any): boolean;
function useRouter(instance?: any): { route: any; router: any };
function emitter(): any;
function directive(directives: any): any;
function createComponent(config: { component: any; propsData?: any; el: any }): any;
function getElementStatusClass(classes: Record<string, string>, key: string): string;
const Teleport: any;
const KeepAlive: any;

const version: string;

function filterAttrs(
  attrs: Record<string, any>, 
  filters: string[], 
  include?: boolean
): Record<string, any>;
function initComponent(): void;
function $install(component: any): void;
let setupComponent: Record<string, any>;

interface AdapterHooks {
  ref<T>(value: T): Ref<T>;
  computed<T>(getter: () => T): ComputedRef<T>;
  watch<T>(source: T, callback: (newVal: T, oldVal: T) => void): void;
  onMounted(callback: () => void): void;
  onBeforeUnmount(callback: () => void): void;
}

const hooks: AdapterHooks;
const isVue2: boolean;
const isVue3: boolean;

function setup<T>(config: SetupConfig<T>): SetupResult<T>;
function $setup(config: TemplateSetupConfig): ComponentSetupResult;

interface SetupConfig<T> {
  props: any;
  context: SetupContext;
  renderless: (props: any, hooks: AdapterHooks, utils: any) => T;
  api: string[];
  classes?: Record<string, string>;
}

function useBreakpoint(): {
  current: Ref<'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'default'>;
};

function mergeClass(...cssClasses: CssClass[]): string;
function stringifyCssClass(cssClasses: CssClass[] | CssClass): string;
function stringifyCssClassObject(cssClassObject: CssClassObject): string;
function stringifyCssClassArray(cssClassArray: CssClassArray): string;
function deduplicateCssClass(cssClasses: CssClass[] | CssClass): string;

type CssClass = string | CssClassObject | CssClassArray;
interface CssClassObject {
  [key: string]: any;
}
type CssClassArray = Array<string | CssClassObject>;

function resolveMode(props: any, context: any): 'pc' | 'mobile' | 'mobile-first';
function resolveTheme(props: any, context: any): 'tiny' | 'saas';

function svg(config: SvgConfig): (propData?: any) => DefineComponent;

interface SvgConfig {
  name?: string;
  component: any;
}

const GRADIENT_ICONS_LIST: string[];
function generateIcon(vnode: any): void;

const design: {
  configKey: symbol;
  configInstance: any;
};

function provideDesignConfig(designConfig: DesignConfig): void;

const customDesignConfig: {
  designConfig: DesignConfig | null;
  twMerge: (str: string) => string;
};

function registerMcpConfig(mcpConfig: any, defineTool: any): void;

interface DesignConfig {
  components?: any;
  name?: string;
  version?: string;
}

// Vue Framework Types
type PropType<T> = any;
type ExtractPropTypes<T> = any;
type DefineComponent = any;
type ComponentPublicInstance = any;
interface SetupContext {
  attrs: any;
  slots: any;
  emit: (...args: any[]) => void;
}
type ComputedRef<T> = {
  value: T;
};
type App = any;

// Component Props
const $props: {
  tiny_mode: StringConstructor;
  tiny_mode_root: BooleanConstructor;
  tiny_template: [FunctionConstructor, ObjectConstructor];
  tiny_renderless: FunctionConstructor;
  tiny_theme: StringConstructor;
  tiny_mcp_config: ObjectConstructor;
  tiny_chart_theme: ObjectConstructor;
};

const props: Array<
  | 'tiny_mode'
  | 'tiny_mode_root'
  | 'tiny_template'
  | 'tiny_renderless'
  | '_constants'
  | 'tiny_theme'
  | 'tiny_chart_theme'
  | 'tiny_mcp_config'
>;

// Component Setup Utilities
let setupComponent: Record<string, any>;
function initComponent(): void;
function $install(component: any): void;

// Constants
const $prefix: 'Tiny';
const version: string;