@uzum-tech/ui 1.3.1 → 1.4.1

package/es/card-list/src/CardList.d.ts

@@ -0,0 +1,259 @@
+import { PropType } from 'vue';
+import type { ListItemOptions } from './interface';
+import { ExtractPublicPropTypes } from '../../_utils';
+export declare const cardListProps: {
+    readonly data: PropType<ListItemOptions[]>;
+    readonly options: PropType<ListItemOptions[]>;
+    readonly cols: {
+        readonly type: PropType<number | string>;
+        readonly default: 3;
+    };
+    readonly xGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly yGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly cardProps: PropType<Record<string, any>>;
+    readonly gridProps: PropType<Record<string, any>>;
+    readonly showDivider: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => any>;
+    readonly theme: PropType<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+};
+export type CardListProps = ExtractPublicPropTypes<typeof cardListProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly data: PropType<ListItemOptions[]>;
+    readonly options: PropType<ListItemOptions[]>;
+    readonly cols: {
+        readonly type: PropType<number | string>;
+        readonly default: 3;
+    };
+    readonly xGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly yGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly cardProps: PropType<Record<string, any>>;
+    readonly gridProps: PropType<Record<string, any>>;
+    readonly showDivider: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => any>;
+    readonly theme: PropType<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-border-color': string;
+        '--u-border-radius': string;
+        '--u-box-shadow': string;
+        '--u-color-embedded': string;
+        '--u-text-color': string;
+        '--u-text-line-height': string;
+        '--u-text-font-weight': string;
+        '--u-text-font-size': string;
+        '--u-title-text-color': string;
+        '--u-title-line-height': string;
+        '--u-title-font-weight': string;
+        '--u-title-font-size': string;
+        '--u-divider-color': string;
+        '--u-dropdown-bg-color': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+    items: import("vue").ComputedRef<ListItemOptions[]>;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly data: PropType<ListItemOptions[]>;
+    readonly options: PropType<ListItemOptions[]>;
+    readonly cols: {
+        readonly type: PropType<number | string>;
+        readonly default: 3;
+    };
+    readonly xGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly yGap: {
+        readonly type: PropType<number | string>;
+        readonly default: 16;
+    };
+    readonly cardProps: PropType<Record<string, any>>;
+    readonly gridProps: PropType<Record<string, any>>;
+    readonly showDivider: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => any>;
+    readonly theme: PropType<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"CardList", {
+        textColor: string;
+        textLineHeight: string;
+        textFontWeight: string;
+        textFontSize: string;
+        titleTextColor: string;
+        titleLineHeight: string;
+        titleFontWeight: string;
+        titleFontSize: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        colorEmbedded: string;
+        dividerColor: string;
+        dropDownBgColor: string;
+    }, any>>>;
+}>>, {
+    readonly cols: string | number;
+    readonly xGap: string | number;
+    readonly yGap: string | number;
+    readonly showDivider: boolean;
+}, {}>;
+export default _default;

package/es/card-list/src/CardList.js

