@lobehub/ui/es/LobeSwitch/type.d.mts

Lobe UI is an open-source UI component library for building AIGC web apps

import { CSSProperties, ComponentProps, KeyboardEvent, MouseEvent, ReactNode, Ref } from "react";
import { HTMLMotionProps, TargetAndTransition, Transition } from "motion/react";
import { Switch } from "@base-ui/react/switch";

//#region src/LobeSwitch/type.d.ts
type LobeSwitchSize = 'default' | 'small';
type LobeSwitchChangeEventHandler = (checked: boolean, event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
type LobeSwitchClickEventHandler = LobeSwitchChangeEventHandler;
interface LobeSwitchClassNames {
  content?: string;
  root?: string;
  thumb?: string;
}
interface LobeSwitchStyles {
  content?: CSSProperties;
  root?: CSSProperties;
  thumb?: CSSProperties;
}
interface LobeSwitchContextType {
  isChecked: boolean;
  isPressed: boolean;
  setIsChecked: (checked: boolean) => void;
  setIsPressed: (pressed: boolean) => void;
}
type LobeSwitchRootProps = Omit<ComponentProps<typeof Switch.Root>, 'render'> & HTMLMotionProps<'button'> & {
  size?: LobeSwitchSize;
};
type LobeSwitchThumbProps = Omit<ComponentProps<typeof Switch.Thumb>, 'render'> & HTMLMotionProps<'span'> & {
  pressedAnimation?: TargetAndTransition | boolean;
  size?: LobeSwitchSize;
  transition?: Transition;
};
type LobeSwitchIconPosition = 'left' | 'right' | 'thumb';
type LobeSwitchIconProps = HTMLMotionProps<'span'> & {
  position: LobeSwitchIconPosition;
  transition?: Transition;
};
interface LobeSwitchProps {
  /**
   * Whether to set focus automatically when mounted
   */
  autoFocus?: boolean;
  /**
   * Whether the switch is checked
   */
  checked?: boolean;
  /**
   * Icon to show when checked (left position)
   */
  checkedChildren?: ReactNode;
  /**
   * Custom class name
   */
  className?: string;
  /**
   * Custom class names for each part
   */
  classNames?: LobeSwitchClassNames;
  /**
   * Initial checked state (uncontrolled)
   */
  defaultChecked?: boolean;
  /**
   * Alias for `defaultChecked`
   */
  defaultValue?: boolean;
  /**
   * Whether the switch is disabled
   */
  disabled?: boolean;
  /**
   * Element id
   */
  id?: string;
  /**
   * Show loading indicator
   */
  loading?: boolean;
  /**
   * Name attribute for form submission
   */
  name?: string;
  /**
   * Callback when the switch state changes
   */
  onChange?: LobeSwitchChangeEventHandler;
  /**
   * Callback when clicking the switch
   */
  onClick?: LobeSwitchClickEventHandler;
  /**
   * Reference to the root element
   */
  ref?: Ref<HTMLButtonElement>;
  /**
   * Additional class name for root element
   */
  rootClassName?: string;
  /**
   * Size of the switch
   * @default 'default'
   */
  size?: LobeSwitchSize;
  /**
   * Custom inline style
   */
  style?: CSSProperties;
  /**
   * Custom styles for each part
   */
  styles?: LobeSwitchStyles;
  /**
   * Tab index for keyboard navigation
   */
  tabIndex?: number;
  /**
   * Native title attribute
   */
  title?: string;
  /**
   * Icon to show when unchecked (right position)
   */
  unCheckedChildren?: ReactNode;
  /**
   * Alias for `checked`
   */
  value?: boolean;
}
//#endregion
export { LobeSwitchChangeEventHandler, LobeSwitchClassNames, LobeSwitchClickEventHandler, LobeSwitchContextType, LobeSwitchIconPosition, LobeSwitchIconProps, LobeSwitchProps, LobeSwitchRootProps, LobeSwitchSize, LobeSwitchStyles, LobeSwitchThumbProps };
//# sourceMappingURL=type.d.mts.map