@refraktor/core 0.0.1

package/build/components/button/button.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Button } from "./button";
+export type { ButtonProps, ButtonClassNames } from "./button.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/build/components/button/index.js

@@ -0,0 +1 @@
+export { default as Button } from "./button";

package/build/components/checkbox/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxGroupFactoryPayload } from "../checkbox.types";
+declare const CheckboxGroup: import("../../..").RefraktorComponent<CheckboxGroupFactoryPayload>;
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/build/components/checkbox/checkbox-group/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEH,2BAA2B,EAE9B,MAAM,mBAAmB,CAAC;AAM3B,QAAA,MAAM,aAAa,oEAkEjB,CAAC;AAMH,eAAe,aAAa,CAAC"}

package/build/components/checkbox/checkbox-group/checkbox-group.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../../utils";
+import { CheckboxGroupProvider } from "../checkbox.context";
+const defaultProps = {
+    orientation: "vertical"
+};
+const CheckboxGroup = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, name, disabled, size, radius, orientation, className, classNames, ...props } = useProps("CheckboxGroup", defaultProps, _props);
+    const classes = useClassNames("CheckboxGroup", classNames);
+    const _id = useId(id);
+    const [values, setValues] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: [],
+        onChange
+    });
+    const handleValueChange = (checkboxValue, checked) => {
+        const nextValues = checked
+            ? values.includes(checkboxValue)
+                ? values
+                : [...values, checkboxValue]
+            : values.filter((itemValue) => itemValue !== checkboxValue);
+        setValues(nextValues);
+    };
+    return (_jsx(CheckboxGroupProvider, { value: {
+            value: values,
+            onValueChange: handleValueChange,
+            name,
+            disabled,
+            size,
+            radius
+        }, children: _jsx("div", { ref: ref, id: _id, className: cx("inline-flex", orientation === "horizontal"
+                ? "flex-row flex-wrap gap-3"
+                : "flex-col gap-2", classes.root, className), ...props, children: children }) }));
+});
+CheckboxGroup.displayName = "@refraktor/core/CheckboxGroup";
+CheckboxGroup.configure = createComponentConfig();
+CheckboxGroup.classNames = createClassNamesConfig();
+export default CheckboxGroup;

package/build/components/checkbox/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from "./checkbox-group";
+//# sourceMappingURL=index.d.ts.map

package/build/components/checkbox/checkbox-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/components/checkbox/checkbox-group/index.js

@@ -0,0 +1 @@
+export { default as CheckboxGroup } from "./checkbox-group";

package/build/components/checkbox/checkbox.context.d.ts

