@refraktor/core 0.0.3 → 0.0.5

package/src/icons/chevron.tsx

@@ -1,46 +0,0 @@
-import { IconProps } from "./types";
-
-type ChevronIconProps = IconProps & {
-    direction?: "up" | "down" | "left" | "right";
-};
-
-const ChevronIcon = ({
-    size = 20,
-    direction = "up",
-    className,
-    ...props
-}: ChevronIconProps) => {
-    const rotation = {
-        up: "rotate(0)",
-        right: "rotate(90deg)",
-        down: "rotate(180deg)",
-        left: "rotate(-90deg)"
-    }[direction];
-
-    return (
-        <svg
-            viewBox="0 0 24 24"
-            width={size}
-            height={size}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={className}
-            style={{ transform: rotation }}
-            {...props}
-        >
-            <g strokeWidth="0" />
-            <g strokeLinecap="round" strokeLinejoin="round" />
-            <g>
-                <path
-                    d="M6 15L12 9L18 15"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                />
-            </g>
-        </svg>
-    );
-};
-
-export default ChevronIcon;

package/src/icons/index.ts

@@ -1,5 +0,0 @@
-export { default as ChevronIcon } from "./chevron";
-export { default as CheckIcon } from "./check";
-export { default as MinusIcon } from "./minus";
-export { default as UserIcon } from "./user";
-export { default as XIcon } from "./x";

package/src/icons/minus.tsx

@@ -1,24 +0,0 @@
-import { IconProps } from "./types";
-
-const MinusIcon = ({ size = 20, className, ...props }: IconProps) => {
-    return (
-        <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            width={size}
-            height={size}
-            className={className}
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <path
-                d="M6 12H18"
-                stroke="currentColor"
-                strokeWidth="3"
-                strokeLinecap="round"
-            />
-        </svg>
-    );
-};
-
-export default MinusIcon;

package/src/icons/types.ts

@@ -1,9 +0,0 @@
-import { SVGProps } from "react";
-
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    /** The size of the icon @default `20` */
-    size?: number | string;
-
-    /** Gets applied to the icon */
-    className?: string;
-}

package/src/icons/user.tsx

@@ -1,18 +0,0 @@
-import { IconProps } from "./types";
-
-const UserIcon = ({ size = 20, className, ...props }: IconProps) => {
-    return (
-        <svg
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            width={size}
-            height={size}
-            className={className}
-            {...props}
-        >
-            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-        </svg>
-    );
-};
-
-export default UserIcon;

package/src/icons/x.tsx

@@ -1,35 +0,0 @@
-import { IconProps } from "./types";
-
-const XIcon = ({ size = 20, className, ...props }: IconProps) => {
-    return (
-        <svg
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            width={size}
-            height={size}
-            className={className}
-            {...props}
-        >
-            <g strokeWidth="0" />
-            <g strokeLinecap="round" strokeLinejoin="round" />
-            <g>
-                <path
-                    d="M18 6L6 18"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                />
-                <path
-                    d="M6 6L18 18"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                />
-            </g>
-        </svg>
-    );
-};
-
-export default XIcon;

package/src/index.ts

@@ -1,5 +0,0 @@
-import "./style.css";
-
-export * from "./components";
-export * from "./theme";
-export * from "./utils";

package/src/style.css

