@refraktor/core 0.0.3 → 0.0.5

package/build/components/button/button.styles.js

@@ -4,11 +4,11 @@ const sizes = {
     md: "text-sm px-2.5 h-8 gap-2",
     lg: "text-base px-3 h-10 gap-2.5",
     xl: "text-lg px-4 h-12 gap-3",
-    "icon-xs": "size-5",
-    "icon-sm": "size-6",
-    "icon-md": "size-8",
-    "icon-lg": "size-10",
-    "icon-xl": "size-12"
+    "icon-xs": "size-5 shrink-0",
+    "icon-sm": "size-6 shrink-0",
+    "icon-md": "size-8 shrink-0",
+    "icon-lg": "size-10 shrink-0",
+    "icon-xl": "size-12 shrink-0"
 };
 export const getSize = (size = "md") => sizes[size];
 const variants = {

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.d.ts","sourceRoot":"","sources":["../../../../src/components/chip/chip-group/chip-group.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,eAAe,CAAC;AAMvB,QAAA,MAAM,SAAS,gEAgFb,CAAC;AAMH,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../../utils";
+import { ChipGroupProvider } from "../chip.context";
+const defaultProps = {
+    orientation: "horizontal"
+};
+const ChipGroup = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, name, disabled, size, radius, variant, orientation, className, classNames, ...props } = useProps("ChipGroup", defaultProps, _props);
+    const classes = useClassNames("ChipGroup", classNames);
+    const _id = useId(id);
+    const [values, setValues] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: [],
+        onChange
+    });
+    const handleValueChange = (chipValue, selected) => {
+        const nextValues = selected
+            ? values.includes(chipValue)
+                ? values
+                : [...values, chipValue]
+            : values.filter((itemValue) => itemValue !== chipValue);
+        setValues(nextValues);
+    };
+    return (_jsx(ChipGroupProvider, { value: {
+            value: values,
+            onValueChange: handleValueChange,
+            disabled,
+            size,
+            radius,
+            variant
+        }, children: _jsxs("div", { ref: ref, id: _id, "data-disabled": disabled, "aria-disabled": disabled, className: cx("inline-flex", orientation === "vertical"
+                ? "flex-col items-start gap-2"
+                : "flex-row flex-wrap items-center gap-2", "data-[disabled=true]:opacity-50", classes.root, className), ...props, children: [children, name &&
+                    values.map((itemValue, index) => (_jsx("input", { type: "hidden", name: name, value: itemValue }, `${itemValue}-${index}`)))] }) }));
+});
+ChipGroup.displayName = "@refraktor/core/ChipGroup";
+ChipGroup.configure = createComponentConfig();
+ChipGroup.classNames = createClassNamesConfig();
+export default ChipGroup;

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { ChipVariant } from "./chip.types";
+export interface ChipGroupContextValue {
+    value: string[];
+    onValueChange: (chipValue: string, selected: boolean) => void;
+    disabled?: boolean;
+    size?: RefraktorSize;
+    radius?: RefraktorRadius;
+    variant?: ChipVariant;
+}
+export declare const ChipGroupProvider: ({ value, children }: {
+    value: ChipGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useChipGroupContext: () => ChipGroupContextValue | null;
+//# sourceMappingURL=chip.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.context.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,eAAO,MAAO,iBAAiB;;;+CAAE,mBAAmB,oCACF,CAAC"}

package/build/components/chip/chip.context.js

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

package/build/components/chip/chip.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAkB,kBAAkB,EAAa,MAAM,cAAc,CAAC;AAU7E,QAAA,MAAM,IAAI,wDAgLR,CAAC;AAOH,eAAe,IAAI,CAAC"}

package/build/components/chip/chip.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { useChipGroupContext } from "./chip.context";
+import { ChipGroup } from "./chip-group";
+import { getSize, getVariant } from "./chip.styles";
+const defaultProps = {
+    size: "sm",
+    radius: "full",
+    variant: "default",
+    selectable: false,
+    removable: false
+};
+const Chip = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, value, children, selected, defaultSelected, onSelectedChange, selectable, removable, onRemove, removeButtonLabel, leftSection, rightSection, size, radius, variant, disabled, className, classNames, onClick, onKeyDown, ...props } = useProps("Chip", defaultProps, _props);
+    const classes = useClassNames("Chip", classNames);
+    const chipGroup = useChipGroupContext();
+    const _id = useId(id);
+    const [uncontrolledSelected, setUncontrolledSelected] = useUncontrolled({
+        value: selected,
+        defaultValue: defaultSelected,
+        finalValue: false,
+        onChange: onSelectedChange
+    });
+    const hasGroupValue = !!chipGroup && typeof value === "string";
+    const isSelectable = selectable || hasGroupValue;
+    const isRemovable = removable || typeof onRemove === "function";
+    const isDisabled = !!(disabled || chipGroup?.disabled);
+    const resolvedSize = size ?? chipGroup?.size ?? "sm";
+    const resolvedRadius = radius ?? chipGroup?.radius ?? "full";
+    const resolvedVariant = variant ?? chipGroup?.variant ?? "default";
+    const isSelected = hasGroupValue
+        ? chipGroup.value.includes(value)
+        : uncontrolledSelected;
+    const toggleChip = () => {
+        if (!isSelectable || isDisabled) {
+            return;
+        }
+        const nextSelected = !isSelected;
+        if (hasGroupValue) {
+            chipGroup.onValueChange(value, nextSelected);
+            return;
+        }
+        setUncontrolledSelected(nextSelected);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        toggleChip();
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || isDisabled || !isSelectable) {
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            toggleChip();
+        }
+    };
+    const handleRemove = (event) => {
+        event.stopPropagation();
+        if (isDisabled) {
+            return;
+        }
+        if (hasGroupValue) {
+            chipGroup.onValueChange(value, false);
+        }
+        else if (isSelectable && isSelected) {
+            setUncontrolledSelected(false);
+        }
+        onRemove?.(event);
+    };
+    return (_jsxs("div", { ref: ref, id: _id, "data-selected": isSelected, "data-disabled": isDisabled, "data-selectable": isSelectable, "data-removable": isRemovable, role: isSelectable ? "button" : undefined, tabIndex: isSelectable ? (isDisabled ? -1 : 0) : undefined, "aria-pressed": isSelectable ? isSelected : undefined, "aria-disabled": isDisabled || undefined, className: cx("inline-flex w-fit max-w-full items-center justify-center border select-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none", isSelectable ? "cursor-pointer" : "cursor-default", getSize(resolvedSize), getRadius(resolvedRadius), getVariant(resolvedVariant, isSelected), classes.root, className), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: [leftSection && (_jsx("span", { className: cx("inline-flex shrink-0 items-center justify-center", classes.leftSection), "aria-hidden": "true", children: leftSection })), _jsx("span", { className: cx("truncate", classes.label), children: children }), rightSection && (_jsx("span", { className: cx("inline-flex shrink-0 items-center justify-center", classes.rightSection), "aria-hidden": "true", children: rightSection })), isRemovable && (_jsx("button", { type: "button", tabIndex: isDisabled ? -1 : 0, "aria-label": removeButtonLabel ?? "Remove chip", className: cx("inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 cursor-pointer", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", classes.removeButton), onClick: handleRemove, disabled: isDisabled, children: _jsx("span", { className: cx("inline-flex", classes.removeIcon), children: _jsx(XIcon, { size: 12 }) }) }))] }));
+});
+Chip.displayName = "@refraktor/core/Chip";
+Chip.configure = createComponentConfig();
+Chip.classNames = createClassNamesConfig();
+Chip.Group = ChipGroup;
+export default Chip;

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

@@ -0,0 +1,5 @@
+import { RefraktorSize } from "../../theme";
+import { ChipVariant } from "./chip.types";
+export declare const getSize: (size?: RefraktorSize) => string;
+export declare const getVariant: (variant?: ChipVariant, selected?: boolean) => string;
+//# sourceMappingURL=chip.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AA6B3C,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,WAAgB,CAAC;AAEnE,eAAO,MAAM,UAAU,GACnB,UAAS,WAAuB,EAChC,kBAAgB,WACiD,CAAC"}

package/build/components/chip/chip.styles.js

@@ -0,0 +1,19 @@
+const sizes = {
+    xs: "text-xs h-5 px-2 gap-1",
+    sm: "text-xs h-6 px-2.5 gap-1.5",
+    md: "text-sm h-7 px-3 gap-1.5",
+    lg: "text-base h-8 px-3.5 gap-2",
+    xl: "text-lg h-9 px-4 gap-2"
+};
+const variants = {
+    default: {
+        idle: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:bg-[var(--refraktor-bg-hover)]",
+        selected: "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] border border-[var(--refraktor-primary)]"
+    },
+    outline: {
+        idle: "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:border-[var(--refraktor-border-hover)]",
+        selected: "bg-[var(--refraktor-bg-subtle)] text-[var(--refraktor-text)] border border-[var(--refraktor-primary)]"
+    }
+};
+export const getSize = (size = "sm") => sizes[size];
+export const getVariant = (variant = "default", selected = false) => (selected ? variants[variant].selected : variants[variant].idle);

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

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

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

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

package/build/components/chip/chip.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Chip from "./chip";
+describe("@refraktor/core/Chip", () => {
+    it("renders correctly", async () => {
+        await render(_jsx(Chip, { children: "React" }));
+        expect(screen.getByText("React")).toBeInTheDocument();
+    });
+    it("forwards ref correctly", async () => {
+        const ref = createRef();
+        await render(_jsx(Chip, { ref: ref, children: "React" }));
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+    it("supports uncontrolled selected state when selectable", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Chip, { selectable: true, children: "React" }));
+        const chip = screen.getByRole("button", { name: "React" });
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+    it("supports controlled selected state", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [selected, setSelected] = useState(false);
+            return (_jsx(Chip, { selectable: true, selected: selected, onSelectedChange: setSelected, children: "React" }));
+        }
+        await render(_jsx(Demo, {}));
+        const chip = screen.getByRole("button", { name: "React" });
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+    });
+    it("handles keyboard toggling", async () => {
+        const user = userEvent.setup();
+        await render(_jsx(Chip, { selectable: true, children: "Vue" }));
+        const chip = screen.getByRole("button", { name: "Vue" });
+        chip.focus();
+        await user.keyboard("{Space}");
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+        await user.keyboard("{Enter}");
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+    it("calls onRemove and does not toggle selection", async () => {
+        const user = userEvent.setup();
+        const onRemove = vi.fn();
+        await render(_jsx(Chip, { selectable: true, removable: true, onRemove: onRemove, defaultSelected: true, children: "Svelte" }));
+        const chip = screen.getByRole("button", { name: "Svelte" });
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+        expect(chip).toHaveAttribute("aria-pressed", "true");
+        await user.click(removeButton);
+        expect(onRemove).toHaveBeenCalledTimes(1);
+        expect(chip).toHaveAttribute("aria-pressed", "false");
+    });
+    it("supports group selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsxs(Chip.Group, { defaultValue: ["react"], onChange: onChange, children: [_jsx(Chip, { value: "react", children: "React" }), _jsx(Chip, { value: "vue", children: "Vue" })] }));
+        const reactChip = screen.getByRole("button", { name: "React" });
+        const vueChip = screen.getByRole("button", { name: "Vue" });
+        expect(reactChip).toHaveAttribute("aria-pressed", "true");
+        expect(vueChip).toHaveAttribute("aria-pressed", "false");
+        await user.click(vueChip);
+        expect(onChange).toHaveBeenLastCalledWith(["react", "vue"]);
+        await user.click(reactChip);
+        expect(onChange).toHaveBeenLastCalledWith(["vue"]);
+    });
+    it("removes value from group with removable chip", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(Chip.Group, { defaultValue: ["react"], onChange: onChange, children: _jsx(Chip, { value: "react", removable: true, children: "React" }) }));
+        await user.click(screen.getByRole("button", { name: "Remove chip" }));
+        expect(onChange).toHaveBeenLastCalledWith([]);
+    });
+    it("supports disabled state from group", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        await render(_jsx(Chip.Group, { disabled: true, onChange: onChange, children: _jsx(Chip, { value: "react", children: "React" }) }));
+        const chip = screen.getByRole("button", { name: "React" });
+        await user.click(chip);
+        expect(chip).toHaveAttribute("aria-disabled", "true");
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it("supports hidden inputs from group name", async () => {
+        const { container } = await render(_jsxs(Chip.Group, { name: "frameworks", defaultValue: ["react", "vue"], children: [_jsx(Chip, { value: "react", children: "React" }), _jsx(Chip, { value: "vue", children: "Vue" })] }));
+        const hiddenInputs = container.querySelectorAll('input[type="hidden"][name="frameworks"]');
+        expect(hiddenInputs).toHaveLength(2);
+        expect(Array.from(hiddenInputs).map((item) => item.value)).toEqual(["react", "vue"]);
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(Chip, { className: "custom-root", classNames: {
+                label: "custom-label",
+                removeButton: "custom-remove-button",
+                removeIcon: "custom-remove-icon"
+            }, removable: true, children: "React" }));
+        const root = container.firstElementChild;
+        const label = screen.getByText("React");
+        const removeButton = screen.getByRole("button", { name: "Remove chip" });
+        const removeIcon = removeButton.querySelector("span");
+        expect(root).toHaveClass("custom-root");
+        expect(label).toHaveClass("custom-label");
+        expect(removeButton).toHaveClass("custom-remove-button");
+        expect(removeIcon).toHaveClass("custom-remove-icon");
+    });
+});

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

@@ -0,0 +1,95 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { ChipGroup } from "./chip-group";
+export type ChipVariant = "default" | "outline";
+export type ChipGroupOrientation = "horizontal" | "vertical";
+export type ChipClassNames = {
+    root?: string;
+    leftSection?: string;
+    label?: string;
+    rightSection?: string;
+    removeButton?: string;
+    removeIcon?: string;
+};
+export type ChipGroupClassNames = {
+    root?: string;
+};
+export interface ChipProps extends ComponentPropsWithoutRef<"div"> {
+    /** The value used by Chip.Group */
+    value?: string;
+    /** The selected state of the chip (controlled) */
+    selected?: boolean;
+    /** The initial selected state of the chip (uncontrolled) */
+    defaultSelected?: boolean;
+    /** Callback called when selected state changes */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Whether chip can be toggled @default `false` */
+    selectable?: boolean;
+    /** Whether to show remove button @default `false` */
+    removable?: boolean;
+    /** Callback called when remove button is clicked */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label for remove button */
+    removeButtonLabel?: string;
+    /** Content rendered at the start of the chip */
+    leftSection?: ReactNode;
+    /** Content rendered before remove button at the end of the chip */
+    rightSection?: ReactNode;
+    /** The size of the chip @default `sm` */
+    size?: RefraktorSize;
+    /** The radius of the chip @default `full` */
+    radius?: RefraktorRadius;
+    /** The variant of the chip @default `default` */
+    variant?: ChipVariant;
+    /** Whether chip is disabled @default `false` */
+    disabled?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ChipClassNames;
+}
+export interface ChipGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Chip components to render */
+    children: ReactNode;
+    /** Selected values (controlled) */
+    value?: string[];
+    /** Initial selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Callback called when values change */
+    onChange?: (value: string[]) => void;
+    /** Hidden input name used for form submission */
+    name?: string;
+    /** Whether all chips in group are disabled */
+    disabled?: boolean;
+    /** Shared chip size */
+    size?: RefraktorSize;
+    /** Shared chip radius */
+    radius?: RefraktorRadius;
+    /** Shared chip variant */
+    variant?: ChipVariant;
+    /** Layout direction @default `horizontal` */
+    orientation?: ChipGroupOrientation;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: ChipGroupClassNames;
+}
+export interface ChipFactoryPayload extends FactoryPayload {
+    props: ChipProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ChipClassNames>>;
+        Group: typeof ChipGroup;
+    };
+}
+export interface ChipGroupFactoryPayload extends FactoryPayload {
+    props: ChipGroupProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ChipGroupProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ChipGroupClassNames>>;
+    };
+}
+//# sourceMappingURL=chip.types.d.ts.map

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

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

package/build/components/chip/chip.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Chip } from "./chip";
+export { ChipGroup } from "./chip-group";
+export type { ChipProps, ChipClassNames, ChipVariant, ChipGroupProps, ChipGroupClassNames, ChipGroupOrientation } from "./chip.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACR,SAAS,EACT,cAAc,EACd,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACvB,MAAM,cAAc,CAAC"}

