@yamada-ui/react/dist/types/components/checkbox-card/checkbox-card.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/checkbox-card/checkbox-card.style.d.ts
declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
  /**
   * The justify indicator of the component
   *
   * @default 'start'
   */
  justify: {
    end: {
      addon: {
        me: "calc({bleed-size} * -1)";
        ms: "calc({space-x} * -1)";
      };
      indicator: {
        right: "{space-x}";
      };
      root: {
        "&:has([data-indicator])": {
          "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
        };
        "--bleed-size": "{space-x}";
        pe: "{bleed-size}";
      };
    };
    start: {
      addon: {
        me: "calc({space-x} * -1)";
        ms: "calc({bleed-size} * -1)";
      };
      indicator: {
        left: "{space-x}";
      };
      root: {
        "&:has([data-indicator])": {
          "--bleed-size": "calc({indicator-size} + ({space-x} * 2))";
        };
        "--bleed-size": "{space-x}";
        ps: "{bleed-size}";
      };
    };
  };
  /**
   * The shape of the component
   *
   * @default 'circle'
   */
  shape: {
    rounded?: {
      indicator: {
        rounded: "l1";
      };
    } | undefined;
    square?: {
      indicator: {
        rounded: "0";
      };
    } | undefined;
  };
}, {
  sm: {
    indicator: {
      fontSize: "xs";
    } | undefined;
    root: {
      "--description-size": "fontSizes.xs";
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
      "--indicator-size"?: "sizes.3.5" | undefined;
      "--label-size"?: "fontSizes.sm" | undefined;
    };
  };
  md: {
    indicator: {
      fontSize: "sm";
    } | undefined;
    root: {
      "--description-size": "fontSizes.sm";
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
      "--indicator-size"?: "sizes.4" | undefined;
      "--label-size"?: "fontSizes.md" | undefined;
    };
  };
  lg: {
    indicator: {
      fontSize: "md";
    } | undefined;
    root: {
      "--description-size": "fontSizes.md";
      "--space-x": "spaces.5";
      "--space-y": "spaces.4";
      "--indicator-size"?: "sizes.5" | undefined;
      "--label-size"?: "fontSizes.lg" | undefined;
    };
  };
  xl: {
    indicator: {
      fontSize: "md";
    } | undefined;
    root: {
      "--description-size": "fontSizes.md";
      "--space-x": "spaces.6";
      "--space-y": "spaces.5";
      "--indicator-size"?: "sizes.5" | undefined;
      "--label-size"?: "fontSizes.lg" | undefined;
    };
  };
}, {
  base: {
    indicator: {
      color: "colorScheme.contrast";
      _checked: {
        bg: "colorScheme.solid";
      };
      _indeterminate: {
        bg: "colorScheme.solid";
      };
    };
    root: {
      _checked: {
        "--indicator-border-color": "colorScheme.solid";
      };
      _indeterminate: {
        "--indicator-border-color": "colorScheme.solid";
      };
    };
  };
  outline: {
    root: {
      _checked: {
        "--root-border-color": "colorScheme.outline";
      };
    };
  };
  subtle: {
    root: {
      _checked: {
        "--addon-border-color": "colorScheme.muted";
        "--root-border-color": "transparent";
        bg: "colorScheme.subtle";
      };
    };
  };
  surface: {
    root: {
      _checked: {
        "--root-border-color": "colorScheme.muted";
        bg: "colorScheme.subtle";
      };
    };
  };
}>;
type CheckboxCardStyle = typeof checkboxCardStyle;
//#endregion
export { CheckboxCardStyle, checkboxCardStyle };
//# sourceMappingURL=checkbox-card.style.d.ts.map