@refraktor/core 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 $ tsc && tailwindcss -i src/style.css -o build/style.css --minify
 ≈ tailwindcss v4.1.18
 
-Done in 135ms
+Done in 180ms

package/build/components/breadcrumbs/breadcrumbs.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,qBAAqB,CAAC;AAa7B,QAAA,MAAM,WAAW,+DAoKf,CAAC;AAMH,eAAe,WAAW,CAAC"}

package/build/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { ChevronIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { getSize } from "./breadcrumbs.styles";
+import { buildBreadcrumbsRange } from "./breadcrumbs.utils";
+const defaultProps = {
+    maxItems: 4,
+    itemsBeforeCollapse: 1,
+    itemsAfterCollapse: 1,
+    defaultExpanded: false,
+    expandLabel: "Show full breadcrumb path",
+    size: "md",
+    radius: "default"
+};
+const Breadcrumbs = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, items, maxItems, itemsBeforeCollapse, itemsAfterCollapse, expanded, defaultExpanded, onExpandedChange, expandLabel, separator, size, radius, className, classNames, ...props } = useProps("Breadcrumbs", defaultProps, _props);
+    const classes = useClassNames("Breadcrumbs", classNames);
+    const _id = useId(id);
+    const [isExpanded, setIsExpanded] = useUncontrolled({
+        value: expanded,
+        defaultValue: defaultExpanded,
+        finalValue: false,
+        onChange: onExpandedChange
+    });
+    const sizeStyles = getSize(size);
+    const visibleItems = buildBreadcrumbsRange({
+        total: items.length,
+        maxItems,
+        itemsBeforeCollapse,
+        itemsAfterCollapse,
+        expanded: isExpanded
+    });
+    if (items.length === 0) {
+        return null;
+    }
+    const resolvedSeparator = separator !== undefined ? (separator) : (_jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize }));
+    return (_jsx("nav", { ...props, ref: ref, id: _id, "aria-label": props["aria-label"] ?? "Breadcrumb", className: cx("w-full", classes.root, className), children: _jsx("ol", { className: cx("flex flex-wrap items-center", sizeStyles.list, classes.list), children: visibleItems.map((rangeItem, index) => {
+                const showSeparator = index < visibleItems.length - 1;
+                const content = (() => {
+                    if (rangeItem === "collapse") {
+                        return (_jsx("button", { type: "button", "aria-label": expandLabel, className: cx("inline-flex items-center justify-center select-none outline-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]", sizeStyles.collapse, getRadius(radius), classes.collapse), onClick: () => setIsExpanded(true), children: "..." }));
+                    }
+                    const item = items[rangeItem];
+                    const isCurrent = rangeItem === items.length - 1;
+                    const baseLabelClass = cx("inline-flex min-w-0 items-center truncate", sizeStyles.label);
+                    if (!isCurrent && item.href) {
+                        return (_jsx("a", { href: item.href, target: item.target, rel: item.rel, "aria-label": item.ariaLabel, className: cx(baseLabelClass, "outline-none transition-colors", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]", classes.link), children: item.label }));
+                    }
+                    return (_jsx("span", { "aria-label": item.ariaLabel, "aria-current": isCurrent ? "page" : undefined, className: cx(baseLabelClass, isCurrent
+                            ? "font-medium text-[var(--refraktor-text)]"
+                            : "text-[var(--refraktor-text-secondary)]", isCurrent ? classes.current : classes.link), children: item.label }));
+                })();
+                return (_jsxs("li", { className: cx("inline-flex min-w-0 items-center", sizeStyles.item, classes.item), children: [content, showSeparator && (_jsx("span", { "aria-hidden": "true", className: cx("inline-flex items-center text-[var(--refraktor-text-tertiary)]", sizeStyles.separator, classes.separator), children: resolvedSeparator }))] }, rangeItem === "collapse"
+                    ? "collapse"
+                    : `item-${rangeItem}`));
+            }) }) }));
+});
+Breadcrumbs.displayName = "@refraktor/core/Breadcrumbs";
+Breadcrumbs.configure = createComponentConfig();
+Breadcrumbs.classNames = createClassNamesConfig();
+export default Breadcrumbs;

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

@@ -0,0 +1,12 @@
+import { RefraktorSize } from "../../theme";
+type BreadcrumbsSizeStyles = {
+    list: string;
+    item: string;
+    label: string;
+    separator: string;
+    collapse: string;
+    iconSize: number;
+};
+export declare const getSize: (size?: RefraktorSize) => BreadcrumbsSizeStyles;
+export {};
+//# sourceMappingURL=breadcrumbs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,qBAAqB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AA6CF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,0BAAgB,CAAC"}

package/build/components/breadcrumbs/breadcrumbs.styles.js

@@ -0,0 +1,43 @@
+const sizes = {
+    xs: {
+        list: "gap-1",
+        item: "gap-1",
+        label: "text-xs",
+        separator: "mx-1",
+        collapse: "h-5 min-w-5 px-1 text-xs",
+        iconSize: 12
+    },
+    sm: {
+        list: "gap-1",
+        item: "gap-1",
+        label: "text-xs",
+        separator: "mx-1",
+        collapse: "h-6 min-w-6 px-1.5 text-xs",
+        iconSize: 14
+    },
+    md: {
+        list: "gap-1.5",
+        item: "gap-1.5",
+        label: "text-sm",
+        separator: "mx-1.5",
+        collapse: "h-7 min-w-7 px-2 text-sm",
+        iconSize: 16
+    },
+    lg: {
+        list: "gap-2",
+        item: "gap-2",
+        label: "text-base",
+        separator: "mx-2",
+        collapse: "h-8 min-w-8 px-2.5 text-base",
+        iconSize: 18
+    },
+    xl: {
+        list: "gap-2.5",
+        item: "gap-2.5",
+        label: "text-lg",
+        separator: "mx-2.5",
+        collapse: "h-9 min-w-9 px-3 text-lg",
+        iconSize: 20
+    }
+};
+export const getSize = (size = "md") => sizes[size];

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

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

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

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

package/build/components/breadcrumbs/breadcrumbs.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render as rtlRender } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../../theme";
+import { render, screen, userEvent } from "../../vitest";
+import Breadcrumbs from "./breadcrumbs";
+const items = [
+    { label: "Home", href: "/" },
+    { label: "Workspace", href: "/workspace" },
+    { label: "Projects", href: "/workspace/projects" },
+    { label: "Refraktor", href: "/workspace/projects/refraktor" },
+    { label: "Components", href: "/workspace/projects/refraktor/components" },
+    { label: "Breadcrumbs" }
+];
+describe("@refraktor/core/Breadcrumbs", () => {
+    it("renders navigation, links and current page", async () => {
+        await render(_jsx(Breadcrumbs, { items: items.slice(0, 3), maxItems: 0 }));
+        expect(screen.getByRole("navigation", { name: "Breadcrumb" })).toBeInTheDocument();
+        expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute("href", "/");
+        expect(screen.getByText("Projects")).toHaveAttribute("aria-current", "page");
+    });
+    it("collapses and expands middle items", async () => {
+        const user = userEvent.setup();
+        const onExpandedChange = vi.fn();
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, onExpandedChange: onExpandedChange }));
+        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+        await user.click(screen.getByRole("button", { name: /show full breadcrumb path/i }));
+        expect(onExpandedChange).toHaveBeenCalledWith(true);
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: /show full breadcrumb path/i })).not.toBeInTheDocument();
+    });
+    it("supports itemsBeforeCollapse and itemsAfterCollapse", async () => {
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, itemsBeforeCollapse: 2, itemsAfterCollapse: 2 }));
+        expect(screen.getByText("Home")).toBeInTheDocument();
+        expect(screen.getByText("Workspace")).toBeInTheDocument();
+        expect(screen.getByText("Components")).toBeInTheDocument();
+        expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
+        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
+    });
+    it("supports controlled expanded mode", async () => {
+        await render(_jsx(Breadcrumbs, { items: items, maxItems: 3, expanded: true }));
+        expect(screen.getByText("Projects")).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: /show full breadcrumb path/i })).not.toBeInTheDocument();
+    });
+    it("supports custom separator", async () => {
+        await render(_jsx(Breadcrumbs, { items: items.slice(0, 3), separator: "/" }));
+        expect(screen.getAllByText("/")).toHaveLength(2);
+    });
+    it("supports root and slot class names", async () => {
+        const { container } = await render(_jsx(Breadcrumbs, { items: items, maxItems: 4, className: "custom-root", classNames: {
+                list: "custom-list",
+                item: "custom-item",
+                link: "custom-link",
+                current: "custom-current",
+                separator: "custom-separator",
+                collapse: "custom-collapse"
+            } }));
+        const root = container.firstElementChild;
+        expect(root).toHaveClass("custom-root");
+        expect(root.querySelector("ol")).toHaveClass("custom-list");
+        expect(root.querySelector("li")).toHaveClass("custom-item");
+        expect(screen.getByRole("link", { name: "Home" })).toHaveClass("custom-link");
+        expect(root.querySelector('[aria-current="page"]')).toHaveClass("custom-current");
+        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toHaveClass("custom-collapse");
+        expect(root.querySelector("span[aria-hidden='true']")).toHaveClass("custom-separator");
+    });
+    it("returns null when items array is empty", () => {
+        const { container } = rtlRender(_jsx(ThemeProvider, { children: _jsx(Breadcrumbs, { items: [] }) }));
+        expect(container.firstChild).toBeNull();
+    });
+});

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