package/build/components/chip/index.js

@@ -0,0 +1,2 @@
+export { default as Chip } from "./chip";
+export { ChipGroup } from "./chip-group";

package/build/components/combobox/combobox-dropdown/combobox-dropdown.d.ts

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

package/build/components/combobox/combobox-dropdown/combobox-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-dropdown/combobox-dropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAOxE,QAAA,MAAM,gBAAgB,uEA8ErB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/build/components/combobox/combobox-dropdown/combobox-dropdown.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Transition } from "../../transition";
+import { useComboboxContext } from "../combobox.context";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+const ComboboxDropdown = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const combobox = useComboboxContext();
+    const referenceWidth = combobox.combobox.refs.reference.current?.offsetWidth;
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: combobox.combobox.opened, style: { position: "relative", zIndex: 1000 }, ...combobox.transitionProps, children: _jsx("div", { ref: useMergeRefs([ref, combobox.combobox.refs.setFloating]), id: combobox.listId, role: "listbox", "aria-labelledby": combobox.inputId, tabIndex: -1, style: {
+                ...combobox.combobox.floatingStyles,
+                zIndex: 1000,
+                width: referenceWidth,
+                ...style
+            }, className: cx("z-50 min-w-32 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]", getRadius(combobox.radius), combobox.getStyles("dropdown"), className), ...combobox.combobox.getFloatingProps(), ...props, children: _jsxs("div", { className: cx("max-h-80 overflow-y-auto refraktor-scrollbar p-1", combobox.getStyles("options")), children: [children, !combobox.hasVisibleItems() && (_jsx("div", { className: cx("px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]", combobox.getStyles("empty")), children: combobox.nothingFound }))] }) }) }));
+    const wrappedContent = (_jsx(FloatingFocusManager, { context: combobox.combobox.context, modal: false, initialFocus: -1, returnFocus: false, disabled: !combobox.combobox.opened, children: dropdownContent }));
+    return combobox.withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
+});
+ComboboxDropdown.displayName = "@refraktor/core/Combobox.Dropdown";
+export default ComboboxDropdown;