@@ -0,0 +1,69 @@
+import { defineComponent, h, computed } from 'vue';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import Grid from '../../grid/src/Grid';
+import GridItem from '../../grid/src/GridItem';
+import UCardListItem from './CardListItem';
+import style from './styles/index.cssr';
+import cardListLight from '../styles/light';
+export const cardListProps = Object.assign(Object.assign({}, useTheme.props), { data: Array, options: Array, cols: {
+        type: [Number, String],
+        default: 3
+    }, xGap: {
+        type: [Number, String],
+        default: 16
+    }, yGap: {
+        type: [Number, String],
+        default: 16
+    }, cardProps: Object, gridProps: Object, showDivider: {
+        type: Boolean,
+        default: true
+    }, renderDivider: Function });
+export default defineComponent({
+    name: 'CardList',
+    props: cardListProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const items = computed(() => props.data || props.options || []);
+        const themeRef = useTheme('CardList', '-card-list', style, cardListLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { textColor, textLineHeight, textFontWeight, textFontSize, titleTextColor, titleLineHeight, titleFontWeight, titleFontSize, borderColor, borderRadius, boxShadow, colorEmbedded, dividerColor, dropDownBgColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-color': borderColor,
+                '--u-border-radius': borderRadius,
+                '--u-box-shadow': boxShadow,
+                '--u-color-embedded': colorEmbedded,
+                '--u-text-color': textColor,
+                '--u-text-line-height': textLineHeight,
+                '--u-text-font-weight': textFontWeight,
+                '--u-text-font-size': textFontSize,
+                '--u-title-text-color': titleTextColor,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-font-size': titleFontSize,
+                '--u-divider-color': dividerColor,
+                '--u-dropdown-bg-color': dropDownBgColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('card-list', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            items,
+            slots
+        };
+    },
+    render() {
+        const { mergedClsPrefix, items, cols, xGap, yGap, cardProps, gridProps, showDivider, themeClass, cssVars, renderDivider, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return h(Grid, Object.assign({ class: [`${mergedClsPrefix}-card-list`, themeClass], style: cssVars, cols,
+            xGap,
+            yGap }, gridProps), () => items.map((card, idx) => h(GridItem, { key: idx, span: card.span || 1 }, () => [
+            h(UCardListItem, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
+        ])));
+    }
+});

package/es/card-list/src/CardListItem.d.ts

@@ -0,0 +1,70 @@
+import { PropType } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+import type { VNode } from 'vue';
+declare const cardListItemProps: {
+    readonly title: StringConstructor;
+    readonly subtitle: StringConstructor;
+    readonly items: PropType<Array<{
+        title?: string;
+        content?: string;
+    }>>;
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly dropdown: BooleanConstructor;
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => VNode>;
+};
+export type CardListItemProps = ExtractPublicPropTypes<typeof cardListItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly title: StringConstructor;
+    readonly subtitle: StringConstructor;
+    readonly items: PropType<Array<{
+        title?: string;
+        content?: string;
+    }>>;
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly dropdown: BooleanConstructor;
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => VNode>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    isOpen: import("vue").Ref<boolean>;
+    toggle: () => void;
+    selfRef: import("vue").Ref<HTMLElement | null>;
+    dropdownRef: import("vue").Ref<HTMLElement | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly title: StringConstructor;
+    readonly subtitle: StringConstructor;
+    readonly items: PropType<Array<{
+        title?: string;
+        content?: string;
+    }>>;
+    readonly direction: {
+        readonly type: PropType<"horizontal" | "vertical">;
+        readonly default: "horizontal";
+    };
+    readonly dropdown: BooleanConstructor;
+    readonly renderDivider: PropType<({ index, count, direction }: {
+        index: number;
+        count: number;
+        direction: "horizontal" | "vertical";
+    }) => VNode>;
+}>>, {
+    readonly direction: "vertical" | "horizontal";
+    readonly dropdown: boolean;
+}, {}>;
+export default _default;

package/es/card-list/src/CardListItem.js

@@ -0,0 +1,109 @@
+import { defineComponent, h, ref, onMounted, onBeforeUnmount } from 'vue';
+import { useConfig } from '../../_mixins';
+import useStyle from '../../_mixins/use-style';
+import style from './styles/index.cssr';
+import ChevronDown from '../../_internal/icons/ChevronDown';
+const cardListItemProps = {
+    title: String,
+    subtitle: String,
+    items: Array,
+    direction: {
+        type: String,
+        default: 'horizontal'
+    },
+    dropdown: Boolean,
+    renderDivider: Function
+};
+export default defineComponent({
+    name: 'UCardListItem',
+    props: cardListItemProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        useStyle('-card-list-item', style, mergedClsPrefixRef);
+        const isOpen = ref(false);
+        const toggle = () => {
+            isOpen.value = !isOpen.value;
+        };
+        const selfRef = ref(null);
+        const dropdownRef = ref(null);
+        const handleClickOutside = (event) => {
+            if (selfRef.value &&
+                !selfRef.value.contains(event.target) &&
+                dropdownRef.value &&
+                !dropdownRef.value.contains(event.target)) {
+                if (isOpen.value) {
+                    isOpen.value = false;
+                }
+            }
+        };
+        onMounted(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        });
+        onBeforeUnmount(() => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            slots,
+            isOpen,
+            toggle,
+            selfRef,
+            dropdownRef
+        };
+    },
+    render() {
+        var _a, _b;
+        const mergedClsPrefix = this.mergedClsPrefix;
+        const items = Array.isArray(this.items) ? this.items : [];
+        const isGrouped = !this.dropdown &&
+            (this.direction === 'horizontal' || this.direction === 'vertical');
+        const isDropdown = this.dropdown;
+        return (h("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
+            isDropdown && (h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
+                h("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
+                    this.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
+                    this.subtitle && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, this.subtitle))),
+                h(ChevronDown, { style: {
+                        width: '20px',
+                        height: '20px',
+                        color: '#B0B3B9',
+                        flexShrink: 0,
+                        transition: 'transform 0.2s',
+                        transform: this.isOpen ? 'rotate(180deg)' : 'none'
+                    } }))),
+            isGrouped && items.length > 0 && (h("div", { class: [
+                    `${mergedClsPrefix}-card-list-item__items`,
+                    this.direction,
+                    this.direction === 'vertical' &&
+                        `${mergedClsPrefix}-card-list-item__items--grid`
+                ] }, items.map((item, idx) => [
+                h("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
+                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
+                    item.content && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content))),
+                idx < items.length - 1 &&
+                    (this.renderDivider
+                        ? this.renderDivider({
+                            index: idx,
+                            count: items.length,
+                            direction: this.direction
+                        })
+                        : h('div', {
+                            class: [
+                                `${mergedClsPrefix}-card-list-item__divider`,
+                                this.direction === 'vertical'
+                                    ? `${mergedClsPrefix}-card-list-item__divider--vertical`
+                                    : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
+                                this.direction === 'vertical' &&
+                                    `${mergedClsPrefix}-card-list-item__divider--grid`
+                            ]
+                        }))
+            ]))),
+            isDropdown && this.isOpen && items.length > 0 ? (h("ul", { class: `${mergedClsPrefix}-card-list-item__dropdown`, style: "margin-top: 8px;", ref: "dropdownRef", onClick: (e) => {
+                    e.stopPropagation();
+                } }, items.map((item, idx) => (h("li", { key: idx },
+                h("div", { class: `${mergedClsPrefix}-card-list-item__dropdown-item` },
+                    item.title && (h("div", { class: `${mergedClsPrefix}-card-list-item__title` }, item.title)),
+                    item.content && (h("div", { class: `${mergedClsPrefix}-card-list-item__subtitle` }, item.content)))))))) : null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a)));
+    }
+});