@@ -0,0 +1,56 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type BreadcrumbsItem = {
+    label: ReactNode;
+    href?: string;
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    rel?: ComponentPropsWithoutRef<"a">["rel"];
+    ariaLabel?: string;
+};
+export type BreadcrumbsClassNames = {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    current?: string;
+    separator?: string;
+    collapse?: string;
+};
+export interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+    /** Breadcrumb items in hierarchical order */
+    items: BreadcrumbsItem[];
+    /** Collapse items when amount exceeds this number. Use `0` to disable @default `4` */
+    maxItems?: number;
+    /** Amount of visible items before collapsed section @default `1` */
+    itemsBeforeCollapse?: number;
+    /** Amount of visible items after collapsed section @default `1` */
+    itemsAfterCollapse?: number;
+    /** Collapse state (controlled) */
+    expanded?: boolean;
+    /** Initial collapse state (uncontrolled) @default `false` */
+    defaultExpanded?: boolean;
+    /** Callback called when collapse state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Accessible label for collapse control @default `Show full breadcrumb path` */
+    expandLabel?: string;
+    /** Separator between items */
+    separator?: ReactNode;
+    /** Size of breadcrumb text and controls @default `md` */
+    size?: RefraktorSize;
+    /** Radius of collapse control @default `default` */
+    radius?: RefraktorRadius;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: BreadcrumbsClassNames;
+}
+export interface BreadcrumbsFactoryPayload extends FactoryPayload {
+    props: BreadcrumbsProps;
+    ref: HTMLElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<BreadcrumbsProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<BreadcrumbsClassNames>>;
+    };
+}
+//# sourceMappingURL=breadcrumbs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.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,eAAe,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjD,GAAG,CAAC,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,6CAA6C;IAC7C,KAAK,EAAE,eAAe,EAAE,CAAC;IAEzB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,oDAAoD;IACpD,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,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,WAAW,CAAC;IACjB,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/breadcrumbs/breadcrumbs.types.js

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

