@yamada-ui/react/dist/types/components/number-input/number-input.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 { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
import "../../index.js";

//#region src/components/number-input/number-input.style.d.ts
declare const numberInputStyle: ComponentSlotStyle<"button" | "control" | "root" | "field" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "control" | "root" | "field" | "decrement" | "increment">>, {
  xs: {
    control: {
      boxSize: "calc({--height} - {spaces.2})";
      fontSize: "xs" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.2";
      "--space-y": "spaces.1.5";
      fontSize: "xs";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
  sm: {
    control: {
      boxSize: "calc({--height} - {spaces.2})";
      fontSize: "sm" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.2.5";
      "--space-y": "spaces.2";
      fontSize: "sm";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
  md: {
    control: {
      boxSize: "calc({--height} - {spaces.2})";
      fontSize: "md" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
      fontSize: "md";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
  lg: {
    control: {
      boxSize: "calc({--height} - {spaces.2.5})";
      fontSize: "lg" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.3.5";
      "--space-y": "spaces.2.5";
      fontSize: "lg";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
  xl: {
    control: {
      boxSize: "calc({--height} - {spaces.3})";
      fontSize: "xl" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
      fontSize: "xl";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
  "2xl": {
    control: {
      boxSize: "calc({--height} - {spaces.3})";
      fontSize: "xl" | undefined;
    };
    field: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
      fontSize: "xl";
      px: "{space-x}";
    } | undefined;
    root: {
      "&:has(+ [data-input-element])": {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      };
      "& ~ [data-input-element]": {
        minW: string | undefined;
      };
      "--height": string | undefined;
      "[data-input-element] + &": {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      };
      "[data-input-element]:has(~ &)": {
        minW: string | undefined;
      };
      minH: string | undefined;
    };
  };
}, {
  base: {
    button: {
      layerStyle: "ghost";
      focusVisibleRing: "none";
      _hover: {
        layerStyle: "ghost.hover";
      };
      _focusVisible: {
        layerStyle: "ghost.hover";
      };
    };
  };
  filled: {
    field: {
      bg: "bg.panel";
      border: "1px solid transparent";
      focusRingColor: "{focus-border-color}";
      focusVisibleRing: "inside";
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    } | undefined;
  };
  flushed: {
    field: {
      bg: "transparent";
      borderBottomColor: "colorScheme.muted";
      borderBottomWidth: "1px";
      rounded: "0px";
      _focusVisible: {
        borderColor: "{focus-border-color}";
        boxShadow: "0px 1px 0px 0px {focus-border-color}";
        outline: "none";
      };
      _invalid: {
        borderColor: "{error-border-color}";
        _focusVisible: {
          boxShadow: "0px 1px 0px 0px {error-border-color}";
        };
      };
    } | undefined;
    root: {
      "&:not([data-input-element] + &)": {
        ps: "0px";
      } | {
        [x: string]: {
          ps: "0px";
        };
      };
    };
  };
  outline: {
    field: {
      border: "1px solid {colors.border}";
      focusRingColor: "{focus-border-color}";
      focusVisibleRing: "inside";
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    } | undefined;
  };
  plain: {
    field: {
      focusRingColor: "{focus-border-color}";
      focusVisibleRing: "inside";
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    } | undefined;
  };
}>;
type NumberInputStyle = typeof numberInputStyle;
//#endregion
export { NumberInputStyle, numberInputStyle };
//# sourceMappingURL=number-input.style.d.ts.map