@themodcraft/core-ui 0.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,16 @@
+# `@themodcraft/core-ui`
+
+Base UI package for the library.
+
+Current scope:
+- Button, checkbox, switch, radio, divider, auth fields, text input, text area, code block, and range slider primitives
+- Shared config helpers
+- Asset path mapping
+- Core theme tokens and styles
+
+Install:
+```bash
+npm install @themodcraft/core-ui
+```
+
+This package publishes compiled output only.

package/dist/components/button/Button.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonProps } from "./Button.types";
-export declare function Button({ className, size, tone, type, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ active, btype, className, labeling, onClick, onMouseOver, size, tone, buttonStyleType, style, type, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/components/button/Button.js

@@ -1,21 +1,123 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-const baseClasses = "inline-flex items-center justify-center rounded-md border font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50";
-const sizeClasses = {
-    sm: "h-8 px-3 text-sm",
-    md: "h-10 px-4 text-sm",
+import styled from "@emotion/styled";
+import { darken, getReadableTextColor } from "../../utils/color";
+const toneToStyleType = {
+    neutral: "normal",
+    accent: "submit",
+    danger: "danger",
 };
-const toneClasses = {
-    neutral: "border-zinc-300 bg-white text-zinc-950 hover:bg-zinc-100 focus-visible:outline-zinc-500",
-    accent: "border-blue-700 bg-blue-700 text-white hover:bg-blue-800 focus-visible:outline-amber-400",
-    danger: "border-red-700 bg-red-700 text-white hover:bg-red-800 focus-visible:outline-amber-400",
+const sizeStyles = {
+    sm: {
+        fontSize: "0.875rem",
+        minHeight: "2rem",
+        padding: "0 0.75rem",
+    },
+    md: {
+        fontSize: "0.95rem",
+        minHeight: "5vh",
+        padding: "0 1rem",
+    },
 };
-export function Button({ className, size = "md", tone = "neutral", type = "button", ...props }) {
-    return (_jsx("button", { className: [
-            baseClasses,
-            sizeClasses[size],
-            toneClasses[tone],
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), type: type, ...props }));
+const StyledButton = styled.button `
+  --button-color: var(--tmc-color-surface-raised, #fbfcfe);
+  --button-text-color: var(--tmc-color-text, #151821);
+  --button-shadow-color: rgba(21, 24, 33, 0.18);
+  --button-hover-color: var(--tmc-color-surface-muted, #e7ebf0);
+  --button-focus-color: var(--tmc-color-focus, #d99a00);
+  align-items: center;
+  background-color: var(--button-color);
+  border: none;
+  border-radius: 15px;
+  box-shadow:
+    3px 3px 6px 1px var(--button-shadow-color),
+    inset -1px -1px 20px -8px var(--button-shadow-color);
+  color: var(--button-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  font-weight: 600;
+  gap: 0.5rem;
+  height: auto;
+  justify-content: center;
+  margin: 10px;
+  min-height: ${({ $size }) => sizeStyles[$size].minHeight};
+  padding: ${({ $size }) => sizeStyles[$size].padding};
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+  width: 100%;
+
+  &:hover {
+    background-color: var(--button-hover-color);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--button-focus-color);
+    outline-offset: 3px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+    pointer-events: none;
+  }
+`;
+function resolveButtonPalette(styleType) {
+    switch (styleType) {
+        case "submit":
+            return getDynamicPalette("#2454D6");
+        case "success":
+            return getDynamicPalette("#1F9D55");
+        case "warning":
+            return getDynamicPalette("#D97706");
+        case "danger":
+            return getDynamicPalette("#DC2626");
+        case "normal":
+        default:
+            return {
+                background: "var(--tmc-button-surface, var(--tmc-color-surface-raised, #fbfcfe))",
+                focus: "var(--tmc-button-focus, var(--tmc-color-focus, #d99a00))",
+                hover: "var(--tmc-button-hover, var(--tmc-color-surface-muted, #e7ebf0))",
+                shadow: "var(--tmc-button-shadow, rgba(21, 24, 33, 0.18))",
+                text: "var(--tmc-button-text, var(--tmc-color-text, #151821))",
+            };
+    }
+}
+function getDynamicPalette(background) {
+    return {
+        background,
+        focus: darken(background, 28),
+        hover: darken(background, 24),
+        shadow: darken(background, 54),
+        text: getReadableTextColor(background),
+    };
+}
+function isButtonActive(active) {
+    return active !== false && active !== "false";
+}
+export function Button({ active = true, btype = "button", className, labeling, onClick, onMouseOver, size = "md", tone = "neutral", buttonStyleType = toneToStyleType[tone], style, type, children, ...props }) {
+    const palette = resolveButtonPalette(buttonStyleType);
+    const cssVariables = {
+        "--button-color": palette.background,
+        "--button-focus-color": palette.focus,
+        "--button-hover-color": palette.hover,
+        "--button-shadow-color": palette.shadow,
+        "--button-text-color": palette.text,
+    };
+    return (_jsx(StyledButton, { "$size": size, className: className, onClick: (event) => {
+            if (!isButtonActive(active)) {
+                event.preventDefault();
+                return;
+            }
+            onClick?.(event);
+        }, onMouseOver: (event) => {
+            onMouseOver?.(event);
+        }, style: { ...cssVariables, ...style }, type: buttonStyleType === "submit" ? "submit" : (type ?? btype), ...props, children: children ?? labeling }));
 }

package/dist/components/button/Button.types.d.ts

@@ -1,8 +1,13 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 export type ButtonSize = "sm" | "md";
 export type ButtonTone = "neutral" | "accent" | "danger";
+export type LegacyButtonStyleType = "danger" | "normal" | "submit" | "success" | "warning";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    children: ReactNode;
+    active?: boolean | "false" | "true";
+    btype?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    buttonStyleType?: LegacyButtonStyleType;
+    children?: ReactNode;
+    labeling?: ReactNode;
     size?: ButtonSize;
     tone?: ButtonTone;
 }

package/dist/components/button/index.d.ts

@@ -1,2 +1,2 @@
 export { Button } from "./Button";
-export type { ButtonProps, ButtonSize, ButtonTone } from "./Button.types";
+export type { ButtonProps, ButtonSize, ButtonTone, LegacyButtonStyleType } from "./Button.types";

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from "./Checkbox.types";
+export declare function Checkbox({ description, label, children, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContrastedFieldStyle } from "../text-input/shared";
+const CheckboxRoot = styled.label `
+  align-items: flex-start;
+  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.7rem;
+`;
+const CheckboxInput = styled.input `
+  accent-color: var(--cta-color, #30fa00);
+  cursor: pointer;
+  flex: 0 0 auto;
+  height: 1.1rem;
+  margin-top: 0.1rem;
+  width: 1.1rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--cta-color, #30fa00);
+    outline-offset: 3px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+const CheckboxCopy = styled.span `
+  display: grid;
+  gap: 0.2rem;
+  line-height: 1.35;
+`;
+const CheckboxLabel = styled.span `
+  color: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+`;
+const CheckboxDescription = styled.span `
+  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
+  font-size: 0.82rem;
+`;
+export function Checkbox({ description, label, children, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    return (_jsxs(CheckboxRoot, { ...fieldStyle, children: [_jsx(CheckboxInput, { type: "checkbox", ...props }), (label || description || children) && (_jsxs(CheckboxCopy, { children: [(label || children) && _jsx(CheckboxLabel, { children: label ?? children }), description && _jsx(CheckboxDescription, { children: description })] }))] }));
+}

package/dist/components/checkbox/Checkbox.types.d.ts

@@ -0,0 +1,5 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    description?: ReactNode;
+    label?: ReactNode;
+}

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

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

package/dist/components/checkbox/Switch.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from "./Checkbox.types";
+export declare function Switch({ description, label, children, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox/Switch.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContrastedFieldStyle } from "../text-input/shared";
+const SwitchRoot = styled.label `
+  align-items: center;
+  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.75rem;
+`;
+const SwitchInput = styled.input `
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  width: 0;
+`;
+const SwitchTrack = styled.span `
+  background-color: color-mix(in srgb, var(--tmc-color-surface-muted, #e7ebf0) 78%, var(--tmc-color-text, #151821) 22%);
+  border: 1px solid color-mix(in srgb, var(--tmc-color-text-muted, #5f6b7a) 38%, transparent);
+  border-radius: 34px;
+  display: inline-block;
+  flex: 0 0 auto;
+  height: 34px;
+  position: relative;
+  transition: background-color 0.4s ease, box-shadow 0.2s ease;
+  width: 60px;
+
+  &::before {
+    background-color: var(--tmc-switch-thumb, #f8fafc);
+    border-radius: 50%;
+    bottom: 4px;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.18);
+    content: "";
+    height: 24px;
+    left: 4px;
+    position: absolute;
+    transition: transform 0.4s ease;
+    width: 24px;
+  }
+`;
+const SwitchCopy = styled.span `
+  display: grid;
+  gap: 0.2rem;
+  line-height: 1.35;
+`;
+const SwitchLabel = styled.span `
+  color: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+`;
+const SwitchDescription = styled.span `
+  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
+  font-size: 0.82rem;
+`;
+const SwitchControl = styled.span `
+  display: inline-flex;
+
+  .tmc-switch-input:checked + .tmc-switch-track {
+    background-color: var(--cta-color, var(--tmc-color-accent, #2454d6));
+  }
+
+  .tmc-switch-input:focus-visible + .tmc-switch-track {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta-color, var(--tmc-color-accent, #2454d6)) 35%, transparent);
+  }
+
+  .tmc-switch-input:checked + .tmc-switch-track::before {
+    transform: translateX(28px);
+  }
+
+  .tmc-switch-input:disabled + .tmc-switch-track {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+export function Switch({ description, label, children, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    return (_jsxs(SwitchRoot, { ...fieldStyle, children: [_jsxs(SwitchControl, { children: [_jsx(SwitchInput, { className: "tmc-switch-input", type: "checkbox", ...props }), _jsx(SwitchTrack, { className: "tmc-switch-track" })] }), (label || description || children) && (_jsxs(SwitchCopy, { children: [(label || children) && _jsx(SwitchLabel, { children: label ?? children }), description && _jsx(SwitchDescription, { children: description })] }))] }));
+}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox";
+export { Switch } from "./Switch";
+export type { CheckboxProps } from "./Checkbox.types";

package/dist/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { Switch } from "./Switch";

package/dist/components/code-block/CodeBlock.d.ts

@@ -0,0 +1,2 @@
+import type { CodeBlockProps } from "./CodeBlock.types";
+export declare function CodeBlock({ code, filename, language, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/code-block/CodeBlock.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState } from "react";
+const CodeBlockRoot = styled.div `
+  background: #111722;
+  border: 1px solid #273244;
+  border-radius: 8px;
+  color: #eef4ff;
+  overflow: hidden;
+`;
+const CodeBlockHeader = styled.div `
+  align-items: center;
+  background: #182132;
+  border-bottom: 1px solid #273244;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  min-height: 2.35rem;
+  padding: 0.45rem 0.75rem;
+`;
+const CodeBlockTitle = styled.span `
+  color: #aebbd0;
+  font-family: var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.78rem;
+`;
+const CopyButton = styled.button `
+  background: #24314a;
+  border: 1px solid #354561;
+  border-radius: 6px;
+  color: #eef4ff;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.55rem;
+
+  &:hover {
+    background: #2d3b58;
+  }
+`;
+const CodePre = styled.pre `
+  font-family: var(--tmc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.82rem;
+  line-height: 1.65;
+  margin: 0;
+  overflow-x: auto;
+  padding: 1rem;
+`;
+export function CodeBlock({ code, filename, language, ...props }) {
+    const [copied, setCopied] = useState(false);
+    async function copyCode() {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1200);
+    }
+    return (_jsxs(CodeBlockRoot, { ...props, children: [_jsxs(CodeBlockHeader, { children: [_jsx(CodeBlockTitle, { children: filename ?? language ?? "code" }), _jsx(CopyButton, { onClick: () => void copyCode(), type: "button", children: copied ? "Copied" : "Copy" })] }), _jsx(CodePre, { children: _jsx("code", { children: code }) })] }));
+}

package/dist/components/code-block/CodeBlock.types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+    code: string;
+    filename?: ReactNode;
+    language?: string;
+}

package/dist/components/code-block/CodeBlock.types.js

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

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock.types";

package/dist/components/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock } from "./CodeBlock";

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import type { DividerProps } from "./Divider.types";
+export declare function Divider({ children, orientation, role, ...props }: DividerProps): import("react").JSX.Element;

package/dist/components/divider/Divider.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+const DividerRoot = styled.div `
+  align-items: center;
+  color: var(--tmc-color-text-muted, #5f6b7a);
+  display: flex;
+  font-size: 0.78rem;
+  font-weight: 700;
+  gap: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  width: ${({ $orientation }) => $orientation === "horizontal" ? "100%" : "auto"};
+
+  &::before,
+  &::after {
+    background: var(--tmc-color-border, #d7dde5);
+    content: "";
+    display: block;
+    flex: 1 1 auto;
+    height: ${({ $orientation }) => $orientation === "horizontal" ? "1px" : "100%"};
+    min-height: ${({ $orientation }) => $orientation === "vertical" ? "1.5rem" : "0"};
+    width: ${({ $orientation }) => $orientation === "vertical" ? "1px" : "auto"};
+  }
+
+  &:empty {
+    gap: 0;
+  }
+
+  &:empty::before {
+    display: none;
+  }
+`;
+export function Divider({ children, orientation = "horizontal", role, ...props }) {
+    return (_jsx(DividerRoot, { "$orientation": orientation, role: role ?? "separator", ...props, children: children }));
+}

package/dist/components/divider/Divider.types.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+}

package/dist/components/divider/Divider.types.js

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

package/dist/components/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from "./Divider";
+export type { DividerProps } from "./Divider.types";

package/dist/components/divider/index.js

@@ -0,0 +1 @@
+export { Divider } from "./Divider";

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupProps, RadioProps } from "./Radio.types";
+export declare function Radio({ description, label, children, ...props }: RadioProps): import("react").JSX.Element;
+export declare function RadioGroup({ defaultValue, description, label, name, onChange, onValueChange, options, value, ...props }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/radio/Radio.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContrastedFieldStyle } from "../text-input/shared";
+const RadioRoot = styled.label `
+  align-items: flex-start;
+  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.7rem;
+`;
+const RadioInput = styled.input `
+  accent-color: var(--cta-color, var(--tmc-color-accent, #2454d6));
+  cursor: pointer;
+  flex: 0 0 auto;
+  height: 1.1rem;
+  margin-top: 0.1rem;
+  width: 1.1rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--tmc-color-accent, #2454d6);
+    outline-offset: 3px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+const Copy = styled.span `
+  display: grid;
+  gap: 0.2rem;
+  line-height: 1.35;
+`;
+const Label = styled.span `
+  color: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+`;
+const Description = styled.span `
+  color: var(--tmc-field-description-text, var(--tmc-color-text-muted, var(--tmc-field-auto-text, #5f6b7a)));
+  font-size: 0.82rem;
+`;
+const GroupRoot = styled.fieldset `
+  border: 0;
+  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--tmc-color-text, #151821)));
+  display: grid;
+  gap: 0.65rem;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+`;
+const GroupLegend = styled.legend `
+  color: inherit;
+  font-size: 0.9rem;
+  font-weight: 650;
+  margin: 0 0 0.35rem;
+  padding: 0;
+`;
+const GroupDescription = styled.p `
+  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;
+  margin: -0.25rem 0 0.25rem;
+`;
+const Options = styled.div `
+  display: grid;
+  gap: 0.75rem;
+`;
+export function Radio({ description, label, children, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    return (_jsxs(RadioRoot, { ...fieldStyle, children: [_jsx(RadioInput, { type: "radio", ...props }), (label || description || children) && (_jsxs(Copy, { children: [(label || children) && _jsx(Label, { children: label ?? children }), description && _jsx(Description, { children: description })] }))] }));
+}
+export function RadioGroup({ defaultValue, description, label, name, onChange, onValueChange, options, value, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    return (_jsxs(GroupRoot, { ...fieldStyle, children: [label ? _jsx(GroupLegend, { children: label }) : null, description ? _jsx(GroupDescription, { children: description }) : null, _jsx(Options, { children: options.map((option) => (_jsx(Radio, { checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, description: option.description, disabled: props.disabled || option.disabled, name: name, onChange: (event) => { onChange?.(event); if (event.target.checked) {
+                        onValueChange?.(option.value);
+                    } }, required: props.required, value: option.value, children: option.label }, option.value))) })] }));
+}

package/dist/components/radio/Radio.types.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+export interface RadioOption {
+    description?: ReactNode;
+    disabled?: boolean;
+    label: ReactNode;
+    value: string;
+}
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    description?: ReactNode;
+    label?: ReactNode;
+}
+export interface RadioGroupProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "defaultValue" | "onChange" | "type" | "value"> {
+    defaultValue?: string;
+    description?: ReactNode;
+    label?: ReactNode;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+    options: RadioOption[];
+    value?: string;
+}

package/dist/components/radio/Radio.types.js

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

package/dist/components/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from "./Radio";
+export type { RadioGroupProps, RadioOption, RadioProps } from "./Radio.types";

package/dist/components/radio/index.js

@@ -0,0 +1 @@
+export { Radio, RadioGroup } from "./Radio";

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,2 @@
+import type { SliderProps } from "./Slider.types";
+export declare function Slider({ label, showValue, value, valueLabel, defaultValue, ...props }: SliderProps): import("react").JSX.Element;

package/dist/components/slider/Slider.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useContrastedFieldStyle } from "../text-input/shared";
+const SliderRoot = styled.label `
+  color: var(--tmc-field-label-text, var(--tmc-field-auto-text, var(--primary-text, var(--tmc-color-text, #151821))));
+  display: grid;
+  gap: 0.55rem;
+  width: 100%;
+`;
+const SliderHeader = styled.span `
+  align-items: center;
+  display: flex;
+  font-size: 0.9rem;
+  font-weight: 600;
+  gap: 0.75rem;
+  justify-content: space-between;
+`;
+const SliderValue = styled.span `
+  color: var(--tmc-field-description-text, var(--tmc-field-auto-text, var(--secondary-text, var(--tmc-color-text-muted, #5f6b7a))));
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+`;
+const SliderInput = styled.input `
+  --slider-track: var(--neutral-600, var(--tmc-color-surface-muted, #e7ebf0));
+  --slider-fill: var(--cta-color, var(--tmc-color-accent, #2454d6));
+  --slider-thumb: var(--tmc-color-surface-raised, #fbfcfe);
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  height: 1.5rem;
+  width: 100%;
+
+  &::-webkit-slider-runnable-track {
+    background: linear-gradient(90deg, var(--slider-fill), var(--slider-track));
+    border-radius: 999px;
+    height: 0.45rem;
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    background: var(--slider-thumb);
+    border: 2px solid var(--slider-fill);
+    border-radius: 999px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+    height: 1.15rem;
+    margin-top: -0.35rem;
+    width: 1.15rem;
+  }
+
+  &::-moz-range-track {
+    background: var(--slider-track);
+    border-radius: 999px;
+    height: 0.45rem;
+  }
+
+  &::-moz-range-progress {
+    background: var(--slider-fill);
+    border-radius: 999px;
+    height: 0.45rem;
+  }
+
+  &::-moz-range-thumb {
+    background: var(--slider-thumb);
+    border: 2px solid var(--slider-fill);
+    border-radius: 999px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+    height: 1.15rem;
+    width: 1.15rem;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--slider-fill);
+    outline-offset: 4px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`;
+export function Slider({ label, showValue, value, valueLabel, defaultValue, ...props }) {
+    const renderedValue = valueLabel ?? value ?? defaultValue;
+    const fieldStyle = useContrastedFieldStyle();
+    return (_jsxs(SliderRoot, { ...fieldStyle, children: [(label || showValue) && (_jsxs(SliderHeader, { children: [label && _jsx("span", { children: label }), showValue && renderedValue !== undefined && _jsx(SliderValue, { children: renderedValue })] })), _jsx(SliderInput, { defaultValue: defaultValue, type: "range", value: value, ...props })] }));
+}

package/dist/components/slider/Slider.types.d.ts

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: ReactNode;
+    showValue?: boolean;
+    valueLabel?: ReactNode;
+}

package/dist/components/slider/Slider.types.js

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

package/dist/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps } from "./Slider.types";

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./Slider";

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

@@ -0,0 +1,6 @@
+import type { TextInputProps } from "./TextInput.types";
+export type AuthFieldProps = TextInputProps;
+export declare function UsernameField({ autoComplete, label, type, ...props }: AuthFieldProps): import("react").JSX.Element;
+export declare function EmailField({ autoComplete, inputMode, label, type, ...props }: AuthFieldProps): import("react").JSX.Element;
+export declare function PasswordField({ autoComplete, label, type, ...props }: AuthFieldProps): import("react").JSX.Element;
+export declare function PhoneNumberField({ autoComplete, inputMode, label, type, ...props }: AuthFieldProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from "./TextInput";
+export function UsernameField({ autoComplete = "username", label = "Username", type, ...props }) {
+    return _jsx(TextInput, { autoComplete: autoComplete, label: label, type: type ?? "text", ...props });
+}
+export function EmailField({ autoComplete = "email", inputMode = "email", label = "Email", type, ...props }) {
+    return _jsx(TextInput, { autoComplete: autoComplete, inputMode: inputMode, label: label, type: type ?? "email", ...props });
+}
+export function PasswordField({ autoComplete = "current-password", label = "Password", type, ...props }) {
+    return _jsx(TextInput, { autoComplete: autoComplete, label: label, type: type ?? "password", ...props });
+}
+export function PhoneNumberField({ autoComplete = "tel", inputMode = "tel", label = "Phone number", type, ...props }) {
+    return _jsx(TextInput, { autoComplete: autoComplete, inputMode: inputMode, label: label, type: type ?? "tel", ...props });
+}

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

@@ -0,0 +1,2 @@
+import type { TextAreaProps } from "./TextInput.types";
+export declare function TextArea({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }: TextAreaProps): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { FieldDescription, FieldError, FieldLabel, FieldRoot, inputSurfaceStyles, useContrastedFieldStyle, useContrastedInputStyle, } from "./shared";
+const StyledTextArea = styled.textarea `
+  ${inputSurfaceStyles}
+  line-height: 1.5;
+  max-height: var(--tmc-textarea-max-height, 18rem);
+  min-height: 7rem;
+  overflow: auto;
+  padding: 0.75rem 0.85rem;
+  resize: vertical;
+`;
+export function TextArea({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    const inputStyle = useContrastedInputStyle(style);
+    return (_jsxs(FieldRoot, { ...fieldStyle, children: [label && _jsx(FieldLabel, { children: label }), _jsx(StyledTextArea, { "aria-invalid": ariaInvalid ?? Boolean(error), ...inputStyle, ...props }), description && !error ? _jsx(FieldDescription, { children: description }) : null, error ? _jsx(FieldError, { children: error }) : null] }));
+}

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

@@ -0,0 +1,2 @@
+import type { TextInputProps } from "./TextInput.types";
+export declare function TextInput({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }: TextInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { FieldDescription, FieldError, FieldLabel, FieldRoot, inputSurfaceStyles, useContrastedFieldStyle, useContrastedInputStyle, } from "./shared";
+const StyledInput = styled.input `
+  ${inputSurfaceStyles}
+  min-height: 2.6rem;
+  padding: 0 0.85rem;
+`;
+export function TextInput({ description, error, label, "aria-invalid": ariaInvalid, style, ...props }) {
+    const fieldStyle = useContrastedFieldStyle();
+    const inputStyle = useContrastedInputStyle(style);
+    return (_jsxs(FieldRoot, { ...fieldStyle, children: [label && _jsx(FieldLabel, { children: label }), _jsx(StyledInput, { "aria-invalid": ariaInvalid ?? Boolean(error), ...inputStyle, ...props }), description && !error ? _jsx(FieldDescription, { children: description }) : null, error ? _jsx(FieldError, { children: error }) : null] }));
+}

package/dist/components/text-input/TextInput.types.d.ts

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    description?: ReactNode;
+    error?: ReactNode;
+    label?: ReactNode;
+}
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    description?: ReactNode;
+    error?: ReactNode;
+    label?: ReactNode;
+}

package/dist/components/text-input/TextInput.types.js

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

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

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

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

@@ -0,0 +1,3 @@
+export { EmailField, PasswordField, PhoneNumberField, UsernameField } from "./AuthFields";
+export { TextArea } from "./TextArea";
+export { TextInput } from "./TextInput";

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

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

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

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

package/dist/index.d.ts

@@ -1,4 +1,11 @@
 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";

package/dist/index.js

@@ -1,4 +1,11 @@
 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";

package/dist/styles/index.css

@@ -1,19 +1,67 @@
 :root {
-  --tmc-color-surface: #ffffff;
-  --tmc-color-surface-muted: #f6f7f9;
-  --tmc-color-surface-raised: #ffffff;
-  --tmc-color-text: #111827;
+  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: #0b63ce;
-  --tmc-color-accent-text: #ffffff;
-  --tmc-color-focus: #ffb020;
+  --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/utils/color.d.ts

@@ -0,0 +1,6 @@
+export declare function isValidHex(hex: string): boolean;
+export declare function normalizeHex(hex: string): string | null;
+export declare function rgbToHex(rgb: string): string | null;
+export declare function darken(hex: string, amount: number): string;
+export declare function invertAndGrayscaleHex(hex: string): string;
+export declare function getReadableTextColor(hex: string): "#151821" | "#F7FAFC";

package/dist/utils/color.js

@@ -0,0 +1,66 @@
+export 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;
+}
+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()}`;
+}
+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()}`;
+}
+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()}`;
+}
+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";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@themodcraft/core-ui",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,6 +20,10 @@
     "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"