@@ -0,0 +1,14 @@
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+export interface CheckboxGroupContextValue {
+    value: string[];
+    onValueChange: (checkboxValue: string, checked: boolean) => void;
+    name?: string;
+    disabled?: boolean;
+    size?: RefraktorSize;
+    radius?: RefraktorRadius;
+}
+export declare const CheckboxGroupProvider: ({ value, children }: {
+    value: CheckboxGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useCheckboxGroupContext: () => CheckboxGroupContextValue | null;
+//# sourceMappingURL=checkbox.context.d.ts.map

package/build/components/checkbox/checkbox.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.context.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED,eAAO,MAAO,qBAAqB;;;+CAAE,uBAAuB,wCACN,CAAC"}

package/build/components/checkbox/checkbox.context.js

@@ -0,0 +1,2 @@
+import { createOptionalContext } from "@refraktor/utils";
+export const [CheckboxGroupProvider, useCheckboxGroupContext] = createOptionalContext();

package/build/components/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxFactoryPayload } from "./checkbox.types";
+declare const Checkbox: import("../..").RefraktorComponent<CheckboxFactoryPayload>;
+export default Checkbox;
+//# sourceMappingURL=checkbox.d.ts.map

package/build/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEH,sBAAsB,EAEzB,MAAM,kBAAkB,CAAC;AAO1B,QAAA,MAAM,QAAQ,4DAgKZ,CAAC;AAOH,eAAe,QAAQ,CAAC"}

package/build/components/checkbox/checkbox.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useId, useMergedRefs, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { CheckIcon, MinusIcon } from "../../icons";
+import { CheckboxGroup } from "./checkbox-group";
+import { useCheckboxGroupContext } from "./checkbox.context";
+import { getSize } from "./checkbox.styles";
+const defaultProps = {
+    labelPosition: "right"
+};
+const Checkbox = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, checked, defaultChecked, onChange, indeterminate, value, name, size, radius, disabled, label, labelPosition, description, error, className, classNames, ...props } = useProps("Checkbox", defaultProps, _props);
+    const classes = useClassNames("Checkbox", classNames);
+    const groupContext = useCheckboxGroupContext();
+    const [uncontrolledValue, handleChange] = useUncontrolled({
+        value: checked,
+        defaultValue: defaultChecked,
+        finalValue: false
+    });
+    const _id = useId(id);
+    const inputRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, inputRef);
+    const hasGroupValue = !!groupContext && typeof value === "string";
+    const isChecked = hasGroupValue
+        ? groupContext.value.includes(value)
+        : uncontrolledValue;
+    const isIndeterminate = !!indeterminate;
+    const isDisabled = !!(disabled || groupContext?.disabled);
+    const resolvedName = name ?? groupContext?.name;
+    const resolvedSize = size ?? groupContext?.size ?? "md";
+    const resolvedRadius = radius ?? groupContext?.radius ?? "sm";
+    const sizeClass = getSize(resolvedSize);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = isIndeterminate;
+        }
+    }, [isIndeterminate, isChecked]);
+    const handleOnChange = (event) => {
+        const nextChecked = event.currentTarget.checked;
+        if (hasGroupValue) {
+            groupContext.onValueChange(value, nextChecked);
+        }
+        else {
+            handleChange(nextChecked);
+        }
+        onChange?.(event);
+    };
+    return (_jsxs("div", { className: cx("inline-flex flex-col", classes.root, className), children: [_jsxs("label", { className: cx("inline-flex items-center select-none w-fit", sizeClass.gap, isDisabled
+                    ? "opacity-50 cursor-not-allowed"
+                    : "cursor-pointer", labelPosition === "left" ? "flex-row-reverse" : "flex-row", classes.body), htmlFor: _id, children: [_jsx("input", { ...props, id: _id, ref: mergedRef, type: "checkbox", value: value, name: resolvedName, className: cx("sr-only peer", classes.input), checked: !!isChecked, onChange: handleOnChange, disabled: isDisabled, "aria-checked": isIndeterminate ? "mixed" : undefined }), _jsx("span", { className: cx("relative inline-flex items-center justify-center shrink-0 border transition-all", "bg-[var(--refraktor-bg)] border-[var(--refraktor-border)]", "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--refraktor-primary)]", "data-[checked=true]:bg-[var(--refraktor-primary)] data-[checked=true]:border-[var(--refraktor-primary)]", "data-[indeterminate=true]:bg-[var(--refraktor-primary)] data-[indeterminate=true]:border-[var(--refraktor-primary)]", sizeClass.indicator, getRadius(resolvedRadius), classes.indicator), "data-checked": isChecked, "data-indeterminate": isIndeterminate, children: (isChecked || isIndeterminate) && (_jsx("span", { className: cx("text-[var(--refraktor-primary-text)]", sizeClass.icon, classes.icon), children: isIndeterminate ? (_jsx(MinusIcon, { size: "100%" })) : (_jsx(CheckIcon, { size: "100%" })) })) }), label && (_jsx("span", { className: cx("text-[var(--refraktor-text)]", sizeClass.label, classes.label), children: label }))] }), description && (_jsx("p", { className: cx("text-[var(--refraktor-text-tertiary)] mt-1", sizeClass.description, classes.description), children: description })), error && error !== true && (_jsx("p", { className: cx("text-[var(--refraktor-colors-red-5)] mt-1 text-xs", classes.error), children: error }))] }));
+});
+Checkbox.displayName = "@refraktor/core/Checkbox";
+Checkbox.configure = createComponentConfig();
+Checkbox.classNames = createClassNamesConfig();
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;

package/build/components/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,11 @@
+import { RefraktorSize } from "../../theme";
+type CheckboxSizeStyles = {
+    indicator: string;
+    icon: string;
+    label: string;
+    description: string;
+    gap: string;
+};
+export declare const getSize: (size?: RefraktorSize) => CheckboxSizeStyles;
+export {};
+//# sourceMappingURL=checkbox.styles.d.ts.map

package/build/components/checkbox/checkbox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,kBAAkB,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAwCF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,uBAAgB,CAAC"}

package/build/components/checkbox/checkbox.styles.js