package/es/card-list/src/interface.d.ts

@@ -0,0 +1,12 @@
+export type Primitive = string | number | boolean | undefined | null;
+export interface ListItemOptions {
+    title?: Primitive;
+    subtitle?: Primitive;
+    span?: number;
+    dropdown?: boolean;
+    items?: Array<{
+        title?: Primitive;
+        content?: Primitive;
+    }>;
+    direction?: 'horizontal' | 'vertical';
+}

package/es/card-list/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/card-list/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/card-list/src/styles/index.cssr.js

@@ -0,0 +1,101 @@
+import { c, cB } from '../../../_utils/cssr';
+export default cB('card-list-item', [c('&', {
+  padding: '16px',
+  backgroundColor: 'var(--u-color-embedded)',
+  borderRadius: 'var(--u-border-radius)',
+  boxShadow: 'var(--u-box-shadow)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+  position: 'relative'
+}), cB('card-list-item__title', {
+  fontSize: 'var(--u-title-font-size)',
+  lineHeight: 'var(--u-title-line-height)',
+  fontWeight: 'var(--u-title-font-weight)',
+  color: 'var(--u-title-text-color)'
+}), cB('card-list-item__subtitle', {
+  fontSize: 'var(--u-text-font-size)',
+  lineHeight: 'var(--u-text-line-height)',
+  fontWeight: 'var(--u-text-font-weight)',
+  color: 'var(--u-text-color)'
+}), cB('card-list-item__items', {
+  display: 'flex',
+  gap: '0'
+}, [c('&.horizontal', {
+  flexDirection: 'column'
+}), c('&.vertical', {
+  flexDirection: 'row',
+  alignItems: 'stretch'
+})]), cB('card-list-item__items--grid', {
+  display: 'grid',
+  gridAutoFlow: 'column',
+  alignItems: 'stretch',
+  width: '100%'
+}), cB('card-list-item__divider', {
+  background: 'var(--u-divider-color)',
+  flexShrink: '0'
+}), cB('card-list-item__divider--vertical', {
+  width: '1px',
+  height: '100%',
+  alignSelf: 'stretch',
+  display: 'block'
+}), cB('card-list-item__divider--horizontal', {
+  width: '100%',
+  height: '1px',
+  alignSelf: 'stretch',
+  display: 'block',
+  margin: '16px 0'
+}), cB('card-list-item__divider--grid', {
+  height: '100%',
+  minWidth: '1px',
+  background: 'var(--u-divider-color)',
+  alignSelf: 'stretch',
+  display: 'block',
+  margin: '0 16px'
+}), cB('card-list-item__item', {
+  flex: '1 1 0%',
+  padding: '4px 0',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  minHeight: '0',
+  minWidth: '0',
+  overflow: 'auto'
+}), cB('card-list-item__dropdown', {
+  marginTop: '6px',
+  padding: '12px 0',
+  background: 'var(--u-dropdown-bg-color)',
+  borderRadius: 'var(--u-border-radius)',
+  boxShadow: 'var(--u-box-shadow)',
+  width: '100%',
+  maxHeight: '500px',
+  overflow: 'auto',
+  left: 0,
+  right: 0,
+  zIndex: 10,
+  position: 'absolute',
+  top: '100%',
+  boxSizing: 'border-box',
+  border: 'none'
+}), cB('card-list-item__dropdown', [c('li', {
+  padding: '10px 18px'
+})]), cB('card-list-item__wrapper', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '8px',
+  padding: '4px 0'
+}), cB('card-list-item__wrapper-content', {
+  flex: 1,
+  minWidth: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
+}), c('.u-divider--vertical', {
+  width: '1px !important',
+  minWidth: '1px',
+  height: '100% !important',
+  minHeight: '1px',
+  alignSelf: 'stretch',
+  display: 'block !important'
+})]);

