@cck-ui/core 0.2.0

package/lib/core/styles-api/use-styles/get-style/get-style.d.ts

@@ -0,0 +1,20 @@
+import { Properties } from 'csstype';
+import { GetStylesApiOptions } from '../../styles-api.types';
+import { CTheme } from '../../../config-provider';
+type __Styles = undefined | Partial<Record<string, Properties>> | ((theme: CTheme, props: Record<string, any>, ctx: Record<string, any> | undefined) => Partial<Record<string, Properties>>);
+export type _Styles = __Styles | __Styles[];
+export interface GetStyleInput {
+    theme: CTheme;
+    selector: string;
+    rootSelector: string;
+    options: GetStylesApiOptions | undefined;
+    props: Record<string, any>;
+    stylesCtx: Record<string, any> | undefined;
+    withStylesTransform?: boolean;
+    resolvedStyles: Record<string, any>;
+    resolvedThemeStyles: Record<string, any>;
+    resolvedVars: Record<string, any>;
+    resolvedRootStyle: Properties;
+}
+export declare function getStyle({ theme, selector, options, props, stylesCtx, rootSelector, withStylesTransform, resolvedStyles, resolvedThemeStyles, resolvedVars, resolvedRootStyle, }: GetStyleInput): any;
+export {};

package/lib/core/styles-api/use-styles/get-style/resolve-style/resolve-style.d.ts

@@ -0,0 +1,9 @@
+import { Properties } from 'csstype';
+import { CStyleProp } from '../../../../box';
+import { CTheme } from '../../../../config-provider';
+interface ResolveStyleInput {
+    style: CStyleProp | undefined;
+    theme: CTheme;
+}
+export declare function resolveStyle({ style, theme }: ResolveStyleInput): Properties;
+export {};

package/lib/core/styles-api/use-styles/get-style/resolve-styles/resolve-styles.d.ts

@@ -0,0 +1,9 @@
+import { CTheme } from '../../../../config-provider';
+import { _Styles } from '../get-style';
+export interface ResolveStylesInput {
+    theme: CTheme;
+    styles: _Styles;
+    props: Record<string, any>;
+    stylesCtx: Record<string, any> | undefined;
+}
+export declare function resolveStyles({ theme, styles, props, stylesCtx }: ResolveStylesInput): Record<string, any>;

package/lib/core/styles-api/use-styles/get-style/resolve-vars/merge-vars.d.ts

@@ -0,0 +1,3 @@
+import { CssVariable } from '../../../../box';
+export type ResolvedVars = Partial<Record<string, Record<CssVariable, string | undefined>>>;
+export declare function mergeVars(vars: (ResolvedVars | undefined)[]): Partial<Record<string, Record<`--${string}`, string | undefined>>>;

package/lib/core/styles-api/use-styles/use-styles.d.ts

