@cck-ui/core 0.30.0 → 0.31.0

package/lib/components/avatar/avatar-group/avatar-group.context.d.ts

@@ -0,0 +1,3 @@
+export interface AvatarGroupContextValue {
+    withinGroup: boolean;
+}

package/lib/components/avatar/avatar-group/avatar-group.types.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, CSpacing, ElementProps, Factory, StylesApiProps } from '../../../core';
+export type AvatarGroupStylesNames = 'group';
+export type AvatarGroupCssVariables = {
+    group: '--ag-spacing';
+};
+export interface AvatarGroupProps extends BoxProps, StylesApiProps<AvatarGroupFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * Negative space between Avatar components
+     * @default 'sm'
+     */
+    spacing?: CSpacing;
+}
+export type AvatarGroupFactory = Factory<{
+    props: AvatarGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: AvatarGroupStylesNames;
+    vars: AvatarGroupCssVariables;
+}>;

package/lib/components/avatar/avatar-group/avatar-group.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../../..").VarsResolver<{
+    props: import("./avatar-group.types").AvatarGroupProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./avatar-group.types").AvatarGroupStylesNames;
+    vars: import("./avatar-group.types").AvatarGroupCssVariables;
+}>;

package/lib/components/avatar/avatar.types.d.ts

@@ -0,0 +1,52 @@
+import { BoxProps, CColor, CGradient, CRadius, CSize, ElementProps, PolymorphicFactory, StylesApiProps } from '../../core';
+import AvatarGroup from './avatar-group/avatar-group.vue';
+export type AvatarStylesNames = 'root' | 'placeholder' | 'image';
+export type AvatarVariant = 'default' | 'filled' | 'light' | 'gradient' | 'outline' | 'dashed' | 'transparent' | 'white';
+export type AvatarCssVariables = {
+    root: '--avatar-size' | '--avatar-radius' | '--avatar-bg' | '--avatar-color' | '--avatar-bd';
+};
+export interface AvatarProps extends BoxProps, StylesApiProps<AvatarFactory> {
+    /**
+     * Width and height of the avatar, numbers are converted to rem
+     * @default 'md'
+     */
+    size?: CSize | (string | {}) | number;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set border-radius
+     * @default '1000px'
+     */
+    radius?: CRadius;
+    /**
+     * Key of `theme.colors` or any valid CSS color
+     * @default 'gray'
+     */
+    color?: CColor | 'initials';
+    /**
+     * Gradient configuration for `variant="gradient"`
+     * @default theme.defaultGradient
+     */
+    gradient?: CGradient;
+    /** Image url, if the image connot be loaded, then placeholder is displayed instead */
+    src?: string;
+    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    alt?: string;
+    /** Attributes passed down to `img` element */
+    imageProps?: ElementProps<'img'>;
+    /** If set, adjusts text color based on background color for `filled` variant */
+    autoContrast?: boolean;
+    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    name?: string;
+    /** A list of colors that is used for autogenerated initials. By default, all default CCK UI colors can be used except gray and dark */
+    allowedInitialsColors?: CColor[];
+}
+export type AvatarFactory = PolymorphicFactory<{
+    props: AvatarProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: AvatarStylesNames;
+    vars: AvatarCssVariables;
+    variant: AvatarVariant;
+    staticComponents: {
+        Group: typeof AvatarGroup;
+    };
+}>;

package/lib/components/avatar/avatar.utils.d.ts

@@ -0,0 +1,11 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./avatar.types").AvatarProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: "div";
+    stylesNames: import("./avatar.types").AvatarStylesNames;
+    vars: import("./avatar.types").AvatarCssVariables;
+    variant: import("./avatar.types").AvatarVariant;
+    staticComponents: {
+        Group: typeof import("*.vue");
+    };
+}>;

package/lib/components/avatar/get-initials/get-initials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name: string, limit?: number): string;

package/lib/components/avatar/get-initials-color/get-initials-color.d.ts

@@ -0,0 +1,2 @@
+import { CColor } from '../../../core';
+export declare function getInitialsColor(name: string, colors?: CColor[]): import("../../..").DefaultCColor;

package/lib/components/avatar/index.d.ts

@@ -0,0 +1,11 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import AvatarGroup from './avatar-group/avatar-group.vue';
+import classes from './avatar.module.css';
+import Avatar from './avatar.vue';
+export declare const CAvatarGroup: SFCWithInstallAndClasses<typeof AvatarGroup, typeof classes>;
+export declare const CAvatar: SFCWithInstallAndClasses<typeof Avatar, typeof classes> & {
+    Group: typeof AvatarGroup;
+};
+export default CAvatar;
+export * from './avatar.types';
+export * from './avatar-group/avatar-group.types';

package/lib/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './affix';
 export * from './alert';
 export * from './anchor';
 export * from './aspect-ratio';
+export * from './avatar';
 export * from './breadcrumbs';
 export * from './burger';
 export * from './button';

package/package.json

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

package/styles/avatar.css

@@ -0,0 +1,67 @@
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }

package/styles/avatar.layer.css

@@ -0,0 +1,68 @@
+@layer cck {.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+}

package/styles.css

@@ -1287,6 +1287,74 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;

package/styles.layer.css

@@ -1287,6 +1287,74 @@ fieldset:disabled .c-active:active {
     object-fit: cover;
   }
 
+.m_813a50b {
+  --ag-spacing: var(--c-spacing-sm);
+  --ag-offset: calc(var(--ag-spacing) * -1);
+
+  display: flex;
+  padding-inline-start: var(--ag-spacing);
+}
+
+.m_94ecd0d6 {
+  --avatar-size-xs: calc(1rem * var(--c-scale));
+  --avatar-size-sm: calc(1.625rem * var(--c-scale));
+  --avatar-size-md: calc(2.375rem * var(--c-scale));
+  --avatar-size-lg: calc(3.5rem * var(--c-scale));
+  --avatar-size-xl: calc(5.25rem * var(--c-scale));
+
+  --avatar-size: var(--avatar-size-md);
+  --avatar-radius: calc(62.5rem * var(--c-scale));
+  --avatar-bg: var(--c-color-gray-light);
+  --avatar-bd: calc(0.0625rem * var(--c-scale)) solid transparent;
+  --avatar-color: var(--c-color-gray-light-color);
+  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  border-radius: var(--avatar-radius);
+  text-decoration: none;
+  padding: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+}
+
+.m_94ecd0d6:where([data-within-group]) {
+    margin-inline-start: var(--ag-offset);
+    border: 2px solid var(--c-color-body);
+    background: var(--c-color-body);
+  }
+
+.m_82d57e7 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.m_a2891aff {
+  font-weight: var(--c-font-weight-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  border-radius: var(--avatar-radius);
+  font-size: var(--avatar-placeholder-fz);
+  background: var(--avatar-bg);
+  border: var(--avatar-bd);
+  color: var(--avatar-color);
+}
+
+.m_a2891aff > [data-avatar-placeholder-icon] {
+    width: 70%;
+    height: 70%;
+  }
+
 .m_bd72d3bf {
   display: flex;
   align-items: center;