@cck-ui/core 0.2.0 → 0.3.3

package/lib/components/transition/get-transition-styles/get-transition-styles.d.ts

@@ -0,0 +1,17 @@
+import { Properties } from 'csstype';
+import { CTransition } from '../transitions';
+declare const transitionStatuses: {
+    readonly entering: "in";
+    readonly entered: "in";
+    readonly exiting: "out";
+    readonly exited: "out";
+    readonly 'pre-exiting': "out";
+    readonly 'pre-entering': "out";
+};
+export declare function getTransitionStyles({ transition, state, duration, timingFunction, }: {
+    transition: CTransition;
+    state: keyof typeof transitionStatuses;
+    duration: number;
+    timingFunction: Properties['transitionTimingFunction'];
+}): Properties;
+export {};

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

@@ -0,0 +1,8 @@
+import { SFCWithInstall } from '../../core';
+import Transition from './transition.vue';
+export { transitions as CCK_TRANSITIONS } from './transitions';
+export type { CTransition as CckTransition } from './transitions';
+export { getTransitionProps } from './get-transition-props/get-transition-props';
+export declare const CTransition: SFCWithInstall<typeof Transition>;
+export default CTransition;
+export * from './transition.types';

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

@@ -0,0 +1,66 @@
+import { CTransition } from './transitions';
+export interface TransitionProps {
+    /**
+     * @description If set, the element is kept in the DOM when hidden.
+     */
+    keepMounted?: boolean;
+    /**
+     * @description Controls how the element is hidden when `keepMounted` is set:
+     * `'activity'`
+     * `'display-none'` - hidden with `display: none` styles
+     * @default 'activity'
+     */
+    keepMountedMode?: 'activity' | 'display-none';
+    /**
+     * @description Transition name or object
+     */
+    transition?: CTransition;
+    /**
+     * @description Transition duration in ms
+     * @default 250
+     */
+    duration?: number;
+    /**
+     * @description Exit transition duration in ms
+     * @default 250
+     */
+    exitDuration?: number;
+    /**
+     * @description Transition timing function
+     * @default theme.transitionTimingFunction
+     */
+    timingFunction?: string;
+    /**
+     * @description Determines whether component should be mounted to the DOM
+     */
+    mounted: boolean;
+    /**
+     * @description Called when exit transition ends
+     * @returns
+     */
+    onExited?: () => void;
+    /**
+     * @description Called when exit transition starts
+     * @returns
+     */
+    onExit?: () => void;
+    /**
+     * @description Called when enter transition starts
+     * @returns
+     */
+    onEnter?: () => void;
+    /**
+     * @description Called when enter transition ends
+     * @returns
+     */
+    onEntered?: () => void;
+    /**
+     * @description Delay in ms before enter transition starts
+     */
+    enterDelay?: number;
+    /**
+     * @description Delay in ms before exit transition starts
+     */
+    exitDelay?: number;
+}
+export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;

package/lib/components/transition/transitions.d.ts

@@ -0,0 +1,10 @@
+import { Properties } from 'csstype';
+export interface CTransitionStyles {
+    common?: Properties;
+    in: Properties;
+    out: Properties;
+    transitionProperty: Properties['transitionProperty'];
+}
+export type CTransitionName = 'fade' | 'fade-down' | 'fade-up' | 'fade-left' | 'fade-right' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'scale-y' | 'scale-x' | 'scale' | 'pop' | 'pop-top-left' | 'pop-top-right' | 'pop-bottom-left' | 'pop-bottom-right';
+export type CTransition = CTransitionName | CTransitionStyles;
+export declare const transitions: Record<CTransitionName, CTransitionStyles>;

package/lib/components/transition/use-transition.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+export type TransitionStatus = 'entered' | 'exited' | 'entering' | 'exiting' | 'pre-entering' | 'pre-exiting';
+interface UseTransitionOptions {
+    duration: number;
+    exitDuration: number;
+    timingFunction: string;
+    mounted: Ref<boolean>;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onEntered?: () => void;
+    onExited?: () => void;
+    enterDelay?: number;
+    exitDelay?: number;
+}
+export declare function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onEntered, onExit, onExited, enterDelay, exitDelay, }: UseTransitionOptions): {
+    transitionDuration: Ref<number, number>;
+    transitionStatus: Ref<TransitionStatus, TransitionStatus>;
+    transitionTimingFunction: string;
+};
+export {};

package/lib/core/box/style-props/parse-style-props/parse-style-props.d.ts

@@ -14,4 +14,4 @@ export interface ParseStylePropsResult {
     styles: Properties;
     media: Record<string, Properties>;
 }
