@codeandfunction/callaloo 1.18.10 → 2.1.0

package/dist/components/Theme/base-theme.d.ts

@@ -1,188 +1,41 @@
-import { CLTheme, CLThemeConfig } from '../../index';
+import { CLColorVariants, CLMode, CLPalette, CLThemeConfig } from '../../index';
 export declare const DEFAULT_THEME: CLThemeConfig;
-export declare enum COLOR_KEYS {
-    focusBorder = 600,
-    focusShadow = 100,
-    outlineBorderBase = 300,
-    outlineBorderHover = 700,
-    outlineBgHover = 100,
-    solidBgBase = 100,
-    solidBgDark = 900,
-    solidBgDarkHover = 700,
-    solidBgDarkBorder = 500,
-    solidBgDisabled = 100,
-    solidBgLight = 100,
-    solidBgLightHover = 200,
-    solidBgLightBorder = 300,
-    solidBgHover = 200,
-    solidBorderBase = 300,
-    solidBorderDisabled = 200,
-    text = 800,
-    textDark = 100,
-    textDarkHover = 200,
-    textDisabled = 300,
-    textHover = 900,
-    textLight = 800,
-    textLightHover = 900
+type ColorMap = Record<CLColorVariants, Record<CLMode, ColorModesKeys>>;
+export interface ColorModesKeys {
+    bg?: number;
+    border?: number;
+    borderHover?: number;
+    disabled?: number;
+    focus?: number;
+    hover?: number;
+    shadow?: number;
+    text?: number;
+    textDisabled?: number;
 }
+export declare const COLOR_VARIANTS_MAP: ColorMap;
 export declare const setupTheme: (config?: CLThemeConfig) => void;
 export declare const useTheme: () => {
-    colors: import('vue').Ref<{
-        primary?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        secondary?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        neutral?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        danger?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        warning?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        success?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        info?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-    }, CLTheme | {
-        primary?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        secondary?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        neutral?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        danger?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        warning?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        success?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
-        info?: {
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-        } | undefined;
+    colors: globalThis.Ref<{
+        primary?: import('../../types').Shades | undefined;
+        secondary?: import('../../types').Shades | undefined;
+        neutral?: import('../../types').Shades | undefined;
+        danger?: import('../../types').Shades | undefined;
+        warning?: import('../../types').Shades | undefined;
+        success?: import('../../types').Shades | undefined;
+        info?: import('../../types').Shades | undefined;
+    }, CLPalette | {
+        primary?: import('../../types').Shades | undefined;
+        secondary?: import('../../types').Shades | undefined;
+        neutral?: import('../../types').Shades | undefined;
+        danger?: import('../../types').Shades | undefined;
+        warning?: import('../../types').Shades | undefined;
+        success?: import('../../types').Shades | undefined;
+        info?: import('../../types').Shades | undefined;
     }>;
-    updateBaseColors: (config: CLThemeConfig) => void;
+    darkMode: globalThis.Ref<boolean | undefined, boolean | undefined>;
+    fontFamily: globalThis.Ref<string | undefined, string | undefined>;
+    setColors: (colors: CLPalette) => void;
+    setDarkMode: (enabled: boolean) => void;
+    setFontFamily: (font?: string) => void;
 };
+export {};

package/dist/components/Theme/index.d.ts

@@ -0,0 +1,3 @@
+import { default as CLThemeProvider } from './CLThemeProvider.vue';
+export { CLThemeProvider };
+export type CLThemeProvider = InstanceType<typeof CLThemeProvider>;

package/dist/components/Theme/utils.d.ts

@@ -1,10 +1,11 @@
-import { CLThemeKeys, CLThemes } from '../../index';
+import { CLColors, CLColorVariants, CLMode, CLPalette } from '../../index';
 export declare const baseContentBox: () => string;
 interface BaseFormElementProps {
+    backgroundColor?: string;
     borderColor?: string;
     placeholderColor?: string;
 }
-export declare const baseFormElement: ({ borderColor, placeholderColor, }: BaseFormElementProps) => string;
+export declare const baseFormElement: ({ backgroundColor, borderColor, placeholderColor }: BaseFormElementProps) => string;
 export declare const css: (template: TemplateStringsArray, ...args: any[]) => string;
 export declare const cx: (...classNames: any[]) => string;
 interface FocusProps {
@@ -15,7 +16,23 @@ interface FocusProps {
     shadowWidth?: string;
     shadowColor?: string;
 }
-export declare const focusTheme: ({ borderColor, outlineWidth, outlineOffset, outlineColor, shadowWidth, shadowColor, }: FocusProps) => string;
-export declare const getThemeKeys: (theme: CLThemes) => CLThemeKeys;
-export declare const getOutlineColor: (outlineColor: string) => CLThemeKeys;
+export declare const focusTheme: ({ borderColor, outlineWidth, outlineOffset, outlineColor, shadowWidth, shadowColor }: FocusProps) => string;
+interface GetColorsArgs {
+    color: CLColors;
+    colors: CLPalette;
+    mode: CLMode;
+    variant: CLColorVariants;
+}
+interface GetColorsReturn {
+    bg?: string;
+    border?: string;
+    borderHover?: string;
+    disabled?: string;
+    focus?: string;
+    hover?: string;
+    shadow?: string;
+    text?: string;
+    textDisabled?: string;
+}
+export declare const getColorValues: ({ color, colors, mode, variant }: GetColorsArgs) => GetColorsReturn | undefined;
 export {};

package/dist/components/Typography/CLHeading.vue.d.ts

@@ -1,9 +1,8 @@
-import { PropType } from 'vue';
-import { CLAlign, CLHeadingLevels, CLHeadingTypes, CLHeadingThemes, CLThemes } from '../../index';
+import { CLAlign, CLHeadingLevels, CLHeadingTypes, CLColors } from '../../index';
 /**
  * The `<CLHeading />` component renders text as a heading element.
  */
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
     /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left` */
     align: {
         type: PropType<CLAlign>;
@@ -18,10 +17,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-    /** Set the theme of the heading. The property can be one of `CLHeadingThemes`, e.g. `CLThemes.Dark` */
-    theme: {
-        type: PropType<CLHeadingThemes>;
-        default: CLThemes;
+    /** Set the color of the heading. The property can be one of `CLColors`, e.g. `CLColors.Neutral` */
+    color: {
+        type: PropType<CLColors>;
+        default: CLColors;
     };
     /** Set the type of the heading. The property can be one of `CLHeadingTypes`, e.g. `CLHeadingTypes.Title` */
     type: {
@@ -30,7 +29,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>, {}, {}, {}, {
     getLevel(): CLHeadingLevels;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
     /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left` */
     align: {
         type: PropType<CLAlign>;
@@ -45,10 +44,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-    /** Set the theme of the heading. The property can be one of `CLHeadingThemes`, e.g. `CLThemes.Dark` */
-    theme: {
-        type: PropType<CLHeadingThemes>;
-        default: CLThemes;
+    /** Set the color of the heading. The property can be one of `CLColors`, e.g. `CLColors.Neutral` */
+    color: {
+        type: PropType<CLColors>;
+        default: CLColors;
     };
     /** Set the type of the heading. The property can be one of `CLHeadingTypes`, e.g. `CLHeadingTypes.Title` */
     type: {
@@ -56,7 +55,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: CLHeadingTypes;
     };
 }>> & Readonly<{}>, {
-    theme: CLHeadingThemes;
+    color: CLColors;
     testId: string;
     type: CLHeadingTypes;
     align: CLAlign;

package/dist/components/Typography/CLText.vue.d.ts

@@ -1,9 +1,8 @@
-import { PropType } from 'vue';
-import { CLAlign, CLTextHtmlTags, CLTextThemes, CLTextTypes, CLThemes } from '../../index';
+import { CLAlign, CLTextHtmlTags, CLTextTypes, CLColors } from '../../index';
 /**
  * The `<CLText />` component renders a text element.
  */
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
     /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left` */
     align: {
         type: PropType<CLAlign>;
@@ -14,6 +13,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<CLTextHtmlTags>;
         default: string;
     };
+    /** Set the text color. The property can be one of `CLColors`, e.g. `CLColors.Neutral`. */
+    color: {
+        type: PropType<CLColors>;
+        default: CLColors;
+    };
     /** Rendered a bolded text. */
     label: {
         type: BooleanConstructor;
@@ -29,17 +33,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-    /** Set the text theme. The property can be one of `CLTextThemes`, e.g. `CLThemes.Dark`. */
-    theme: {
-        type: PropType<CLTextThemes>;
-        default: CLThemes;
-    };
     /** When set to `true`, truncate the text if it overflows its container. */
     truncate: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
     /** Set the horizontal alignment of content. The property can be one of `CLAlign`, e.g. `CLAlign.Left` */
     align: {
         type: PropType<CLAlign>;
@@ -50,6 +49,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<CLTextHtmlTags>;
         default: string;
     };
+    /** Set the text color. The property can be one of `CLColors`, e.g. `CLColors.Neutral`. */
+    color: {
+        type: PropType<CLColors>;
+        default: CLColors;
+    };
     /** Rendered a bolded text. */
     label: {
         type: BooleanConstructor;
@@ -65,19 +69,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
-    /** Set the text theme. The property can be one of `CLTextThemes`, e.g. `CLThemes.Dark`. */
-    theme: {
-        type: PropType<CLTextThemes>;
-        default: CLThemes;
-    };
     /** When set to `true`, truncate the text if it overflows its container. */
     truncate: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    color: CLColors;
     label: boolean;
-    theme: CLTextThemes;
     testId: string;
     type: CLTextTypes;
     align: CLAlign;

package/dist/components/Typography/index.d.ts

@@ -0,0 +1,5 @@
+import { default as CLHeading } from './CLHeading.vue';
+import { default as CLText } from './CLText.vue';
+export { CLHeading, CLText };
+export type CLHeading = InstanceType<typeof CLHeading>;
+export type CLText = InstanceType<typeof CLText>;

package/dist/components/Typography/utils.d.ts

@@ -1,7 +1,6 @@
-import { CLThemes } from '../../index';
+import { CLColors } from '../../index';
 interface TextThemeProps {
-    color?: CLThemes;
-    component: string;
+    color?: CLColors;
 }
-export declare const textTheme: ({ color, component, }: TextThemeProps) => string;
+export declare const textTheme: ({ color }: TextThemeProps) => string;
 export {};

package/dist/composables/useHasSlotContent.d.ts

@@ -0,0 +1 @@
+export declare const useHasSlotContent: (name?: string) => globalThis.ComputedRef<boolean>;

package/dist/index.d.ts

@@ -1,37 +1,15 @@
-export { Align as CLAlign, BorderRadius as CLBorderRadius, ButtonTypes as CLButtonTypes, CardTypes as CLCardTypes, DarkMode as CLDarkMode, HeadingLevels as CLHeadingLevels, HeadingTypes as CLHeadingTypes, IconSizes as CLIconSizes, IconNames as CLIconNames, InputTypes as CLInputTypes, LinkTarget as CLLinkTarget, Orientation as CLOrientation, Order as CLOrder, PaginationType as CLPaginationType, Placement as CLPlacement, Position as CLPosition, Sizes as CLSizes, TableTypes as CLTableTypes, TextTypes as CLTextTypes, Themes as CLThemes, } from './types';
-export type { BadgeThemes as CLBadgeThemes, BannerProps as CLBannerProps, CardProps as CLCardProps, HeadingThemes as CLHeadingThemes, InputThemes as CLInputThemes, GenericFunction as CLGenericFunction, GenericFocusFunction as CLGenericFocusFunction, MessageThemes as CLMessageThemes, NavItem as CLNavItem, PillThemes as CLPillThemes, Option as CLOption, SimpleThemes as CLSimpleThemes, SpinnerThemes as CLSpinnerThemes, Theme as CLTheme, ThemeConfig as CLThemeConfig, ThemeKeys as CLThemeKeys, TextThemes as CLTextThemes, TextHtmlTags as CLTextHtmlTags, ToastProps as CLToastProps, ToastThemes as CLToastThemes, } from './types';
-export { default as CLA11yButton } from './components/Buttons/CLA11yButton.vue';
-export { default as CLBadge } from './components/Indicators/CLBadge.vue';
-export { default as CLBanner } from './components/Indicators/CLBanner.vue';
-export { default as CLButton } from './components/Buttons/CLButton.vue';
-export { default as CLCard } from './components/Containers/CLCard.vue';
-export { default as CLCarousel } from './components/Containers/Carousel/CLCarousel.vue';
-export { default as CLCarouselSlide } from './components/Containers/Carousel/CLCarouselSlide.vue';
-export { default as CLCheckbox } from './components/Form/CLCheckbox.vue';
-export { default as CLDisclosure } from './components/Containers/CLDisclosure.vue';
-export { default as CLFormField } from './components/Form/CLFormField.vue';
-export { default as CLHeading } from './components/Typography/CLHeading.vue';
-export { default as CLIcon } from './components/Assets/CLIcon.vue';
-export { default as CLInput } from './components/Form/CLInput.vue';
-export { default as CLLink } from './components/Navigation/CLLink.vue';
-export { default as CLDropdownMenu } from './components/Popups/CLDropdownMenu.vue';
-export { default as CLModal } from './components/Modals/CLModal.vue';
-export { default as CLNavLink } from './components/Navigation/CLNavLink.vue';
-export { default as CLNavSection } from './components/Navigation/CLNavSection.vue';
-export { default as CLPill } from './components/Indicators/CLPill.vue';
-export { default as CLRadioButton } from './components/Form/CLRadioButton.vue';
-export { default as CLSelect } from './components/Form/CLSelect.vue';
-export { default as CLSkeleton } from './components/Loading/CLSkeleton.vue';
-export { default as CLSpinner } from './components/Loading/CLSpinner.vue';
-export { default as CLTable } from './components/Table/CLTable.vue';
-export { default as CLTableBody } from './components/Table/CLTableBody.vue';
-export { default as CLTableCell } from './components/Table/CLTableCell.vue';
-export { default as CLTableFooter } from './components/Table/CLTableFooter.vue';
-export { default as CLTableHeader } from './components/Table/CLTableHeader.vue';
-export { default as CLTableNestedCell } from './components/Table/CLTableNestedCell.vue';
-export { default as CLTableRow } from './components/Table/CLTableRow.vue';
-export { default as CLText } from './components/Typography/CLText.vue';
-export { default as CLTextArea } from './components/Form/CLTextArea.vue';
-export { default as CLThemeProvider } from './components/Theme/CLThemeProvider.vue';
-export { default as CLToast } from './components/Popups/CLToast.vue';
+export { Align as CLAlign, BorderRadius as CLBorderRadius, ButtonTypes as CLButtonTypes, CardTypes as CLCardTypes, Colors as CLColors, ColorVariants as CLColorVariants, HeadingLevels as CLHeadingLevels, HeadingTypes as CLHeadingTypes, IconSizes as CLIconSizes, IconNames as CLIconNames, InputTypes as CLInputTypes, LinkTarget as CLLinkTarget, Loading as CLLoading, Mode as CLMode, Orientation as CLOrientation, Order as CLOrder, PaginationType as CLPaginationType, Placement as CLPlacement, Position as CLPosition, Sizes as CLSizes, TableTypes as CLTableTypes, TextTypes as CLTextTypes } from './types';
+export type { BannerProps as CLBannerProps, CardProps as CLCardProps, GenericFunction as CLGenericFunction, GenericFocusFunction as CLGenericFocusFunction, NavItem as CLNavItem, Palette as CLPalette, Option as CLOption, ThemeConfig as CLThemeConfig, TextHtmlTags as CLTextHtmlTags, ToastProps as CLToastProps } from './types';
+export { CLBadge, CLBanner, CLPill } from './components/Indicators';
+export { CLA11yButton, CLButton } from './components/Buttons';
+export { CLCard, CLCarousel, CLCarouselSlide, CLDisclosure } from './components/Containers';
+export { CLCheckbox, CLInput, CLRadioButton, CLSelect, CLTextArea } from './components/Form';
+export { CLHeading, CLText } from './components/Typography';
+export { CLIcon } from './components/Assets';
+export { CLLink, CLNavLink, CLNavSection } from './components/Navigation';
+export { CLDropdownMenu, CLToast } from './components/Popups';
+export { CLModal } from './components/Modals';
+export { CLSkeleton, CLSpinner } from './components/Loading';
+export { CLTable, CLTableBody, CLTableCell, CLTableFooter, CLTableHeader, CLTableNestedCell, CLTableRow } from './components/Table';
+export { CLThemeProvider } from './components/Theme';
 export { DEFAULT_THEME, useTheme } from './components/Theme/base-theme';