@refraktor/core 0.0.1

package/.turbo/turbo-build.log

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ChillWoW
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @refraktor/core
+
+Component library for React and Tailwind.
+
+## Installation
+
+```bash
+# NPM
+npm install @refraktor/core
+
+# Bun
+bun add @refraktor/core
+```
+
+## Documentation
+
+Coming Soon...
+
+## License
+
+[MIT](LICENSE)

package/build/components/accordion/accordion-control/accordion-control.d.ts

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

package/build/components/accordion/accordion-control/accordion-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-control.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-control/accordion-control.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,8BAA8B,EAAE,MAAM,oBAAoB,CAAC;AAEpE,QAAA,MAAM,gBAAgB,uEA0IrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/build/components/accordion/accordion-control/accordion-control.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon } from "../../../icons";
+import { useMergedRefs } from "@refraktor/utils";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { getNavigableAccordionItems, useAccordionContext, useAccordionItemContext } from "../accordion.context";
+import { getSize, getVariant } from "../accordion.styles";
+const AccordionControl = factory(({ children, chevron, className, onClick, onKeyDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { size, variant, isItemOpen, toggleItem, registerItem, getItems, getControlId, getPanelId, getStyles } = useAccordionContext();
+    const item = useAccordionItemContext();
+    const localRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+    useEffect(() => {
+        return registerItem({
+            value: item.value,
+            ref: localRef,
+            disabled: item.disabled
+        });
+    }, [item.value, item.disabled, registerItem]);
+    const isOpen = isItemOpen(item.value);
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant);
+    const moveFocus = (direction) => {
+        const items = getNavigableAccordionItems(getItems());
+        if (!items.length) {
+            return;
+        }
+        const currentIndex = items.findIndex((x) => x.value === item.value);
+        if (currentIndex === -1) {
+            return;
+        }
+        const nextIndex = (currentIndex + direction + items.length) % items.length;
+        items[nextIndex].ref.current?.focus();
+    };
+    const focusBoundary = (type) => {
+        const items = getNavigableAccordionItems(getItems());
+        if (!items.length) {
+            return;
+        }
+        const target = type === "first" ? items[0] : items[items.length - 1];
+        target.ref.current?.focus();
+    };
+    return (_jsxs("button", { ref: mergedRef, id: getControlId(item.value), type: "button", "aria-expanded": isOpen, "aria-controls": getPanelId(item.value), disabled: item.disabled, "data-opened": isOpen, "data-disabled": item.disabled, className: cx("w-full inline-flex items-center justify-between gap-2 text-left select-none outline-none transition-colors cursor-pointer", "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", "text-[var(--refraktor-text)]", sizeStyles.control, variantStyles.control, getStyles("control"), className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || item.disabled) {
+                return;
+            }
+            toggleItem(item.value);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || item.disabled) {
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                moveFocus(1);
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                moveFocus(-1);
+                return;
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                focusBoundary("first");
+                return;
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                focusBoundary("last");
+            }
+        }, ...props, children: [_jsx("span", { children: children }), _jsx("span", { className: cx("shrink-0 transition-transform", sizeStyles.chevron, isOpen && "rotate-180", getStyles("chevron")), children: chevron ?? _jsx(ChevronIcon, { direction: "down", size: "100%" }) })] }));
+});
+AccordionControl.displayName = "@refraktor/core/Accordion.Control";
+export default AccordionControl;

package/build/components/accordion/accordion-control/index.d.ts

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

package/build/components/accordion/accordion-control/index.d.ts.map

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

package/build/components/accordion/accordion-control/index.js

@@ -0,0 +1 @@
+export { default as AccordionControl } from "./accordion-control";

package/build/components/accordion/accordion-item/accordion-item.d.ts

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