package/build/components/breadcrumbs/breadcrumbs.utils.d.ts

@@ -0,0 +1,10 @@
+export type BreadcrumbsRangeItem = number | "collapse";
+export type BreadcrumbsRangeOptions = {
+    total: number;
+    maxItems: number;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+    expanded: boolean;
+};
+export declare function buildBreadcrumbsRange(options: BreadcrumbsRangeOptions): BreadcrumbsRangeItem[];
+//# sourceMappingURL=breadcrumbs.utils.d.ts.map

package/build/components/breadcrumbs/breadcrumbs.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/breadcrumbs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAoBF,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,uBAAuB,GACjC,oBAAoB,EAAE,CAuCxB"}

package/build/components/breadcrumbs/breadcrumbs.utils.js

@@ -0,0 +1,36 @@
+function range(start, end) {
+    if (end < start) {
+        return [];
+    }
+    const length = end - start + 1;
+    return Array.from({ length }, (_, index) => start + index);
+}
+function toSafeInteger(value, fallback, minimum = 0) {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(minimum, Math.trunc(value));
+}
+export function buildBreadcrumbsRange(options) {
+    const total = toSafeInteger(options.total, 0, 0);
+    if (total <= 0) {
+        return [];
+    }
+    const all = range(0, total - 1);
+    if (options.expanded) {
+        return all;
+    }
+    const maxItems = toSafeInteger(options.maxItems, 0, 0);
+    if (maxItems === 0 || total <= maxItems) {
+        return all;
+    }
+    const itemsBeforeCollapse = Math.min(toSafeInteger(options.itemsBeforeCollapse, 1, 1), total - 1);
+    const itemsAfterCollapse = Math.min(toSafeInteger(options.itemsAfterCollapse, 1, 1), total - itemsBeforeCollapse);
+    const hiddenItems = total - itemsBeforeCollapse - Math.max(itemsAfterCollapse, 1);
+    if (hiddenItems <= 1) {
+        return all;
+    }
+    const start = range(0, itemsBeforeCollapse - 1);
+    const end = range(total - itemsAfterCollapse, total - 1);
+    return [...start, "collapse", ...end];
+}

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

@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from "./breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsClassNames } from "./breadcrumbs.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EACR,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACxB,MAAM,qBAAqB,CAAC"}

package/build/components/breadcrumbs/index.js

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

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":""}