package/build/components/combobox/combobox-dropdown/index.d.ts

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

package/build/components/combobox/combobox-dropdown/index.d.ts.map

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

package/build/components/combobox/combobox-dropdown/index.js

@@ -0,0 +1 @@
+export { default as ComboboxDropdown } from "./combobox-dropdown";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-group/combobox-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,QAAA,MAAM,aAAa,oEAoClB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { ComboboxGroupProvider, useComboboxContext } from "../combobox.context";
+const ComboboxGroup = factory(({ id, label, children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    const _id = useId(id);
+    const labelId = `${_id}-label`;
+    const isVisible = combobox.isGroupVisible(_id);
+    return (_jsx(ComboboxGroupProvider, { value: { groupId: _id }, children: _jsxs("div", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, hidden: !isVisible, className: cx("py-1", combobox.getStyles("group"), className), ...props, children: [label && (_jsx("div", { id: labelId, className: cx("px-1.5 pb-1 text-xs font-medium text-[var(--refraktor-text-secondary)]", combobox.getStyles("groupLabel")), children: label })), children] }) }));
+});
+ComboboxGroup.displayName = "@refraktor/core/Combobox.Group";
+export default ComboboxGroup;

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

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

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

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

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

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

package/build/components/combobox/combobox-input/combobox-input.d.ts

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

package/build/components/combobox/combobox-input/combobox-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-input.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-input/combobox-input.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,QAAA,MAAM,aAAa,oEAgLlB,CAAC;AAIF,eAAe,aAAa,CAAC"}