@yamada-ui/react/dist/types/components/select/select.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/select/select.style.d.ts
declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText", {
  /**
   * If `true`, wrap the value text.
   *
   * @default false
   */
  wrap: {
    false: {
      valueText: {
        truncated: true;
      };
    };
    true: {
      field: {
        py: "{gap}";
      };
      valueText: {
        display: "inline-flex";
        flexWrap: "wrap";
        gapY: "{gap}";
      };
    };
  };
}, {
  xs: {
    content: {
      "--item-height": "spaces.7";
      "--space": "spaces.1";
      fontSize: "xs";
      minW: "3xs";
    } | undefined;
    indicator: {
      fontSize: "sm";
    } | undefined;
    label: {
      px: "1.5";
    } | undefined;
    option: {
      gap: "1.5";
      px: "1.5";
      rounded: "l1";
    } | undefined;
    field?: {
      fontSize: "1em";
      "&:has(+ [data-input-element])"?: {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      } | undefined;
      "& ~ [data-input-element]"?: {
        minW: string | undefined;
      } | undefined;
      "--height"?: string | undefined;
      "[data-input-element] + &"?: {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      } | undefined;
      "[data-input-element]:has(~ &)"?: {
        minW: string | undefined;
      } | undefined;
      minH?: string | undefined;
      "--space-x"?: "spaces.2" | undefined;
      "--space-y"?: "spaces.1.5" | undefined;
      px?: "{space-x}" | undefined;
    } | undefined;
    root?: {
      fontSize: "xs" | undefined;
      "&: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;
    } | undefined;
  };
  sm: {
    content: {
      "--item-height": "spaces.8";
      "--space": "spaces.1";
      fontSize: "sm";
      minW: "2xs";
    } | undefined;
    indicator: {
      fontSize: "md";
    } | undefined;
    label: {
      px: "2";
    } | undefined;
    option: {
      gap: "2";
      px: "2";
      rounded: "l1";
    } | undefined;
    field?: {
      fontSize: "1em";
      "&:has(+ [data-input-element])"?: {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      } | undefined;
      "& ~ [data-input-element]"?: {
        minW: string | undefined;
      } | undefined;
      "--height"?: string | undefined;
      "[data-input-element] + &"?: {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      } | undefined;
      "[data-input-element]:has(~ &)"?: {
        minW: string | undefined;
      } | undefined;
      minH?: string | undefined;
      "--space-x"?: "spaces.2.5" | undefined;
      "--space-y"?: "spaces.2" | undefined;
      px?: "{space-x}" | undefined;
    } | undefined;
    root?: {
      fontSize: "sm" | undefined;
      "&: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;
    } | undefined;
  };
  md: {
    content: {
      "--item-height": "spaces.8";
      "--space": "spaces.1";
      fontSize: "sm";
      minW: "2xs";
    } | undefined;
    indicator: {
      fontSize: "md";
    } | undefined;
    label: {
      px: "2";
    } | undefined;
    option: {
      gap: "2";
      px: "2";
      rounded: "l1";
    } | undefined;
    field?: {
      fontSize: "1em";
      "&:has(+ [data-input-element])"?: {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      } | undefined;
      "& ~ [data-input-element]"?: {
        minW: string | undefined;
      } | undefined;
      "--height"?: string | undefined;
      "[data-input-element] + &"?: {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      } | undefined;
      "[data-input-element]:has(~ &)"?: {
        minW: string | undefined;
      } | undefined;
      minH?: string | undefined;
      "--space-x"?: "spaces.3" | undefined;
      "--space-y"?: "spaces.2" | undefined;
      px?: "{space-x}" | undefined;
    } | undefined;
    root?: {
      fontSize: "md" | undefined;
      "&: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;
    } | undefined;
  };
  lg: {
    content: {
      "--item-height": "spaces.9";
      "--space": "spaces.1";
      fontSize: "md";
      minW: "2xs";
    } | undefined;
    indicator: {
      fontSize: "lg";
    } | undefined;
    label: {
      px: "2";
    } | undefined;
    option: {
      gap: "2";
      px: "2";
      rounded: "l1";
    } | undefined;
    field?: {
      fontSize: "1em";
      "&:has(+ [data-input-element])"?: {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      } | undefined;
      "& ~ [data-input-element]"?: {
        minW: string | undefined;
      } | undefined;
      "--height"?: string | undefined;
      "[data-input-element] + &"?: {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      } | undefined;
      "[data-input-element]:has(~ &)"?: {
        minW: string | undefined;
      } | undefined;
      minH?: string | undefined;
      "--space-x"?: "spaces.3.5" | undefined;
      "--space-y"?: "spaces.2.5" | undefined;
      px?: "{space-x}" | undefined;
    } | undefined;
    root?: {
      fontSize: "lg" | undefined;
      "&: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;
    } | undefined;
  };
  xl: {
    content: {
      "--item-height": "spaces.9";
      "--space": "spaces.1";
      fontSize: "md";
      minW: "2xs";
    } | undefined;
    indicator: {
      fontSize: "lg";
    } | undefined;
    label: {
      px: "2";
    } | undefined;
    option: {
      gap: "2";
      px: "2";
      rounded: "l1";
    } | undefined;
    field?: {
      fontSize: "1em";
      "&:has(+ [data-input-element])"?: {
        pe: string | undefined;
      } | {
        [x: string]: {
          pe: string | undefined;
        };
      } | undefined;
      "& ~ [data-input-element]"?: {
        minW: string | undefined;
      } | undefined;
      "--height"?: string | undefined;
      "[data-input-element] + &"?: {
        ps: string | undefined;
      } | {
        [x: string]: {
          ps: string | undefined;
        };
      } | undefined;
      "[data-input-element]:has(~ &)"?: {
        minW: string | undefined;
      } | undefined;
      minH?: string | undefined;
      "--space-x"?: "spaces.4" | undefined;
      "--space-y"?: "spaces.3" | undefined;
      px?: "{space-x}" | undefined;
    } | undefined;
    root?: {
      fontSize: "xl" | undefined;
      "&: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;
    } | undefined;
  };
}, {
  filled: {
    field: {
      bg?: "bg.panel" | undefined;
      border?: "1px solid transparent" | undefined;
      focusRingColor?: "{focus-border-color}" | undefined;
      focusVisibleRing?: "inside" | undefined;
      _invalid?: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      } | undefined;
      _expanded: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
      _focus: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
    };
  };
  flushed: {
    field: {
      bg?: "transparent" | undefined;
      borderBottomColor?: "colorScheme.muted" | undefined;
      borderBottomWidth?: "1px" | undefined;
      rounded?: "0px" | undefined;
      _focusVisible?: {
        borderColor: "{focus-border-color}";
        boxShadow: "0px 1px 0px 0px {focus-border-color}";
        outline: "none";
      } | undefined;
      _invalid?: {
        borderColor: "{error-border-color}";
        _focusVisible: {
          boxShadow: "0px 1px 0px 0px {error-border-color}";
        };
      } | undefined;
      _expanded: {
        _invalid: {
          borderColor: "{error-border-color}";
          boxShadow: "0px 1px 0px 0px {error-border-color}";
        };
        borderColor?: "{focus-border-color}" | undefined;
        boxShadow?: "0px 1px 0px 0px {focus-border-color}" | undefined;
        outline?: "none" | undefined;
      };
      _focus: {
        _invalid: {
          borderColor: "{error-border-color}";
          boxShadow: "0px 1px 0px 0px {error-border-color}";
        };
        borderColor?: "{focus-border-color}" | undefined;
        boxShadow?: "0px 1px 0px 0px {focus-border-color}" | undefined;
        outline?: "none" | undefined;
      };
    };
    root?: {
      "&:not([data-input-element] + &)": {
        ps: "0px";
      } | {
        [x: string]: {
          ps: "0px";
        };
      };
    } | undefined;
  };
  outline: {
    field: {
      border?: "1px solid {colors.border}" | undefined;
      focusRingColor?: "{focus-border-color}" | undefined;
      focusVisibleRing?: "inside" | undefined;
      _invalid?: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      } | undefined;
      _expanded: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
      _focus: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
    };
  };
  plain: {
    field: {
      focusRingColor?: "{focus-border-color}" | undefined;
      focusVisibleRing?: "inside" | undefined;
      _invalid?: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      } | undefined;
      _expanded: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
      _focus: {
        borderColor: "{focus-ring-color}";
        boxShadow: "inset 0 0 0 1px {focus-ring-color}";
        outlineOffset: "inherit";
        outlineStyle: "inherit";
        outlineWidth: "inherit";
      };
    };
  };
}>;
type SelectStyle = typeof selectStyle;
//#endregion
export { SelectStyle, selectStyle };
//# sourceMappingURL=select.style.d.ts.map