@refraktor/core 0.0.1

package/src/utils/configs/use-props.ts

@@ -0,0 +1,55 @@
+import { useThemeContext } from "../../theme";
+
+type PropsWithSpecialKeys = {
+    ref?: unknown;
+    [key: string]: unknown;
+};
+
+function filterSpecialProps<T extends PropsWithSpecialKeys>(
+    props: T
+): Omit<T, "ref"> {
+    const { ref: _, ...rest } = props;
+    return rest as Omit<T, "ref">;
+}
+
+export function useProps<
+    Props extends Record<string, any>,
+    Defaults extends Partial<Props> = {}
+>(
+    componentName: string,
+    localDefaults: Defaults | null,
+    runtimeProps: Props
+): Omit<Props, "ref"> & {
+    [K in keyof Defaults & keyof Props]-?: Defaults[K] | NonNullable<Props[K]>;
+} {
+    const { components } = useThemeContext();
+
+    const themeDefaults =
+        (components?.[componentName]?.defaultProps as Partial<Props>) ?? {};
+
+    const safeLocalDefaults = (localDefaults ?? {}) as Defaults;
+
+    const filteredLocalDefaults = filterSpecialProps(
+        safeLocalDefaults as PropsWithSpecialKeys
+    );
+    const filteredThemeDefaults = filterSpecialProps(
+        themeDefaults as PropsWithSpecialKeys
+    );
+    const filteredRuntimeProps = filterSpecialProps(
+        runtimeProps as PropsWithSpecialKeys
+    );
+
+    const runtimePropsWithoutUndefined = Object.fromEntries(
+        Object.entries(filteredRuntimeProps).filter(
+            ([_, value]) => value !== undefined
+        )
+    ) as typeof filteredRuntimeProps;
+
+    const merged = {
+        ...filteredLocalDefaults,
+        ...filteredThemeDefaults,
+        ...runtimePropsWithoutUndefined
+    };
+
+    return merged as any;
+}

package/src/utils/cx/index.ts

@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+
+export function cx(...classes: Parameters<typeof clsx>) {
+    return twMerge(clsx(...classes));
+}

package/src/utils/factory/factory.ts

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import {
+    FactoryPayload,
+    FactoryRenderFunction,
+    PolymorphicFactoryPayload,
+    PolymorphicRefraktorComponent,
+    PolymorphicRenderFunction,
+    RefraktorComponent
+} from "./types";
+
+export function factory<Payload extends FactoryPayload>(
+    renderFn: FactoryRenderFunction<Payload>
+): RefraktorComponent<Payload> {
+    const component = forwardRef<Payload["ref"], Payload["props"]>(renderFn);
+    return component as unknown as RefraktorComponent<Payload>;
+}
+
+export function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(
+    renderFn: PolymorphicRenderFunction<Payload>
+): PolymorphicRefraktorComponent<Payload> {
+    const component = forwardRef<any, any>(renderFn as any);
+    return component as unknown as PolymorphicRefraktorComponent<Payload>;
+}

package/src/utils/factory/index.ts

@@ -0,0 +1,14 @@
+export { factory, polymorphicFactory } from "./factory";
+export type {
+    FactoryPayload,
+    FactoryRenderFunction,
+    RefraktorComponent,
+    Factory,
+    PolymorphicFactoryPayload,
+    PolymorphicComponentProps,
+    PolymorphicComponentPropsWithRef,
+    PolymorphicRefraktorComponent,
+    PolymorphicFactory,
+    PolymorphicRenderFunction,
+    ElementRef
+} from "./types";

package/src/utils/factory/types.ts