package/build/components/accordion/accordion-item/accordion-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-item/accordion-item.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEjE,QAAA,MAAM,aAAa,oEA0BlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/build/components/accordion/accordion-item/accordion-item.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { AccordionItemProvider, useAccordionContext } from "../accordion.context";
+import { getVariant } from "../accordion.styles";
+const AccordionItem = factory(({ value, disabled, children, className, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { variant, radius, isItemOpen, getStyles } = useAccordionContext();
+    const variantStyles = getVariant(variant);
+    return (_jsx(AccordionItemProvider, { value: { value, disabled: !!disabled }, children: _jsx("div", { ref: ref, "data-opened": isItemOpen(value), "data-disabled": disabled, className: cx("overflow-hidden", variantStyles.item, variant === "separated" && getRadius(radius), getStyles("item"), className), ...props, children: children }) }));
+});
+AccordionItem.displayName = "@refraktor/core/Accordion.Item";
+export default AccordionItem;

package/build/components/accordion/accordion-item/index.d.ts

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

package/build/components/accordion/accordion-item/index.d.ts.map

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

package/build/components/accordion/accordion-item/index.js

@@ -0,0 +1 @@
+export { default as AccordionItem } from "./accordion-item";

package/build/components/accordion/accordion-panel/accordion-panel.d.ts

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

package/build/components/accordion/accordion-panel/accordion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAElE,QAAA,MAAM,cAAc,qEA4CnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/build/components/accordion/accordion-panel/accordion-panel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useAccordionContext, useAccordionItemContext } from "../accordion.context";
+import { getSize, getVariant } from "../accordion.styles";
+const AccordionPanel = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { keepMounted, size, variant, isItemOpen, getControlId, getPanelId, getStyles } = useAccordionContext();
+    const item = useAccordionItemContext();
+    const isOpen = isItemOpen(item.value);
+    if (!keepMounted && !isOpen) {
+        return null;
+    }
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant);
+    return (_jsx("div", { ref: ref, id: getPanelId(item.value), role: "region", "aria-labelledby": getControlId(item.value), "data-opened": isOpen, hidden: !isOpen, className: cx("outline-none", sizeStyles.panel, variantStyles.panel, getStyles("panel"), className), ...props, children: children }));
+});
+AccordionPanel.displayName = "@refraktor/core/Accordion.Panel";
+export default AccordionPanel;

package/build/components/accordion/accordion-panel/index.d.ts

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

package/build/components/accordion/accordion-panel/index.d.ts.map

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

package/build/components/accordion/accordion-panel/index.js

@@ -0,0 +1 @@
+export { default as AccordionPanel } from "./accordion-panel";

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

@@ -0,0 +1,43 @@
+import { MutableRefObject } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { AccordionClassNames, AccordionVariant } from "./accordion.types";
+export interface AccordionItemRegistration {
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+}
+export interface AccordionContextValue {
+    openValues: string[];
+    multiple: boolean;
+    collapsible: boolean;
+    keepMounted: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: AccordionVariant;
+    toggleItem: (value: string) => void;
+    isItemOpen: (value: string) => boolean;
+    registerItem: (item: AccordionItemRegistration) => () => void;
+    getItems: () => AccordionItemRegistration[];
+    getControlId: (value: string) => string;
+    getPanelId: (value: string) => string;
+    getStyles: (part: keyof AccordionClassNames) => string | undefined;
+}
+export interface AccordionItemContextValue {
+    value: string;
+    disabled: boolean;
+}
+export declare const AccordionProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: AccordionContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useAccordionContext: () => AccordionContextValue;
+export declare const AccordionItemProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: AccordionItemContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useAccordionItemContext: () => AccordionItemContextValue;
+export declare function useAccordionItemsRegistry(): {
+    registerItem: (item: AccordionItemRegistration) => () => void;
+    getItems: () => AccordionItemRegistration[];
+};
+export declare function sortAccordionItems(items: AccordionItemRegistration[]): AccordionItemRegistration[];
+export declare function getNavigableAccordionItems(items: AccordionItemRegistration[]): AccordionItemRegistration[];
+//# sourceMappingURL=accordion.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.context.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IAClC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,MAAM,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,yBAAyB,EAAE,CAAC;IAC5C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,mBAAmB,KAAK,MAAM,GAAG,SAAS,CAAC;CACtE;AAED,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAO,iBAAiB;;;+CAAE,mBAAmB,6BAG/C,CAAC;AAEN,eAAO,MAAO,qBAAqB;;;+CAAE,uBAAuB,iCAGvD,CAAC;AAEN,wBAAgB,yBAAyB;yBAGG,yBAAyB;;EAmBpE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,yBAAyB,EAAE,+BAqBpE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,yBAAyB,EAAE,+BAE5E"}

package/build/components/accordion/accordion.context.js

@@ -0,0 +1,41 @@
+import { createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [AccordionProvider, useAccordionContext] = createSafeContext("Accordion component was not found in tree. Make sure Accordion.Item, Accordion.Control and Accordion.Panel are wrapped with Accordion.");
+export const [AccordionItemProvider, useAccordionItemContext] = createSafeContext("Accordion.Item component was not found in tree. Make sure Accordion.Control and Accordion.Panel are wrapped with Accordion.Item.");
+export function useAccordionItemsRegistry() {
+    const itemsRef = useRef([]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.value !== item.value),
+            item
+        ];
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.value !== item.value);
+        };
+    }, []);
+    const getItems = useCallback(() => sortAccordionItems(itemsRef.current), []);
+    return {
+        registerItem,
+        getItems
+    };
+}
+export function sortAccordionItems(items) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+        const position = aNode.compareDocumentPosition(bNode);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function getNavigableAccordionItems(items) {
+    return items.filter((item) => !item.disabled);
+}