-export declare function parseStyleProps({ data, styleProps, theme }: ParseStylePropsOptions): SortMediaQueriesResult;
+export declare function parseStyleProps({ data, styleProps, theme, }: ParseStylePropsOptions): SortMediaQueriesResult;

package/lib/core/config-provider/cck-css-variables/index.d.ts

@@ -0,0 +1,3 @@
+export { defaultCssVariablesResolver } from './default-css-variables-resolver';
+export { getCSSColorVariables } from './get-css-color-variables';
+export { virtualColor, isVirtualColor } from './virtual-color/virtual-color';

package/lib/core/config-provider/cck-css-variables/virtual-color/virtual-color.d.ts

@@ -10,6 +10,6 @@ type VirtualColor = CColorsTuple & {
     dark: CColor;
     light: CColor;
 };
-export declare function VirtualColor(input: VirtualColorInput): CColorsTuple;
+export declare function virtualColor(input: VirtualColorInput): CColorsTuple;
 export declare function isVirtualColor(value: unknown): value is VirtualColor;
 export {};

package/lib/core/config-provider/color-functions/index.d.ts

@@ -1,4 +1,5 @@
-export type { VariantColorsResolverInput, VariantColorsResolverResult, VariantColorsResolver } from './default-variant-colors-resolver/default-variant-colors-resolver';
+export type { VariantColorsResolverInput, VariantColorsResolverResult, VariantColorsResolver, } from './default-variant-colors-resolver/default-variant-colors-resolver';
+export { colorsTuple } from './colors-tuple/colors-tuple';
 export { darken } from './darken/darken';
 export { defaultVariantColorsResolver } from './default-variant-colors-resolver/default-variant-colors-resolver';
 export { getGradient } from './get-gradient/get-gradient';

package/lib/core/config-provider/color-functions/parse-theme-color/parse-theme-color.d.ts

@@ -13,5 +13,5 @@ interface ParseThemeColorResult {
     isThemeColor: boolean;
     isLight: boolean;
 }
-export declare function parseThemeColor({ color, colorScheme, theme }: ParseThemeColorOptions): ParseThemeColorResult;
+export declare function parseThemeColor({ color, colorScheme, theme, }: ParseThemeColorOptions): ParseThemeColorResult;
 export {};

package/lib/core/config-provider/color-scheme-managers/index.d.ts

@@ -0,0 +1,4 @@
+export { localStorageColorSchemeManager } from './local-storage-manager';
+export { isCckColorScheme } from './is-cck-color-scheme';
+export type { LocalStorageColorSchemeManagerOptions } from './local-storage-manager';
+export type { CColorSchemeManager } from './types';

package/lib/core/config-provider/color-scheme-managers/is-cck-color-scheme.d.ts

@@ -0,0 +1,2 @@
+import type { CColorScheme } from '../theme.types';
+export declare function isCckColorScheme(value: unknown): value is CColorScheme;

package/lib/core/config-provider/color-scheme-managers/local-storage-manager.d.ts

@@ -0,0 +1,5 @@
+import type { CColorSchemeManager } from './types';
+export interface LocalStorageColorSchemeManagerOptions {
+    key?: string;
+}
+export declare function localStorageColorSchemeManager({ key, }?: LocalStorageColorSchemeManagerOptions): CColorSchemeManager;

package/lib/core/config-provider/color-scheme-managers/types.d.ts

@@ -0,0 +1,30 @@
+import type { CColorScheme } from '../theme.types';
+export interface CColorSchemeManager {
+    /**
+     * @description Function to retrieve color scheme value from external storage, for example window.localStorage
+     * @returns color scheme value
+     */
+    get: (defaultValue: CColorScheme) => CColorScheme;
+    /**
+     * @description Function to set color scheme value in external storage, for example window.localStorage
+     * @param value color scheme value to be saved
+     * @returns
+     */
+    set: (value: CColorScheme) => void;
+    /**
+     * Function to subscribe to color scheme changes triggered by external events
+     * @param onUpdate Function to trigger when color scheme is updated
+     * @returns
+     */
+    subscribe: (onUpdate: (colorScheme: CColorScheme) => void) => void;
+    /**
+     * Function to unsubscribe from color scheme changes triggered by external events
+     * @returns
+     */
+    unsubscribe: () => void;
+    /**
+     * @description Function to clear value from external storage
+     * @returns
+     */
+    clear: () => void;
+}

package/lib/core/config-provider/config-provider.context.d.ts

@@ -1,11 +1,12 @@
 import { CColorScheme, CTheme } from './theme.types';
 import { ConvertCSSVariablesInput } from './convert-css-variables';
+import { ComputedRef } from 'vue';
 export interface CStylesTransform {
     sx?: () => (sx: any) => string;
     styles?: () => (styles: any, payload: any) => Record<string, string>;
 }