@@ -0,0 +1,92 @@
+import {
+    ComponentPropsWithoutRef,
+    ComponentPropsWithRef,
+    ElementType,
+    ForwardRefExoticComponent,
+    PropsWithoutRef,
+    ReactElement,
+    Ref,
+    RefAttributes
+} from "react";
+
+export interface FactoryPayload {
+    props: Record<string, any>;
+    ref: any;
+    compound?: Record<string, any>;
+}
+
+export interface PolymorphicFactoryPayload {
+    props: Record<string, any>;
+    defaultRef: any;
+    defaultComponent: ElementType;
+    compound?: Record<string, any>;
+}
+
+export type ElementRef<C extends ElementType> =
+    ComponentPropsWithRef<C> extends RefAttributes<infer R> ? R : never;
+
+export type PolymorphicComponentProps<
+    C extends ElementType,
+    Props = object
+> = Props &
+    Omit<ComponentPropsWithoutRef<C>, keyof Props | "as"> & {
+        as?: C;
+    };
+
+export type PolymorphicComponentPropsWithRef<
+    C extends ElementType,
+    Props = object
+> = PolymorphicComponentProps<C, Props> & {
+    ref?: Ref<ElementRef<C>>;
+};
+
+export type RefraktorComponent<Payload extends FactoryPayload> =
+    ForwardRefExoticComponent<
+        PropsWithoutRef<Payload["props"]> & RefAttributes<Payload["ref"]>
+    > &
+        (Payload["compound"] extends Record<string, any>
+            ? Payload["compound"]
+            : Record<string, never>);
+
+export type PolymorphicRefraktorComponent<
+    Payload extends PolymorphicFactoryPayload
+> = (<C extends ElementType = Payload["defaultComponent"]>(
+    props: PolymorphicComponentPropsWithRef<C, Payload["props"]>
+) => ReactElement | null) &
+    Omit<
+        ForwardRefExoticComponent<
+            PolymorphicComponentPropsWithRef<
+                Payload["defaultComponent"],
+                Payload["props"]
+            >
+        >,
+        "displayName"
+    > & { displayName?: string } & (Payload["compound"] extends Record<
+        string,
+        any
+    >
+        ? Payload["compound"]
+        : Record<string, never>);
+
+export type Factory<Payload extends FactoryPayload> =
+    RefraktorComponent<Payload>;
+
+export type PolymorphicFactory<Payload extends PolymorphicFactoryPayload> =
+    PolymorphicRefraktorComponent<Payload>;
+
+export type FactoryRenderFunction<Payload extends FactoryPayload> = (
+    props: Payload["props"],
+    ref: Ref<Payload["ref"]>
+) => ReactElement | null;
+
+export type PolymorphicRenderFunction<
+    Payload extends PolymorphicFactoryPayload
+> = (
+    props: PolymorphicComponentProps<
+        Payload["defaultComponent"],
+        Payload["props"]
+    > & {
+        as?: ElementType;
+    },
+    ref: Ref<ElementRef<Payload["defaultComponent"]>>
+) => ReactElement | null;

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./configs";
+export * from "./cx";
+export * from "./factory";

package/src/vitest/index.ts

@@ -0,0 +1 @@
+export * from "./utils";

package/src/vitest/setup.tsx

@@ -0,0 +1,20 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+// Fix for Vitest + React 18/19: ensure IS_REACT_ACT_ENVIRONMENT is set on globalThis
+// (Vitest's jsdom has self !== globalThis, so RTL's flag isn't visible to React)
+let _actEnv = true;
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+    get() {
+        return _actEnv;
+    },
+    set(value: boolean) {
+        _actEnv = value;
+    },
+    configurable: true
+});
+
+afterEach(() => {
+    cleanup();
+});