@@ -0,0 +1,25 @@
+import { Attributes, ClassNames, ClassNamesArray, GetStylesApiOptions, Styles } from '../styles-api.types';
+import { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';
+import { Properties } from 'csstype';
+import { FactoryPayload } from '../../factory';
+import { CStyleProp } from '../../box';
+export interface UseStylesInput<Payload extends FactoryPayload> {
+    name: string | (string | undefined)[];
+    classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
+    props: Payload['props'];
+    stylesCtx?: Payload['ctx'];
+    className?: string | undefined;
+    style?: CStyleProp;
+    rootSelector?: Payload['stylesNames'];
+    unstyled?: boolean;
+    classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;
+    styles?: Styles<Payload>;
+    vars?: PartialVarsResolver<Payload>;
+    varsResolver?: VarsResolver<Payload>;
+    attributes?: Attributes<Payload>;
+}
+export type GetStylesApi<Payload extends FactoryPayload> = (selector: NonNullable<Payload['stylesNames']>, options?: GetStylesApiOptions) => {
+    className: string;
+    style: Properties;
+};
+export declare function useStyles<Payload extends FactoryPayload>({ name, classes, props, stylesCtx, className, style, rootSelector, unstyled, classNames, styles, vars, varsResolver, attributes, }: UseStylesInput<Payload>): GetStylesApi<Payload>;

package/lib/core/styles-api/use-styles/use-transformed-styles.d.ts

@@ -0,0 +1,12 @@
+import { CTheme } from '../../config-provider';
+interface UseTransformedStylesInput {
+    props: Record<string, any>;
+    stylesCtx: Record<string, any> | undefined;
+    themeName: string[];
+    theme: CTheme;
+}
+export declare function useStylesTransform({ props, stylesCtx, themeName, theme, }: UseTransformedStylesInput): {
+    getTransformedStyles: (styles: any[]) => Record<string, string>[];
+    withStylesTransform: boolean;
+};
+export {};

package/lib/core/utils/camel-to-kebab-case/camel-to-kebab-case.d.ts

@@ -0,0 +1 @@
+export declare function camelToKebabCase(value: string): string;

package/lib/core/utils/color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates 10 shades (index 0~9, 0 lightest, 9 darkest) from a given color.
+ * The output format matches the input format (hex / rgb / rgba / hsl / hsla).
+ * Results are cached so repeated calls with the same color (even different formats) return instantly.
+ * @param originalColor - Any valid CSS color string
+ * @returns An array of 10 color strings representing the shades
+ * @throws If the input color is invalid
+ */
+export declare function generateColorShades(originalColor: string): string[];
+export declare function clearShadeCache(): void;
+export declare function setColorAlpha(originalColor: string, alpha: number): string;

package/lib/core/utils/dom/index.d.ts

@@ -0,0 +1 @@
+export * from './style';

package/lib/core/utils/dom/style.d.ts

@@ -0,0 +1 @@
+export declare function addUnit(value?: string | number, defaultUnit?: string): string | undefined;

package/lib/core/utils/filter-props/filter-props.d.ts

@@ -0,0 +1,5 @@
+type FilterPropsRes<T extends Record<string, any>> = {
+    [Key in keyof T]-?: T[Key] extends undefined ? never : T[Key];
+};
+export declare function filterProps<T extends Record<string, any>>(props: T): FilterPropsRes<T>;
+export {};

package/lib/core/utils/get-base-value/get-base-value.d.ts

@@ -0,0 +1,2 @@
+import { StyleProp } from '../../box';
+export declare function getBaseValue<Value = any>(value: StyleProp<Value>): Value | undefined;

package/lib/core/utils/get-breakpoint-value/get-breakpoint-value.d.ts

@@ -0,0 +1,3 @@
+import { CBreakpoint } from '../../config-provider';
+export type BreakpointsSource = Record<CBreakpoint, number | string>;
+export declare function getBreakpointValue(breakpoint: number | string, breakpoints: BreakpointsSource): number;

package/lib/core/utils/get-size/get-size.d.ts

@@ -0,0 +1,6 @@
+export declare function getSize(size: unknown, prefix?: string, convertToRem?: boolean): string | undefined;
+export declare function getSpacing(size: unknown): string | undefined;
+export declare function getRadius(size: unknown): string | undefined;
+export declare function getFontSize(size: unknown): string | undefined;
+export declare function getLineHeight(size: unknown): string | undefined;
+export declare function getShadow(size: unknown): string | undefined;

package/lib/core/utils/get-sorted-breakpoints/get-sorted-breakpoints.d.ts

@@ -0,0 +1,5 @@
+import { BreakpointsSource } from '../get-breakpoint-value/get-breakpoint-value';
+export declare function getSortedBreakpoints(values: string[], breakpoints: BreakpointsSource): {
+    value: string;
+    px: number;
+}[];

package/lib/core/utils/index.d.ts

@@ -0,0 +1,15 @@
+export { camelToKebabCase } from './camel-to-kebab-case/camel-to-kebab-case';
+export { filterProps } from './filter-props/filter-props';
+export { getBaseValue } from './get-base-value/get-base-value';
+export { getBreakpointValue } from './get-breakpoint-value/get-breakpoint-value';
+export { getSize, getSpacing, getShadow, getRadius, getFontSize, getLineHeight } from './get-size/get-size';
+export { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';
+export { isNumberLike } from './is-number-like/is-number-like';
+export { numberLikeStringToNumber } from './number-like-string-to-number/number-like-string-to-number';
+export { keys } from './keys/keys';
+export { px, rem, em } from './units-converters';
+export { getComponentName, withInstall, withPropsDefaultSetter } from './vue';
+export type { SFCInstallWithContext, SFCWithInstall, SFCWithPropsDefaultSetter } from './vue';
+export * from './color';
+export * from './dom';
+export { isNumber, isString, isStringNumber, isUndefined } from './types';

package/lib/core/utils/is-number-like/is-number-like.d.ts

@@ -0,0 +1 @@
+export declare function isNumberLike(value: unknown): boolean;

package/lib/core/utils/keys/keys.d.ts

@@ -0,0 +1 @@
+export declare function keys<T extends object, K extends keyof T>(object: T): K[];

package/lib/core/utils/number-like-string-to-number/number-like-string-to-number.d.ts

@@ -0,0 +1,2 @@
+import { NumberLikeString } from '../../box';
+export declare function numberLikeStringToNumber(value: NumberLikeString, fallback?: number): number;

package/lib/core/utils/types/index.d.ts

@@ -0,0 +1,5 @@
+export { isString } from '@vue/shared';
+export declare const isUndefined: (val: any) => val is undefined;
+export declare const isNumber: (val: any) => val is number;
+export declare const isStringNumber: (val: string) => boolean;
+export declare function isNumberLike(value: unknown): boolean;

package/lib/core/utils/units-converters/index.d.ts

@@ -0,0 +1,2 @@
+export { px } from './px';
+export { em, rem } from './rem';

package/lib/core/utils/units-converters/px.d.ts

@@ -0,0 +1 @@
+export declare function px(value: unknown): string | number;

package/lib/core/utils/units-converters/rem.d.ts

@@ -0,0 +1,2 @@
+export declare const rem: (value: unknown) => string;
+export declare const em: (value: unknown) => string;

package/lib/core/utils/vue/component.d.ts

@@ -0,0 +1 @@
+export declare function getComponentName(component: any): string;

package/lib/core/utils/vue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './install';
+export * from './typescript';

package/lib/core/utils/vue/install.d.ts

@@ -0,0 +1,3 @@
+import type { SFCWithInstall } from './typescript';
+export declare const withPropsDefaultSetter: (target: any) => void;
+export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;

package/lib/core/utils/vue/typescript.d.ts

@@ -0,0 +1,22 @@
+import type { AllowedComponentProps, AppContext, Component, EmitsOptions, ObjectPlugin, SetupContext, VNodeProps } from 'vue';
+import { type ComponentEmit, type ComponentProps } from 'vue-component-type-helpers';
+type NativeType = null | undefined | number | string | boolean | symbol | Function;
+type InferDefaults<T> = {
+    [K in keyof T as string extends K ? never : K]?: InferDefault<T[K]>;
+};
+type InferDefault<T> = (() => T & {}) | (T extends NativeType ? T : never);
+type ExtractEventNames<T> = ComponentEmit<T> extends (event: string, ...args: any[]) => any ? never : keyof {
+    [K in keyof ComponentProps<T> as K extends `on${infer Event}` ? ComponentEmit<T> extends (event: Uncapitalize<Event>, ...args: any[]) => any ? K : never : never]: unknown;
+};
+type ExcludeProps<T> = ExtractEventNames<T> | keyof VNodeProps | keyof AllowedComponentProps;
+export type SFCWithInstall<T> = T & ObjectPlugin & SFCWithPropsDefaultSetter<T>;
+export type SFCInstallWithContext<T> = SFCWithInstall<T> & {
+    _context: AppContext | null;
+};
+export type SFCWithPropsDefaultSetter<T> = T extends Component ? {
+    setPropsDefault: (defaults: InferDefaults<{
+        [K in keyof ComponentProps<T> as K extends ExcludeProps<T> ? never : K]?: ComponentProps<T>[K];
+    }>) => void;
+} : unknown;
+export type EmitFn<E extends EmitsOptions> = SetupContext<E>['emit'];
+export {};

package/lib/index.d.mts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './core';

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './core';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@cck-ui/core",
+  "version": "0.2.0",
+  "description": "Vue component library focused on usability, accessibility and developer experience",
+  "homepage": "https://cck-ui.jackatlas.xyz",
+  "license": "ISC",
+  "author": "JackAtlas <jackatlas8864@gmail.com>",
+  "keywords": [
+    "components",
+    "frontend",
+    "library",
+    "vue",
+    "ui"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css",
+    "./styles/*": "./styles/*"
+  },
+  "repository": {
+    "url": "https://github.com/JackAtlas/cck-ui",
+    "type": "git",
+    "directory": "packages/@cck-ui/core"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.2.0",
+    "clsx": "^2.1.1",
+    "type-fest": "^5.7.0"
+  },
+  "devDependencies": {
+    "@vue/shared": "^3.5.39",
+    "csstype": "^3.2.3",
+    "es-toolkit": "^1.49.0",
+    "vue": "^3.5.39",
+    "vue-component-type-helpers": "^3.3.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.39"
+  }
+}

package/styles/baseline.css

@@ -0,0 +1,39 @@
+:root,
+:host {
+  color-scheme: var(--c-color-scheme);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+body,
+:host {
+  margin: 0;
+  font-family: var(--c-font-family);
+  font-size: var(--c-font-size-md);
+  line-height: var(--c-line-height);
+  background-color: var(--c-color-body);
+  color: var(--c-color-text);
+
+  -webkit-font-smoothing: var(--c-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
+
+  @media screen and (max-device-width: em(500px)) {
+    -webkit-text-size-adjust: 100%;
+  }
+}

package/styles/baseline.layer.css

@@ -0,0 +1,40 @@
+@layer cck {:root,
+:host {
+  color-scheme: var(--c-color-scheme);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+body,
+:host {
+  margin: 0;
+  font-family: var(--c-font-family);
+  font-size: var(--c-font-size-md);
+  line-height: var(--c-line-height);
+  background-color: var(--c-color-body);
+  color: var(--c-color-text);
+
+  -webkit-font-smoothing: var(--c-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
+
+  @media screen and (max-device-width: em(500px)) {
+    -webkit-text-size-adjust: 100%;
+  }
+}
+}

package/styles/button.css

@@ -0,0 +1,267 @@
+.m_14602a9d {
+  --button-height-xs: 30px;
+  --button-height-sm: 36px;
+  --button-height-md: 42px;
+  --button-height-lg: 50px;
+  --button-height-xl: 60px;
+
+  --button-height-compact-xs: 22px;
+  --button-height-compact-sm: 26px;
+  --button-height-compact-md: 30px;
+  --button-height-compact-lg: 34px;
+  --button-height-compact-xl: 40px;
+
+  --button-padding-x-xs: 14px;
+  --button-padding-x-sm: 18px;
+  --button-padding-x-md: 22px;
+  --button-padding-x-lg: 26px;
+  --button-padding-x-xl: 32px;
+
+  --button-padding-x-compact-xs: 7px;
+  --button-padding-x-compact-sm: 8px;
+  --button-padding-x-compact-md: 10px;
+  --button-padding-x-compact-lg: 12px;
+  --button-padding-x-compact-xl: 14px;
+
+  --button-height: var(--button-height-sm);
+  --button-padding-x: var(--button-padding-x-sm);
+  --button-color: var(--c-color-white);
+
+  user-select: none;
+  font-weight: var(--c-font-weight-medium);
+  position: relative;
+  line-height: 1;
+  text-align: center;
+  overflow: hidden;
+
+  width: auto;
+  cursor: pointer;
+  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));
+  height: var(--button-height, var(--button-height-sm));
+  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
+  vertical-align: middle;
+
+  &:where([data-block]) {
+    display: block;
+    width: 100%;
+  }
+
+  &:where([data-with-left-section]) {
+    padding-inline-start: calc(var(--button-padding-x) / 1.5);
+  }
+
+  &:where([data-with-right-section]) {
+    padding-inline-end: calc(var(--button-padding-x) / 1.5);
+  }
+
+  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
+    cursor: not-allowed;
+    border-color: transparent;
+    transform: none;
+    color: var(--c-color-disabled-color);
+    background: var(--c-color-disabled);
+  }
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    inset: -1px;
+    border-radius: var(--button-radius, var(--c-radius-default));
+    transform: translateY(-100%);
+    opacity: 0;
+    filter: blur(12px);
+    transition:
+      transform 150ms ease,
+      opacity 100ms ease;
+
+    @mixin where-light {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    @mixin where-dark {
+      background-color: rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  &:where([data-loading]) {
+    cursor: not-allowed;
+    transform: none;
+
+    &::before {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    & .m_7725dbfb {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+
+  @mixin hover {
+    &:where(:not([data-loading], :disabled, [data-disabled])) {
+      background-color: var(--button-hover, var(--c-primary-color-filled-hover));
+      color: var(--button-hover-color, var(--button-color));
+    }
+  }
+}
+
+.m_7725dbfb {
+  display: flex;
+  align-items: center;
+  justify-content: var(--button-justify, center);
+  height: 100%;
+  overflow: visible;
+  transition:
+    transform 150ms ease,
+    opacity 100ms ease;
+}
+
+.m_774a0c99 {
+  white-space: nowrap;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+
+  &:where([data-loading]) {
+    opacity: 0.2;
+  }
+}
+
+.m_462d374a {
+  display: flex;
+  align-items: center;
+
+  &:where([data-position='left']) {
+    margin-inline-end: var(--c-spacing-xs);
+  }
+
+  &:where([data-position='right']) {
+    margin-inline-start: var(--c-spacing-xs);
+  }
+}
+
+.m_72bc570e {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
+.m_770b8424 {
+  --button-border-width: 1px;
+  display: flex;
+
+  & :where(.m_14602a9d) {
+    &:focus {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: row;
+
+    & .m_14602a9d,
+    & .m_260a6221 {
+      &:not(:only-child):first-child {
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+        border-inline-end-width: calc(var(--button-border-width) / 2);
+      }
+
+      &:not(:only-child):last-child {
+        border-end-start-radius: 0;
+        border-start-start-radius: 0;
+        border-inline-start-width: calc(var(--button-border-width) / 2);
+      }
+
+      &:not(:only-child):not(:first-child):not(:last-child) {
+        border-radius: 0;
+        border-inline-width: calc(var(--button-border-width) / 2);
+      }
+    }
+  }
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+
+    & .m_14602a9d,
+    & .m_260a6221 {
+      &:not(:only-child):first-child {
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+        border-bottom-width: calc(var(--button-border-width) / 2);
+      }
+
+      &:not(:only-child):last-child {
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+        border-top-width: calc(var(--button-border-width) / 2);
+      }
+
+      &:not(:only-child):not(:first-child):not(:last-child) {
+        border-radius: 0;
+        border-bottom-width: calc(var(--button-border-width) / 2);
+        border-top-width: calc(var(--button-border-width) / 2);
+      }
+    }
+  }
+}
+
+.m_260a6221 {
+  --section-height-xs: 30px;
+  --section-height-sm: 36px;
+  --section-height-md: 42px;
+  --section-height-lg: 50px;
+  --section-height-xl: 60px;
+
+  --section-height-compact-xs: 22px;
+  --section-height-compact-sm: 26px;
+  --section-height-compact-md: 30px;
+  --section-height-compact-lg: 34px;
+  --section-height-compact-xl: 40px;
+
+  --section-padding-x-xs: 14px;
+  --section-padding-x-sm: 18px;
+  --section-padding-x-md: 22px;
+  --section-padding-x-lg: 26px;
+  --section-padding-x-xl: 32px;
+
+  --section-padding-x-compact-xs: 7px;
+  --section-padding-x-compact-sm: 8px;
+  --section-padding-x-compact-md: 10px;
+  --section-padding-x-compact-lg: 12px;
+  --section-padding-x-compact-xl: 14px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--c-color-white);
+
+  font-weight: var(--c-font-weight-medium);
+  width: auto;
+  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);
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}