@cck-ui/core 0.13.1 → 0.14.0

package/lib/components/empty-state/empty-state-title/empty-state-title.types.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type EmptyStateTitleStylesNames = 'title';
+export interface EmptyStateTitleProps extends BoxProps, CompoundStylesApiProps<EmptyStateTitleFactory>, ElementProps<'div'> {
+    /**
+     * @description Heading order, renders the title as `h1`-`h6` element. By default, the title is rendered as a `div` without semantic heading level
+     */
+    order?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export type EmptyStateTitleFactory = Factory<{
+    props: EmptyStateTitleProps;
+    ref: HTMLDivElement;
+    stylesNames: EmptyStateTitleStylesNames;
+    compound: true;
+}>;

package/lib/components/empty-state/empty-state.context.d.ts

@@ -0,0 +1,10 @@
+import { ComputedRef } from 'vue';
+import { GetStylesApi } from '../../core';
+import { EmptyStateFactory } from './empty-state.types';
+interface EmptyStateContextValue {
+    getStyles: GetStylesApi<EmptyStateFactory>;
+    withIndicatorBackground: ComputedRef<boolean>;
+}
+export declare function provideEmptyStateContext(value: EmptyStateContextValue): void;
+export declare function useEmptyStateContext(): EmptyStateContextValue;
+export {};

package/lib/components/empty-state/empty-state.types.d.ts

@@ -0,0 +1,44 @@
+import { BoxProps, CColor, CSize, ElementProps, Factory, StylesApiProps } from '../../core';
+import { EmptyStateActionsStylesNames } from './empty-state-actions/empty-state-actions.types';
+import { EmptyStateDescriptionStylesNames } from './empty-state-description/empty-state-description.types';
+import { EmptyStateIndicatorStylesNames } from './empty-state-indicator/empty-state-indicator.types';
+import { EmptyStateTitleStylesNames } from './empty-state-title/empty-state-title.types';
+export type EmptyStateStylesNames = 'root' | 'body' | EmptyStateActionsStylesNames | EmptyStateDescriptionStylesNames | EmptyStateIndicatorStylesNames | EmptyStateTitleStylesNames;
+export type EmptyStateVariant = 'filled' | 'light';
+export type EmptyStateCssVariables = {
+    root: '--empty-state-indicator-size' | '--empty-state-gap' | '--empty-state-title-fz' | '--empty-state-description-fz' | '--empty-state-indicator-bg' | '--empty-state-indicator-color';
+};
+export interface EmptyStateProps extends BoxProps, StylesApiProps<EmptyStateFactory>, ElementProps<'div', 'title'> {
+    /**
+     * @description Controls indicator size, gap between elements and font sizes of title and description
+     * @default 'md'
+     */
+    size?: CSize;
+    /**
+     * @description Content alignment, `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * @description Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color
+     */
+    variant?: EmptyStateVariant;
+    /**
+     * @description Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants
+     * @default theme.primaryColor
+     */
+    color?: CColor;
+    /**
+     * @description If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop
+     * @default false
+     */
+    withIndicatorBackground?: boolean;
+}
+export type EmptyStateFactory = Factory<{
+    props: EmptyStateProps;
+    ref: HTMLDivElement;
+    stylesNames: EmptyStateStylesNames;
+    vars: EmptyStateCssVariables;
+    variant: EmptyStateVariant;
+    staticComponents: {};
+}>;

package/lib/components/empty-state/empty-state.utils.d.ts

@@ -0,0 +1,8 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./empty-state.types").EmptyStateProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./empty-state.types").EmptyStateStylesNames;
+    vars: import("./empty-state.types").EmptyStateCssVariables;
+    variant: import("./empty-state.types").EmptyStateVariant;
+    staticComponents: {};
+}>;

package/lib/components/empty-state/index.d.ts

