@yamada-ui/react/dist/types/components/steps/steps.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/steps/steps.style.d.ts
declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "indicator" | "description" | "item", {
  /**
   * The orientation of the steps.
   *
   * @default 'horizontal'
   */
  orientation: {
    horizontal: {
      item: {
        alignItems: "center";
        flexDirection: "row";
      };
      list: {
        alignItems: "center";
        flexDirection: "row";
        w: "full";
      };
      root: {
        flexDirection: "column";
      };
      separator: {
        h: "{thickness}";
        w: "full";
      };
    };
    vertical: {
      content: {
        flex: "1";
      };
      item: {
        alignItems: "flex-start";
      };
      list: {
        alignItems: "flex-start";
        flexDirection: "column";
      };
      root: {
        flexDirection: "row";
      };
      separator: {
        h: "full";
        insetBlockStart: "calc({size} + {gap})";
        insetInlineStart: "calc(({size} / 2) - ({thickness} / 2))";
        maxH: "calc(full - {size} - {gap})";
        position: "absolute";
        w: "{thickness}";
      };
    };
  };
}, {
  sm: {
    indicator: {
      fontSize: "md";
    };
    item: {
      "--gap": "sizes.3";
      "--size": "sizes.8";
      "--thickness": "sizes.0.5";
      fontSize: "xs";
      gap: "3";
    };
  };
  md: {
    indicator: {
      fontSize: "md";
    };
    item: {
      "--gap": "sizes.3";
      "--size": "sizes.10";
      "--thickness": "sizes.0.5";
      fontSize: "sm";
      gap: "3";
    };
  };
  lg: {
    indicator: {
      fontSize: "lg";
    };
    item: {
      "--gap": "sizes.3";
      "--size": "sizes.12";
      "--thickness": "sizes.0.5";
      gap: "3";
    };
  };
}, {
  solid: {
    indicator: {
      _complete: {
        layerStyle: "solid";
      };
      _current: {
        bg: "colorScheme.muted";
        color: "colorScheme.fg";
      };
      _incomplete: {
        bg: "bg.subtle";
        color: "fg.emphasized";
      };
    };
    separator: {
      _complete: {
        bg: "colorScheme.solid";
      };
    };
  };
  subtle: {
    indicator: {
      _complete: {
        bg: "colorScheme.emphasized";
        color: "colorScheme.fg";
      };
      _current: {
        bg: "colorScheme.muted";
        color: "colorScheme.fg";
      };
      _incomplete: {
        bg: "bg.subtle";
        color: "fg.emphasized";
      };
    };
    separator: {
      _complete: {
        bg: "colorScheme.emphasized";
      };
    };
  };
}>;
type StepsStyle = typeof stepsStyle;
//#endregion
export { StepsStyle, stepsStyle };
//# sourceMappingURL=steps.style.d.ts.map