@yamada-ui/react/dist/types/components/toggle/toggle.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/toggle/toggle.style.d.ts
declare const toggleStyle: ComponentSlotStyle<"group" | "root", {
  /**
   * If true, the toggle button is full rounded. Else, it'll be slightly round.
   *
   * @default false
   */
  fullRounded: {
    true: {
      root: {
        rounded: "full";
      };
    };
  };
}, {
  xs: {
    root: {
      gap: "1";
      fontSize?: "lg" | undefined;
      minBoxSize?: "8" | undefined;
    };
  };
  sm: {
    root: {
      gap: "2";
      fontSize?: "xl" | undefined;
      minBoxSize?: "9" | undefined;
    };
  };
  md: {
    root: {
      gap: "2";
      fontSize?: "2xl" | undefined;
      minBoxSize?: "10" | undefined;
    };
  };
  lg: {
    root: {
      gap: "2.5";
      fontSize?: "3xl" | undefined;
      minBoxSize?: "11" | undefined;
    };
  };
  xl: {
    root: {
      gap: "3";
      fontSize?: "4xl" | undefined;
      minBoxSize?: "12" | undefined;
    };
  };
  "2xl": {
    root: {
      gap: "3";
      fontSize?: "4xl" | undefined;
      minBoxSize?: "14" | undefined;
    };
  };
}, {
  ghost: {
    root: {
      _checked: {
        layerStyle: "solid";
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
      _notChecked: {
        layerStyle: "ghost";
        _hover: {
          layerStyle: "ghost.hover";
        };
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
    };
  };
  outline: {
    root: {
      _checked: {
        layerStyle: "solid";
        borderColor: "colorScheme.solid";
        borderWidth: "1px";
        _invalid: {
          borderColor: "{error-border-color}";
        };
      };
      _notChecked: {
        layerStyle: "outline";
        _hover: {
          layerStyle: "outline.hover";
        };
        _invalid: {
          borderColor: "{error-border-color}";
        };
      };
    };
  };
  solid: {
    root: {
      _checked: {
        layerStyle: "subtle";
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
      _notChecked: {
        layerStyle: "solid";
        _hover: {
          layerStyle: "solid.hover";
        };
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
    };
  };
  subtle: {
    root: {
      _checked: {
        layerStyle: "solid";
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
      _notChecked: {
        layerStyle: "subtle";
        _hover: {
          layerStyle: "subtle.hover";
        };
        _invalid: {
          borderColor: "{error-border-color}";
          borderWidth: "1px";
        };
      };
    };
  };
  surface: {
    root: {
      _checked: {
        layerStyle: "solid";
        _invalid: {
          borderColor: "{error-border-color}";
        };
      };
      _notChecked: {
        layerStyle: "surface";
        _hover: {
          layerStyle: "surface.hover";
        };
        _invalid: {
          borderColor: "{error-border-color}";
        };
      };
    };
  };
}>;
type ToggleStyle = typeof toggleStyle;
//#endregion
export { ToggleStyle, toggleStyle };
//# sourceMappingURL=toggle.style.d.ts.map