@cck-ui/core 0.18.5 → 0.20.0

package/esm/components/image/image.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.utils.mjs","names":[],"sources":["../../../src/components/image/image.utils.ts"],"sourcesContent":["import { createVarsResolver, getRadius } from '../../core'\nimport { ImageFactory } from './image.types'\n\nexport const varsResolver = createVarsResolver<ImageFactory>((_, { radius, fit }) => ({\n  root: {\n    '--image-object-fit': fit,\n    '--image-radius': radius === undefined ? undefined : getRadius(radius),\n  },\n}))\n"],"mappings":";;;;AAGA,MAAa,eAAe,oBAAkC,GAAG,EAAE,QAAQ,WAAW,EACpF,MAAM;CACJ,sBAAsB;CACtB,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;AACvE,EACF,EAAE"}

package/esm/components/image/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { withInstall } from "../../core/utils/vue/install.mjs";
+import { withClasses, withExtend, withPropsFactory, withVarsResolver } from "../../core/utils/vue/statics.mjs";
+import { varsResolver } from "./image.utils.mjs";
+import image_module_default from "./image.module.mjs";
+import image_default from "./image.mjs";
+const CImage = withInstall(withPropsFactory(withExtend(withVarsResolver(withClasses(image_default, image_module_default), varsResolver))));
+//#endregion
+export { CImage, CImage as default };
+
+//# sourceMappingURL=index.mjs.map

package/esm/components/image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Image","classes"],"sources":["../../../src/components/image/index.ts"],"sourcesContent":["import {\n  SFCWithInstallAndClasses,\n  withClasses,\n  withExtend,\n  withInstall,\n  withPropsFactory,\n  withVarsResolver,\n} from '../../core'\nimport Image from './image.vue'\nimport classes from './image.module.css'\nimport { varsResolver } from './image.utils'\n\nconst ImageWithStatic = withPropsFactory(\n  withExtend(withVarsResolver(withClasses(Image, classes), varsResolver))\n)\n\nexport const CImage: SFCWithInstallAndClasses<typeof Image, typeof classes> =\n  withInstall(ImageWithStatic)\n\nexport default CImage\n\nexport * from './image.types'\n"],"mappings":";;;;;;AAgBA,MAAa,SACX,YALsB,iBACtB,WAAW,iBAAiB,YAAYA,eAAOC,oBAAO,GAAG,YAAY,CAAC,CAI1D,CAAe"}

package/esm/index.mjs

@@ -62,10 +62,12 @@ import { CAspectRatio } from "./components/aspect-ratio/index.mjs";
 import { CButton, CButtonGroup, CButtonGroupSection } from "./components/button/index.mjs";
 import { CCenter } from "./components/center/index.mjs";
 import { CContainer } from "./components/container/index.mjs";
+import { CCopyButton } from "./components/copy-button/index.mjs";
 import { CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle } from "./components/empty-state/index.mjs";
 import { CFlex } from "./components/flex/index.mjs";
 import { CCol, CGrid } from "./components/grid/index.mjs";
 import { CGroup } from "./components/group/index.mjs";
+import { CImage } from "./components/image/index.mjs";
 import { CPaper } from "./components/paper/index.mjs";
 import { CSemiCircleProgress } from "./components/semi-circle-progress/index.mjs";
 import { CSimpleGrid } from "./components/simple-grid/index.mjs";
@@ -91,6 +93,7 @@ const components = [
 	CCloseButton,
 	CCol,
 	CContainer,
+	CCopyButton,
 	CEmptyState,
 	CEmptyStateActions,
 	CEmptyStateDescription,
@@ -99,6 +102,7 @@ const components = [
 	CFlex,
 	CGrid,
 	CGroup,
+	CImage,
 	CLoader,
 	CPaper,
 	CSemiCircleProgress,
@@ -120,6 +124,6 @@ const CckUI = { install(app) {
 	});
 } };
 //#endregion