package/build/components/accordion/accordion.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAEH,uBAAuB,EAG1B,MAAM,mBAAmB,CAAC;AAmC3B,QAAA,MAAM,SAAS,6DAuIb,CAAC;AASH,eAAe,SAAS,CAAC"}

package/build/components/accordion/accordion.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect, useMemo } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { AccordionProvider, getNavigableAccordionItems, useAccordionItemsRegistry } from "./accordion.context";
+import { AccordionControl } from "./accordion-control";
+import { AccordionItem } from "./accordion-item";
+import { AccordionPanel } from "./accordion-panel";
+const defaultProps = {
+    multiple: false,
+    collapsible: true,
+    keepMounted: false,
+    size: "md",
+    radius: "default",
+    variant: "default"
+};
+const toDomSafeValue = (value) => encodeURIComponent(value).replace(/%/g, "-");
+const normalizeOpenValues = (value, multiple) => {
+    if (Array.isArray(value)) {
+        const uniqueValues = Array.from(new Set(value.filter(Boolean)));
+        if (!multiple) {
+            return uniqueValues.slice(0, 1);
+        }
+        return uniqueValues;
+    }
+    if (typeof value === "string" && value.length > 0) {
+        return [value];
+    }
+    return [];
+};
+const Accordion = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, multiple, collapsible, keepMounted, size, radius, variant, className, classNames, ...props } = useProps("Accordion", defaultProps, _props);
+    const classes = useClassNames("Accordion", classNames);
+    const _id = useId(id);
+    const [activeValue, setActiveValue, isControlled] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: multiple ? [] : null,
+        onChange
+    });
+    const openValues = useMemo(() => normalizeOpenValues(activeValue, multiple), [activeValue, multiple]);
+    const { registerItem, getItems } = useAccordionItemsRegistry();
+    useEffect(() => {
+        if (multiple || collapsible || openValues.length > 0 || isControlled) {
+            return;
+        }
+        const firstItem = getNavigableAccordionItems(getItems())[0];
+        if (firstItem) {
+            setActiveValue(firstItem.value);
+        }
+    }, [
+        multiple,
+        collapsible,
+        openValues.length,
+        isControlled,
+        getItems,
+        setActiveValue
+    ]);
+    const toggleItem = useCallback((itemValue) => {
+        const isOpen = openValues.includes(itemValue);
+        if (multiple) {
+            const nextValues = isOpen
+                ? openValues.filter((value) => value !== itemValue)
+                : [...openValues, itemValue];
+            setActiveValue(nextValues);
+            return;
+        }
+        if (isOpen) {
+            if (collapsible) {
+                setActiveValue(null);
+            }
+            return;
+        }
+        setActiveValue(itemValue);
+    }, [multiple, collapsible, openValues, setActiveValue]);
+    const isItemOpen = useCallback((itemValue) => openValues.includes(itemValue), [openValues]);
+    const getControlId = useCallback((itemValue) => `${_id}-control-${toDomSafeValue(itemValue)}`, [_id]);
+    const getPanelId = useCallback((itemValue) => `${_id}-panel-${toDomSafeValue(itemValue)}`, [_id]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    return (_jsx(AccordionProvider, { value: {
+            openValues,
+            multiple,
+            collapsible,
+            keepMounted,
+            size,
+            radius,
+            variant,
+            toggleItem,
+            isItemOpen,
+            registerItem,
+            getItems,
+            getControlId,
+            getPanelId,
+            getStyles
+        }, children: _jsx("div", { ref: ref, id: _id, className: cx("w-full flex flex-col", variant === "separated" ? "gap-2" : "gap-0", classes.root, className), ...props, children: children }) }));
+});
+Accordion.displayName = "@refraktor/core/Accordion";
+Accordion.configure = createComponentConfig();
+Accordion.classNames = createClassNamesConfig();
+Accordion.Item = AccordionItem;
+Accordion.Control = AccordionControl;
+Accordion.Panel = AccordionPanel;
+export default Accordion;

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