@@ -1,328 +0,0 @@
-@import "tailwindcss";
-
-:root {
-    --refraktor-radius-none: 0;
-    --refraktor-radius-xs: 0.125rem;
-    --refraktor-radius-sm: 0.25rem;
-    --refraktor-radius-md: 0.375rem;
-    --refraktor-radius-lg: 0.5rem;
-    --refraktor-radius-xl: 0.75rem;
-    --refraktor-radius-2xl: 1rem;
-    --refraktor-radius-3xl: 1.5rem;
-    --refraktor-radius-4xl: 2rem;
-    --refraktor-radius-full: 9999px;
-
-    --refraktor-colors-white: #ffffff;
-    --refraktor-colors-black: #000000;
-
-    --refraktor-colors-dark-0: #c9c9c9;
-    --refraktor-colors-dark-1: #b8b8b8;
-    --refraktor-colors-dark-2: #828282;
-    --refraktor-colors-dark-3: #696969;
-    --refraktor-colors-dark-4: #424242;
-    --refraktor-colors-dark-5: #3b3b3b;
-    --refraktor-colors-dark-6: #2e2e2e;
-    --refraktor-colors-dark-7: #242424;
-    --refraktor-colors-dark-8: #1f1f1f;
-    --refraktor-colors-dark-9: #141414;
-
-    --refraktor-colors-light-0: #ffffff;
-    --refraktor-colors-light-1: #f9f9f9;
-    --refraktor-colors-light-2: #f2f2f2;
-    --refraktor-colors-light-3: #e5e5e5;
-    --refraktor-colors-light-4: #d1d1d1;
-    --refraktor-colors-light-5: #b2b2b2;
-    --refraktor-colors-light-6: #8c8c8c;
-    --refraktor-colors-light-7: #666666;
-    --refraktor-colors-light-8: #3f3f3f;
-    --refraktor-colors-light-9: #262626;
-
-    --refraktor-colors-gray-0: #fafafa;
-    --refraktor-colors-gray-1: #f4f4f5;
-    --refraktor-colors-gray-2: #e4e4e7;
-    --refraktor-colors-gray-3: #d4d4d8;
-    --refraktor-colors-gray-4: #a1a1aa;
-    --refraktor-colors-gray-5: #71717a;
-    --refraktor-colors-gray-6: #52525b;
-    --refraktor-colors-gray-7: #3f3f46;
-    --refraktor-colors-gray-8: #27272a;
-    --refraktor-colors-gray-9: #18181b;
-
-    --refraktor-colors-cloud-0: #ffffff;
-    --refraktor-colors-cloud-1: #fcfcfd;
-    --refraktor-colors-cloud-2: #f8fafc;
-    --refraktor-colors-cloud-3: #eef2f6;
-    --refraktor-colors-cloud-4: #e2e8f0;
-    --refraktor-colors-cloud-5: #dbe2ea;
-    --refraktor-colors-cloud-6: #c2ccd6;
-    --refraktor-colors-cloud-7: #94a3b8;
-    --refraktor-colors-cloud-8: #64748b;
-    --refraktor-colors-cloud-9: #1f2937;
-
-    --refraktor-colors-green-0: #ebfbee;
-    --refraktor-colors-green-1: #d3f9d8;
-    --refraktor-colors-green-2: #b2f2bb;
-    --refraktor-colors-green-3: #8ce99a;
-    --refraktor-colors-green-4: #69db7c;
-    --refraktor-colors-green-5: #51cf66;
-    --refraktor-colors-green-6: #40c057;
-    --refraktor-colors-green-7: #37b24d;
-    --refraktor-colors-green-8: #2f9e44;
-    --refraktor-colors-green-9: #2b8a3e;
-
-    --refraktor-colors-mint-0: #ecfdf5;
-    --refraktor-colors-mint-1: #d1fae5;
-    --refraktor-colors-mint-2: #a7f3d0;
-    --refraktor-colors-mint-3: #6ee7b7;
-    --refraktor-colors-mint-4: #34d399;
-    --refraktor-colors-mint-5: #10b981;
-    --refraktor-colors-mint-6: #059669;
-    --refraktor-colors-mint-7: #047857;
-    --refraktor-colors-mint-8: #065f46;
-    --refraktor-colors-mint-9: #064e3b;
-
-    --refraktor-colors-red-0: #ffeaea;
-    --refraktor-colors-red-1: #ffc5c5;
-    --refraktor-colors-red-2: #ffa0a0;
-    --refraktor-colors-red-3: #ff7a7a;
-    --refraktor-colors-red-4: #ff5555;
-    --refraktor-colors-red-5: #e64545;
-    --refraktor-colors-red-6: #c13838;
-    --refraktor-colors-red-7: #9d2c2c;
-    --refraktor-colors-red-8: #781f1f;
-    --refraktor-colors-red-9: #541414;
-
-    --refraktor-colors-blue-0: #e7f2ff;
-    --refraktor-colors-blue-1: #b8dcff;
-    --refraktor-colors-blue-2: #89c6ff;
-    --refraktor-colors-blue-3: #5ab0ff;
-    --refraktor-colors-blue-4: #2b9aff;
-    --refraktor-colors-blue-5: #1485e6;
-    --refraktor-colors-blue-6: #106ec1;
-    --refraktor-colors-blue-7: #0d589d;
-    --refraktor-colors-blue-8: #094179;
-    --refraktor-colors-blue-9: #062b54;
-
-    --refraktor-colors-cyan-0: #eefbfc;
-    --refraktor-colors-cyan-1: #d6f4f6;
-    --refraktor-colors-cyan-2: #bcecee;
-    --refraktor-colors-cyan-3: #9ee3e6;
-    --refraktor-colors-cyan-4: #7ed9de;
-    --refraktor-colors-cyan-5: #5fcfd6;
-    --refraktor-colors-cyan-6: #46b8bf;
-    --refraktor-colors-cyan-7: #329fa6;
-    --refraktor-colors-cyan-8: #1f7f85;
-    --refraktor-colors-cyan-9: #145f64;
-
-    --refraktor-colors-teal-0: #ecf8f6;
-    --refraktor-colors-teal-1: #d0efe9;
-    --refraktor-colors-teal-2: #b2e5dc;
-    --refraktor-colors-teal-3: #8fdbc9;
-    --refraktor-colors-teal-4: #6fd1b6;
-    --refraktor-colors-teal-5: #52c7a4;
-    --refraktor-colors-teal-6: #3dad8c;
-    --refraktor-colors-teal-7: #2f8f74;
-    --refraktor-colors-teal-8: #226f5b;
-    --refraktor-colors-teal-9: #184f41;
-
-    --refraktor-colors-yellow-0: #fffce5;
-    --refraktor-colors-yellow-1: #fff4b8;
-    --refraktor-colors-yellow-2: #ffeb8a;
-    --refraktor-colors-yellow-3: #ffe25c;
-    --refraktor-colors-yellow-4: #ffd92e;
-    --refraktor-colors-yellow-5: #e6c020;
-    --refraktor-colors-yellow-6: #c1a319;
-    --refraktor-colors-yellow-7: #9d8613;
-    --refraktor-colors-yellow-8: #79690c;
-    --refraktor-colors-yellow-9: #544c06;
-
-    --refraktor-colors-orange-0: #fff7e0;
-    --refraktor-colors-orange-1: #ffd29d;
-    --refraktor-colors-orange-2: #ffbb75;
-    --refraktor-colors-orange-3: #ff9e4d;
-    --refraktor-colors-orange-4: #ff8025;
-    --refraktor-colors-orange-5: #e66a00;
-    --refraktor-colors-orange-6: #c95300;
-    --refraktor-colors-orange-7: #a43c00;
-    --refraktor-colors-orange-8: #7f2b00;
-    --refraktor-colors-orange-9: #5a1c00;
-
-    --refraktor-colors-purple-0: #f4f0ff;
-    --refraktor-colors-purple-1: #dbceff;
-    --refraktor-colors-purple-2: #c2acff;
-    --refraktor-colors-purple-3: #a98aff;
-    --refraktor-colors-purple-4: #9068ff;
-    --refraktor-colors-purple-5: #774fe6;
-    --refraktor-colors-purple-6: #613fc1;
-    --refraktor-colors-purple-7: #4c319d;
-    --refraktor-colors-purple-8: #372479;
-    --refraktor-colors-purple-9: #221654;
-
-    --refraktor-colors-magenta-0: #f7ecf6;
-    --refraktor-colors-magenta-1: #ebd1ea;
-    --refraktor-colors-magenta-2: #deb5de;
-    --refraktor-colors-magenta-3: #d19ad2;
-    --refraktor-colors-magenta-4: #c37fc6;
-    --refraktor-colors-magenta-5: #b065ba;
-    --refraktor-colors-magenta-6: #9652a0;
-    --refraktor-colors-magenta-7: #7b3f85;
-    --refraktor-colors-magenta-8: #602c6a;
-    --refraktor-colors-magenta-9: #45194f;
-
-    --refraktor-colors-pink-0: #fcebf2;
-    --refraktor-colors-pink-1: #f6d2e1;
-    --refraktor-colors-pink-2: #efb8cf;
-    --refraktor-colors-pink-3: #e79ebb;
-    --refraktor-colors-pink-4: #de84a6;
-    --refraktor-colors-pink-5: #d36a90;
-    --refraktor-colors-pink-6: #b85778;
-    --refraktor-colors-pink-7: #9c4662;
-    --refraktor-colors-pink-8: #7d344b;
-    --refraktor-colors-pink-9: #5c2436;
-}
-
-@keyframes loader-spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.loader-spin {
-    animation: loader-spin var(--refraktor-loader-speed, 1s) linear infinite;
-    transform-origin: center center;
-}
-
-@keyframes refraktor-progress-indeterminate {
-    0% {
-        transform: translateX(-120%);
-    }
-
-    100% {
-        transform: translateX(280%);
-    }
-}
-
-.refraktor-progress-indeterminate {
-    width: 40%;
-    will-change: transform;
-    animation: refraktor-progress-indeterminate 1.2s ease-in-out infinite;
-}
-
-.refraktor-transparency-grid {
-    --refraktor-transparency-grid-size: 10px;
-    --refraktor-transparency-grid-light: var(--refraktor-colors-light-0);
-    --refraktor-transparency-grid-dark: var(--refraktor-colors-light-4);
-
-    background-color: var(--refraktor-transparency-grid-light);
-    background-image:
-        linear-gradient(
-            45deg,
-            var(--refraktor-transparency-grid-dark) 25%,
-            transparent 25%
-        ),
-        linear-gradient(
-            -45deg,
-            var(--refraktor-transparency-grid-dark) 25%,
-            transparent 25%
-        ),
-        linear-gradient(
-            45deg,
-            transparent 75%,
-            var(--refraktor-transparency-grid-dark) 75%
-        ),
-        linear-gradient(
-            -45deg,
-            transparent 75%,
-            var(--refraktor-transparency-grid-dark) 75%
-        );
-    background-size: var(--refraktor-transparency-grid-size)
-        var(--refraktor-transparency-grid-size);
-    background-position:
-        0 0,
-        0 calc(var(--refraktor-transparency-grid-size) / 2),
-        calc(var(--refraktor-transparency-grid-size) / 2)
-            calc(var(--refraktor-transparency-grid-size) / -2),
-        calc(var(--refraktor-transparency-grid-size) / -2) 0;
-}
-
-/** Scrollbar */
-.refraktor-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: var(--refraktor-scroll-thumb) transparent;
-}
-
-.refraktor-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-.refraktor-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.refraktor-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--refraktor-scroll-thumb);
-    border-radius: 99px;
-}
-
-.refraktor-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--refraktor-scroll-thumb-hover);
-}
-
-:where(.refraktor-scrollbar)::-webkit-scrollbar-thumb {
-    background: var(--refraktor-scroll-thumb);
-}
-
-/** Input */
-input,
-input::-webkit-inner-spin-button,
-input::-webkit-outer-spin-button,
-input::-webkit-calendar-picker-indicator {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    margin: 0;
-}
-
-/* ========== NUMBER ========== */
-input[type="number"] {
-    appearance: textfield;
-    -moz-appearance: textfield; /* Firefox */
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none; /* Chrome, Safari, Edge */
-}
-
-/* ============ TIME =========== */
-input[type="time"]::-webkit-calendar-picker-indicator {
-    display: none; /* Chromium / Safari */
-}
-
-/* Remove inner padding & odd Safari quirks */
-input[type="time"] {
-    appearance: textfield;
-    -webkit-appearance: none;
-}
-
-/* ============ DATE =========== */
-input[type="date"]::-webkit-calendar-picker-indicator {
-    display: none;
-}
-
-/* Hide native clear button (Edge / Chrome) */
-input::-ms-clear {
-    display: none;
-}
-
-/* Mobile Safari fix: block spinner gestures */
-input[type="number"],
-input[type="time"],
-input[type="date"] {
-    touch-action: manipulation;
-}

