import { Component, ComponentOptionsMixin, DefineComponent, PropType, StyleValue, Ref } from 'vue';

declare const Card: DefineComponent<
  {
    
    /**
     * Component's HTML Element
     */
    component: {
      type: PropType<string | Component>;
      default: 'div';
    };

    /**
     * Content of the Card header
     */
    header: {
      type: StringConstructor;
      
    };

    /**
     * Content of the Card footer
     */
    footer: {
      type: StringConstructor;
      
    };

    /**
     * Wraps card content with extra element with padding
     */
    contentWrap: {
      type: BooleanConstructor;
      default: true;
    };

    /**
     * Content wrap padding (if `contentWrap` enabled)
     */
    contentWrapPadding: {
      type: StringConstructor;
      default: 'p-4';
    };

    /**
     * Makes card outline. Overwrites `outlineIos` and `outlineMaterial`
     */
    outline: {
      type: BooleanConstructor;
      default: undefined;
    };

    /**
     * Makes card outline in iOS theme
     */
    outlineIos: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Makes card outline in Material theme
     */
    outlineMaterial: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Makes card raised. Overwrites `raisedIos` and `raisedMaterial`
     */
    raised: {
      type: BooleanConstructor;
      default: undefined;
    };

    /**
     * Makes card raised in iOS theme
     */
    raisedIos: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Makes card raised in Material theme
     */
    raisedMaterial: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Enabled divider between header and content
     */
    headerDivider: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Enabled divider between footer and content
     */
    footerDivider: {
      type: BooleanConstructor;
      default: false;
    };

    /**
     * Object with Tailwind CSS colors classes
     */
    colors: {
      type: PropType<{
    
        /**
         *
         * @default ''
         */
        textIos?: string;
        /**
         *
         * @default 'text-md-light-on-surface dark:text-md-dark-on-surface'
         */
        textMaterial?: string;
        /**
         *
         * @default 'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
         */
        bgIos?: string;
        /**
         *
         * @default 'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
         */
        bgMaterial?: string;
        /**
         *
         * @default 'text-black/55 dark:text-white/55'
         */
        footerTextIos?: string;
        /**
         *
         * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
         */
        footerTextMaterial?: string;
        /**
         *
         * @default 'border-black/20 dark:border-white/20'
         */
        outlineIos?: string;
        /**
         *
         * @default 'border-md-light-outline dark:border-md-dark-outline'
         */
        outlineMaterial?: string;
      
      }>;
      
    };
  },
  () => JSX.Element,
  unknown,
  {},
  {},
  ComponentOptionsMixin,
  ComponentOptionsMixin,
  {
    
  }
>;

export default Card;