@@ -0,0 +1,38 @@
+const sizes = {
+    xs: {
+        indicator: "h-3.5 w-3.5",
+        icon: "h-2.5 w-2.5",
+        label: "text-[10px]",
+        description: "text-[10px]",
+        gap: "gap-1.5"
+    },
+    sm: {
+        indicator: "h-4 w-4",
+        icon: "h-3 w-3",
+        label: "text-xs",
+        description: "text-xs",
+        gap: "gap-2"
+    },
+    md: {
+        indicator: "h-5 w-5",
+        icon: "h-3.5 w-3.5",
+        label: "text-sm",
+        description: "text-xs",
+        gap: "gap-2"
+    },
+    lg: {
+        indicator: "h-6 w-6",
+        icon: "h-4 w-4",
+        label: "text-base",
+        description: "text-sm",
+        gap: "gap-2.5"
+    },
+    xl: {
+        indicator: "h-7 w-7",
+        icon: "h-4.5 w-4.5",
+        label: "text-lg",
+        description: "text-base",
+        gap: "gap-3"
+    }
+};
+export const getSize = (size = "md") => sizes[size];

package/build/components/checkbox/checkbox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.test.d.ts.map

package/build/components/checkbox/checkbox.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.test.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.test.tsx"],"names":[],"mappings":""}

package/build/components/checkbox/checkbox.test.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Checkbox from "./checkbox";
+describe("@refraktor/core/Checkbox", () => {
+    it("renders correctly", async () => {
+        await render(_jsx(Checkbox, { label: "Accept terms" }));
+        expect(screen.getByRole("checkbox", { name: "Accept terms" })).toBeInTheDocument();
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(Checkbox, { ref: ref, label: "Accept terms" }));
+        expect(ref.current).toBeInstanceOf(HTMLInputElement);
+        expect(ref.current?.tagName).toBe("INPUT");
+        expect(ref.current?.type).toBe("checkbox");
+    });
+    it("handles change events", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(Checkbox, { label: "Accept terms", onChange: onChange }));
+        const input = screen.getByRole("checkbox", { name: "Accept terms" });
+        await user.click(input);
+        expect(input).toBeChecked();
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+    it("supports indeterminate state", async () => {
+        await render(_jsx(Checkbox, { label: "Select all", indeterminate: true }));
+        const input = screen.getByRole("checkbox", { name: "Select all" });
+        expect(input).toHaveAttribute("aria-checked", "mixed");
+        expect(input.indeterminate).toBe(true);
+    });
+    it("supports checkbox group", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsxs(Checkbox.Group, { defaultValue: ["react"], onChange: onChange, children: [_jsx(Checkbox, { value: "react", label: "React" }), _jsx(Checkbox, { value: "vue", label: "Vue" })] }));
+        const reactInput = screen.getByRole("checkbox", { name: "React" });
+        const vueInput = screen.getByRole("checkbox", { name: "Vue" });
+        expect(reactInput).toBeChecked();
+        expect(vueInput).not.toBeChecked();
+        await user.click(vueInput);
+        expect(onChange).toHaveBeenLastCalledWith(["react", "vue"]);
+        await user.click(reactInput);
+        expect(onChange).toHaveBeenLastCalledWith(["vue"]);
+    });
+    it("propagates disabled state from group", async () => {
+        await render(_jsx(Checkbox.Group, { disabled: true, children: _jsx(Checkbox, { value: "react", label: "React" }) }));
+        expect(screen.getByRole("checkbox", { name: "React" })).toBeDisabled();
+    });
+});

package/build/components/checkbox/checkbox.types.d.ts

@@ -0,0 +1,89 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { CheckboxGroup } from "./checkbox-group";
+export type CheckboxLabelPosition = "left" | "right";
+export type CheckboxGroupOrientation = "vertical" | "horizontal";
+export type CheckboxClassNames = {
+    root?: string;
+    body?: string;
+    input?: string;
+    indicator?: string;
+    icon?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+};
+export type CheckboxGroupClassNames = {
+    root?: string;
+};
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange"> {
+    /** State of the checkbox (controlled) */
+    checked?: boolean;
+    /** Initial state of the checkbox (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback called when the checkbox state changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Whether the checkbox should display indeterminate state */
+    indeterminate?: boolean;
+    /** Value used in Checkbox.Group */
+    value?: string;
+    /** The size of the checkbox @default `md` */
+    size?: RefraktorSize;
+    /** The radius of the checkbox @default `sm` */
+    radius?: RefraktorRadius;
+    /** The label of the checkbox */
+    label?: ReactNode;
+    /** The position of the label @default `right` */
+    labelPosition?: CheckboxLabelPosition;
+    /** Error state or message */
+    error?: ReactNode;
+    /** Description below the checkbox */
+    description?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: CheckboxClassNames;
+}
+export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Checkbox items to render */
+    children: ReactNode;
+    /** Selected values (controlled) */
+    value?: string[];
+    /** Initial selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Callback called when group values change */
+    onChange?: (value: string[]) => void;
+    /** Name propagated to checkbox inputs in the group */
+    name?: string;
+    /** Whether all checkboxes in group are disabled */
+    disabled?: boolean;
+    /** Shared checkbox size */
+    size?: RefraktorSize;
+    /** Shared checkbox radius */
+    radius?: RefraktorRadius;
+    /** Layout direction @default `vertical` */
+    orientation?: CheckboxGroupOrientation;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: CheckboxGroupClassNames;
+}
+export interface CheckboxFactoryPayload extends FactoryPayload {
+    props: CheckboxProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<CheckboxProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<CheckboxClassNames>>;
+        Group: typeof CheckboxGroup;
+    };
+}
+export interface CheckboxGroupFactoryPayload extends FactoryPayload {
+    props: CheckboxGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<CheckboxGroupProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<CheckboxGroupClassNames>>;
+    };
+}
+//# sourceMappingURL=checkbox.types.d.ts.map