package/src/theme/ThemeProvider/ThemeProvider.tsx

@@ -1,111 +0,0 @@
-import { storage, useIsomorphicLayoutEffect } from "@refraktor/utils";
-import { Theme } from "../types";
-import { ThemeProviderProps } from "./types";
-import {
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState
-} from "react";
-import { ThemeContextProvider } from "./context";
-import { defaultTheme, RefraktorTheme } from "../createTheme";
-import { generateVariables } from "./generateVariables";
-
-const STORAGE_KEY = "refraktor-theme";
-
-const getInitialTheme = (
-    defaultTheme: Theme,
-    persistenceEnabled: boolean,
-    storageKey: string
-) => {
-    if (!persistenceEnabled) return defaultTheme;
-
-    const storageTheme = storage.get(storageKey, defaultTheme);
-    if (storageTheme === "light" || storageTheme === "dark")
-        return storageTheme;
-
-    return defaultTheme;
-};
-
-export const ThemeProvider = ({
-    children,
-    theme = "dark",
-    themeConfig,
-    components,
-    persistence = { enabled: false }
-}: ThemeProviderProps) => {
-    const rootRef = useRef<HTMLElement>(null);
-
-    const persistenceEnabled = persistence.enabled ?? false;
-    const storageKey = persistence.storageKey ?? STORAGE_KEY;
-
-    const [currentTheme, setCurrentTheme] = useState(() =>
-        getInitialTheme(theme, persistenceEnabled, storageKey)
-    );
-    const [currentThemeConfig, setCurrentThemeConfig] =
-        useState<RefraktorTheme>(() => themeConfig ?? defaultTheme);
-
-    const themeVariables = useMemo(
-        () => generateVariables(currentTheme, currentThemeConfig),
-        [currentTheme, currentThemeConfig]
-    );
-
-    useEffect(() => {
-        if (persistenceEnabled) storage.set(storageKey, currentTheme);
-    }, [currentTheme, persistenceEnabled, storageKey]);
-
-    const toggleTheme = useCallback(() => {
-        setCurrentTheme((prev: Theme) => (prev === "light" ? "dark" : "light"));
-    }, []);
-
-    const setTheme = useCallback((newTheme: Theme) => {
-        setCurrentTheme(newTheme);
-    }, []);
-
-    useIsomorphicLayoutEffect(() => {
-        if (typeof document !== "undefined") {
-            rootRef.current = document.documentElement;
-        }
-    }, []);
-
-    useIsomorphicLayoutEffect(() => {
-        const root = rootRef.current;
-        if (!root) return;
-
-        root.setAttribute("data-refraktor-theme", currentTheme);
-
-        Object.entries(themeVariables).forEach(([key, value]) => {
-            root.style.setProperty(key, value);
-        });
-    }, [themeVariables]);
-
-    const contextValue = useMemo(
-        () => ({
-            theme: currentTheme,
-            setTheme,
-            toggleTheme,
-            persistenceEnabled,
-            themeConfig: currentThemeConfig,
-            components: components ?? {}
-        }),
-        [
-            currentTheme,
-            setTheme,
-            toggleTheme,
-            persistenceEnabled,
-            currentThemeConfig,
-            components
-        ]
-    );
-
-    return (
-        <ThemeContextProvider value={contextValue}>
-            {children}
-        </ThemeContextProvider>
-    );
-};
-
-ThemeProvider.displayName = "@refraktor/core/ThemeProvider";
-
-export default ThemeProvider;

