@yamada-ui/react/dist/types/components/slider/slider.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/slider/slider.style.d.ts
declare const sliderStyle: ComponentSlotStyle<"mark" | "track" | "range" | "root" | "thumb", {
  /**
   * The orientation of the slider.
   *
   * @default 'horizontal'
   */
  orientation: {
    horizontal: {
      mark: {
        left: "{mark-position}";
        pt: "calc({track-size} + {spaces.2})";
        top: "0";
        translate: string;
        _before: {
          left: "50%";
          top: "0";
          translate: string;
        };
      };
      range: {
        h: "full";
        left: "{range-start}";
        top: "50%";
        translate: string;
        w: "calc({range-end} - {range-start} + ({track-size} / 2))";
        _range: {
          left: "calc({range-start} - ({track-size} / 2))";
          w: "calc({range-end} - {range-start} + {track-size})";
        };
      };
      root: {
        flexDirection: "row";
        minW: "{thumb-size}";
        w: "full";
      };
      thumb: {
        top: "50%";
        translate: string;
        _end: {
          left: "{range-end}";
        };
        _start: {
          left: "{range-start}";
        };
      };
      track: {
        h: "{track-size}";
      };
    };
    vertical: {
      mark: {
        bottom: "{mark-position}";
        left: "0";
        lineHeight: "2";
        ps: "calc({track-size} + {spaces.3})";
        translate: string;
        _before: {
          left: "0";
          top: "50%";
          translate: string;
        };
      };
      range: {
        bottom: "{range-start}";
        h: "calc({range-end} - {range-start} + ({track-size} / 2))";
        left: "50%";
        translate: string;
        w: "full";
        _range: {
          bottom: "calc({range-start} - ({track-size} / 2))";
          h: "calc({range-end} - {range-start} + {track-size})";
        };
      };
      root: {
        flexDirection: "column";
        h: "full";
        minH: "{thumb-size}";
      };
      thumb: {
        left: "50%";
        translate: string;
        _end: {
          bottom: "{range-end}";
        };
        _start: {
          bottom: "{range-start}";
        };
      };
      track: {
        w: "{track-size}";
      };
    };
  };
  /**
   * The shape of the thumb.
   *
   * @default 'circle'
   */
  shape: {
    circle: {
      root: {
        "--thumb-rounded": "radii.full";
      };
    };
    rounded: {
      root: {
        "--thumb-rounded": "radii.l2";
      };
    };
    square: {
      root: {
        "--thumb-rounded": "0";
      };
    };
  };
}, {
  xs: {
    root: {
      "--thumb-size": "sizes.3";
      "--track-size": "sizes.1";
    };
  };
  sm: {
    root: {
      "--thumb-size": "sizes.4";
      "--track-size": "sizes.1.5";
    };
  };
  md: {
    root: {
      "--thumb-size": "sizes.5";
      "--track-size": "sizes.2";
    };
  };
  lg: {
    root: {
      "--thumb-size": "sizes.6";
      "--track-size": "sizes.2.5";
    };
  };
  xl: {
    root: {
      "--thumb-size": "sizes.7";
      "--track-size": "sizes.3";
    };
  };
}, {
  outline: {
    root: {
      "--indicator-fill": "colorScheme.solid";
      "--range-fill": "colorScheme.solid";
      "--thumb-fill": "colors.bg";
      "--thumb-stroke": "colorScheme.solid";
      "--track-fill": "colors.bg.muted";
    };
  };
  solid: {
    root: {
      "--indicator-fill": "colorScheme.solid";
      "--range-fill": "colorScheme.solid";
      "--thumb-fill": "colorScheme.solid";
      "--thumb-stroke": "colorScheme.solid";
      "--track-fill": "colors.bg.muted";
    };
  };
}>;
type SliderStyle = typeof sliderStyle;
//#endregion
export { SliderStyle, sliderStyle };
//# sourceMappingURL=slider.style.d.ts.map