@yamada-ui/react/dist/types/components/tabs/tabs.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/tabs/tabs.style.d.ts
declare const tabsStyle: ComponentSlotStyle<"panel" | "list" | "tab" | "root", {
  /**
   * The alignment of the tabs.
   *
   * @default 'start'
   */
  align: {
    center: {
      list: {
        justifyContent: "center";
      };
    };
    end: {
      list: {
        justifyContent: "flex-end";
      };
    };
    start: {
      list: {
        justifyContent: "flex-start";
      };
    };
  };
  /**
   * If `true`, tabs will stretch to width of the tablist.
   *
   * @default false
   */
  fitted: {
    true: {
      tab: {
        flex: 1;
      };
    };
  };
  /**
   * The orientation of the tab list.
   *
   * @default 'horizontal'
   */
  orientation: {
    horizontal: {
      list: {
        alignItems: "center";
        flexDirection: "row";
      };
      root: {
        flexDirection: "column";
      };
    };
    vertical: {
      list: {
        alignItems: "stretch";
        flexDirection: "column";
      };
      root: {
        flexDirection: "row";
      };
    };
  };
}, {
  sm: {
    root: {
      gap: "sm";
    };
    tab: {
      fontSize: "sm";
      px: "3";
      py: "1";
    };
  };
  md: {
    root: {
      gap: "md";
    };
    tab: {
      fontSize: "md";
      px: "4";
      py: "2";
    };
  };
  lg: {
    root: {
      gap: "lg";
    };
    tab: {
      fontSize: "lg";
      px: "5";
      py: "3";
    };
  };
}, {
  line: {
    list: {
      _horizontal: {
        borderBottomWidth: "1px";
      };
      _vertical: {
        borderRightWidth: "1px";
      };
    };
    tab: {
      color: "fg.muted";
      focusVisibleRing: "inside";
      position: "relative";
      _selected: {
        color: "fg";
        _after: {
          borderColor: "colorScheme.solid";
          position: "absolute";
        };
        _horizontal: {
          _after: {
            borderBottomWidth: "1px";
            bottom: "-1px";
            w: "full";
          };
        };
        _vertical: {
          _after: {
            borderRightWidth: "1px";
            h: "full";
            right: "-1px";
          };
        };
      };
    };
  };
  outline: {
    list: {
      _horizontal: {
        borderBottomWidth: "1px";
      };
      _vertical: {
        borderRightWidth: "1px";
      };
    };
    tab: {
      border: "1px solid transparent";
      color: "fg.muted";
      focusVisibleRing: "inside";
      position: "relative";
      _horizontal: {
        mb: "-1px";
        roundedStart: "l2";
      };
      _vertical: {
        me: "-1px";
        roundedLeft: "l2";
      };
      _selected: {
        bg: "bg";
        borderColor: "border";
        color: "fg";
        _horizontal: {
          borderBottomColor: "transparent";
        };
        _vertical: {
          borderRightColor: "transparent";
        };
      };
    };
  };
  plain: {
    tab: {
      color: "fg.muted";
      rounded: "l2";
      _selected: {
        color: "fg";
      };
    };
  };
  subtle: {
    tab: {
      border: "1px solid transparent";
      color: "fg.muted";
      rounded: "l2";
      _selected: {
        layerStyle: "subtle";
      };
    };
  };
}>;
type TabsStyle = typeof tabsStyle;
//#endregion
export { TabsStyle, tabsStyle };
//# sourceMappingURL=tabs.style.d.ts.map