@cck-ui/core 0.34.1 → 0.36.0

package/lib/components/data-list/data-list.context.d.ts

@@ -0,0 +1,5 @@
+import { GetStylesApi } from '../../core';
+import { DataListFactory } from './data-list.types';
+export interface DataListContextValue {
+    getStyles: GetStylesApi<DataListFactory>;
+}

package/lib/components/data-list/data-list.types.d.ts

@@ -0,0 +1,50 @@
+import { Properties } from 'csstype';
+import { BoxProps, CSize, CSpacing, ElementProps, Factory, StylesApiProps } from '../../core';
+import { DataListItemLabelStylesNames } from './data-list-item-label/data-list-item-label.types';
+import { DataListItemValueStylesNames } from './data-list-item-value/data-list-item-value.types';
+import { DataListItemStylesNames } from './data-list-item/data-list-item.types';
+import DataListItem from './data-list-item/data-list-item.vue';
+import DataListItemLabel from './data-list-item-label/data-list-item-label.vue';
+import DataListItemValue from './data-list-item-value/data-list-item-value.vue';
+export type DataListStylesNames = 'root' | DataListItemStylesNames | DataListItemLabelStylesNames | DataListItemValueStylesNames;
+export type DataListCssVariables = {
+    root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';
+};
+export interface DataListProps extends BoxProps, StylesApiProps<DataListFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * Controls `font-size` and `line-height`
+     * @default 'sm'
+     */
+    size?: CSize;
+    /**
+     * Key of `theme.spacing` or any valid CSS value to set gap between items
+     * @default 'sm'
+     */
+    gap?: CSpacing;
+    /**
+     * Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Adds border between items
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * Controls min-width of the label (dt) element, any valid CSS value
+     * @default '120px'
+     */
+    labelWidth?: Properties['minWidth'];
+}
+export type DataListFactory = Factory<{
+    props: DataListProps;
+    ref: HTMLDivElement;
+    stylesNames: DataListStylesNames;
+    vars: DataListCssVariables;
+    staticComponents: {
+        Item: typeof DataListItem;
+        ItemLabel: typeof DataListItemLabel;
+        ItemValue: typeof DataListItemValue;
+    };
+}>;

package/lib/components/data-list/data-list.utils.d.ts

@@ -0,0 +1,11 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./data-list.types").DataListProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./data-list.types").DataListStylesNames;
+    vars: import("./data-list.types").DataListCssVariables;
+    staticComponents: {
+        Item: typeof import("*.vue");
+        ItemLabel: typeof import("*.vue");
+        ItemValue: typeof import("*.vue");
+    };
+}>;

package/lib/components/data-list/index.d.ts

@@ -0,0 +1,18 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import DataList from './data-list.vue';
+import DataListItem from './data-list-item/data-list-item.vue';
+import DataListItemLabel from './data-list-item-label/data-list-item-label.vue';
+import DataListItemValue from './data-list-item-value/data-list-item-value.vue';
+export declare const CDataListItem: SFCWithInstallAndClasses<typeof DataListItem>;
+export declare const CDataListItemLabel: SFCWithInstallAndClasses<typeof DataListItemLabel>;
+export declare const CDataListItemValue: SFCWithInstallAndClasses<typeof DataListItemValue>;
+export declare const CDataList: SFCWithInstallAndClasses<typeof DataList> & {
+    Item: typeof DataListItem;
+    Label: typeof DataListItemLabel;
+    Value: typeof DataListItemValue;
+};
+export default CDataList;
+export * from './data-list-item/data-list-item.types';
+export * from './data-list-item-label/data-list-item-label.types';
+export * from './data-list-item-value/data-list-item-value.types';
+export * from './data-list.types';

package/lib/components/index.d.ts

@@ -12,8 +12,10 @@ export * from './button';
 export * from './card';
 export * from './center';
 export * from './close-button';
+export * from './color-swatch';
 export * from './container';
 export * from './copy-button';
+export * from './data-list';
 export * from './divider';
 export * from './empty-state';
 export * from './file-button';

package/package.json

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

package/styles/color-swatch.css