package/src/theme/ThemeProvider/context.ts

@@ -1,7 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { ThemeProviderContextValue } from "./types";
-
-export const [ThemeContextProvider, useThemeContext] =
-    createSafeContext<ThemeProviderContextValue>(
-        "[@refraktor/core] ThemeProvider was not found in the tree"
-    );

package/src/theme/ThemeProvider/generateVariables.test.ts

@@ -1,49 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createTheme } from "../createTheme";
-import { generateVariables } from "./generateVariables";
-
-describe("generateVariables", () => {
-    it("uses dark text on light primary colors when autoContrast is enabled", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "cloud",
-                primaryShade: 5,
-                autoContrast: true
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary"]).toBe("#dbe2ea");
-        expect(variables["--refraktor-primary-text"]).toBe("#000000");
-    });
-
-    it("keeps shade-based text color when autoContrast is disabled", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "cloud",
-                primaryShade: 5,
-                autoContrast: false
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary-text"]).toBe("#ffffff");
-    });
-
-    it("supports custom hex primary colors and chooses readable text", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "#f8fafc",
-                autoContrast: true
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary"]).toBe("#f8fafc");
-        expect(variables["--refraktor-primary-hover"]).toBe("#f8fafc");
-        expect(variables["--refraktor-primary-text"]).toBe("#000000");
-    });
-});