@lancar/lxui 1.0.0

package/types/index.d.ts

@@ -0,0 +1,284 @@
+/*!
+ * LxUI v1.0.0 — TypeScript Declarations
+ * https://ui.lancar.id
+ * Copyright (c) 2025 lancar.id — MIT License
+ */
+
+// ────────────────────────────────────────────────────────────────
+// Option interfaces
+// ────────────────────────────────────────────────────────────────
+
+export interface ModalOptions {
+  /** Whether clicking the backdrop closes the modal. Default: true */
+  backdrop?: boolean;
+  /** Whether pressing Escape closes the modal. Default: true */
+  keyboard?: boolean;
+  /** Whether to trap focus inside the modal. Default: true */
+  focus?: boolean;
+}
+
+export interface TooltipDelay {
+  show?: number;
+  hide?: number;
+}
+
+export interface TooltipOptions {
+  /** Placement of the tooltip. Default: 'top' */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Trigger event(s). Default: 'hover' */
+  trigger?: string;
+  html?: boolean;
+  delay?: TooltipDelay;
+}
+
+export interface CarouselOptions {
+  /** Auto-slide interval in ms. Default: 5000. Set to 0 to disable. */
+  interval?: number;
+  /** Pause on hover. Default: 'hover' */
+  pause?: 'hover' | false;
+  /** Wrap around at ends. Default: true */
+  wrap?: boolean;
+  /** Enable touch swipe. Default: true */
+  touch?: boolean;
+}
+
+export interface ToastOptions {
+  message?: string;
+  title?: string;
+  type?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  duration?: number;
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+
+export interface CounterOptions {
+  start?: number;
+  end?: number;
+  duration?: number;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  easing?: boolean;
+}
+
+export interface NumberInputOptions {
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+export interface RatingOptions {
+  stars?: number;
+  value?: number;
+  readonly?: boolean;
+}
+
+export interface ScrollspyOptions {
+  offset?: number;
+}
+
+export interface ThemeState {
+  theme: string | undefined;
+  mode: string | undefined;
+}
+
+export interface Breakpoints {
+  xs: 0;
+  sm: 640;
+  md: 768;
+  lg: 1024;
+  xl: 1280;
+  '2xl': 1536;
+}
+
+// ────────────────────────────────────────────────────────────────
+// Classes
+// ────────────────────────────────────────────────────────────────
+
+/** Modal dialog — show/hide/toggle with backdrop & focus trap */
+export declare class Modal {
+  el: Element | null;
+  opts: Required<ModalOptions>;
+  constructor(sel: string | Element, opts?: ModalOptions);
+  show(): void;
+  hide(): void;
+  toggle(): void;
+}
+
+/** Collapse / accordion panel with CSS height animation */
+export declare class Collapse {
+  el: Element | null;
+  constructor(sel: string | Element);
+  show(): void;
+  hide(): void;
+  toggle(): void;
+}
+
+/** Dropdown menu */
+export declare class Dropdown {
+  trigger: Element | null;
+  menu: Element | null;
+  constructor(trigger: string | Element);
+  show(): void;
+  hide(): void;
+  toggle(): void;
+}
+
+/** Offcanvas / drawer panel */
+export declare class Offcanvas {
+  el: Element | null;
+  constructor(sel: string | Element);
+  show(): void;
+  hide(): void;
+  toggle(): void;
+}
+
+/** Tooltip — positioned floating label */
+export declare class Tooltip {
+  el: Element | null;
+  opts: TooltipOptions;
+  constructor(el: string | Element, opts?: TooltipOptions);
+}
+
+/** Popover — floating panel with title + content */
+export declare class Popover {
+  el: Element | null;
+  constructor(el: string | Element, opts?: { placement?: string; trigger?: string });
+}
+
+/** Tab panel switcher */
+export declare class Tab {
+  trigger: Element | null;
+  constructor(trigger: string | Element);
+  show(): void;
+}
+
+/** Scrollspy — highlight nav links based on scroll position */
+export declare class Scrollspy {
+  el: Element | null;
+  constructor(el: string | Element, opts?: ScrollspyOptions);
+}
+
+/** Image/content carousel with touch & keyboard support */
+export declare class Carousel {
+  el: Element | null;
+  current: number;
+  items: Element[];
+  opts: Required<CarouselOptions>;
+  constructor(sel: string | Element, opts?: CarouselOptions);
+  next(): void;
+  prev(): void;
+  to(index: number): void;
+  cycle(): void;
+  pause(): void;
+}
+
+/** Animated number counter with IntersectionObserver support */
+export declare class Counter {
+  el: Element | null;
+  opts: CounterOptions;
+  constructor(el: string | Element, opts?: CounterOptions);
+  start(): void;
+  /** Observe all matching elements and start when they enter the viewport */
+  static observeAll(sel: string, opts?: CounterOptions): void;
+}
+
+/** +/− number input control */
+export declare class NumberInput {
+  wrap: Element | null;
+  input: HTMLInputElement | null;
+  opts: Required<NumberInputOptions>;
+  constructor(el: string | Element, opts?: NumberInputOptions);
+}
+
+/** Interactive star rating */
+export declare class Rating {
+  el: Element | null;
+  value: number;
+  opts: RatingOptions;
+  constructor(el: string | Element, opts?: RatingOptions);
+  setValue(value: number): void;
+  getValue(): number;
+}
+
+// ────────────────────────────────────────────────────────────────
+// Singletons / namespaces
+// ────────────────────────────────────────────────────────────────
+
+/** Programmatic toast notifications */
+export declare const Toast: {
+  show(opts: ToastOptions): void;
+  success(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  error(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  warning(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  info(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+};
+
+/** Clipboard copy utility with execCommand fallback */
+export declare const Clipboard: {
+  copy(text: string): Promise<void>;
+  bind(sel: string, getText?: (btn: Element) => string): void;
+};
+
+/** Responsive breakpoint utilities */
+export declare const breakpoint: {
+  _bp: Breakpoints;
+  /** Returns current active breakpoint name */
+  current(): keyof Breakpoints;
+  /** Calls fn immediately if bp matches, and on every future match */
+  on(bp: keyof Breakpoints, fn: () => void): void;
+};
+
+/** Theme & dark mode manager */
+export declare const theme: {
+  /** Set theme name and optional mode */
+  set(theme: string, mode?: 'light' | 'dark'): void;
+  /** Set only the color mode */
+  setMode(mode: 'light' | 'dark'): void;
+  /** Toggle between light and dark mode */
+  toggle(): void;
+  /** Returns current { theme, mode } */
+  current(): ThemeState;
+  /** Persist theme to localStorage */
+  save(theme: string, mode?: 'light' | 'dark'): void;
+  /** Restore theme from localStorage */
+  restore(): void;
+};
+
+/** Alias for Toast (backwards compat) */
+export declare const LxToast: typeof Toast;
+
+// ────────────────────────────────────────────────────────────────
+// Functions
+// ────────────────────────────────────────────────────────────────
+
+/** Initialize all LxUI components via data-attributes */
+export declare function init(): void;
+
+// ────────────────────────────────────────────────────────────────
+// Default export
+// ────────────────────────────────────────────────────────────────
+
+declare const LxUI: {
+  version: string;
+  homepage: string;
+  init: typeof init;
+  Modal: typeof Modal;
+  Toast: typeof Toast;
+  Collapse: typeof Collapse;
+  Dropdown: typeof Dropdown;
+  Offcanvas: typeof Offcanvas;
+  Tooltip: typeof Tooltip;
+  Popover: typeof Popover;
+  Tab: typeof Tab;
+  Carousel: typeof Carousel;
+  Scrollspy: typeof Scrollspy;
+  Clipboard: typeof Clipboard;
+  Counter: typeof Counter;
+  NumberInput: typeof NumberInput;
+  Rating: typeof Rating;
+  breakpoint: typeof breakpoint;
+  theme: typeof theme;
+  LxToast: typeof Toast;
+};
+
+export default LxUI;