@codeandfunction/callaloo 1.18.10 → 2.1.0

package/dist/types.d.ts

@@ -14,6 +14,8 @@ export interface BannerProps {
     borderRadius?: BorderRadius;
     /** A `boolean` value which dictates the busy state of the Banner. When set to `true`, it utilizes the `<CLSkeleton />` component. */
     busy?: boolean;
+    /** Sets the color of the Badge. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
+    color?: Colors;
     /** Sets the height of the Banner, it's default value is `auto`. */
     height?: string;
     /** The text to be displayed as the message. */
@@ -26,15 +28,13 @@ export interface BannerProps {
     rounded?: boolean;
     /** Sets a custom ID used for unit tests. */
     testId?: string;
-    /** Sets the style/theme. The property can be one of `CLThemes`, e.g. `CLThemes.Primary`. */
-    theme?: BannerThemes;
     /** Set the text of the title which should be displayed. */
     title?: string;
     /** Sets the width of the Banner, it's default value is `100%`. */
     width?: string;
+    /** Sets the color variant. The property can be on of `CLColorVariants`, e.g `CLColorVariants.Soft`. */
+    variant?: ColorVariants;
 }
-export type BadgeThemes = Exclude<Themes, Themes.Transparent>;
-export type BannerThemes = Exclude<Themes, Themes.Transparent>;
 export type BlockTextHtmlTags = 'blockquote' | 'dd' | 'div' | 'dl' | 'dt' | 'figcaption' | 'figure' | 'hr' | 'li' | 'menu' | 'ol' | 'p' | 'pre' | 'ul';
 export declare enum BorderRadius {
     Full = "rounded-full",
@@ -72,6 +72,8 @@ export interface CardProps {
     busy?: boolean;
     /** Appears below the title. Can be used to provide meta data, e.g. the time and date. */
     byline?: string;
+    /** Sets the color of the Card. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
+    color?: Colors;
     /** The `elevated` property displays a shadow to indicate elevation. */
     elevated?: boolean;
     /** A callback function which provides a reference to the button. */
@@ -90,6 +92,8 @@ export interface CardProps {
     imageHeight?: string;
     /** Sets the width of the image, it's default value is `auto`. */
     imageWidth?: string;
+    /** Indicates how the browser should load the image. Default is `CLLoading.Eager`*/
+    imageLoading?: Loading;
     /** A callback function to handle click events. */
     onClick?: GenericFunction;
     /** When set to `false`, it will remove any horizontal and vertical padding of the slot content. */
@@ -106,22 +110,31 @@ export interface CardProps {
     titleType?: HeadingTypes;
     /** Set the title heading level. The property can be one of `CLHeadingLevels`, e.g. `CLHeadingLevels.H1` */
     titleHLevel?: HeadingLevels;
-    /** Sets the style/theme. The property can be one of `CLThemes`, e.g. `CLThemes.Primary`. */
-    theme?: Themes;
     /** Sets the Card type. The property can be one of `CLCardTypes`, e.g. `CLCardTypes.Medium`. */
     type?: CardTypes;
     /** Sets the width of the Card, it's default value is `auto`. */
     width?: string;
+    /** Sets the color variant. The property can be on of `CLColorVariants`, e.g `CLColorVariants.Soft`. */
+    variant?: ColorVariants;
 }
-export type CheckboxThemes = Exclude<Themes, Themes.Transparent | Themes.Outline | Themes.OutlineDanger | Themes.OutlineInfo | Themes.OutlinePrimary | Themes.OutlineSecondary | Themes.OutlineSuccess | Themes.OutlineWarning>;
-export declare enum DarkMode {
-    On = "dark",
-    Off = "light",
-    System = "system"
+export declare enum Colors {
+    Primary = "primary",
+    Secondary = "secondary",
+    Danger = "danger",
+    Info = "info",
+    Neutral = "neutral",
+    Warning = "warning",
+    Success = "success"
+}
+export declare enum ColorVariants {
+    Contrast = "contrast",
+    Ghost = "ghost",
+    Outline = "outline",
+    Soft = "soft",
+    Solid = "solid"
 }
 export type GenericFunction = (event?: Event) => void;
 export type GenericFocusFunction = (event: FocusEvent) => void;
-export type HeadingThemes = Extract<Themes, Themes.Light | Themes.Dark>;
 export declare enum HeadingLevels {
     H1 = "h1",
     H2 = "h2",
@@ -185,6 +198,7 @@ export declare enum IconNames {
     ArrowNarrowLeft = "tabler:arrow-narrow-left",
     ArrowNarrowRight = "tabler:arrow-narrow-right",
     ArrowNarrowUp = "tabler:arrow-narrow-up",
+    ArrowsDiagonal = "tabler:arrows-diagonal",
     ArrowsMaximize = "tabler:arrows-maximize",
     ArrowsMinimize = "tabler:arrows-minimize",
     AtSign = "tabler:at",
@@ -219,6 +233,7 @@ export declare enum IconNames {
     BrandX = "tabler:brand-x",
     BrandYouTube = "tabler:brand-youtube-filled",
     Broadcast = "tabler:broadcast",
+    Browser = "tabler:browser",
     Calendar = "tabler:calendar",
     Calculator = "tabler:calculator",
     CaretDown = "tabler:caret-down",
@@ -249,6 +264,8 @@ export declare enum IconNames {
     Clock2 = "tabler:clock-2",
     Cloud = "tabler:cloud",
     CloudComputing = "tabler:cloud-computing",
+    CloudDataConnection = "tabler:cloud-data-connection",
+    CloudUpload = "tabler:cloud-upload",
     Code = "tabler:code",
     Columns1 = "tabler:columns-1",
     Columns2 = "tabler:columns-2",
@@ -293,6 +310,7 @@ export declare enum IconNames {
     Forms = "tabler:forms",
     Frame = "tabler:frame",
     Hanger = "tabler:hanger",
+    HandStop = "tabler:hand-stop",
     Heading = "tabler:heading",
     Help = "tabler:help",
     HelpCircle = "tabler:help-circle",
@@ -311,12 +329,14 @@ export declare enum IconNames {
     LayoutDashboard = "tabler:layout-dashboard",
     LayoutGrid = "tabler:layout-grid",
     LayoutNavbar = "tabler:layout-navbar",
+    LayoutRows = "tabler:layout-rows",
     LayoutSidebar = "tabler:layout-sidebar",
     LayoutSidebarRight = "tabler:layout-sidebar-right",
     Link = "tabler:link",
     List = "tabler:list",
     ListNumbers = "tabler:list-numbers",
     ListTree = "tabler:list-tree",
+    LoadBalancer = "tabler:load-balancer",
     LogIn = "tabler:login",
     LogOut = "tabler:logout",
     Logs = "tabler:logs",
@@ -352,10 +372,14 @@ export declare enum IconNames {
     NewSection = "tabler:new-section",
     PlusCircle = "tabler:circle-plus",
     Plus = "tabler:plus",
+    Pointer = "tabler:pointer",
     Rectangle = "tabler:rectangle",
     Refresh = "tabler:refresh",
     Restore = "tabler:restore",
     Rocket = "tabler:rocket",
+    RowInsertTop = "tabler:row-insert-top",
+    RowInsertBottom = "tabler:row-insert-bottom",
+    RowRemove = "tabler:row-remove",
     Rss = "tabler:rss",
     Scoreboard = "tabler:scoreboard",
     Seo = "tabler:seo",
@@ -388,7 +412,11 @@ export declare enum IconNames {
     Typography = "tabler:typography",
     Upload = "tabler:upload",
     User = "tabler:user",
+    Users = "tabler:users",
     UserCircle = "tabler:user-circle",
+    UsersGroup = "tabler:users-group",
+    UsersMinus = "tabler:users-minus",
+    UsersPlus = "tabler:users-plus",
     UserSquareRounded = "tabler:user-square-rounded",
     Video = "tabler:video",
     WindowMaximize = "tabler:window-maximize",
@@ -396,7 +424,6 @@ export declare enum IconNames {
     WordlWww = "tabler:world-www"
 }
 export type InlineTextHtmlTags = 'a' | 'abbr' | 'b' | 'bdi' | 'bdo' | 'br' | 'cite' | 'code' | 'data' | 'dfn' | 'em' | 'i' | 'kbd' | 'mark' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'u' | 'var' | 'wbr';
-export type InputThemes = Extract<Themes, Themes.Danger | Themes.Default | Themes.Success | Themes.Warning>;
 export declare enum InputTypes {
     Color = "color",
     Date = "date",
@@ -414,21 +441,30 @@ export declare enum InputTypes {
     Time = "time",
     Url = "url"
 }
+export declare enum Loading {
+    Eager = "eager",
+    Lazy = "lazy"
+}
 export declare enum LinkTarget {
     Blank = "_blank",
     Self = "_self"
 }
-export type MessageThemes = Extract<Themes, Themes.Danger | Themes.Default | Themes.Success | Themes.Warning>;
 export declare enum MessageType {
     Danger = "danger",
     Default = "default",
     Success = "success",
     Warning = "warning"
 }
+export declare enum Mode {
+    Dark = "dark",
+    Light = "light"
+}
 export interface NavItem {
     /** Sets the aria-label on the NavLink element. */
     ariaLabel?: string;
     /** Sets the external attribute on the NavLink element. If set, it adds an icon indicating that the link will open a new tab/window. */
+    /** Sets the color of the NavLink element. The property can be one of `CLColors`, e.g. `CLColors.Default` */
+    color?: Colors;
     external?: boolean;
     /** Sets the href attribute on the NavLink element. */
     href?: string;
@@ -442,14 +478,11 @@ export interface NavItem {
     rel?: string;
     /** Sets the target attribute on the NavLink element. The property can be one of `CLLinkTarget`, e.g. `CLLinkTarget.Self` */
     target?: LinkTarget;
-    /** Sets the theme of the NavLink element. The property can be one of `CLSimpleThemes`, e.g. `CLThemes.Default` */
-    theme?: SimpleThemes;
 }
 export interface Option {
     label: string;
     value: string | number | null;
 }
-export type PillThemes = Exclude<Themes, Themes.Transparent>;
 export declare enum Order {
     After = "after",
     Before = "before"
@@ -463,6 +496,15 @@ export declare enum PaginationType {
     Hidden = "hidden",
     Numbered = "numbered"
 }
+export interface Palette {
+    primary?: Shades;
+    secondary?: Shades;
+    neutral?: Shades;
+    danger?: Shades;
+    warning?: Shades;
+    success?: Shades;
+    info?: Shades;
+}
 export declare enum Placement {
     Bottom = "bottom",
     BottomEnd = "bottom-end",
@@ -481,7 +523,6 @@ export declare enum Position {
     Absolute = "absolute",
     Relative = "relative"
 }
-export type SimpleThemes = Extract<Themes, Themes.Dark | Themes.Danger | Themes.Default | Themes.Light | Themes.Primary | Themes.Secondary | Themes.Success | Themes.Warning>;
 export declare enum Sizes {
     Tiny = "tiny",
     Small = "small",
@@ -489,14 +530,12 @@ export declare enum Sizes {
     Large = "large",
     XLarge = "xlarge"
 }
-export type SpinnerThemes = Exclude<Themes, Themes.Transparent | Themes.Outline | Themes.OutlineDanger | Themes.OutlineInfo | Themes.OutlinePrimary | Themes.OutlineSecondary | Themes.OutlineSuccess | Themes.OutlineWarning>;
 export declare enum TableTypes {
     Condensed = "condensed",
     Default = "default",
     Plain = "plain"
 }
 export type TextHtmlTags = BlockTextHtmlTags | InlineTextHtmlTags;
-export type TextThemes = Extract<Themes, Themes.Light | Themes.Dark>;
 export declare enum TextTypes {
     Body = "body",
     Summary = "summary",
@@ -506,55 +545,22 @@ export declare enum TextTypes {
     Large = "large",
     XLarge = "xlarge"
 }
-export interface Shades {
-    100?: string;
-    200?: string;
-    300?: string;
-    400?: string;
-    500?: string;
-    600?: string;
-    700?: string;
-    800?: string;
-    900?: string;
-}
-export interface Theme {
-    primary?: Shades;
-    secondary?: Shades;
-    neutral?: Shades;
-    danger?: Shades;
-    warning?: Shades;
-    success?: Shades;
-    info?: Shades;
-}
+export type Shades = Record<number, string>;
 export interface ThemeConfig {
-    colors: Theme;
+    colors?: Palette;
+    darkMode: boolean;
+    fontFamily?: string;
+    mode?: Mode;
     radius?: BorderRadius;
 }
-export type ThemeKeys = keyof Theme;
-export declare enum Themes {
-    Default = "default",
-    Primary = "primary",
-    Secondary = "secondary",
-    Transparent = "transparent",
-    Outline = "outline",
-    OutlinePrimary = "outline-primary",
-    OutlineSecondary = "outline-secondary",
-    OutlineDanger = "outline-danger",
-    OutlineWarning = "outline-warning",
-    OutlineSuccess = "outline-success",
-    OutlineInfo = "outline-info",
-    Danger = "danger",
-    Warning = "warning",
-    Success = "success",
-    Info = "info",
-    Light = "light",
-    Dark = "dark"
-}
+export type PaletteKeys = keyof Palette;
 export interface ToastProps {
     /** The action label text to be displayed. */
     actionLabel?: string;
     /** The border radius size. The property can be one of `CLBorderRadius`, e.g. `CLBorderRadius.Medium`. */
     borderRadius?: BorderRadius;
+    /** Sets the color of the buttons and icons. The property can be one of `CLColors`, e.g. `CLColors.Default` */
+    color?: Colors;
     /** Time in seconds e.g 5 = 5 seconds */
     dismissTimer?: number;
     /** The icon to be displayed. The property can be one of `CLIconNames`, e.g. `CLIconNames.Info`. */
@@ -571,11 +577,10 @@ export interface ToastProps {
     rounded?: boolean;
     /** Sets a custom ID used for unit tests. */
     testId?: string;
-    /** Sets the theme of the Toast. The property can be one of `CLToastThemes`, e.g. `CLThemes.Default` */
-    theme?: ToastThemes;
     /** Set the text of the title which should be displayed. */
     title?: string;
+    /** Sets the color variant o the buttons and icons. The property can be on of `CLColorVariants`, e.g `CLColorVariants.Soft`. */
+    variant?: ColorVariants;
     /** Sets the width of the Toast, it's default value is `24rem`. */
     width?: string;
 }
-export type ToastThemes = Extract<Themes, Themes.Danger | Themes.Default | Themes.Primary | Themes.Secondary | Themes.Success | Themes.Warning>;

package/dist/utils/helper.d.ts

@@ -8,9 +8,9 @@ interface ChildIsVisibleInput {
     child: HTMLElement;
     threshold?: number;
 }
-export declare const childIsVisible: ({ parent, child, threshold, }: ChildIsVisibleInput) => boolean;
+export declare const childIsVisible: ({ parent, child, threshold }: ChildIsVisibleInput) => boolean;
 export declare const debounce: (fn: () => void, ms?: number) => (this: any, ...args: any | any[]) => void;
-export declare const hasSlotContent: (slots: any, slotName: string, component: string) => boolean;
 export declare const isBrowser: boolean;
+export declare const isDarkMode: () => boolean;
 export declare const getMaxZIndex: () => number;
 export {};

package/package.json

@@ -13,13 +13,15 @@
     "simple",
     "ui library",
     "a11y",
-    "component library"
+    "component library",
+    "ui components",
+    "vuejs"
   ],
-  "version": "1.18.10",
+  "version": "2.1.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build:lib": "yarn export:icons && vite build && npm pack",
+    "build:lib": "yarn export:icons && vite build",
     "build:watch": "vite build --watch",
     "build:web": "yarn export:icons && yarn storybook build",
     "coverage": "vitest run --coverage",
@@ -49,6 +51,7 @@
   ],
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "typings": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -56,69 +59,76 @@
       "import": "./dist/index.js",
       "require": "./dist/index.umd.cjs"
     },
-    "./style.css": "./dist/assets/index.css"
+    "./styles.css": "./dist/assets/styles.css"
   },
-  "sideEffects": [
-    "**/*.css"
-  ],
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
+    "@chromatic-com/storybook": "^3.2.4",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.17.0",
-    "@floating-ui/vue": "^1.1.5",
-    "@iconify-json/tabler": "^1.2.13",
+    "@eslint/js": "^9.18.0",
+    "@floating-ui/vue": "^1.1.6",
+    "@iconify-json/tabler": "^1.2.15",
+    "@iconify/tools": "^4.1.1",
     "@iconify/types": "^2.0.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/cli": "^8.4.7",
-    "@storybook/core-server": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/test-runner": "^0.20.1",
-    "@storybook/vue3": "^8.4.7",
-    "@storybook/vue3-vite": "^8.4.7",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.3",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/gitlab": "^13.2.4",
+    "@storybook/addon-a11y": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/cli": "^8.5.1",
+    "@storybook/core-server": "^8.5.1",
+    "@storybook/test": "^8.5.1",
+    "@storybook/test-runner": "^0.21.0",
+    "@storybook/vue3": "^8.5.1",
+    "@storybook/vue3-vite": "^8.5.1",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "22.10.9",
     "@types/stylis": "^4.2.7",
-    "@typescript-eslint/eslint-plugin": "8.19.0",
-    "@typescript-eslint/parser": "8.19.0",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/parser": "8.21.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/browser": "3.0.3",
     "@vitest/coverage-c8": "~0.33.0",
-    "@vitest/coverage-istanbul": "2.1.8",
-    "@vitest/coverage-v8": "2.1.8",
-    "@vitest/ui": "^2.1.8",
+    "@vitest/coverage-istanbul": "3.0.3",
+    "@vitest/coverage-v8": "3.0.3",
+    "@vitest/ui": "^3.0.3",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
     "@wdns/vue-code-block": "^2.3.5",
-    "eslint": "9.17.0",
-    "eslint-config-prettier": "9.1.0",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "10.0.1",
     "eslint-plugin-vue": "^9.32.0",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.3.0",
-    "lodash": "^4.17.21",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.4.1",
+    "lodash-es": "^4.17.21",
     "murmurhash": "^2.0.1",
     "playwright": "^1.49.1",
     "prettier": "^3.4.2",
-    "sass": "^1.83.0",
-    "storybook": "^8.4.7",
-    "stylis": "^4.3.4",
-    "typescript": "^5.7.2",
-    "vite": "6.0.6",
-    "vite-plugin-dts": "^4.4.0",
-    "vite-plugin-lib-inject-css": "^2.2.0",
+    "sass": "^1.83.4",
+    "semantic-release": "^24.2.1",
+    "storybook": "^8.5.1",
+    "stylis": "^4.3.5",
+    "typescript": "^5.7.3",
+    "unplugin-auto-import": "^19.0.0",
+    "vite": "6.0.11",
+    "vite-plugin-dts": "^4.5.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "2.1.8",
+    "vitest": "3.0.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.0"
   },
-  "packageManager": "yarn@4.5.0",
   "peerDependencies": {
-    "@floating-ui/vue": "^1.1.5",
     "vue": "^3.5.10"
-  }
+  },
+  "packageManager": "yarn@4.5.0",
+  "sideEffects": [
+    "dist/*",
+    "*.css"
+  ]
 }