@propelinc/citrus-ui 0.6.0 → 1.0.0

package/README.md

@@ -6,67 +6,61 @@ See what components are currently available in [Storybook](https://storybook.pro
 
 Questions? Ask for eng help in [#unit-eng-frontend-libraries](https://propel-team.slack.com/archives/C02F363U5RB). Get answers to design or cross-functional questions in [#wg-citrus-design-system](https://propel-team.slack.com/archives/C02004PUH5M).
 
-### Setup
-
-🌲🌲🌲 Make sure you've finished Orchard setup (see: [README](https://github.com/propelinc/orchard)). 🌲🌲🌲
-
-## Development
-
-### Storybook
-
-Unlike a normal Vue project, we don't use a dev server to compile an app. Instead, we rely on [Storybook](https://storybook.js.org/) to render and manually test our components.
-
-```bash
-pnpm nx storybook:serve # Only works in this directory
-pnpm nx storybook:serve citrus-ui # From anywhere within Orchard
-```
-
-### Testing
-
-Since there is no app to test, there are no e2e tests. Instead, all tests are written in jest. You can make sure you components render correctly using Storybook.
-
-```bash
-pnpm nx test:unit # Only works in this directory
-pnpm nx test:unit citrus-ui # From anywhere within Orchard
-```
-
-### Linting
-
-We check over js/ts files with ESLint and scss files with Stylelint. The `lint` command runs both.
-
-```bash
-pnpm nx lint # Only works in this directory
-pnpm nx lint citrus-ui # From anywhere within Orchard
+## Docs
+
+| Page                                               | Description                             |
+| -------------------------------------------------- | --------------------------------------- |
+| [Development](/libs/citrus-ui/docs/DEVELOPMENT.md) | Linting, testing, and adding components |
+| [Style Guide](/libs/citrus-ui/docs/STYLE_GUIDE.md) | Guidelines for code styles              |
+
+---
+
+## CDN Usage
+
+citrus-ui is published to npm as `@propelinc/citrus-ui` and can be loaded via jsDelivr or unpkg. The following peer dependencies must be loaded separately.
+
+> **Note:** `@fortawesome/pro-*` packages require a paid FontAwesome Pro license and are not available on public CDNs. Components that use icons (`CButton`, `CLabel`, `CCheckbox`, `CTextField`, `CSelect`, and others) will not render icons without FontAwesome Pro. See [CDN challenges](#cdn-challenges) below.
+
+```html
+<!-- Shoelace styles + assets -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css"
+/>
+<script type="module">
+  import { setBasePath } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/shoelace-autoloader.js';
+  setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/');
+</script>
+
+<!-- FontAwesome Pro (self-hosted — not available on public CDNs) -->
+<script src="YOUR_SELF_HOSTED_FONTAWESOME_PRO_URL"></script>
+
+<!-- citrus-ui styles -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@propelinc/citrus-ui@1.0.0/dist/styles/main.css"
+/>
+
+<!-- citrus-ui + Vue -->
+<script type="module">
+  import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
+  import CitrusUi from 'https://cdn.jsdelivr.net/npm/@propelinc/citrus-ui@1.0.0/dist/index.mjs';
+
+  const app = createApp({
+    /* ... */
+  });
+  app.use(CitrusUi);
+  app.mount('#app');
+</script>
 ```
 
-### Adding a component
+### CDN Challenges
 
-To add a new component, first generate the component with plop.
-
-```bash
-pnpm generate:component # Interactive CLI
-pnpm generate:component -- [name] [directory] [document in storybook] # Shortcuts
-```
-
-❗️ If you want the component to be available to your Vue app, you'll need to add the component to [index.ts](https://github.com/propelinc/citrus-ui/blob/main/src/index.ts) and define the type in [index.d.ts](https://github.com/propelinc/citrus-ui/blob/main/src/index.d.ts).
-
-## Publishing
-
-When publishing a new version, bump the version in the package.json according to [semantic versioning](https://semver.org/)
-.
-
-Then, run:
-
-```bash
-pnpm nx publish
-```
-
-### NPM Access
-
-Because this package is published to our internal NPM repository, you'll need an [NPM account](https://www.npmjs.com/) and to be part of the [@propelinc organization](https://www.npmjs.com/org/propelinc) to publish. Once you have that set up, you'll have to login:
-
-```bash
-npm login --scope=@propelinc
-```
+| Dependency                                  | CDN available? | Notes                                                 |
+| ------------------------------------------- | -------------- | ----------------------------------------------------- |
+| `vue`                                       | ✅             | jsDelivr / unpkg                                      |
+| `@shoelace-style/shoelace`                  | ✅             | Requires `setBasePath` to point at CDN assets         |
+| `dayjs`, `lodash`, `i18next`, `maska`, etc. | ✅             | All on public npm, available via CDN                  |
+| `@fortawesome/pro-*`                        | ❌             | Paid license, not on public npm — must be self-hosted |
 
-Or alternatively, just ask Mohan to publish for you.
+Because FontAwesome Pro cannot be served from a public CDN, components that render icons will require a self-hosted FontAwesome Pro bundle or an alternative delivery mechanism for those packages.

package/dist/colors/colors.d.ts

@@ -0,0 +1,31 @@
+export type HexColor = `#${string}`;
+export type RgbaColor = `rgba(${number}, ${number}, ${number}, ${number})`;
+/**
+ * CSS color value from the palette (hex or rgba). Use this type when a value
+ * may be either format, e.g. gray colors are rgba, others are hex.
+ */
+export type CssColor = HexColor | RgbaColor;
+/**
+ * Maps a color name to its corresponding CSS color (hex or rgba).
+ * Gray neutrals use rgba for transparency; other colors use hex.
+ *
+ * NOTE: Please write hex codes in lowercase letters
+ */
+declare const Colors: Record<string, CssColor>;
+export default Colors;
+/**
+ * This is a type predicate that will allow TypeScript to know that the string tested is a
+ * HexColor within the scope of the narrowing.
+ */
+export declare function isHexColor(color?: string): color is HexColor;
+export declare function isRgbaColor(color?: string): color is RgbaColor;
+export declare function isCssColor(color?: string): color is CssColor;
+/**
+ * This is a type predicate that will allow TypeScript to know that the string tested is a
+ * key of the Colors object.
+ */
+export declare function isColorKey(color?: string): color is keyof typeof Colors;
+/**
+ * Validates a string as either a hex color or a color key.
+ */
+export declare function isValidColor(value: string): boolean;

package/dist/colors/theme.d.ts

@@ -1,12 +1,3 @@
-declare const _default: {
-    [x: string]: import("vuetify/types/services/theme").VuetifyThemeItem;
-    primary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    secondary?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    accent?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    info?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    warning?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    error?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    success?: import("vuetify/types/services/theme").VuetifyThemeItem;
-    anchor?: string | number | undefined;
-};
+type Theme = Record<string, string>;
+declare const _default: Theme;
 export default _default;

package/dist/colors/util-classes.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates utility classes for each Citrus color.
+ *
+ * For example, for blue-500 it creates:
+ * - `.blue-500` - sets background and border
+ * - `.blue-500--text` - sets text color
+ *
+ * This matches the syntax of Vuetify's utils:
+ * https://vuetifyjs.com/en/styles/colors/#classes
+ */
+export declare function addColorUtils(): void;

package/dist/components/CAccordion.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Removes horizontal padding for all items inside */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    accordion: Ref<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", PublicProps, Readonly< ExtractPropTypes<{
+    /** Removes horizontal padding for all items inside */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    fluid: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CAccordionItem.vue.d.ts

@@ -0,0 +1,41 @@
+import { default as SlDetails } from '@shoelace-style/shoelace/dist/components/details/details';
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Controls whether the item is open */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Removes horizontal padding from the content */
+    fluid: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+}>, {
+    internalValue: Ref<boolean, boolean>;
+    faChevronDown: IconDefinition;
+    details: Ref<SlDetails | null, SlDetails | null>;
+    injectedOrPropFluid: ComputedRef<boolean>;
+    onChange: (value: boolean) => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "input"[], "input", PublicProps, Readonly< ExtractPropTypes<{
+    /** Controls whether the item is open */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Removes horizontal padding from the content */
+    fluid: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+}>, {
+    fluid: boolean | null;
+    value: boolean;
+}, {}, {
+    FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CAppBar.vue.d.ts

@@ -0,0 +1,156 @@
+import { PropType, DefineComponent, ExtractPropTypes, Ref, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { HexColor, default as Colors, isValidColor, CssColor } from '../colors/colors';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /**
+     * Used to set the background color of the app bar. Needs to accept either a hex code or a
+     * a valid color key from the Colors object.
+     */
+    backgroundColor: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+    color: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: undefined;
+        validator: typeof isValidColor;
+    };
+    /** If true, the app bar will be fixed to the top of the viewport. */
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** If true, the app bar will have a bottom border. */
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Shows a loading spinner. Overrides the title slot.  */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Adds screen reader only text alternative to loading icon, text should be translated */
+    loaderAccessibleText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    bgCssColor: Ref< CssColor | undefined, CssColor | undefined>;
+    textCssColor: ComputedRef<CssColor>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /**
+     * Used to set the background color of the app bar. Needs to accept either a hex code or a
+     * a valid color key from the Colors object.
+     */
+    backgroundColor: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: string;
+        validator: typeof isValidColor;
+    };
+    color: {
+        type: PropType<HexColor | keyof typeof Colors>;
+        default: undefined;
+        validator: typeof isValidColor;
+    };
+    /** If true, the app bar will be fixed to the top of the viewport. */
+    fixed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** If true, the app bar will have a bottom border. */
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Shows a loading spinner. Overrides the title slot.  */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Adds screen reader only text alternative to loading icon, text should be translated */
+    loaderAccessibleText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    border: boolean;
+    fixed: boolean;
+    color: string;
+    backgroundColor: string;
+    loading: boolean;
+    loaderAccessibleText: string;
+}, {}, {
+    CLoader: DefineComponent<ExtractPropTypes<{
+        accessibleText: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        color: {
+            type: PropType<HexColor | keyof typeof Colors>;
+            default: string;
+            validator: typeof isValidColor;
+        };
+        small: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<"sm" | "lg" | "md">;
+            default: string;
+        };
+        trackColor: {
+            type: PropType<HexColor | keyof typeof Colors>;
+            default: string;
+            validator: typeof isValidColor;
+        };
+    }>, {
+        computedSize: ComputedRef<"sm" | "lg" | "md">;
+        indicatorColorCode: Ref< CssColor | undefined, CssColor | undefined>;
+        SIZE_TO_FONT_SIZE: Record<"sm" | "lg" | "md", `${number}px`>;
+        SIZE_TO_TRACK_WIDTH: Record<"sm" | "lg" | "md", `${number}px`>;
+        trackColorCode: Ref< CssColor | undefined, CssColor | undefined>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        accessibleText: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        color: {
+            type: PropType<HexColor | keyof typeof Colors>;
+            default: string;
+            validator: typeof isValidColor;
+        };
+        small: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<"sm" | "lg" | "md">;
+            default: string;
+        };
+        trackColor: {
+            type: PropType<HexColor | keyof typeof Colors>;
+            default: string;
+            validator: typeof isValidColor;
+        };
+    }>> & Readonly<{}>, {
+        small: boolean;
+        size: "sm" | "lg" | "md";
+        accessibleText: string;
+        color: string;
+        trackColor: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+    CFadeTransition: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CBadge.vue.d.ts

@@ -0,0 +1,52 @@
+import { DefineComponent, ExtractPropTypes, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Sets the text of the badge, can also use default slot */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Adds a unique data-test attribute for testing to the container */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Sets the background color */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Sets the text color */
+    textColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    computedStyle: ComputedRef<Record<string, string>>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    /** Sets the text of the badge, can also use default slot */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Adds a unique data-test attribute for testing to the container */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Sets the background color */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Sets the text color */
+    textColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    dataTest: string;
+    color: string;
+    textColor: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CBottomSheet.vue.d.ts

@@ -0,0 +1,226 @@
+import { default as SlDrawer } from '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import { Ref, DefineComponent, ExtractPropTypes, ComputedRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { CssColor } from '../colors/colors';
+import { Coordinate } from '../composables/gestures';
+import { IconDefinition } from '@fortawesome/pro-regular-svg-icons';
+declare const _default: DefineComponent<ExtractPropTypes<{
+    /** Aria label for the bottom sheet. This is required if title is hidden */
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background color of the bottom sheet */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Prefix for test selectors */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Disables the dismiss button */
+    disableDismiss: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Divided into header, body, and footer slots */
+    divided: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Fixed size, in CSS units. By default the drawer sizes itself to its contents. */
+    fixedSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Hides the dismiss 'x' button */
+    hideDismiss: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Allows for hiding the entire title bar, both the title and the dismiss 'x' button */
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Toggles the background behind the sheet. If there's no overlay, the sheet
+     * stays open as the user interacts with background content.' */
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Prevents the sheet from being dismissed when tapping on the overlay. If
+     * there is no overlay then this property is ignored, as the sheet always
+     * stays open. */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** If true, the bottom sheet will be contained within the viewport. */
+    contained: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Do not animate in the bottom sheet if it starts open. */
+    skipInitialAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** The title of the bottom sheet */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controls whether or not the bottom sheet is showing */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    backgroundCssColor: Ref< CssColor | undefined, CssColor | undefined>;
+    animatedValue: ComputedRef<boolean>;
+    dragDistance: Ref< Coordinate | null, Coordinate | null>;
+    faXmark: IconDefinition;
+    footerHasContent: Ref<boolean, boolean>;
+    getDataTestAttr: (suffix?: string) => string | null;
+    handleDismiss: () => void;
+    internalValue: Ref<boolean, boolean>;
+    isDismissVisible: ComputedRef<boolean>;
+    onRequestClose: (event: Event) => void;
+    overlayOpacity: ComputedRef<number>;
+    panelTransform: ComputedRef<string>;
+    onAfterClose: () => void;
+    sheet: Ref<SlDrawer | null, SlDrawer | null>;
+    transformDistance: Ref<number, number>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("input" | "opened" | "closed")[], "input" | "opened" | "closed", PublicProps, Readonly< ExtractPropTypes<{
+    /** Aria label for the bottom sheet. This is required if title is hidden */
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background color of the bottom sheet */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Prefix for test selectors */
+    dataTest: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Disables the dismiss button */
+    disableDismiss: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Divided into header, body, and footer slots */
+    divided: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Fixed size, in CSS units. By default the drawer sizes itself to its contents. */
+    fixedSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Hides the dismiss 'x' button */
+    hideDismiss: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Allows for hiding the entire title bar, both the title and the dismiss 'x' button */
+    hideTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Toggles the background behind the sheet. If there's no overlay, the sheet
+     * stays open as the user interacts with background content.' */
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Prevents the sheet from being dismissed when tapping on the overlay. If
+     * there is no overlay then this property is ignored, as the sheet always
+     * stays open. */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** If true, the bottom sheet will be contained within the viewport. */
+    contained: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Do not animate in the bottom sheet if it starts open. */
+    skipInitialAnimation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** The title of the bottom sheet */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controls whether or not the bottom sheet is showing */
+    value: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onOpened?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    value: boolean;
+    dataTest: string;
+    backgroundColor: string;
+    ariaLabel: string;
+    disableDismiss: boolean;
+    divided: boolean;
+    fixedSize: string;
+    hideDismiss: boolean;
+    hideTitle: boolean;
+    overlay: boolean;
+    persistent: boolean;
+    contained: boolean;
+    skipInitialAnimation: boolean;
+}, {}, {
+    CButtonStack: DefineComponent<ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        large: {
+            type: BooleanConstructor;
+            default: null;
+        };
+    }>, void, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        large: {
+            type: BooleanConstructor;
+            default: null;
+        };
+    }>> & Readonly<{}>, {
+        large: boolean;
+        tag: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+    CCloseButton: DefineComponent<{
+        disabled?: boolean;
+    }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        focus: (...args: any[]) => void;
+        blur: (...args: any[]) => void;
+        click: (...args: any[]) => void;
+    }, string, PublicProps, Readonly<{
+        disabled?: boolean;
+    }> & Readonly<{
+        onFocus?: ((...args: any[]) => any) | undefined;
+        onBlur?: ((...args: any[]) => any) | undefined;
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;