@cck-ui/core 0.14.0 → 0.15.0

package/lib/components/semi-circle-progress/semi-circle-progress.types.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, CColor, ElementProps, Factory, StylesApiProps } from '../../core';
+export type SemiCircleProgressStylesNames = 'root' | 'svg' | 'emptySegment' | 'filledSegment' | 'label';
+export type SemiCircleProgressCssVariables = {
+    root: '--scp-filled-segment-color' | '--scp-empty-segment-color' | '--scp-rotation' | '--scp-transition-duration' | '--scp-thickness';
+};
+export interface SemiCircleProgressProps extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {
+    /**
+     * @description Progress value from `0` to `100`
+     */
+    value: number;
+    /**
+     * @description Width of the component and diameter of the full circle in px. The visible SVG height will be size / 2
+     * @default 200
+     */
+    size?: number;
+    /**
+     * @description Stroke width of the circle segments in px
+     * @default 12
+     */
+    thickness?: number;
+    /**
+     * @description Orientation of the circle
+     * @default 'up'
+     */
+    orientation?: 'up' | 'down';
+    /**
+     * @description Direction from which the circle is filled
+     * @default 'left-to-right'
+     */
+    fillDirection?: 'right-to-left' | 'left-to-right';
+    /**
+     * @description Key of `theme.colors` or any valid CSS color value
+     * @default theme.primaryColor
+     */
+    filledSegmentColor?: CColor;
+    /**
+     * @description Key of `theme.colors` or any valid CSS color value
+     * @default 'gray.2' in light mode, 'dark.4' in dark mode
+     */
+    emptySegmentColor?: CColor;
+    /**
+     * @description Transition duration for the filled segment progress changes in ms. Does not affect color transitions
+     * @default 0
+     */
+    transitionDuration?: number;
+    /**
+     * @description Label position relative to the circle center
+     * @default 'bottom'
+     */
+    labelPosition?: 'center' | 'bottom';
+}
+export type SemiCircleProgressFactory = Factory<{
+    props: SemiCircleProgressProps;
+    ref: HTMLDivElement;
+    stylesNames: SemiCircleProgressStylesNames;
+    vars: SemiCircleProgressCssVariables;
+}>;

package/lib/components/semi-circle-progress/semi-circle-progress.utils.d.ts

@@ -0,0 +1,7 @@
+import { SemiCircleProgressProps } from './semi-circle-progress.types';
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: SemiCircleProgressProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./semi-circle-progress.types").SemiCircleProgressStylesNames;
+    vars: import("./semi-circle-progress.types").SemiCircleProgressCssVariables;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.14.0",
+  "version": "0.15.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

@@ -69,7 +69,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  color: var(--empty-state-indicator-color, var(--c-color-dimmed));
   font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
   line-height: 1;
 }

package/styles/empty-state.layer.css

@@ -69,7 +69,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  color: var(--empty-state-indicator-color, var(--c-color-dimmed));
   font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
   line-height: 1;
 }

package/styles/semi-circle-progress.css

@@ -0,0 +1,58 @@
+.m_6f2f9f44 {
+  --scp-filled-segment-color: var(--c-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: calc(0.75rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-gray-2);
+}
+
+  :where([data-c-color-scheme='dark']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-dark-4);
+}
+
+  .m_6f2f9f44 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_8ff94bc2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_e500074f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke-opacity var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_76692cd2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_76692cd2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_76692cd2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_76692cd2:where([data-position='center']) {
+    top: 50%;
+    transform: translateY(-50%);
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }

package/styles/semi-circle-progress.layer.css

@@ -0,0 +1,59 @@
+@layer cck {.m_6f2f9f44 {
+  --scp-filled-segment-color: var(--c-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: calc(0.75rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-gray-2);
+}
+
+  :where([data-c-color-scheme='dark']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-dark-4);
+}
+
+  .m_6f2f9f44 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_8ff94bc2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_e500074f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke-opacity var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_76692cd2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_76692cd2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_76692cd2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_76692cd2:where([data-position='center']) {
+    top: 50%;
+    transform: translateY(-50%);
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }
+}

package/styles.css

@@ -1157,7 +1157,7 @@ fieldset:disabled .c-active:active {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  color: var(--empty-state-indicator-color, var(--c-color-dimmed));
   font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
   line-height: 1;
 }
@@ -1379,6 +1379,65 @@ fieldset:disabled .c-active:active {
     animation: m_1309882b 1.2s linear infinite;
   }
 
+.m_6f2f9f44 {
+  --scp-filled-segment-color: var(--c-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: calc(0.75rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-gray-2);
+}
+
+  :where([data-c-color-scheme='dark']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-dark-4);
+}
+
+  .m_6f2f9f44 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_8ff94bc2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_e500074f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke-opacity var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_76692cd2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_76692cd2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_76692cd2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_76692cd2:where([data-position='center']) {
+    top: 50%;
+    transform: translateY(-50%);
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }
+
 .m_cd6f7c35 {
   container: simple-grid / inline-size;
 }

package/styles.layer.css

@@ -1157,7 +1157,7 @@ fieldset:disabled .c-active:active {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--emtpy-state-indicator-color, var(--c-color-dimmed));
+  color: var(--empty-state-indicator-color, var(--c-color-dimmed));
   font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
   line-height: 1;
 }
@@ -1379,6 +1379,65 @@ fieldset:disabled .c-active:active {
     animation: m_1309882b 1.2s linear infinite;
   }
 
+.m_6f2f9f44 {
+  --scp-filled-segment-color: var(--c-primary-color-filled);
+  --scp-transition-duration: 0ms;
+  --scp-thickness: calc(0.75rem * var(--c-scale));
+}
+
+  :where([data-c-color-scheme='light']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-gray-2);
+}
+
+  :where([data-c-color-scheme='dark']) .m_6f2f9f44 {
+    --scp-empty-segment-color: var(--c-color-dark-4);
+}
+
+  .m_6f2f9f44 {
+
+  position: relative;
+  width: fit-content;
+}
+
+.m_8ff94bc2 {
+  display: block;
+  transform: var(--scp-rotation);
+  overflow: hidden;
+}
+
+.m_e500074f {
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke-opacity var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
+}
+
+.m_76692cd2 {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  inset-inline: 0;
+  text-align: center;
+  z-index: 1;
+}
+
+.m_76692cd2:where([data-position='bottom']) {
+    bottom: 0;
+    padding-inline: calc(var(--scp-thickness) * 2);
+  }
+
+.m_76692cd2:where([data-position='bottom']):where([data-orientation='down']) {
+      bottom: auto;
+      top: 0;
+    }
+
+.m_76692cd2:where([data-position='center']) {
+    top: 50%;
+    transform: translateY(-50%);
+    padding-inline: calc(var(--scp-thickness) * 3);
+  }
+
 .m_cd6f7c35 {
   container: simple-grid / inline-size;
 }