@yamada-ui/react/dist/types/components/timeline/timeline.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/timeline/timeline.style.d.ts
declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description" | "item" | "connector", {
  /**
   * The alignment of the timeline.
   *
   * @default 'start'
   */
  align: {
    center: {
      content: {
        "&:first-of-type": {
          alignItems: "flex-end";
        };
        flex: "1";
      };
      item: {
        "&:has(> [data-content]:first-of-type)": {
          "&:not(:has(> [data-content]:last-of-type))": {
            _after: {
              display: "block";
              flex: "1";
            };
          };
        };
        "&:not(:has(> [data-content]:first-of-type))": {
          _before: {
            display: "block";
            flex: "1";
          };
        };
      };
    };
    end: {
      content: {
        alignItems: "flex-end";
      };
    };
    start: {
      content: {
        alignItems: "flex-start";
      };
    };
  };
  /**
   * If `true`, the timeline will be attached.
   *
   * @default false
   */
  attached: {
    true: {
      item: {
        "--separator-gap": "0px";
      };
    };
  };
  /**
   * The shape of the timeline.
   *
   * @default 'circle'
   */
  shape: {
    circle: {
      item: {
        "--indicator-rounded": "radii.full";
      };
    };
    rounded: {
      item: {
        "--indicator-rounded": "radii.l2";
      };
    };
    square: {
      item: {
        "--indicator-rounded": "radii.0";
      };
    };
  };
}, {
  base: {
    item: {
      _last: {
        "& [data-content]": {
          pb: number;
        };
      };
    };
  };
  sm: {
    content: {
      gap: "1";
      pb: "8";
    };
    description: {
      fontSize: "xs";
    };
    item: {
      gap: "3";
    };
    root: {
      "--indicator-size": "sizes.3";
      "--separator-gap": "spaces.2";
      "--separator-width": "sizes.0.5";
    };
    title: {
      fontSize: "sm";
    };
  };
  md: {
    content: {
      gap: "2";
      pb: "10";
    };
    description: {
      fontSize: "sm";
    };
    item: {
      gap: "4";
    };
    root: {
      "--indicator-size": "sizes.5";
      "--separator-gap": "spaces.2";
      "--separator-width": "sizes.1";
    };
    title: {
      fontSize: "md";
    };
  };
  lg: {
    content: {
      gap: "2";
      pb: "10";
    };
    description: {
      fontSize: "sm";
    };
    item: {
      gap: "4";
    };
    root: {
      "--indicator-size": "sizes.7";
      "--separator-gap": "spaces.2.5";
      "--separator-width": "sizes.1";
    };
    title: {
      fontSize: "md";
    };
  };
  xl: {
    content: {
      gap: "2";
      pb: "12";
    };
    description: {
      fontSize: "md";
    };
    item: {
      gap: "5";
    };
    root: {
      "--indicator-size": "sizes.8";
      "--separator-gap": "spaces.3";
      "--separator-width": "sizes.1.5";
    };
    title: {
      fontSize: "lg";
    };
  };
}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description" | "item" | "connector">>>;
type TimelineStyle = typeof timelineStyle;
//#endregion
export { TimelineStyle, timelineStyle };
//# sourceMappingURL=timeline.style.d.ts.map