-export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CDefaultLoaders, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFlex, CGrid, CGroup, CLoader, CONFIG_KEY, CPaper, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
+export { CActionIcon, CActionIconGroup, CActionIconGroupSection, CAlert, CAspectRatio, CBox, CButton, CButtonGroup, CButtonGroupSection, transitions as CCK_TRANSITIONS, CCenter, CCloseButton, CCol, CContainer, CCopyButton, CDefaultLoaders, CEmptyState, CEmptyStateActions, CEmptyStateDescription, CEmptyStateIndicator, CEmptyStateTitle, CFlex, CGrid, CGroup, CImage, CLoader, CONFIG_KEY, CPaper, CSemiCircleProgress, CSimpleGrid, CSkeleton, CSpace, CSplitter, CSplitterPane, CStack, CText, CTransition, CckConfigProvider, CckUI, CckUI as default, DEFAULT_THEME, FOCUS_CLASS_NAMES, STYLE_PROPS_DATA, THEME_KEY, UnstyledButton, alpha, camelToKebabCase, colorsTuple, createTheme, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultVariantColorsResolver, em, extractStyleProps, filterProps, getBaseValue, getBreakpointValue, getCSSColorVariables, getComponentName, getFontSize, getGradient, getLineHeight, getPrimaryShade, getRadius, getShadow, getSize, getSortedBreakpoints, getSpacing, getThemeColor, getTransitionProps, hashStyleProps, isLightColor, isNumber, isNumberLike, isString, isStringNumber, isUndefined, isVirtualColor, keys, luminance, mergeThemeOverrides, normalizeNumberLikeStringProp, numberLikeStringToNumber, parseStyleProps, parseThemeColor, px, rem, resolveClassNames, resolveStyles, responsiveStyleManager, rgb, rgba, stylesToString, toRgba, useCckClassNamesPrefix, useCckColorScheme, useCckCssVariablesResolver, useCckEnv, useCckIsHeadless, useCckStyleNonce, useCckStylesTransform, useCckSxTransform, useCckTheme, useCckWithStaticClasses, useComponentProps, useConfigContext, useProviderColorScheme, useRandomClassName, useStyles, virtualColor, withClasses, withExtend, withInstall, withPropsDefaultSetter, withPropsFactory, withVarsResolver };
 
 //# sourceMappingURL=index.mjs.map

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import type { App, Plugin } from 'vue'\nimport {\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n} from './components'\nimport { CckConfigProvider, CBox } from './core'\n\nconst INSTALLED_KEY = Symbol('INSTALLED_KEY')\n\nconst components = [\n  CckConfigProvider,\n  CBox,\n  CActionIcon,\n  CActionIconGroup,\n  CActionIconGroupSection,\n  CAlert,\n  CAspectRatio,\n  CButton,\n  CButtonGroup,\n  CButtonGroupSection,\n  CCenter,\n  CCloseButton,\n  CCol,\n  CContainer,\n  CCopyButton,\n  CEmptyState,\n  CEmptyStateActions,\n  CEmptyStateDescription,\n  CEmptyStateIndicator,\n  CEmptyStateTitle,\n  CFlex,\n  CGrid,\n  CGroup,\n  CImage,\n  CLoader,\n  CPaper,\n  CSemiCircleProgress,\n  CSimpleGrid,\n  CSkeleton,\n  CSpace,\n  CSplitter,\n  CSplitterPane,\n  CStack,\n  CText,\n  CTransition,\n  UnstyledButton,\n]\n\nconst CckUI: Plugin = {\n  install(app: App) {\n    if ((app as any)[INSTALLED_KEY]) {\n      return\n    }\n    ;(app as any)[INSTALLED_KEY] = true\n    components.forEach((c) => {\n      if (c.name) {\n        app.component(c.name, c)\n      }\n    })\n  },\n}\n\nexport default CckUI\nexport { CckUI }\n\nexport * from './components'\nexport * from './core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,gBAAgB,OAAO,eAAe;AAE5C,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAgB,EACpB,QAAQ,KAAU;CAChB,IAAK,IAAY,gBACf;CAED,IAAa,iBAAiB;CAC/B,WAAW,SAAS,MAAM;EACxB,IAAI,EAAE,MACJ,IAAI,UAAU,EAAE,MAAM,CAAC;CAE3B,CAAC;AACH,EACF"}

package/lib/components/copy-button/copy-button.types.d.ts

@@ -0,0 +1,11 @@
+export interface CopyButtonProps {
+    /**
+     * @description Copied status timeout in ms
+     * @default 1000
+     */
+    timeout?: number;
+    /**
+     * @description Value that is copied to the clipboard when the button is clicked
+     */
+    value: string;
+}

package/lib/components/copy-button/index.d.ts

@@ -0,0 +1,3 @@
+export declare const CCopyButton: any;
+export default CCopyButton;
+export * from './copy-button.types';

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

@@ -0,0 +1,33 @@
+import { Properties } from 'csstype';
+import { BoxProps, CRadius, PolymorphicFactory, StylesApiProps } from '../../core';
+export type ImageStylesNames = 'root';
+export type ImageCssVariables = {
+    root: '--image-radius' | '--image-object-fit';
+};
+export interface ImageProps extends BoxProps, StylesApiProps<ImageFactory> {
+    /**
+     * @description Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default 0
+     */
+    radius?: CRadius;
+    /**
+     * @description Controls `object-fit` style
+     * @default 'cover'
+     */
+    fit?: Properties['objectFit'];
+    /**
+     * @description Image url used as a fallback if the image cannot be loaded
+     */
+    fallbackSrc?: string;
+    /**
+     * @description Image url
+     */
+    src?: any;
+}
+export type ImageFactory = PolymorphicFactory<{
+    props: ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: 'img';
+    stylesNames: ImageStylesNames;
+    vars: ImageCssVariables;
+}>;

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

@@ -0,0 +1,7 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./image.types").ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: "img";
+    stylesNames: import("./image.types").ImageStylesNames;
+    vars: import("./image.types").ImageCssVariables;
+}>;

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

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Image from './image.vue';
+import classes from './image.module.css';
+export declare const CImage: SFCWithInstallAndClasses<typeof Image, typeof classes>;
+export default CImage;
+export * from './image.types';

package/lib/components/index.d.ts

@@ -5,10 +5,12 @@ export * from './button';
 export * from './center';
 export * from './close-button';
 export * from './container';
+export * from './copy-button';
 export * from './empty-state';
 export * from './flex';
 export * from './grid';
 export * from './group';
+export * from './image';
 export * from './loader';
 export * from './paper';
 export * from './semi-circle-progress';

package/package.json

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

package/styles/image.css

@@ -0,0 +1,6 @@
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}

package/styles/image.layer.css

@@ -0,0 +1,7 @@
+@layer cck {.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+}

package/styles.css

@@ -1450,6 +1450,13 @@ fieldset:disabled .c-active:active {
       max-width: var(--group-child-width);
     }
 
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));

package/styles.layer.css

@@ -1450,6 +1450,13 @@ fieldset:disabled .c-active:active {
       max-width: var(--group-child-width);
     }
 
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));