@themodcraft/core-ui 1.1.0 → 1.1.2

package/dist/components/text-input/contrast.client.js

@@ -0,0 +1,132 @@
+"use client";
+import { c } from 'react/compiler-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { rgbToHex, getReadableTextColor } from '../../utils/color.js';
+
+function isTransparentBackground(color) {
+  return !color || color === "transparent" || /rgba\([^)]*,\s*(?:0|0?\.0+)\s*\)$/i.test(color);
+}
+function getEffectiveBackground(element) {
+  let current = element;
+  while (current) {
+    const background = window.getComputedStyle(current).backgroundColor;
+    if (!isTransparentBackground(background)) {
+      return background;
+    }
+    current = current.parentElement;
+  }
+  const bodyBackground = window.getComputedStyle(document.body).backgroundColor;
+  return isTransparentBackground(bodyBackground) ? window.getComputedStyle(document.documentElement).backgroundColor : bodyBackground;
+}
+function useContrastedFieldStyle(style) {
+  const $ = c(8);
+  const ref = useRef(null);
+  const [textColor, setTextColor] = useState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
+      const hex = rgbToHex(getEffectiveBackground(element));
+      if (hex) {
+        setTextColor(getReadableTextColor(hex));
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== style) {
+    t1 = [style];
+    $[1] = style;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== style || $[4] !== textColor) {
+    t2 = {
+      "--tmc-field-auto-text": textColor,
+      ...style
+    };
+    $[3] = style;
+    $[4] = textColor;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const t3 = t2;
+  let t4;
+  if ($[6] !== t3) {
+    t4 = {
+      ref,
+      style: t3
+    };
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+function useContrastedInputStyle(style) {
+  const $ = c(8);
+  const ref = useRef(null);
+  const [textColor, setTextColor] = useState();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
+      const hex = rgbToHex(getEffectiveBackground(element));
+      if (hex) {
+        setTextColor(getReadableTextColor(hex));
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== style) {
+    t1 = [style];
+    $[1] = style;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== style || $[4] !== textColor) {
+    t2 = {
+      "--tmc-input-auto-text": textColor,
+      ...style
+    };
+    $[3] = style;
+    $[4] = textColor;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const t3 = t2;
+  let t4;
+  if ($[6] !== t3) {
+    t4 = {
+      ref,
+      style: t3
+    };
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+
+export { useContrastedFieldStyle, useContrastedInputStyle };

package/dist/components/text-input/index.d.ts

@@ -1,5 +1,6 @@
 export { EmailField, PasswordField, PhoneNumberField, UsernameField } from "./AuthFields";
 export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
+export { useContrastedFieldStyle, useContrastedInputStyle } from "./contrast.client";
 export type { AuthFieldProps } from "./AuthFields";
 export type { TextAreaProps, TextInputProps } from "./TextInput.types";

package/dist/components/text-input/index.js

@@ -1,3 +1,4 @@
-export { EmailField, PasswordField, PhoneNumberField, UsernameField } from "./AuthFields";
-export { TextArea } from "./TextArea";
-export { TextInput } from "./TextInput";
+export { EmailField, PasswordField, PhoneNumberField, UsernameField } from './AuthFields.js';
+export { TextArea } from './TextArea.js';
+export { TextInput } from './TextInput.js';
+export { useContrastedFieldStyle, useContrastedInputStyle } from './contrast.client.js';

package/dist/components/text-input/shared.d.ts

@@ -1,26 +1 @@
-import type { CSSProperties } from "react";
-export declare const FieldRoot: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const FieldLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const FieldDescription: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const FieldError: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const inputSurfaceStyles = "\n  background: var(--tmc-color-surface-raised, #fbfcfe);\n  border: 1px solid var(--tmc-color-border, #d7dde5);\n  border-radius: var(--tmc-radius-md, 6px);\n  color: var(--tmc-input-text, var(--tmc-input-auto-text, var(--tmc-color-on-surface-raised, #151821)));\n  font: inherit;\n  outline: none;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    box-shadow 0.18s ease;\n  width: 100%;\n\n  &::placeholder {\n    color: var(--tmc-input-placeholder-text, var(--tmc-input-auto-text, var(--tmc-color-text-muted, #5f6b7a)));\n    opacity: 0.72;\n  }\n\n  &:focus {\n    border-color: var(--tmc-color-accent, #2454d6);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmc-color-accent, #2454d6) 24%, transparent);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.58;\n  }\n\n  &[aria-invalid=\"true\"] {\n    border-color: var(--tmc-color-danger, #b42318);\n  }\n";
-export declare function useContrastedFieldStyle<T extends HTMLElement>(style?: CSSProperties): {
-    ref: import("react").RefObject<T | null>;
-    style: CSSProperties;
-};
-export declare function useContrastedInputStyle<T extends HTMLElement>(style?: CSSProperties): {
-    ref: import("react").RefObject<T | null>;
-    style: CSSProperties;
-};
+export declare function classNames(...classes: Array<string | undefined>): string;

package/dist/components/text-input/shared.js

@@ -1,113 +1,5 @@
-import styled from "@emotion/styled";
-import { useEffect, useRef, useState } from "react";
-import { getReadableTextColor, rgbToHex } from "../../utils/color";
-export const FieldRoot = styled.label `
-  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
-  display: grid;
-  gap: 0.45rem;
-  width: 100%;
-`;
-export const FieldLabel = styled.span `
-  color: inherit;
-  font-size: 0.9rem;
-  font-weight: 650;
-`;
-export const FieldDescription = styled.span `
-  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
-  font-size: 0.82rem;
-  line-height: 1.45;
-`;
-export const FieldError = styled.span `
-  color: var(--tmc-color-danger, #b42318);
-  font-size: 0.82rem;
-  line-height: 1.45;
-`;
-export const inputSurfaceStyles = `
-  background: var(--tmc-color-surface-raised, #fbfcfe);
-  border: 1px solid var(--tmc-color-border, #d7dde5);
-  border-radius: var(--tmc-radius-md, 6px);
-  color: var(--tmc-input-text, var(--tmc-input-auto-text, var(--tmc-color-on-surface-raised, #151821)));
-  font: inherit;
-  outline: none;
-  transition:
-    background-color 0.18s ease,
-    border-color 0.18s ease,
-    box-shadow 0.18s ease;
-  width: 100%;
-
-  &::placeholder {
-    color: var(--tmc-input-placeholder-text, var(--tmc-input-auto-text, var(--tmc-color-text-muted, #5f6b7a)));
-    opacity: 0.72;
-  }
-
-  &:focus {
-    border-color: var(--tmc-color-accent, #2454d6);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmc-color-accent, #2454d6) 24%, transparent);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.58;
-  }
-
-  &[aria-invalid="true"] {
-    border-color: var(--tmc-color-danger, #b42318);
-  }
-`;
-function isTransparentBackground(color) {
-    return !color || color === "transparent" || /rgba\([^)]*,\s*(?:0|0?\.0+)\s*\)$/i.test(color);
-}
-function getEffectiveBackground(element) {
-    let current = element;
-    while (current) {
-        const background = window.getComputedStyle(current).backgroundColor;
-        if (!isTransparentBackground(background)) {
-            return background;
-        }
-        current = current.parentElement;
-    }
-    const bodyBackground = window.getComputedStyle(document.body).backgroundColor;
-    return isTransparentBackground(bodyBackground) ? window.getComputedStyle(document.documentElement).backgroundColor : bodyBackground;
-}
-export function useContrastedFieldStyle(style) {
-    const ref = useRef(null);
-    const [textColor, setTextColor] = useState();
-    useEffect(() => {
-        const element = ref.current;
-        if (!element) {
-            return;
-        }
-        const hex = rgbToHex(getEffectiveBackground(element));
-        if (hex) {
-            setTextColor(getReadableTextColor(hex));
-        }
-    }, [style]);
-    return {
-        ref,
-        style: {
-            "--tmc-field-auto-text": textColor,
-            ...style,
-        },
-    };
-}
-export function useContrastedInputStyle(style) {
-    const ref = useRef(null);
-    const [textColor, setTextColor] = useState();
-    useEffect(() => {
-        const element = ref.current;
-        if (!element) {
-            return;
-        }
-        const hex = rgbToHex(getEffectiveBackground(element));
-        if (hex) {
-            setTextColor(getReadableTextColor(hex));
-        }
-    }, [style]);
-    return {
-        ref,
-        style: {
-            "--tmc-input-auto-text": textColor,
-            ...style,
-        },
-    };
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
+
+export { classNames };

package/dist/config/component-config.js

@@ -1,6 +1,8 @@
-export function defineComponentConfig(config) {
-    return config;
+function defineComponentConfig(config) {
+  return config;
 }
-export function readConfigProps(config) {
-    return config.props;
+function readConfigProps(config) {
+  return config.props;
 }
+
+export { defineComponentConfig, readConfigProps };

package/dist/index.js

@@ -1,11 +1,16 @@
-export * from "./components/button";
-export * from "./components/code-block";
-export * from "./components/checkbox";
-export * from "./components/divider";
-export * from "./components/radio";
-export * from "./components/slider";
-export * from "./components/text-input";
-export * from "./config/component-config";
-export * from "./path-map";
-export * from "./tokens";
-export * from "./utils/color";
+export { defineComponentConfig, readConfigProps } from './config/component-config.js';
+export { darken, getReadableTextColor, invertAndGrayscaleHex, isValidHex, normalizeHex, rgbToHex } from './utils/color.js';
+export { Button } from './components/button/Button.js';
+export { Checkbox } from './components/checkbox/Checkbox.js';
+export { CodeBlock } from './components/code-block/CodeBlock.js';
+export { Divider } from './components/divider/Divider.js';
+export { EmailField, PasswordField, PhoneNumberField, UsernameField } from './components/text-input/AuthFields.js';
+export { Radio, RadioGroup } from './components/radio/Radio.js';
+export { Slider } from './components/slider/Slider.js';
+export { SmartRadioGroup } from './components/radio/Radio.client.js';
+export { Switch } from './components/checkbox/Switch.js';
+export { TextArea } from './components/text-input/TextArea.js';
+export { TextInput } from './components/text-input/TextInput.js';
+export { defaultAssetPathAliases, resolveAssetPath } from './path-map/asset-path-map.js';
+export { default as defaultTheme } from './tokens/default-theme.json.js';
+export { useContrastedFieldStyle, useContrastedInputStyle } from './components/text-input/contrast.client.js';

package/dist/path-map/asset-path-map.js

@@ -1,28 +1,35 @@
-export const defaultAssetPathAliases = {
-    "@audios/": "resources/assets/audios/",
-    "@audio/": "resources/assets/audios/",
-    "@images/": "resources/assets/images/",
-    "@videos/": "resources/assets/videos/",
+const defaultAssetPathAliases = {
+  "@audios/": "resources/assets/audios/",
+  "@audio/": "resources/assets/audios/",
+  "@images/": "resources/assets/images/",
+  "@videos/": "resources/assets/videos/"
 };
 function stripEdgeSlashes(value) {
-    return value.replace(/^\/+|\/+$/g, "");
+  return value.replace(/^\/+|\/+$/g, "");
 }
 function mapAlias(path, aliases) {
-    for (const [alias, replacement] of Object.entries(aliases)) {
-        if (path.startsWith(alias)) {
-            return path.replace(alias, replacement);
-        }
+  for (const [alias, replacement] of Object.entries(aliases)) {
+    if (path.startsWith(alias)) {
+      return path.replace(alias, replacement);
     }
-    return path;
+  }
+  return path;
 }
-export function resolveAssetPath(path, { aliases = defaultAssetPathAliases, cdnBase = "https://cdn.themodcraft.net", mode = "development", publicBasePath = "", } = {}) {
-    if (!path || /^https?:\/\//.test(path)) {
-        return path;
-    }
-    const internalPath = stripEdgeSlashes(mapAlias(path, aliases));
-    if (mode === "production") {
-        return `${stripEdgeSlashes(cdnBase)}/${internalPath}`;
-    }
-    const base = stripEdgeSlashes(publicBasePath);
-    return `/${[base, internalPath].filter(Boolean).join("/")}`;
+function resolveAssetPath(path, {
+  aliases = defaultAssetPathAliases,
+  cdnBase = "https://cdn.themodcraft.net",
+  mode = "development",
+  publicBasePath = ""
+} = {}) {
+  if (!path || /^https?:\/\//.test(path)) {
+    return path;
+  }
+  const internalPath = stripEdgeSlashes(mapAlias(path, aliases));
+  if (mode === "production") {
+    return `${stripEdgeSlashes(cdnBase)}/${internalPath}`;
+  }
+  const base = stripEdgeSlashes(publicBasePath);
+  return `/${[base, internalPath].filter(Boolean).join("/")}`;
 }
+
+export { defaultAssetPathAliases, resolveAssetPath };

package/dist/path-map/index.js

@@ -1 +1 @@
-export { defaultAssetPathAliases, resolveAssetPath, } from "./asset-path-map";
+export { defaultAssetPathAliases, resolveAssetPath } from './asset-path-map.js';

package/dist/styles/index.css

@@ -1,67 +1 @@
-:root {
-  color-scheme: light dark;
-  --tmc-color-surface: #f3f5f8;
-  --tmc-color-surface-muted: #e7ebf0;
-  --tmc-color-surface-raised: #fbfcfe;
-  --tmc-color-text: #151821;
-  --tmc-color-text-muted: #5f6b7a;
-  --tmc-color-border: #d7dde5;
-  --tmc-color-accent: #2454d6;
-  --tmc-color-accent-text: #f7faff;
-  --tmc-color-hover: color-mix(in srgb, var(--tmc-color-accent, #2454d6) 10%, transparent);
-  --tmc-color-focus: #d99a00;
-  --tmc-color-danger: #b42318;
-  --tmc-radius-sm: 4px;
-  --tmc-radius-md: 6px;
-  --tmc-radius-lg: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --tmc-color-surface: #181b22;
-    --tmc-color-surface-muted: #232832;
-    --tmc-color-surface-raised: #20242d;
-    --tmc-color-text: #f2f5f8;
-    --tmc-color-text-muted: #aab4c0;
-    --tmc-color-border: #333b48;
-    --tmc-color-accent: #6ea3ff;
-    --tmc-color-accent-text: #10151f;
-    --tmc-color-hover: color-mix(in srgb, var(--tmc-color-accent, #6ea3ff) 14%, transparent);
-    --tmc-color-focus: #f2b84b;
-    --tmc-color-danger: #ff7a70;
-  }
-}
-
-:root[data-tmc-theme-mode="light"] {
-  color-scheme: light;
-  --tmc-color-surface: #f3f5f8;
-  --tmc-color-surface-muted: #e7ebf0;
-  --tmc-color-surface-raised: #fbfcfe;
-  --tmc-color-text: #151821;
-  --tmc-color-text-muted: #5f6b7a;
-  --tmc-color-border: #d7dde5;
-  --tmc-color-accent: #2454d6;
-  --tmc-color-accent-text: #f7faff;
-  --tmc-color-hover: color-mix(in srgb, var(--tmc-color-accent, #2454d6) 10%, transparent);
-  --tmc-color-focus: #d99a00;
-  --tmc-color-danger: #b42318;
-}
-
-:root[data-tmc-theme-mode="dark"] {
-  color-scheme: dark;
-  --tmc-color-surface: #181b22;
-  --tmc-color-surface-muted: #232832;
-  --tmc-color-surface-raised: #20242d;
-  --tmc-color-text: #f2f5f8;
-  --tmc-color-text-muted: #aab4c0;
-  --tmc-color-border: #333b48;
-  --tmc-color-accent: #6ea3ff;
-  --tmc-color-accent-text: #10151f;
-  --tmc-color-hover: color-mix(in srgb, var(--tmc-color-accent, #6ea3ff) 14%, transparent);
-  --tmc-color-focus: #f2b84b;
-  --tmc-color-danger: #ff7a70;
-}
-
-* {
-  box-sizing: border-box;
-}
+:root{color-scheme:light dark;--tmc-color-surface:#f3f5f8;--tmc-color-surface-muted:#e7ebf0;--tmc-color-surface-raised:#fbfcfe;--tmc-color-text:#151821;--tmc-color-text-muted:#5f6b7a;--tmc-color-border:#d7dde5;--tmc-color-accent:#2454d6;--tmc-color-accent-text:#f7faff;--tmc-color-hover:color-mix(in srgb,var(--tmc-color-accent,#2454d6) 10%,transparent);--tmc-color-focus:#d99a00;--tmc-color-danger:#b42318;--tmc-radius-sm:4px;--tmc-radius-md:6px;--tmc-radius-lg:8px}@media (prefers-color-scheme:dark){:root{--tmc-color-surface:#181b22;--tmc-color-surface-muted:#232832;--tmc-color-surface-raised:#20242d;--tmc-color-text:#f2f5f8;--tmc-color-text-muted:#aab4c0;--tmc-color-border:#333b48;--tmc-color-accent:#6ea3ff;--tmc-color-accent-text:#10151f;--tmc-color-hover:color-mix(in srgb,var(--tmc-color-accent,#6ea3ff) 14%,transparent);--tmc-color-focus:#f2b84b;--tmc-color-danger:#ff7a70}}:root[data-tmc-theme-mode=light]{color-scheme:light;--tmc-color-surface:#f3f5f8;--tmc-color-surface-muted:#e7ebf0;--tmc-color-surface-raised:#fbfcfe;--tmc-color-text:#151821;--tmc-color-text-muted:#5f6b7a;--tmc-color-border:#d7dde5;--tmc-color-accent:#2454d6;--tmc-color-accent-text:#f7faff;--tmc-color-hover:color-mix(in srgb,var(--tmc-color-accent,#2454d6) 10%,transparent);--tmc-color-focus:#d99a00;--tmc-color-danger:#b42318}:root[data-tmc-theme-mode=dark]{color-scheme:dark;--tmc-color-surface:#181b22;--tmc-color-surface-muted:#232832;--tmc-color-surface-raised:#20242d;--tmc-color-text:#f2f5f8;--tmc-color-text-muted:#aab4c0;--tmc-color-border:#333b48;--tmc-color-accent:#6ea3ff;--tmc-color-accent-text:#10151f;--tmc-color-hover:color-mix(in srgb,var(--tmc-color-accent,#6ea3ff) 14%,transparent);--tmc-color-focus:#f2b84b;--tmc-color-danger:#ff7a70}*{box-sizing:border-box}

package/dist/tokens/default-theme.json.js

@@ -0,0 +1,34 @@
+const name = "tmc-default";
+const color = {
+	surface: "#ffffff",
+	surfaceMuted: "#f6f7f9",
+	surfaceRaised: "#ffffff",
+	text: "#111827",
+	textMuted: "#5f6b7a",
+	border: "#d7dde5",
+	accent: "#0b63ce",
+	accentText: "#ffffff",
+	focus: "#ffb020",
+	danger: "#b42318"
+};
+const radius = {
+	sm: "4px",
+	md: "6px",
+	lg: "8px"
+};
+const space = {
+	"1": "4px",
+	"2": "8px",
+	"3": "12px",
+	"4": "16px",
+	"6": "24px",
+	"8": "32px"
+};
+const defaultTheme = {
+	name: name,
+	color: color,
+	radius: radius,
+	space: space
+};
+
+export { color, defaultTheme as default, name, radius, space };

package/dist/tokens/index.js

@@ -1,2 +1 @@
-import defaultTheme from "./default-theme.json";
-export { defaultTheme };
+export { default as defaultTheme } from './default-theme.json.js';

package/dist/utils/color.js

@@ -1,66 +1,55 @@
-export function isValidHex(hex) {
-    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex.trim());
+function isValidHex(hex) {
+  return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex.trim());
 }
-export function normalizeHex(hex) {
-    const value = hex.trim();
-    if (/^#[0-9A-Fa-f]{3}$/.test(value)) {
-        return `#${value
-            .slice(1)
-            .split("")
-            .map((channel) => `${channel}${channel}`)
-            .join("")}`.toUpperCase();
-    }
-    if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
-        return value.toUpperCase();
-    }
-    return null;
+function normalizeHex(hex) {
+  const value = hex.trim();
+  if (/^#[0-9A-Fa-f]{3}$/.test(value)) {
+    return `#${value.slice(1).split("").map(channel => `${channel}${channel}`).join("")}`.toUpperCase();
+  }
+  if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+    return value.toUpperCase();
+  }
+  return null;
 }
-export function rgbToHex(rgb) {
-    const result = rgb.match(/\d+/g);
-    if (!result || result.length < 3) {
-        return null;
-    }
-    const [r, g, b] = result.map(Number);
-    return `#${[r, g, b]
-        .map((channel) => Math.max(0, Math.min(255, channel)).toString(16).padStart(2, "0"))
-        .join("")
-        .toUpperCase()}`;
+function rgbToHex(rgb) {
+  const result = rgb.match(/\d+/g);
+  if (!result || result.length < 3) {
+    return null;
+  }
+  const [r, g, b] = result.map(Number);
+  return `#${[r, g, b].map(channel => Math.max(0, Math.min(255, channel)).toString(16).padStart(2, "0")).join("").toUpperCase()}`;
 }
-export function darken(hex, amount) {
-    const normalized = normalizeHex(hex);
-    if (!normalized) {
-        return "#000000";
-    }
-    const r = Math.max(0, parseInt(normalized.slice(1, 3), 16) - amount);
-    const g = Math.max(0, parseInt(normalized.slice(3, 5), 16) - amount);
-    const b = Math.max(0, parseInt(normalized.slice(5, 7), 16) - amount);
-    return `#${[r, g, b]
-        .map((channel) => channel.toString(16).padStart(2, "0"))
-        .join("")
-        .toUpperCase()}`;
+function darken(hex, amount) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) {
+    return "#000000";
+  }
+  const r = Math.max(0, parseInt(normalized.slice(1, 3), 16) - amount);
+  const g = Math.max(0, parseInt(normalized.slice(3, 5), 16) - amount);
+  const b = Math.max(0, parseInt(normalized.slice(5, 7), 16) - amount);
+  return `#${[r, g, b].map(channel => channel.toString(16).padStart(2, "0")).join("").toUpperCase()}`;
 }
-export function invertAndGrayscaleHex(hex) {
-    const normalized = normalizeHex(hex);
-    if (!normalized) {
-        return "#000000";
-    }
-    const r = 255 - parseInt(normalized.slice(1, 3), 16);
-    const g = 255 - parseInt(normalized.slice(3, 5), 16);
-    const b = 255 - parseInt(normalized.slice(5, 7), 16);
-    const gray = Math.round(0.3 * r + 0.59 * g + 0.11 * b);
-    return `#${[gray, gray, gray]
-        .map((channel) => channel.toString(16).padStart(2, "0"))
-        .join("")
-        .toUpperCase()}`;
+function invertAndGrayscaleHex(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) {
+    return "#000000";
+  }
+  const r = 255 - parseInt(normalized.slice(1, 3), 16);
+  const g = 255 - parseInt(normalized.slice(3, 5), 16);
+  const b = 255 - parseInt(normalized.slice(5, 7), 16);
+  const gray = Math.round(0.3 * r + 0.59 * g + 0.11 * b);
+  return `#${[gray, gray, gray].map(channel => channel.toString(16).padStart(2, "0")).join("").toUpperCase()}`;
 }
-export function getReadableTextColor(hex) {
-    const normalized = normalizeHex(hex);
-    if (!normalized) {
-        return "#151821";
-    }
-    const r = parseInt(normalized.slice(1, 3), 16);
-    const g = parseInt(normalized.slice(3, 5), 16);
-    const b = parseInt(normalized.slice(5, 7), 16);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 145 ? "#151821" : "#F7FAFC";
+function getReadableTextColor(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) {
+    return "#151821";
+  }
+  const r = parseInt(normalized.slice(1, 3), 16);
+  const g = parseInt(normalized.slice(3, 5), 16);
+  const b = parseInt(normalized.slice(5, 7), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 145 ? "#151821" : "#F7FAFC";
 }
+
+export { darken, getReadableTextColor, invertAndGrayscaleHex, isValidHex, normalizeHex, rgbToHex };

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@themodcraft/core-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "publishConfig": {
     "access": "public"
   },
   "type": "module",
-  "files": ["dist"],
-  "sideEffects": ["./dist/styles/*.css"],
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,10 +24,6 @@
     "prepack": "npm run build",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1"
-  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/dist/components/button/Button.types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/checkbox/Checkbox.types.js

@@ -1 +0,0 @@
-export {};