@yamada-ui/react/dist/types/components/switch/switch.style.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle } from "../../core/system/index.types.js";
import "../../index.js";

//#region src/components/switch/switch.style.d.ts
declare const switchStyle: ComponentSlotStyle<"label" | "track" | "root" | "thumb", {
  /**
   * Change switch label from right to left.
   *
   * @default false
   */
  reverse: {
    false: {
      root: {
        flexDirection: "row";
      };
    };
    true: {
      root: {
        flexDirection: "row-reverse";
      };
    };
  };
  /**
   * The shape of the switch.
   *
   * @default circle
   */
  shape: {
    circle: {
      track: {
        rounded: "full";
      };
    };
    rounded: {
      thumb: {
        rounded: "l1";
      };
      track: {
        rounded: "l2";
      };
    };
    square: {
      track: {
        rounded: "0";
      };
    };
  };
}, {
  sm: {
    label: {
      fontSize: "sm";
    };
    thumb: {
      boxSize: "3";
    };
    track: {
      w: "6";
    };
  };
  md: {
    label: {
      fontSize: "md";
    };
    thumb: {
      boxSize: "4";
    };
    track: {
      w: "8";
    };
  };
  lg: {
    label: {
      fontSize: "lg";
    };
    thumb: {
      boxSize: "5";
    };
    track: {
      w: "10";
    };
  };
}, {
  thin: {
    thumb: {
      boxShadow: "2xl";
      _checked: {
        bg: "colorScheme.solid";
      };
    };
    track: {
      "--focus-ring-offset": "4px";
      _checked: {
        bg: ["colorScheme.muted", "colorScheme.subtle"];
      };
    };
  };
  thick: {
    thumb: {
      _checked: {
        bg: "colorScheme.contrast";
      };
    };
    track: {
      p: "1";
      _checked: {
        bg: "colorScheme.solid";
      };
    };
  };
}>;
type SwitchStyle = typeof switchStyle;
//#endregion
export { SwitchStyle, switchStyle };
//# sourceMappingURL=switch.style.d.ts.map