@refraktor/core 0.0.1

package/src/icons/chevron.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,35 @@
+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

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

package/src/style.css

@@ -0,0 +1,329 @@
+@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;
+    scrollbar-gutter: stable both-edges;
+}
+
+.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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,49 @@
+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");
+    });
+});