@@ -0,0 +1,71 @@
+.m_c2451869 {
+  --cs-size: calc(1.75rem * var(--c-scale));
+  --cs-radius: calc(62.5rem * var(--c-scale));
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-c-color-scheme='light'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-gray-3);
+    --alpha-overlay-bg: var(--c-color-white);
+}
+
+  [data-c-color-scheme='dark'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-dark-4);
+    --alpha-overlay-bg: var(--c-color-dark-7);
+}
+
+.m_169647f4 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_1528cf69 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--c-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--c-scale)) inset;
+}
+
+.m_25d7a599 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: calc(0.5rem * var(--c-scale)) calc(0.5rem * var(--c-scale));
+  background-position:
+    0 0,
+    0 calc(0.25rem * var(--c-scale)),
+    calc(0.25rem * var(--c-scale)) calc(-0.25rem * var(--c-scale)),
+    calc(-0.25rem * var(--c-scale)) 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_5065cf6a {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/styles/color-swatch.layer.css

@@ -0,0 +1,72 @@
+@layer cck {.m_c2451869 {
+  --cs-size: calc(1.75rem * var(--c-scale));
+  --cs-radius: calc(62.5rem * var(--c-scale));
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-c-color-scheme='light'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-gray-3);
+    --alpha-overlay-bg: var(--c-color-white);
+}
+
+  [data-c-color-scheme='dark'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-dark-4);
+    --alpha-overlay-bg: var(--c-color-dark-7);
+}
+
+.m_169647f4 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_1528cf69 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--c-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--c-scale)) inset;
+}
+
+.m_25d7a599 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: calc(0.5rem * var(--c-scale)) calc(0.5rem * var(--c-scale));
+  background-position:
+    0 0,
+    0 calc(0.25rem * var(--c-scale)),
+    calc(0.25rem * var(--c-scale)) calc(-0.25rem * var(--c-scale)),
+    calc(-0.25rem * var(--c-scale)) 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_5065cf6a {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+}

package/styles/data-list.css

@@ -0,0 +1,54 @@
+.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}

package/styles/data-list.layer.css

@@ -0,0 +1,55 @@
+@layer cck {.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+}

package/styles.css

@@ -1771,6 +1771,78 @@ fieldset:disabled .c-active:active {
   }
 }
 
+.m_c2451869 {
+  --cs-size: calc(1.75rem * var(--c-scale));
+  --cs-radius: calc(62.5rem * var(--c-scale));
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-c-color-scheme='light'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-gray-3);
+    --alpha-overlay-bg: var(--c-color-white);
+}
+
+  [data-c-color-scheme='dark'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-dark-4);
+    --alpha-overlay-bg: var(--c-color-dark-7);
+}
+
+.m_169647f4 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_1528cf69 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--c-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--c-scale)) inset;
+}
+
+.m_25d7a599 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: calc(0.5rem * var(--c-scale)) calc(0.5rem * var(--c-scale));
+  background-position:
+    0 0,
+    0 calc(0.25rem * var(--c-scale)),
+    calc(0.25rem * var(--c-scale)) calc(-0.25rem * var(--c-scale)),
+    calc(-0.25rem * var(--c-scale)) 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_5065cf6a {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .m_b03efeae {
   --container-size-xs: calc(33.75rem * var(--c-scale));
   --container-size-sm: calc(45rem * var(--c-scale));
@@ -1809,6 +1881,61 @@ fieldset:disabled .c-active:active {
         margin-inline: auto;
       }
 
+.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+
 .m_35209716 {
   --divider-size-xs: calc(0.0625rem * var(--c-scale));
   --divider-size-sm: calc(0.125rem * var(--c-scale));

package/styles.layer.css

@@ -1771,6 +1771,78 @@ fieldset:disabled .c-active:active {
   }
 }
 
+.m_c2451869 {
+  --cs-size: calc(1.75rem * var(--c-scale));
+  --cs-radius: calc(62.5rem * var(--c-scale));
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-c-color-scheme='light'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-gray-3);
+    --alpha-overlay-bg: var(--c-color-white);
+}
+
+  [data-c-color-scheme='dark'] .m_c2451869 {
+    --alpha-overlay-color: var(--c-color-dark-4);
+    --alpha-overlay-bg: var(--c-color-dark-7);
+}
+
+.m_169647f4 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_1528cf69 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--c-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--c-scale)) inset;
+}
+
+.m_25d7a599 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: calc(0.5rem * var(--c-scale)) calc(0.5rem * var(--c-scale));
+  background-position:
+    0 0,
+    0 calc(0.25rem * var(--c-scale)),
+    calc(0.25rem * var(--c-scale)) calc(-0.25rem * var(--c-scale)),
+    calc(-0.25rem * var(--c-scale)) 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_5065cf6a {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .m_b03efeae {
   --container-size-xs: calc(33.75rem * var(--c-scale));
   --container-size-sm: calc(45rem * var(--c-scale));
@@ -1809,6 +1881,61 @@ fieldset:disabled .c-active:active {
         margin-inline: auto;
       }
 
+.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+
 .m_35209716 {
   --divider-size-xs: calc(0.0625rem * var(--c-scale));
   --divider-size-sm: calc(0.125rem * var(--c-scale));