-interface CContextValue {
-    colorScheme: CColorScheme;
+export interface CContextValue {
+    colorScheme: ComputedRef<CColorScheme>;
     setColorScheme: (colorScheme: CColorScheme) => void;
     clearColorScheme: () => void;
     getRootElement: () => HTMLElement | undefined;
@@ -18,6 +19,7 @@ interface CContextValue {
     stylesTransform?: CStylesTransform;
     env?: 'default' | 'test';
 }
+export declare function useCckTheme(): ComputedRef<CTheme>;
 export declare function useConfigContext(): CContextValue;
 export declare function useCckCssVariablesResolver(): ((theme: CTheme) => ConvertCSSVariablesInput) | undefined;
 export declare function useCckClassNamesPrefix(): string;
@@ -27,4 +29,3 @@ export declare function useCckIsHeadless(): boolean | undefined;
 export declare function useCckSxTransform(): (() => (sx: any) => string) | undefined;
 export declare function useCckStylesTransform(): (() => (styles: any, payload: any) => Record<string, string>) | undefined;
 export declare function useCckEnv(): "default" | "test";
-export {};

package/lib/core/config-provider/config-provider.types.d.ts

@@ -1,12 +1,18 @@
-import { CStylesTransform } from './config-provider.context';
-import { CColorScheme, CThemeOverride } from './theme.types';
-export declare const CONFIG_KEY: unique symbol;
-export declare const THEME_KEY: unique symbol;
+import { ComputedRef, InjectionKey } from 'vue';
+import { CColorSchemeManager } from './color-scheme-managers/types';
+import { CContextValue, CStylesTransform } from './config-provider.context';
+import { CColorScheme, CTheme, CThemeOverride } from './theme.types';
+export declare const CONFIG_KEY: InjectionKey<CContextValue>;
+export declare const THEME_KEY: InjectionKey<ComputedRef<CTheme>>;
 export interface ConfigProviderProps {
     /**
      * @description Theme override object
      */
     theme?: CThemeOverride;
+    /**
+     * @description Used to retrieve/set color scheme value in external storage, by default was `window.localStorage`
+     */
+    colorSchemeManager?: CColorSchemeManager;
     /**
      * @description Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage
      */

package/lib/core/config-provider/create-theme/create-theme.d.ts

@@ -0,0 +1,2 @@
+import { CThemeOverride } from '../theme.types';
+export declare function createTheme(theme: CThemeOverride): CThemeOverride;

package/lib/core/config-provider/index.d.ts

@@ -1,9 +1,12 @@
 import { SFCWithInstall } from '../utils';
 import ConfigProvider from './config-provider.vue';
+export * from './cck-css-variables';
 export * from './color-functions';
 export * from './config-provider.context';
 export * from './config-provider.types';
+export * from './create-theme/create-theme';
 export * from './default-theme';
 export * from './theme.types';
+export * from './use-cck-color-scheme';
 export declare const CckConfigProvider: SFCWithInstall<typeof ConfigProvider>;
 export default CckConfigProvider;

package/lib/core/config-provider/merge-cck-theme/index.d.ts

@@ -0,0 +1 @@
+export { mergeCckTheme, validateCckTheme } from './merge-cck-theme';

package/lib/core/config-provider/merge-cck-theme/merge-cck-theme.d.ts

@@ -0,0 +1,5 @@
+import type { CTheme, CThemeOverride } from '../theme.types';
+export declare const INVALID_PRIMARY_COLOR_ERROR = "[@cck-ui/core] ConfigProvider: Invalid theme.primaryColor, it accepts only key of theme.colors";
+export declare const INVALID_PRIMARY_SHADE_ERROR = "[@cck-ui/core] ConfigProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }";
+export declare function validateCckTheme(theme: CTheme): asserts theme is CTheme;
+export declare function mergeCckTheme(currentTheme: CTheme, themeOverride?: CThemeOverride): CTheme;

package/lib/core/config-provider/use-cck-color-scheme/index.d.ts

@@ -0,0 +1,2 @@
+export { useCckColorScheme } from './use-cck-color-scheme';
+export { useProviderColorScheme } from './use-provider-color-scheme';

package/lib/core/config-provider/use-cck-color-scheme/use-cck-color-scheme.d.ts

@@ -0,0 +1,10 @@
+import { CColorScheme } from '../theme.types';
+export declare function useCckColorScheme({ keepTransition }?: {
+    keepTransition?: boolean;
+}): {
+    colorScheme: import("vue").ComputedRef<CColorScheme>;
+    computedColorScheme: import("vue").ComputedRef<"dark" | "light">;
+    setColorScheme: (value: CColorScheme) => void;
+    clearColorScheme: () => void;
+    toggleColorScheme: () => void;
+};

package/lib/core/config-provider/use-cck-color-scheme/use-provider-color-scheme.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef } from 'vue';
+import type { CColorSchemeManager } from '../color-scheme-managers';
+import type { CColorScheme } from '../theme.types';
+interface UseProviderColorSchemeOptions {
+    manager: CColorSchemeManager;
+    defaultColorScheme: CColorScheme;
+    forceColorScheme: 'light' | 'dark' | undefined;
+    getRootElement: () => HTMLElement | undefined;
+}
+export declare function useProviderColorScheme({ manager, defaultColorScheme, getRootElement, forceColorScheme, }: UseProviderColorSchemeOptions): {
+    colorScheme: ComputedRef<CColorScheme>;
+    setColorScheme: (scheme: CColorScheme) => void;
+    clearColorScheme: () => void;
+};
+export {};

package/lib/core/config-provider/use-respect-reduce-motion/use-respect-reduce-motion.d.ts

@@ -0,0 +1,7 @@
+import { MaybeRef } from 'vue';
+interface UseRespectReduceMotionOptions {
+    respectReduceMotion: MaybeRef<boolean>;
+    getRootElement: () => HTMLElement | undefined;
+}
+export declare function useRespectReduceMotion({ respectReduceMotion, getRootElement, }: UseRespectReduceMotionOptions): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.2.0",
+  "version": "0.3.3",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",
@@ -40,10 +40,12 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.2.0",
+    "@vueuse/core": "^14.3.0",
     "clsx": "^2.1.1",
     "type-fest": "^5.7.0"
   },
   "devDependencies": {
+    "@cck-ui/hooks": "workspace:*",
     "@vue/shared": "^3.5.39",
     "csstype": "^3.2.3",
     "es-toolkit": "^1.49.0",

package/styles/button.css

@@ -39,11 +39,9 @@
   display: inline-block;
   border-radius: var(--button-radius, var(--c-radius-default));
   font-size: var(--button-fz, var(--c-font-size-sm));
-  background: var(--button-bg, var(--c-primary-color-filled));
-  border-color: var(--button-bd, transparent);
-  border-style: solid;
-  border-width: rem(1px);
-  color: var(--button-color, var(--c-color-white));
+  background: var(--button-bg, var(--c-color-default));
+  border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
+  color: var(--button-color, var(--c-color-default-color));
   height: var(--button-height, var(--button-height-sm));
   padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
   vertical-align: middle;
@@ -108,7 +106,7 @@
 
   @mixin hover {
     &:where(:not([data-loading], :disabled, [data-disabled])) {
-      background-color: var(--button-hover, var(--c-primary-color-filled-hover));
+      background-color: var(--button-hover, var(--c-color-default-hover));
       color: var(--button-hover-color, var(--button-color));
     }
   }
@@ -254,9 +252,7 @@
   border-radius: var(--section-radius, var(--c-radius-default));
   font-size: var(--section-fz, var(--c-font-size-sm));
   background: var(--section-bg, var(--c-primary-color-filled));
-  border-color: var(--section-bd, transparent);
-  border-style: solid;
-  border-width: rem(1px);
+  border: var(--section-bd, rem(1px) solid transparent);
   height: var(--section-height, var(--section-height-sm));
   padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
   vertical-align: middle;

package/styles/button.layer.css

@@ -39,11 +39,9 @@
   display: inline-block;
   border-radius: var(--button-radius, var(--c-radius-default));
   font-size: var(--button-fz, var(--c-font-size-sm));
-  background: var(--button-bg, var(--c-primary-color-filled));
-  border-color: var(--button-bd, transparent);
-  border-style: solid;
-  border-width: rem(1px);
-  color: var(--button-color, var(--c-color-white));
+  background: var(--button-bg, var(--c-color-default));
+  border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
+  color: var(--button-color, var(--c-color-default-color));
   height: var(--button-height, var(--button-height-sm));
   padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
   vertical-align: middle;
@@ -108,7 +106,7 @@
 
   @mixin hover {
     &:where(:not([data-loading], :disabled, [data-disabled])) {
-      background-color: var(--button-hover, var(--c-primary-color-filled-hover));
+      background-color: var(--button-hover, var(--c-color-default-hover));
       color: var(--button-hover-color, var(--button-color));
     }
   }
@@ -254,9 +252,7 @@
   border-radius: var(--section-radius, var(--c-radius-default));
   font-size: var(--section-fz, var(--c-font-size-sm));
   background: var(--section-bg, var(--c-primary-color-filled));
-  border-color: var(--section-bd, transparent);
-  border-style: solid;
-  border-width: rem(1px);
+  border: var(--section-bd, rem(1px) solid transparent);
   height: var(--section-height, var(--section-height-sm));
   padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
   vertical-align: middle;