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

//#region src/components/segmented-control/segmented-control.style.d.ts
declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
  /**
   * If `true`, the segmented control will be full rounded.
   *
   * @default false
   */
  fullRounded: {
    true: {
      indicator: {
        rounded: "full";
      };
      item: {
        rounded: "full";
      };
      root: {
        rounded: "full";
        _before: {
          rounded: "full";
        };
      };
    };
  };
  /**
   * The orientation of the segmented control.
   *
   * @default 'horizontal'
   */
  orientation: {
    horizontal: {
      item: {
        h: "full";
      };
      root: {
        flexDirection: "row";
        _before: {
          transitionProperty: "left, width";
        };
      };
    };
    vertical: {
      item: {
        w: "full";
      };
      root: {
        flexDirection: "column";
        _before: {
          transitionProperty: "top, height";
        };
      };
    };
  };
}, {
  sm: {
    item: {
      fontSize: "sm";
      px: "3";
      _vertical: {
        minH: "7";
      };
    };
    root: {
      _horizontal: {
        h: "9";
        minW: "64";
      };
    };
  };
  md: {
    item: {
      fontSize: "md";
      px: "3";
      _vertical: {
        minH: "8";
      };
    };
    root: {
      _horizontal: {
        h: "10";
        minW: "80";
      };
    };
  };
  lg: {
    item: {
      fontSize: "lg";
      px: "4";
      _vertical: {
        minH: "9";
      };
    };
    root: {
      _horizontal: {
        h: "11";
        minW: "96";
      };
    };
  };
  xl: {
    item: {
      fontSize: "xl";
      px: "5";
      _vertical: {
        minH: "10";
      };
    };
    root: {
      _horizontal: {
        h: "12";
        minW: "96";
      };
    };
  };
}, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
type SegmentedControlStyle = typeof segmentedControlStyle;
//#endregion
export { SegmentedControlStyle, segmentedControlStyle };
//# sourceMappingURL=segmented-control.style.d.ts.map