package/build/components/checkbox/checkbox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":"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"}

package/build/components/checkbox/checkbox.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Checkbox } from "./checkbox";
+export { CheckboxGroup } from "./checkbox-group";
+export type { CheckboxProps, CheckboxClassNames, CheckboxGroupProps, CheckboxGroupClassNames, CheckboxLabelPosition, CheckboxGroupOrientation } from "./checkbox.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EACR,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EAC3B,MAAM,kBAAkB,CAAC"}

package/build/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from "./checkbox";
+export { CheckboxGroup } from "./checkbox-group";

package/build/components/color-swatch/color-swatch.d.ts

@@ -0,0 +1,4 @@
+import { ColorSwatchFactoryPayload } from "./color-swatch.types";
+declare const ColorSwatch: import("../..").RefraktorComponent<ColorSwatchFactoryPayload>;
+export default ColorSwatch;
+//# sourceMappingURL=color-swatch.d.ts.map

package/build/components/color-swatch/color-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../../../src/components/color-swatch/color-swatch.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,sBAAsB,CAAC;AAS9B,QAAA,MAAM,WAAW,+DAuDf,CAAC;AAMH,eAAe,WAAW,CAAC"}

package/build/components/color-swatch/color-swatch.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize } from "./color-swatch.styles";
+const defaultProps = {
+    color: "transparent",
+    size: "md",
+    radius: "default"
+};
+const ColorSwatch = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, color, size, radius, children, className, classNames, ...props } = useProps("ColorSwatch", defaultProps, _props);
+    const classes = useClassNames("ColorSwatch", classNames);
+    const _id = useId(id);
+    return (_jsxs("div", { ref: ref, id: _id, className: cx("relative inline-flex items-center justify-center overflow-hidden shrink-0 border border-[var(--refraktor-border)]", getSize(size), getRadius(radius), classes.root, className), ...props, children: [_jsx("span", { "aria-hidden": true, className: cx("absolute inset-0 refraktor-transparency-grid pointer-events-none", classes.grid) }), _jsx("span", { "aria-hidden": true, className: cx("absolute inset-0 pointer-events-none", classes.color), style: { background: color } }), children && (_jsx("span", { className: cx("relative z-[1] inline-flex items-center justify-center", classes.content), children: children }))] }));
+});
+ColorSwatch.displayName = "@refraktor/core/ColorSwatch";
+ColorSwatch.configure = createComponentConfig();
+ColorSwatch.classNames = createClassNamesConfig();
+export default ColorSwatch;

package/build/components/color-swatch/color-swatch.styles.d.ts

@@ -0,0 +1,3 @@
+import { RefraktorSize } from "../../theme";
+export declare const getSize: (size?: RefraktorSize) => string;
+//# sourceMappingURL=color-swatch.styles.d.ts.map

package/build/components/color-swatch/color-swatch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/color-swatch/color-swatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAU5C,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,WAAgB,CAAC"}

package/build/components/color-swatch/color-swatch.styles.js

@@ -0,0 +1,8 @@
+const sizes = {
+    xs: "size-4",
+    sm: "size-5",
+    md: "size-6",
+    lg: "size-8",
+    xl: "size-10"
+};
+export const getSize = (size = "md") => sizes[size];

package/build/components/color-swatch/color-swatch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color-swatch.test.d.ts.map

package/build/components/color-swatch/color-swatch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.test.d.ts","sourceRoot":"","sources":["../../../src/components/color-swatch/color-swatch.test.tsx"],"names":[],"mappings":""}

