combo-ui-vue 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,564 @@
+import { App, DeepReadonly, Ref } from "vue";
+
+//#region src/types.d.ts
+/**
+ * Types for @combo-ux/vanilla
+ */
+interface BorderValue {
+  style: string;
+  width: number;
+  unit: string;
+  color: string;
+}
+interface BorderRadiusValue {
+  linked: boolean;
+  unit: string;
+  tl: number;
+  tr: number;
+  br: number;
+  bl: number;
+}
+interface PaddingValue {
+  linkedV: boolean;
+  linkedH: boolean;
+  unit: string;
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+interface UnitNumber {
+  value: number;
+  unit: string;
+}
+interface ShadowValue {
+  enabled: boolean;
+  offsetX: number;
+  offsetY: number;
+  blur: number;
+  spread: number;
+  color: string;
+}
+interface ComponentShadows {
+  offset?: ShadowValue;
+  inset?: ShadowValue;
+  insetHighlight?: ShadowValue;
+}
+type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface ButtonVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string;
+  fontSize?: UnitNumber;
+  fontWeight?: string;
+  fontStyle?: string;
+  letterSpacing?: UnitNumber | string;
+  hoverBackground?: string;
+  hoverColor?: string;
+  hoverBorder?: BorderValue | string;
+  activeBackground?: string;
+  activeColor?: string;
+  activeBorder?: BorderValue | string;
+  focusColor?: string;
+  focusOffset?: UnitNumber | number;
+  showFocus?: boolean;
+  disabledBackground?: string;
+  disabledColor?: string;
+  disabledBorder?: BorderValue | string;
+  disabledOpacity?: number;
+  showDisabled?: boolean;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<ButtonVariant, 'dark'>> & {
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface ButtonComponentData {
+  variants: ButtonVariant[];
+  selectedVariantIndex: number;
+}
+interface TypographyGlobalConfig {
+  fontFamily?: string;
+  color?: string;
+  backgroundColor?: string;
+  dark?: {
+    color?: string;
+    backgroundColor?: string;
+  };
+}
+interface TypographyVariant {
+  id: string;
+  name: string;
+  isFixed?: boolean;
+  fontFamily?: string | null;
+  fontStyle?: string;
+  fontWeight?: string;
+  fontSize?: UnitNumber;
+  letterSpacing?: UnitNumber;
+  lineHeight?: UnitNumber;
+  textTransform?: string;
+  textDecoration?: string;
+  color?: string | null;
+  dark?: {
+    color?: string | null;
+  };
+}
+interface TypographyData {
+  globalConfig?: TypographyGlobalConfig;
+  variants?: TypographyVariant[];
+  selectedVariantIndex?: number;
+}
+interface FormsGlobalConfig {
+  fontFamily?: string;
+  color?: string;
+  background?: string;
+  border?: BorderValue;
+  borderRadius?: BorderRadiusValue;
+  padding?: PaddingValue;
+  fontSize?: UnitNumber;
+  fieldHeight?: number;
+  showLabel?: boolean;
+  labelColor?: string;
+  labelFontSize?: UnitNumber;
+  labelFontWeight?: string;
+  labelMarginBottom?: number;
+  showPlaceholder?: boolean;
+  placeholderColor?: string;
+  focusOutlineColor?: string;
+  focusOutlineWidth?: number;
+  errorBorderColor?: string;
+  errorColor?: string;
+  errorFontSize?: UnitNumber;
+  errorMarginTop?: number;
+  disabledOpacity?: number;
+  disabledColor?: string;
+  disabledBackground?: string;
+  disabledBorderColor?: string;
+  checkRadioColor?: string;
+  checkRadioSize?: number;
+  optionColor?: string;
+  optionFontFamily?: string | null;
+  optionFontSize?: UnitNumber;
+  optionFontWeight?: string;
+  optionSpacingHorizontal?: UnitNumber;
+  optionSpacingVertical?: UnitNumber;
+  optionOrientation?: 'horizontal' | 'vertical';
+  dropzoneBackground?: string;
+  dropzoneColor?: string;
+  dropzoneBorder?: BorderValue;
+  dropzoneBorderRadius?: BorderRadiusValue;
+  dark?: {
+    color?: string;
+    background?: string;
+    borderColor?: string;
+    labelColor?: string;
+    placeholderColor?: string;
+    focusOutlineColor?: string;
+    errorBorderColor?: string;
+    errorColor?: string;
+    disabledColor?: string;
+    disabledBackground?: string;
+    disabledBorderColor?: string;
+    checkRadioColor?: string;
+    checkRadioSize?: number;
+    optionColor?: string;
+    optionSpacingHorizontal?: UnitNumber;
+    optionSpacingVertical?: UnitNumber;
+    dropzoneBackground?: string;
+    dropzoneColor?: string;
+    dropzoneBorderColor?: string;
+  };
+}
+interface FormsVariant {
+  id: string;
+  name: string;
+  type: 'input' | 'select' | 'radio' | 'checkbox' | 'slider' | 'textarea' | 'file';
+  isFixed?: boolean;
+}
+interface FormsData {
+  globalConfig?: FormsGlobalConfig;
+  variants?: FormsVariant[];
+  selectedVariantIndex?: number;
+  currentState?: string;
+}
+interface CardVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string | null;
+  fontSize?: UnitNumber;
+  fontStyle?: string;
+  fontWeight?: string;
+  letterSpacing?: UnitNumber;
+  textAlign?: string;
+  headerBackground: string;
+  headerColor: string;
+  headerPadding: PaddingValue;
+  headerBorderBottom: BorderValue;
+  headerFontFamily?: string | null;
+  headerFontStyle?: string;
+  headerFontWeight?: string;
+  headerFontSize?: UnitNumber;
+  headerLetterSpacing?: UnitNumber;
+  headerTextAlign?: string;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<CardVariant, 'dark'>> & {
+    borderColor?: string;
+    headerBorderBottomColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface CardComponentData {
+  variants: CardVariant[];
+  selectedVariantIndex: number;
+}
+interface AlertVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string | null;
+  fontSize: UnitNumber;
+  fontStyle: string;
+  fontWeight: string;
+  letterSpacing?: UnitNumber;
+  textAlign: string;
+  headerBackground: string;
+  headerColor: string;
+  headerPadding: PaddingValue;
+  headerBorderBottom: BorderValue;
+  headerFontFamily?: string | null;
+  headerFontStyle: string;
+  headerFontWeight: string;
+  headerFontSize: UnitNumber;
+  headerLetterSpacing: UnitNumber;
+  headerTextAlign: string;
+  showClose: boolean;
+  autoDismiss: number;
+  closeSize: UnitNumber;
+  closeColor: string;
+  closeHoverColor: string;
+  closeActiveColor: string;
+  maxWidth: UnitNumber;
+  offset: UnitNumber;
+  position: Position;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<AlertVariant, 'dark'>> & {
+    borderColor?: string;
+    headerBorderBottomColor?: string;
+    closeColor?: string;
+    closeHoverColor?: string;
+    closeActiveColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface AlertComponentData {
+  variants: AlertVariant[];
+  selectedVariantIndex: number;
+}
+interface AvatarVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string | null;
+  fontSize: UnitNumber;
+  fontStyle: string;
+  fontWeight: string;
+  letterSpacing: UnitNumber;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<AvatarVariant, 'dark'>> & {
+    borderColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface AvatarComponentData {
+  variants: AvatarVariant[];
+  selectedVariantIndex: number;
+}
+interface BadgeVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string | null;
+  fontSize: UnitNumber;
+  fontStyle: string;
+  fontWeight: string;
+  letterSpacing: UnitNumber;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<BadgeVariant, 'dark'>> & {
+    borderColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface BadgeComponentData {
+  variants: BadgeVariant[];
+  selectedVariantIndex: number;
+}
+interface ChipVariant {
+  name: string;
+  background: string;
+  color: string;
+  border: BorderValue;
+  borderRadius: BorderRadiusValue;
+  padding: PaddingValue;
+  fontFamily?: string | null;
+  fontSize: UnitNumber;
+  fontStyle: string;
+  fontWeight: string;
+  letterSpacing?: UnitNumber;
+  closeSize: UnitNumber;
+  closeColor: string;
+  closeHoverColor: string;
+  closeActiveColor: string;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<ChipVariant, 'dark'>> & {
+    borderColor?: string;
+    closeColor?: string;
+    closeHoverColor?: string;
+    closeActiveColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface ChipComponentData {
+  variants: ChipVariant[];
+  selectedVariantIndex: number;
+}
+type SpinnerType = 'ring' | 'pulse' | 'dots' | 'bars' | 'dual';
+interface SpinnerVariant {
+  name: string;
+  type: SpinnerType;
+  color: string;
+  trackColor: string;
+  border: BorderValue;
+  size: UnitNumber;
+  speed: number;
+  dark: {
+    color: string;
+    trackColor: string;
+    borderColor: string;
+  };
+}
+interface SpinnerComponentData {
+  variants: SpinnerVariant[];
+  selectedVariantIndex: number;
+}
+type ProgressType = 'default' | 'striped' | 'animated';
+interface ProgressVariant {
+  name: string;
+  background: string;
+  border: BorderValue;
+  type: ProgressType;
+  trackColor: string;
+  fillColor: string;
+  stripeColor: string;
+  height: UnitNumber;
+  borderRadius: BorderRadiusValue;
+  speed: number;
+  showLabel: boolean;
+  labelColor: string;
+  fontFamily?: string | null;
+  labelFontSize: UnitNumber;
+  fontStyle: string;
+  fontWeight: string;
+  shadows?: ComponentShadows;
+  dark?: Partial<Omit<ProgressVariant, 'dark'>> & {
+    borderColor?: string;
+    trackColor?: string;
+    fillColor?: string;
+    stripeColor?: string;
+    labelColor?: string;
+    shadowColor?: string;
+    shadowInsetColor?: string;
+    shadowInsetHighlightColor?: string;
+  };
+}
+interface ProgressComponentData {
+  variants: ProgressVariant[];
+  selectedVariantIndex: number;
+}
+interface ThemeData {
+  name: string;
+  version: string;
+  typography?: TypographyData;
+  forms?: FormsData;
+  buttons?: ButtonComponentData;
+  cards?: CardComponentData;
+  alerts?: AlertComponentData;
+  avatars?: AvatarComponentData;
+  badges?: BadgeComponentData;
+  chips?: ChipComponentData;
+  progress?: ProgressComponentData;
+  spinners?: SpinnerComponentData;
+}
+type DarkModeSetting = 'auto' | 'light' | 'dark';
+interface ThemeSyncOptions {
+  /** WebSocket server URL */
+  url: string;
+  /** Auto-reconnect on disconnect (default: true) */
+  reconnect?: boolean;
+  /** Reconnection interval in ms (default: 3000) */
+  reconnectInterval?: number;
+  /** Max reconnection attempts (default: 10) */
+  maxReconnectAttempts?: number;
+  /** Callback when connected */
+  onConnect?: () => void;
+  /** Callback when disconnected */
+  onDisconnect?: () => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+  /** Callback when theme is updated */
+  onThemeUpdate?: (theme: ThemeData) => void;
+}
+interface ComboUXOptions {
+  /** Theme data object or URL to JSON file */
+  theme: ThemeData | string;
+  /** Dark mode setting: 'auto' (follows system), 'light', or 'dark' */
+  darkMode?: DarkModeSetting;
+  /** Persist dark mode preference in localStorage */
+  persistDarkMode?: boolean;
+  /** Key for localStorage persistence */
+  darkModeStorageKey?: string;
+  /** WebSocket options for real-time theme sync, or URL string, or false to disable */
+  ws?: string | ThemeSyncOptions | false;
+}
+interface ThemeButtonOptions {
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  icon?: string;
+  onClick?: () => void;
+}
+interface DarkToggleOptions {
+  iconLight?: string;
+  iconDark?: string;
+}
+interface ControlsOptions {
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  theme?: Omit<ThemeButtonOptions, 'position'>;
+  darkToggle?: DarkToggleOptions;
+}
+type DarkModeChangeCallback = (isDark: boolean) => void;
+type ThemeLoadCallback = (theme: ThemeData) => void;
+//#endregion
+//#region src/combo-ux.d.ts
+declare class ComboUX {
+  private options;
+  private darkMode;
+  private cssInjector;
+  private themeLoader;
+  private themeSync;
+  private currentTheme;
+  constructor(options: ComboUXOptions);
+  /**
+   * Initialize the library (must be called manually or via composable)
+   */
+  init(): Promise<void>;
+  /**
+   * Inject base styles with theme colors
+   */
+  private injectBaseStylesFromTheme;
+  /**
+   * Load theme from URL or object
+   */
+  loadTheme(theme: ThemeData | string): Promise<void>;
+  /**
+   * Apply theme by generating and injecting CSS
+   */
+  private applyTheme;
+  /**
+   * Update theme (for real-time updates via websockets)
+   */
+  updateTheme(theme: ThemeData): void;
+  /**
+   * Update a specific button variant
+   */
+  updateButtonVariant(variantName: string, updates: Partial<ButtonVariant>): void;
+  /** Check if dark mode is active */
+  get isDark(): boolean;
+  /** Set dark mode */
+  setDarkMode(value: boolean | 'auto'): void;
+  /** Toggle dark mode */
+  toggleDarkMode(): void;
+  /** Register callback for dark mode changes */
+  onDarkModeChange(callback: DarkModeChangeCallback): () => void;
+  /** Check if WebSocket is connected */
+  get isSyncConnected(): boolean;
+  /** Connect to WebSocket server */
+  connectSync(): void;
+  /** Disconnect from WebSocket server */
+  disconnectSync(): void;
+  /** Register callback for sync connection */
+  onSyncConnect(callback: () => void): () => void;
+  /** Register callback for sync disconnection */
+  onSyncDisconnect(callback: () => void): () => void;
+  /** Register callback for sync errors */
+  onSyncError(callback: (error: Error) => void): () => void;
+  /** Register callback for theme updates from sync */
+  onSyncThemeUpdate(callback: (theme: ThemeData) => void): () => void;
+  /** Register callback for theme load events */
+  onThemeLoad(callback: ThemeLoadCallback): () => void;
+  /** Destroy instance and clean up */
+  destroy(): void;
+}
+//#endregion
+//#region src/composables/useComboUX.d.ts
+interface UseComboUXReturn {
+  isInitialized: DeepReadonly<Ref<boolean>>;
+  isDark: DeepReadonly<Ref<boolean>>;
+  instance: ComboUX | null;
+  toggleDarkMode: () => void;
+  setDarkMode: (value: boolean | 'auto') => void;
+  updateTheme: (theme: ThemeData) => void;
+}
+/**
+ * Initialize ComboUX with options
+ * Should be called once in your app entry point
+ */
+declare function initComboUX(options: ComboUXOptions): Promise<ComboUX>;
+/**
+ * Get the current ComboUX instance
+ */
+declare function getComboUX(): ComboUX | null;
+/**
+ * Vue composable to use ComboUX in components
+ */
+declare function useComboUX(): UseComboUXReturn;
+/**
+ * Destroy the ComboUX instance
+ */
+declare function destroyComboUX(): void;
+//#endregion
+//#region src/index.d.ts
+interface ComboUXPluginOptions extends ComboUXOptions {
+  /** Auto initialize on install */
+  autoInit?: boolean;
+}
+declare const ComboUXPlugin: {
+  install(app: App<any>, options: ComboUXPluginOptions): Promise<void>;
+};
+//#endregion
+export { AlertComponentData, AlertVariant, AvatarComponentData, AvatarVariant, BadgeComponentData, BadgeVariant, BorderRadiusValue, BorderValue, ButtonComponentData, ButtonVariant, CardComponentData, CardVariant, ChipComponentData, ChipVariant, ComboUX, type ComboUXOptions, ComboUXPlugin, ComboUXPlugin as default, ComboUXPluginOptions, ComponentShadows, ControlsOptions, DarkModeChangeCallback, DarkModeSetting, DarkToggleOptions, FormsData, FormsGlobalConfig, FormsVariant, PaddingValue, Position, ProgressComponentData, ProgressType, ProgressVariant, ShadowValue, SpinnerComponentData, SpinnerType, SpinnerVariant, ThemeButtonOptions, type ThemeData, ThemeLoadCallback, ThemeSyncOptions, TypographyData, TypographyGlobalConfig, TypographyVariant, UnitNumber, type UseComboUXReturn, destroyComboUX, getComboUX, initComboUX, useComboUX };