@@ -0,0 +1,23 @@
+import EmptyStateActions from './empty-state-actions/empty-state-actions.vue';
+import EmptyStateDescription from './empty-state-description/empty-state-description.vue';
+import EmptyStateIndicator from './empty-state-indicator/empty-state-indicator.vue';
+import EmptyStateTitle from './empty-state-title/empty-state-title.vue';
+import EmptyState from './empty-state.vue';
+import classes from './empty-state.module.css';
+import { SFCWithInstallAndClasses } from '../../core';
+export declare const CEmptyStateActions: SFCWithInstallAndClasses<typeof EmptyStateActions, typeof classes>;
+export declare const CEmptyStateDescription: SFCWithInstallAndClasses<typeof EmptyStateDescription, typeof classes>;
+export declare const CEmptyStateIndicator: SFCWithInstallAndClasses<typeof EmptyStateIndicator, typeof classes>;
+export declare const CEmptyStateTitle: SFCWithInstallAndClasses<typeof EmptyStateTitle, typeof classes>;
+export declare const CEmptyState: SFCWithInstallAndClasses<typeof EmptyState, typeof classes> & {
+    Actions: typeof CEmptyStateActions;
+    Description: typeof CEmptyStateDescription;
+    Indicator: typeof CEmptyStateIndicator;
+    Title: typeof CEmptyStateTitle;
+};
+export default CEmptyState;
+export * from './empty-state-actions/empty-state-actions.types';
+export * from './empty-state-description/empty-state-description.types';
+export * from './empty-state-indicator/empty-state-indicator.types';
+export * from './empty-state-title/empty-state-title.types';
+export * from './empty-state.types';

package/lib/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './button';
 export * from './center';
 export * from './close-button';
 export * from './container';
+export * from './empty-state';
 export * from './flex';
 export * from './grid';
 export * from './group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/empty-state.css