package/es/card-list/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { CardListTheme } from './light';
+declare const cardDark: CardListTheme;
+export default cardDark;

package/es/card-list/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const cardDark = {
+    name: 'CardList',
+    common: commonDark,
+    self
+};
+export default cardDark;

package/es/card-list/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as cardListDark } from './dark';
+export { default as cardListLight } from './light';
+export type { CardListTheme, CardListThemeVars } from './light';

package/es/card-list/styles/index.js

@@ -0,0 +1,2 @@
+export { default as cardListDark } from './dark';
+export { default as cardListLight } from './light';

package/es/card-list/styles/light.d.ts

@@ -0,0 +1,22 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import { type Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    textColor: string;
+    textLineHeight: string;
+    textFontWeight: string;
+    textFontSize: string;
+    titleTextColor: string;
+    titleLineHeight: string;
+    titleFontWeight: string;
+    titleFontSize: string;
+    borderColor: string;
+    borderRadius: string;
+    boxShadow: string;
+    colorEmbedded: string;
+    dividerColor: string;
+    dropDownBgColor: string;
+};
+export type CardListThemeVars = ReturnType<typeof self>;
+declare const cardListLight: Theme<'CardList', CardListThemeVars>;
+export default cardListLight;
+export type CardListTheme = typeof cardListLight;