package/build/components/color-swatch/color-swatch.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import ColorSwatch from "./color-swatch";
+describe("@refraktor/core/ColorSwatch", () => {
+    it("renders with provided color", async () => {
+        await render(_jsx(ColorSwatch, { color: "rgba(255, 0, 0, 0.5)", "data-testid": "swatch", classNames: { color: "custom-color" } }));
+        const swatch = screen.getByTestId("swatch");
+        const colorLayer = swatch.querySelector(".custom-color");
+        expect(colorLayer).toBeInTheDocument();
+        expect(colorLayer).toHaveStyle({ background: "rgba(255, 0, 0, 0.5)" });
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(ColorSwatch, { ref: ref, "data-testid": "swatch" }));
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(ColorSwatch, { className: "custom-root", classNames: {
+                grid: "custom-grid",
+                color: "custom-color",
+                content: "custom-content"
+            }, children: "A" }));
+        const root = container.firstElementChild;
+        const gridLayer = root.querySelector(".custom-grid");
+        const colorLayer = root.querySelector(".custom-color");
+        const contentLayer = root.querySelector(".custom-content");
+        expect(root).toHaveClass("custom-root");
+        expect(gridLayer).toBeInTheDocument();
+        expect(colorLayer).toBeInTheDocument();
+        expect(contentLayer).toBeInTheDocument();
+    });
+    it("includes transparency grid class", async () => {
+        await render(_jsx(ColorSwatch, { "data-testid": "swatch", classNames: { grid: "custom-grid" }, color: "rgba(0, 128, 255, 0.4)" }));
+        const swatch = screen.getByTestId("swatch");
+        const gridLayer = swatch.querySelector(".custom-grid");
+        expect(gridLayer).toHaveClass("refraktor-transparency-grid");
+    });
+    it("applies size and radius classes", async () => {
+        await render(_jsx(ColorSwatch, { size: "xl", radius: "full", "data-testid": "swatch" }));
+        const swatch = screen.getByTestId("swatch");
+        expect(swatch.className).toContain("size-10");
+        expect(swatch.className).toContain("rounded-[var(--refraktor-radius-full)]");
+    });
+});

package/build/components/color-swatch/color-swatch.types.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type ColorSwatchClassNames = {
+    root?: string;
+    grid?: string;
+    color?: string;
+    content?: string;
+};
+export interface ColorSwatchProps extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
+    /** Swatch color value (hex, rgb, rgba, hsl, etc.) */
+    color?: string;
+    /** Swatch size @default `md` */
+    size?: RefraktorSize;
+    /** Swatch radius @default `default` */
+    radius?: RefraktorRadius;
+    /** Optional centered content */
+    children?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ColorSwatchClassNames;
+}
+export interface ColorSwatchFactoryPayload extends FactoryPayload {
+    props: ColorSwatchProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ColorSwatchProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ColorSwatchClassNames>>;
+    };
+}
+//# sourceMappingURL=color-swatch.types.d.ts.map

package/build/components/color-swatch/color-swatch.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.types.d.ts","sourceRoot":"","sources":["../../../src/components/color-swatch/color-swatch.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,uCAAuC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,CACvD,CAAC;KACL,CAAC;CACL"}

package/build/components/color-swatch/color-swatch.types.js

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

package/build/components/color-swatch/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ColorSwatch } from "./color-swatch";
+export type { ColorSwatchProps, ColorSwatchClassNames } from "./color-swatch.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/color-swatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/color-swatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

package/build/components/color-swatch/index.js

@@ -0,0 +1 @@
+export { default as ColorSwatch } from "./color-swatch";

package/build/components/index.d.ts

@@ -0,0 +1,26 @@
+export * from "./accordion";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./checkbox";
+export * from "./color-swatch";
+export * from "./input";
+export * from "./loader";
+export * from "./modal";
+export * from "./menu";
+export * from "./number-input";
+export * from "./pagination";
+export * from "./popover";
+export * from "./portal";
+export * from "./progress";
+export * from "./progress-circle";
+export * from "./radio";
+export * from "./select";
+export * from "./slider";
+export * from "./switch";
+export * from "./tabs";
+export * from "./timeline";
+export * from "./textarea";
+export * from "./tooltip";
+export * from "./transition";
+//# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/build/components/index.js

@@ -0,0 +1,25 @@
+export * from "./accordion";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./checkbox";
+export * from "./color-swatch";
+export * from "./input";
+export * from "./loader";
+export * from "./modal";
+export * from "./menu";
+export * from "./number-input";
+export * from "./pagination";
+export * from "./popover";
+export * from "./portal";
+export * from "./progress";
+export * from "./progress-circle";
+export * from "./radio";
+export * from "./select";
+export * from "./slider";
+export * from "./switch";
+export * from "./tabs";
+export * from "./timeline";
+export * from "./textarea";
+export * from "./tooltip";
+export * from "./transition";

package/build/components/input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Input } from "./input";
+export * from "./input.types";
+//# sourceMappingURL=index.d.ts.map