package/src/vitest/utils.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement, ReactNode } from "react";
+import { expect } from "vitest";
+import {
+    render,
+    waitFor,
+    type RenderOptions,
+    type RenderResult
+} from "@testing-library/react";
+import { ThemeProvider, type RefraktorTheme, type Theme } from "../theme";
+
+type CustomRenderOptions = Omit<RenderOptions, "wrapper"> & {
+    theme?: Theme;
+    themeConfig?: RefraktorTheme;
+};
+
+function ProviderWrapper({
+    children,
+    theme = "dark",
+    themeConfig
+}: {
+    children: ReactNode;
+    theme?: Theme;
+    themeConfig?: RefraktorTheme;
+}) {
+    return (
+        <ThemeProvider theme={theme} themeConfig={themeConfig}>
+            {children}
+        </ThemeProvider>
+    );
+}
+
+async function customRender(
+    ui: ReactElement,
+    { theme, themeConfig, ...options }: CustomRenderOptions = {}
+): Promise<RenderResult> {
+    const result = render(ui, {
+        wrapper: ({ children }) => (
+            <ProviderWrapper theme={theme} themeConfig={themeConfig}>
+                {children}
+            </ProviderWrapper>
+        ),
+        ...options
+    });
+    // React 19 concurrent rendering: wait for DOM to be ready before returning
+    // (Portal renders to body/target, so we also accept content elsewhere in document)
+    await waitFor(
+        () => {
+            const hasContainerContent = result.container.firstChild != null;
+            const hasPortalContent = document.querySelector("[data-testid]");
+            expect(hasContainerContent || hasPortalContent).toBeTruthy();
+        },
+        { timeout: 3000 }
+    );
+    return result;
+}
+
+export * from "@testing-library/react";
+export { userEvent } from "@testing-library/user-event";
+export { customRender as render };

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "./build",
+        "rootDir": "./src",
+        "declaration": true,
+        "declarationMap": true,
+        "noEmit": false,
+        "allowImportingTsExtensions": false
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "build"]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/index.ts","./src/components/index.ts","./src/components/accordion/accordion.context.ts","./src/components/accordion/accordion.styles.ts","./src/components/accordion/accordion.test.tsx","./src/components/accordion/accordion.tsx","./src/components/accordion/accordion.types.ts","./src/components/accordion/index.ts","./src/components/accordion/accordion-control/accordion-control.tsx","./src/components/accordion/accordion-control/index.ts","./src/components/accordion/accordion-item/accordion-item.tsx","./src/components/accordion/accordion-item/index.ts","./src/components/accordion/accordion-panel/accordion-panel.tsx","./src/components/accordion/accordion-panel/index.ts","./src/components/avatar/avatar.styles.ts","./src/components/avatar/avatar.tsx","./src/components/avatar/avatar.types.ts","./src/components/avatar/index.ts","./src/components/avatar/avatar-group/avatar-group.tsx","./src/components/avatar/avatar-group/index.ts","./src/components/badge/badge.styles.ts","./src/components/badge/badge.tsx","./src/components/badge/badge.types.ts","./src/components/badge/index.ts","./src/components/button/button.styles.ts","./src/components/button/button.test.tsx","./src/components/button/button.tsx","./src/components/button/button.types.ts","./src/components/button/index.ts","./src/components/checkbox/checkbox.context.ts","./src/components/checkbox/checkbox.styles.ts","./src/components/checkbox/checkbox.test.tsx","./src/components/checkbox/checkbox.tsx","./src/components/checkbox/checkbox.types.ts","./src/components/checkbox/index.ts","./src/components/checkbox/checkbox-group/checkbox-group.tsx","./src/components/checkbox/checkbox-group/index.ts","./src/components/color-swatch/color-swatch.styles.ts","./src/components/color-swatch/color-swatch.test.tsx","./src/components/color-swatch/color-swatch.tsx","./src/components/color-swatch/color-swatch.types.ts","./src/components/color-swatch/index.ts","./src/components/input/index.ts","./src/components/input/input.tsx","./src/components/input/input.types.ts","./src/components/input/input-description/index.ts","./src/components/input/input-description/input-description.tsx","./src/components/input/input-error/index.ts","./src/components/input/input-error/input-error.tsx","./src/components/input/input-field/index.ts","./src/components/input/input-field/input-field.styles.ts","./src/components/input/input-field/input-field.tsx","./src/components/input/input-label/index.ts","./src/components/input/input-label/input-label.tsx","./src/components/input/input-wrapper/index.ts","./src/components/input/input-wrapper/input-wrapper.tsx","./src/components/loader/index.ts","./src/components/loader/loader.tsx","./src/components/loader/loader.types.ts","./src/components/menu/index.ts","./src/components/menu/menu.context.ts","./src/components/menu/menu.test.tsx","./src/components/menu/menu.tsx","./src/components/menu/menu.types.ts","./src/components/menu/use-menu.ts","./src/components/menu/menu-dropdown/index.ts","./src/components/menu/menu-dropdown/menu-dropdown.tsx","./src/components/menu/menu-item/index.ts","./src/components/menu/menu-item/menu-item.tsx","./src/components/menu/menu-label/index.ts","./src/components/menu/menu-label/menu-label.tsx","./src/components/menu/menu-separator/index.ts","./src/components/menu/menu-separator/menu-separator.tsx","./src/components/menu/menu-sub/index.ts","./src/components/menu/menu-sub/menu-sub.tsx","./src/components/menu/menu-sub-dropdown/index.ts","./src/components/menu/menu-sub-dropdown/menu-sub-dropdown.tsx","./src/components/menu/menu-sub-trigger/index.ts","./src/components/menu/menu-sub-trigger/menu-sub-trigger.tsx","./src/components/menu/menu-trigger/index.ts","./src/components/menu/menu-trigger/menu-trigger.tsx","./src/components/modal/index.ts","./src/components/modal/modal.context.ts","./src/components/modal/modal.test.tsx","./src/components/modal/modal.tsx","./src/components/modal/modal.types.ts","./src/components/modal/use-modal.ts","./src/components/modal/modal-close/index.ts","./src/components/modal/modal-close/modal-close.tsx","./src/components/modal/modal-content/index.ts","./src/components/modal/modal-content/modal-content.tsx","./src/components/modal/modal-header/index.ts","./src/components/modal/modal-header/modal-header.tsx","./src/components/modal/modal-overlay/index.ts","./src/components/modal/modal-overlay/modal-overlay.tsx","./src/components/modal/modal-root/index.ts","./src/components/modal/modal-root/modal-root.tsx","./src/components/number-input/index.ts","./src/components/number-input/number-input.styles.ts","./src/components/number-input/number-input.tsx","./src/components/number-input/number-input.types.ts","./src/components/pagination/index.ts","./src/components/pagination/pagination.styles.ts","./src/components/pagination/pagination.test.tsx","./src/components/pagination/pagination.tsx","./src/components/pagination/pagination.types.ts","./src/components/pagination/pagination.utils.ts","./src/components/popover/index.ts","./src/components/popover/popover.context.ts","./src/components/popover/popover.tsx","./src/components/popover/popover.types.ts","./src/components/popover/use-popover.ts","./src/components/popover/popover-dropdown/index.ts","./src/components/popover/popover-dropdown/popover-dropdown.tsx","./src/components/popover/popover-trigger/index.ts","./src/components/popover/popover-trigger/popover-trigger.tsx","./src/components/portal/index.ts","./src/components/portal/portal.test.tsx","./src/components/portal/portal.tsx","./src/components/portal/portal.types.ts","./src/components/progress/index.ts","./src/components/progress/progress.styles.ts","./src/components/progress/progress.test.tsx","./src/components/progress/progress.tsx","./src/components/progress/progress.types.ts","./src/components/progress-circle/index.ts","./src/components/progress-circle/progress-circle.styles.ts","./src/components/progress-circle/progress-circle.test.tsx","./src/components/progress-circle/progress-circle.tsx","./src/components/progress-circle/progress-circle.types.ts","./src/components/radio/index.ts","./src/components/radio/radio.context.ts","./src/components/radio/radio.styles.ts","./src/components/radio/radio.test.tsx","./src/components/radio/radio.tsx","./src/components/radio/radio.types.ts","./src/components/radio/radio-group/index.ts","./src/components/radio/radio-group/radio-group.tsx","./src/components/select/index.ts","./src/components/select/select.context.ts","./src/components/select/select.test.tsx","./src/components/select/select.tsx","./src/components/select/select.types.ts","./src/components/select/use-select.ts","./src/components/select/select-dropdown/index.ts","./src/components/select/select-dropdown/select-dropdown.tsx","./src/components/select/select-group/index.ts","./src/components/select/select-group/select-group.tsx","./src/components/select/select-item/index.ts","./src/components/select/select-item/select-item.tsx","./src/components/select/select-root/index.ts","./src/components/select/select-root/select-root.tsx","./src/components/select/select-trigger/index.ts","./src/components/select/select-trigger/select-trigger.tsx","./src/components/slider/index.ts","./src/components/slider/slider.styles.ts","./src/components/slider/slider.tsx","./src/components/slider/slider.types.ts","./src/components/switch/index.ts","./src/components/switch/switch.styles.ts","./src/components/switch/switch.tsx","./src/components/switch/switch.types.ts","./src/components/tabs/index.ts","./src/components/tabs/tabs.context.ts","./src/components/tabs/tabs.styles.ts","./src/components/tabs/tabs.test.tsx","./src/components/tabs/tabs.tsx","./src/components/tabs/tabs.types.ts","./src/components/tabs/tabs-list/index.ts","./src/components/tabs/tabs-list/tabs-list.tsx","./src/components/tabs/tabs-panel/index.ts","./src/components/tabs/tabs-panel/tabs-panel.tsx","./src/components/tabs/tabs-tab/index.ts","./src/components/tabs/tabs-tab/tabs-tab.tsx","./src/components/textarea/index.ts","./src/components/textarea/textarea.tsx","./src/components/textarea/textarea.types.ts","./src/components/textarea/textarea-field/index.ts","./src/components/textarea/textarea-field/textarea-field.styles.ts","./src/components/textarea/textarea-field/textarea-field.tsx","./src/components/timeline/index.ts","./src/components/timeline/timeline.context.ts","./src/components/timeline/timeline.styles.ts","./src/components/timeline/timeline.test.tsx","./src/components/timeline/timeline.tsx","./src/components/timeline/timeline.types.ts","./src/components/timeline/timeline-item/index.ts","./src/components/timeline/timeline-item/timeline-item.tsx","./src/components/tooltip/index.ts","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip.types.ts","./src/components/tooltip/use-tooltip.ts","./src/components/transition/index.ts","./src/components/transition/transition.test.tsx","./src/components/transition/transition.tsx","./src/components/transition/transition.types.ts","./src/components/transition/transitions.ts","./src/icons/check.tsx","./src/icons/chevron.tsx","./src/icons/index.ts","./src/icons/minus.tsx","./src/icons/types.ts","./src/icons/user.tsx","./src/icons/x.tsx","./src/theme/index.ts","./src/theme/types.ts","./src/theme/themeprovider/themeprovider.tsx","./src/theme/themeprovider/context.ts","./src/theme/themeprovider/generatevariables.test.ts","./src/theme/themeprovider/generatevariables.ts","./src/theme/themeprovider/index.ts","./src/theme/themeprovider/types.ts","./src/theme/createtheme/createtheme.ts","./src/theme/createtheme/index.ts","./src/theme/createtheme/types.ts","./src/theme/defaults/colors.ts","./src/theme/defaults/settings.ts","./src/theme/utils/get-radius.ts","./src/theme/utils/get-shade.ts","./src/theme/utils/index.ts","./src/theme/utils/use-theme.ts","./src/utils/index.ts","./src/utils/configs/create-config.ts","./src/utils/configs/index.ts","./src/utils/configs/use-class-names.ts","./src/utils/configs/use-props.ts","./src/utils/cx/index.ts","./src/utils/factory/factory.ts","./src/utils/factory/index.ts","./src/utils/factory/types.ts","./src/vitest/index.ts","./src/vitest/setup.tsx","./src/vitest/utils.tsx"],"version":"5.9.3"}

package/vitest.config.js

@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react-swc";
+
+const actWarningRe =
+    /An update to .* inside a test was not wrapped in act\(\.\.\.\)/;
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        globals: true,
+        environment: "jsdom",
+        setupFiles: ["./src/vitest/setup.tsx"],
+        exclude: ["node_modules", "build"],
+        onConsoleLog(log, type) {
+            if (type === "stderr" && actWarningRe.test(log)) return false;
+        }
+    }
+});