@@ -0,0 +1,121 @@
+.m_6438951e {
+  --empty-state-indicator-size-xs: calc(2rem * var(--c-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--c-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--c-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--c-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--c-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--c-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--c-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--c-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--c-scale));
+  --empty-state-gap-xl: calc(1rem * var(--c-scale));
+
+  --empty-state-title-fz-xs: var(--c-font-size-sm);
+  --empty-state-title-fz-sm: var(--c-font-size-md);
+  --empty-state-title-fz-md: var(--c-font-size-lg);
+  --empty-state-title-fz-lg: var(--c-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--c-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--c-font-size-xs);
+  --empty-state-description-fz-sm: var(--c-font-size-sm);
+  --empty-state-description-fz-md: var(--c-font-size-sm);
+  --empty-state-description-fz-lg: var(--c-font-size-md);
+  --empty-state-description-fz-xl: var(--c-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_6438951e[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_6438951e[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_6438951e[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_64314dde {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_64314dde {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_64314dde {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_64314dde {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_2bbef53 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_2bbef53 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-c-color-scheme='light'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-gray-1);
+}
+
+[data-c-color-scheme='dark'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-dark-6);
+}
+
+.m_2bbef53[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--c-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_22f3959c {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--c-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_2c1a7440 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--c-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_3d0ffb41 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--c-spacing-sm);
+}

package/styles/empty-state.layer.css

@@ -0,0 +1,122 @@
+@layer cck {.m_6438951e {
+  --empty-state-indicator-size-xs: calc(2rem * var(--c-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--c-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--c-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--c-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--c-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--c-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--c-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--c-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--c-scale));
+  --empty-state-gap-xl: calc(1rem * var(--c-scale));
+
+  --empty-state-title-fz-xs: var(--c-font-size-sm);
+  --empty-state-title-fz-sm: var(--c-font-size-md);
+  --empty-state-title-fz-md: var(--c-font-size-lg);
+  --empty-state-title-fz-lg: var(--c-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--c-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--c-font-size-xs);
+  --empty-state-description-fz-sm: var(--c-font-size-sm);
+  --empty-state-description-fz-md: var(--c-font-size-sm);
+  --empty-state-description-fz-lg: var(--c-font-size-md);
+  --empty-state-description-fz-xl: var(--c-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_6438951e[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_6438951e[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_6438951e[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_64314dde {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_64314dde {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_64314dde {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_64314dde {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_2bbef53 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_2bbef53 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-c-color-scheme='light'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-gray-1);
+}
+
+[data-c-color-scheme='dark'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-dark-6);
+}
+
+.m_2bbef53[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--c-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_22f3959c {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--c-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_2c1a7440 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--c-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_3d0ffb41 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--c-spacing-sm);
+}
+}

package/styles.css

@@ -1086,6 +1086,128 @@ fieldset:disabled .c-active:active {
         margin-inline: auto;
       }
 
+.m_6438951e {
+  --empty-state-indicator-size-xs: calc(2rem * var(--c-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--c-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--c-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--c-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--c-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--c-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--c-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--c-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--c-scale));
+  --empty-state-gap-xl: calc(1rem * var(--c-scale));
+
+  --empty-state-title-fz-xs: var(--c-font-size-sm);
+  --empty-state-title-fz-sm: var(--c-font-size-md);
+  --empty-state-title-fz-md: var(--c-font-size-lg);
+  --empty-state-title-fz-lg: var(--c-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--c-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--c-font-size-xs);
+  --empty-state-description-fz-sm: var(--c-font-size-sm);
+  --empty-state-description-fz-md: var(--c-font-size-sm);
+  --empty-state-description-fz-lg: var(--c-font-size-md);
+  --empty-state-description-fz-xl: var(--c-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_6438951e[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_6438951e[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_6438951e[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_64314dde {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_64314dde {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_64314dde {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_64314dde {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_2bbef53 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_2bbef53 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-c-color-scheme='light'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-gray-1);
+}
+
+[data-c-color-scheme='dark'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-dark-6);
+}
+
+.m_2bbef53[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--c-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_22f3959c {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--c-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_2c1a7440 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--c-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_3d0ffb41 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--c-spacing-sm);
+}
+
 .m_148db636 {
   display: flex;
 }

package/styles.layer.css

@@ -1086,6 +1086,128 @@ fieldset:disabled .c-active:active {
         margin-inline: auto;
       }
 
+.m_6438951e {
+  --empty-state-indicator-size-xs: calc(2rem * var(--c-scale));
+  --empty-state-indicator-size-sm: calc(2.5rem * var(--c-scale));
+  --empty-state-indicator-size-md: calc(3rem * var(--c-scale));
+  --empty-state-indicator-size-lg: calc(3.75rem * var(--c-scale));
+  --empty-state-indicator-size-xl: calc(4.5rem * var(--c-scale));
+
+  --empty-state-gap-xs: calc(0.375rem * var(--c-scale));
+  --empty-state-gap-sm: calc(0.5rem * var(--c-scale));
+  --empty-state-gap-md: calc(0.625rem * var(--c-scale));
+  --empty-state-gap-lg: calc(0.75rem * var(--c-scale));
+  --empty-state-gap-xl: calc(1rem * var(--c-scale));
+
+  --empty-state-title-fz-xs: var(--c-font-size-sm);
+  --empty-state-title-fz-sm: var(--c-font-size-md);
+  --empty-state-title-fz-md: var(--c-font-size-lg);
+  --empty-state-title-fz-lg: var(--c-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--c-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--c-font-size-xs);
+  --empty-state-description-fz-sm: var(--c-font-size-sm);
+  --empty-state-description-fz-md: var(--c-font-size-sm);
+  --empty-state-description-fz-lg: var(--c-font-size-md);
+  --empty-state-description-fz-xl: var(--c-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_6438951e[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_6438951e[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_6438951e[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_64314dde {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_64314dde {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_64314dde {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_64314dde {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_2bbef53 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_2bbef53 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-c-color-scheme='light'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-gray-1);
+}
+
+[data-c-color-scheme='dark'] .m_2bbef53[data-with-background] {
+      --empty-state-indicator-default-bg: var(--c-color-dark-6);
+}
+
+.m_2bbef53[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: calc(62.5rem * var(--c-scale));
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_22f3959c {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--c-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_2c1a7440 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--c-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_3d0ffb41 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--c-spacing-sm);
+}
+
 .m_148db636 {
   display: flex;
 }