@@ -0,0 +1,16 @@
+import { RefraktorSize } from "../../theme";
+import { AccordionVariant } from "./accordion.types";
+type AccordionSizeStyles = {
+    control: string;
+    panel: string;
+    chevron: string;
+};
+type AccordionVariantStyles = {
+    item: string;
+    control: string;
+    panel: string;
+};
+export declare const getSize: (size?: RefraktorSize) => AccordionSizeStyles;
+export declare const getVariant: (variant?: AccordionVariant) => AccordionVariantStyles;
+export {};
+//# sourceMappingURL=accordion.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,KAAK,mBAAmB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA2CF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,wBAAgB,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,UAAS,gBAA4B,2BAC3C,CAAC"}

package/build/components/accordion/accordion.styles.js

@@ -0,0 +1,41 @@
+const sizes = {
+    xs: {
+        control: "min-h-7 px-2 py-1 text-xs",
+        panel: "px-2 pb-2 text-xs",
+        chevron: "size-3"
+    },
+    sm: {
+        control: "min-h-8 px-2.5 py-1.5 text-sm",
+        panel: "px-2.5 pb-2.5 text-sm",
+        chevron: "size-3.5"
+    },
+    md: {
+        control: "min-h-9 px-3 py-2 text-sm",
+        panel: "px-3 pb-3 text-sm",
+        chevron: "size-4"
+    },
+    lg: {
+        control: "min-h-10 px-3.5 py-2.5 text-base",
+        panel: "px-3.5 pb-3.5 text-base",
+        chevron: "size-4.5"
+    },
+    xl: {
+        control: "min-h-11 px-4 py-3 text-lg",
+        panel: "px-4 pb-4 text-lg",
+        chevron: "size-5"
+    }
+};
+const variants = {
+    default: {
+        item: "border-b border-[var(--refraktor-border)] last:border-b-0",
+        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
+        panel: "text-[var(--refraktor-text-secondary)]"
+    },
+    separated: {
+        item: "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
+        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
+        panel: "border-t border-[var(--refraktor-border)] text-[var(--refraktor-text-secondary)]"
+    }
+};
+export const getSize = (size = "md") => sizes[size];
+export const getVariant = (variant = "default") => variants[variant];

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

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

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

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

package/build/components/accordion/accordion.test.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Accordion from "./accordion";
+describe("@refraktor/core/Accordion", () => {
+    it("renders default opened item", async () => {
+        await render(_jsxs(Accordion, { defaultValue: "account", children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] })] }));
+        expect(screen.getByRole("button", { name: "Account" })).toHaveAttribute("aria-expanded", "true");
+        expect(screen.getByText("Account panel")).toBeInTheDocument();
+        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
+    });
+    it("toggles items in single mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Accordion, { defaultValue: "account", children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] })] }));
+        await user.click(screen.getByRole("button", { name: "Security" }));
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+        expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
+        await user.click(screen.getByRole("button", { name: "Security" }));
+        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
+    });
+    it("supports multiple mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Accordion, { multiple: true, defaultValue: ["account"], children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] })] }));
+        await user.click(screen.getByRole("button", { name: "Security" }));
+        expect(screen.getByText("Account panel")).toBeInTheDocument();
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        function Demo() {
+            const [value, setValue] = useState("account");
+            return (_jsxs(Accordion, { value: value, onChange: (nextValue) => {
+                    onChange(nextValue);
+                    if (typeof nextValue === "string" || nextValue === null) {
+                        setValue(nextValue);
+                    }
+                }, children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] })] }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("button", { name: "Security" }));
+        expect(onChange).toHaveBeenCalledWith("security");
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+    it("supports keyboard navigation and skips disabled items", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Accordion, { defaultValue: "account", children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", disabled: true, children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] }), _jsxs(Accordion.Item, { value: "billing", children: [_jsx(Accordion.Control, { children: "Billing" }), _jsx(Accordion.Panel, { children: "Billing panel" })] })] }));
+        const account = screen.getByRole("button", { name: "Account" });
+        account.focus();
+        await user.keyboard("{ArrowDown}");
+        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
+        await user.keyboard("{Home}");
+        expect(account).toHaveFocus();
+        await user.keyboard("{End}");
+        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
+    });
+    it("keeps closed panels mounted when keepMounted is true", async () => {
+        await render(_jsxs(Accordion, { defaultValue: "account", keepMounted: true, children: [_jsxs(Accordion.Item, { value: "account", children: [_jsx(Accordion.Control, { children: "Account" }), _jsx(Accordion.Panel, { children: "Account panel" })] }), _jsxs(Accordion.Item, { value: "security", children: [_jsx(Accordion.Control, { children: "Security" }), _jsx(Accordion.Panel, { children: "Security panel" })] })] }));
+        const hiddenPanel = screen.getByText("Security panel");
+        expect(hiddenPanel).toBeInTheDocument();
+        expect(hiddenPanel).toHaveAttribute("hidden");
+    });
+});