@refraktor/core 0.0.1

package/build/components/slider/slider.styles.js

@@ -0,0 +1,28 @@
+const sizes = {
+    xs: {
+        track: "h-1",
+        thumb: "w-3 h-3",
+        label: "text-[8px] px-1 py-0.5"
+    },
+    sm: {
+        track: "h-1.5",
+        thumb: "w-3.5 h-3.5",
+        label: "text-[10px] px-1.5 py-0.5"
+    },
+    md: {
+        track: "h-2",
+        thumb: "w-4 h-4",
+        label: "text-xs px-2 py-1"
+    },
+    lg: {
+        track: "h-2.5",
+        thumb: "w-5 h-5",
+        label: "text-sm px-2.5 py-1"
+    },
+    xl: {
+        track: "h-3",
+        thumb: "w-6 h-6",
+        label: "text-base px-3 py-1.5"
+    }
+};
+export const getSize = (size = "md") => sizes[size];

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

@@ -0,0 +1,61 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme/types";
+import { FactoryPayload } from "../../utils/factory";
+import { createClassNamesConfig, createComponentConfig } from "../../utils";
+export type SliderClassNames = {
+    root?: string;
+    track?: string;
+    bar?: string;
+    thumb?: string;
+    label?: string;
+    markWrapper?: string;
+    mark?: string;
+    markLabel?: string;
+};
+export interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "value"> {
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Callback called when value changes */
+    onChange?: (value: number) => void;
+    /** Callback called when user stops dragging */
+    onChangeEnd?: (value: number) => void;
+    /** Minimum value @default `0` */
+    min?: number;
+    /** Maximum value @default `100` */
+    max?: number;
+    /** Step value @default `1` */
+    step?: number;
+    /** Number of decimal places for the value */
+    precision?: number;
+    /** The size of the slider @default `md` */
+    size?: RefraktorSize;
+    /** The radius of the slider @default `full` */
+    radius?: RefraktorRadius;
+    /** Whether the slider is disabled @default `false` */
+    disabled?: boolean;
+    /** Label displayed above the slider */
+    label?: ReactNode;
+    /** Whether to show the label on hover/drag @default `false` */
+    showLabelOnHover?: boolean;
+    /** Marks to display on the slider track */
+    marks?: SliderMark[];
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: SliderClassNames;
+}
+export interface SliderFactoryPayload extends FactoryPayload {
+    props: SliderProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SliderProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SliderClassNames>>;
+    };
+}
+//# sourceMappingURL=slider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAE5E,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,cAAc,GAAG,OAAO,CACxC;IACG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IACxD,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;QACjE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAC;KAC3E,CAAC;CACL"}

package/build/components/slider/slider.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Switch } from "./switch";
+export type { SwitchProps, SwitchClassNames } from "./switch.types";
+//# sourceMappingURL=index.d.ts.map

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

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

package/build/components/switch/index.js

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

package/build/components/switch/switch.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,oBAAoB,EAEvB,MAAM,gBAAgB,CAAC;AASxB,QAAA,MAAM,MAAM,0DAuGV,CAAC;AAMH,eAAe,MAAM,CAAC"}

package/build/components/switch/switch.js

@@ -0,0 +1,31 @@
+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 { getSize } from "./switch.styles";
+const defaultProps = {
+    size: "md",
+    radius: "full",
+    labelPosition: "right"
+};
+const Switch = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, checked, defaultChecked, onChange, size, radius, disabled, label, labelPosition, description, error, className, classNames, ...props } = useProps("Switch", defaultProps, _props);
+    const classes = useClassNames("Switch", classNames);
+    const [value, handleChange] = useUncontrolled({
+        value: checked,
+        defaultValue: defaultChecked,
+        finalValue: false
+    });
+    const _id = useId(id);
+    const sizeClass = getSize(size);
+    const handleOnChange = (event) => {
+        handleChange(event.currentTarget.checked);
+        onChange?.(event);
+    };
+    return (_jsxs("div", { className: cx("inline-flex flex-col", classes.root, className), children: [_jsxs("label", { className: cx("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", labelPosition === "left" ? "flex-row-reverse" : "flex-row"), htmlFor: _id, children: [_jsx("input", { ...props, id: _id, ref: ref, type: "checkbox", className: cx("sr-only", classes.input), checked: value, onChange: handleOnChange, disabled: disabled }), _jsx("div", { className: cx("relative bg-[var(--refraktor-bg)] transition-all shrink-0 group", "data-[checked=true]:bg-[var(--refraktor-primary)]", "flex items-center p-0.5", sizeClass.track, getRadius(radius), classes.track), "data-checked": value, children: _jsx("span", { className: cx("bg-[var(--refraktor-colors-white)] group-data-[checked=true]:bg-[var(--refraktor-primary-text)] shadow-sm transition-all pointer-events-none", sizeClass.thumb, getRadius(radius), classes.thumb) }) }), label && (_jsx("span", { className: cx("text-[var(--refraktor-text)]", labelPosition === "left" ? "mr-3" : "ml-3", sizeClass.label, classes.label), children: label }))] }), description && (_jsx("p", { className: "text-[var(--refraktor-text-tertiary)] text-xs mt-1", children: description })), error && error !== true && (_jsx("p", { className: "text-[var(--refraktor-colors-red-5)] text-xs mt-1", children: error }))] }));
+});
+Switch.displayName = "@refraktor/core/Switch";
+Switch.configure = createComponentConfig();
+Switch.classNames = createClassNamesConfig();
+export default Switch;

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

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

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

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

package/build/components/switch/switch.styles.js

@@ -0,0 +1,28 @@
+const sizes = {
+    xs: {
+        track: "w-7 h-3.5",
+        thumb: "w-2.5 h-2.5 group-data-[checked=true]:translate-x-3.5",
+        label: "text-[10px]"
+    },
+    sm: {
+        track: "w-8 h-4",
+        thumb: "w-3 h-3 group-data-[checked=true]:translate-x-4",
+        label: "text-xs"
+    },
+    md: {
+        track: "w-10 h-5",
+        thumb: "w-4 h-4 group-data-[checked=true]:translate-x-5",
+        label: "text-sm"
+    },
+    lg: {
+        track: "w-12 h-6",
+        thumb: "w-4.5 h-4.5 group-data-[checked=true]:translate-x-6",
+        label: "text-base"
+    },
+    xl: {
+        track: "w-14 h-7",
+        thumb: "w-5.5 h-5.5 group-data-[checked=true]:translate-x-7",
+        label: "text-lg"
+    }
+};
+export const getSize = (size = "md") => sizes[size];

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

@@ -0,0 +1,44 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type SwitchLabelPosition = "left" | "right";
+export type SwitchClassNames = {
+    root?: string;
+    input?: string;
+    track?: string;
+    thumb?: string;
+    label?: string;
+};
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+    /** State of the switch (controlled) */
+    checked?: boolean;
+    /** Initial state of the switch (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback called when the switch state changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The size of the switch @default `md` */
+    size?: RefraktorSize;
+    /** The radius of the switch @default `full` */
+    radius?: RefraktorRadius;
+    /** The label of the switch */
+    label?: ReactNode;
+    /** The position of the label @default `right` */
+    labelPosition?: SwitchLabelPosition;
+    /** Error state or message */
+    error?: ReactNode;
+    /** Description below the switch */
+    description?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: SwitchClassNames;
+}
+export interface SwitchFactoryPayload extends FactoryPayload {
+    props: SwitchProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SwitchProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SwitchClassNames>>;
+    };
+}
+//# sourceMappingURL=switch.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.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,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACvD,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEhE,2CAA2C;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,iDAAiD;IACjD,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IACxD,KAAK,EAAE,WAAW,CAAC;IACnB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;QACjE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAC;KAC3E,CAAC;CACL"}

package/build/components/switch/switch.types.js

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

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

@@ -0,0 +1,6 @@
+export { default as Tabs } from "./tabs";
+export { TabsList } from "./tabs-list";
+export { TabsTab } from "./tabs-tab";
+export { TabsPanel } from "./tabs-panel";
+export type { TabsProps, TabsListProps, TabsTabProps, TabsPanelProps, TabsClassNames, TabsOrientation, TabsActivationMode, TabsVariant, TabsFactoryPayload, TabsListFactoryPayload, TabsTabFactoryPayload, TabsPanelFactoryPayload } from "./tabs.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EAC1B,MAAM,cAAc,CAAC"}

package/build/components/tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./tabs";
+export { TabsList } from "./tabs-list";
+export { TabsTab } from "./tabs-tab";
+export { TabsPanel } from "./tabs-panel";

package/build/components/tabs/tabs-list/index.d.ts

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

package/build/components/tabs/tabs-list/index.d.ts.map

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

package/build/components/tabs/tabs-list/index.js

@@ -0,0 +1 @@
+export { default as TabsList } from "./tabs-list";

package/build/components/tabs/tabs-list/tabs-list.d.ts

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

package/build/components/tabs/tabs-list/tabs-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-list/tabs-list.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,QAAA,MAAM,QAAQ,+DA+Bb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/build/components/tabs/tabs-list/tabs-list.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTabsContext } from "../tabs.context";
+import { getSize, getVariant } from "../tabs.styles";
+const TabsList = factory(({ children, className, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { orientation, size, radius, variant, getStyles } = useTabsContext();
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant, orientation);
+    return (_jsx("div", { ref: ref, role: "tablist", "aria-orientation": orientation, className: cx("inline-flex shrink-0", orientation === "horizontal"
+            ? "w-full flex-row items-center"
+            : "flex-col items-stretch", sizeStyles.list, variantStyles.list, variant !== "underline" && getRadius(radius), getStyles("list"), className), ...props, children: children }));
+});
+TabsList.displayName = "@refraktor/core/Tabs.List";
+export default TabsList;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-panel/tabs-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,SAAS,gEA+Cd,CAAC;AAIF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTabsContext } from "../tabs.context";
+import { getSize, getVariant } from "../tabs.styles";
+const TabsPanel = factory(({ value, children, className, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { value: activeValue, keepMounted, orientation, size, radius, variant, getTabId, getPanelId, getStyles } = useTabsContext();
+    const isActive = activeValue === value;
+    if (!keepMounted && !isActive) {
+        return null;
+    }
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant, orientation);
+    return (_jsx("div", { ref: ref, id: getPanelId(value), role: "tabpanel", "aria-labelledby": getTabId(value), "data-active": isActive, tabIndex: isActive ? 0 : -1, hidden: !isActive, className: cx("outline-none", sizeStyles.panel, variantStyles.panel, variant !== "underline" && getRadius(radius), getStyles("panel"), className), ...props, children: children }));
+});
+TabsPanel.displayName = "@refraktor/core/Tabs.Panel";
+export default TabsPanel;

package/build/components/tabs/tabs-tab/index.d.ts

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

package/build/components/tabs/tabs-tab/index.d.ts.map

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

package/build/components/tabs/tabs-tab/index.js

@@ -0,0 +1 @@
+export { default as TabsTab } from "./tabs-tab";

package/build/components/tabs/tabs-tab/tabs-tab.d.ts

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

package/build/components/tabs/tabs-tab/tabs-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-tab/tabs-tab.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,QAAA,MAAM,OAAO,8DA6MZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/build/components/tabs/tabs-tab/tabs-tab.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMergedRefs } from "@refraktor/utils";
+import { useEffect, useMemo, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { getNavigableTabs, useTabsContext } from "../tabs.context";
+import { getSize, getVariant } from "../tabs.styles";
+const TabsTab = factory(({ value, disabled, children, className, onClick, onFocus, onKeyDown, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { value: activeValue, onValueChange, orientation, activationMode, loop, size, radius, variant, registerTab, getTabs, getTabId, getPanelId, getStyles } = useTabsContext();
+    const localRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+    useEffect(() => {
+        return registerTab({
+            value,
+            ref: localRef,
+            disabled: !!disabled
+        });
+    }, [value, disabled, registerTab]);
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant, orientation);
+    const isActive = activeValue === value;
+    const isTabStop = useMemo(() => {
+        const firstEnabledTab = getNavigableTabs(getTabs())[0];
+        if (disabled) {
+            return false;
+        }
+        return (isActive || (!activeValue && firstEnabledTab?.value === value));
+    }, [activeValue, disabled, getTabs, isActive, value]);
+    const handleMove = (direction) => {
+        const tabs = getNavigableTabs(getTabs());
+        if (!tabs.length) {
+            return;
+        }
+        const currentIndex = tabs.findIndex((tab) => tab.value === value);
+        if (currentIndex === -1) {
+            return;
+        }
+        let nextIndex = currentIndex + direction;
+        if (loop) {
+            nextIndex = (nextIndex + tabs.length) % tabs.length;
+        }
+        else {
+            nextIndex = Math.min(Math.max(nextIndex, 0), tabs.length - 1);
+        }
+        if (nextIndex === currentIndex) {
+            return;
+        }
+        const nextTab = tabs[nextIndex];
+        nextTab.ref.current?.focus();
+        if (activationMode === "automatic") {
+            onValueChange(nextTab.value);
+        }
+    };
+    const handleBoundary = (type) => {
+        const tabs = getNavigableTabs(getTabs());
+        if (!tabs.length) {
+            return;
+        }
+        const target = type === "first" ? tabs[0] : tabs[tabs.length - 1];
+        target.ref.current?.focus();
+        if (activationMode === "automatic") {
+            onValueChange(target.value);
+        }
+    };
+    return (_jsx("button", { ref: mergedRef, id: getTabId(value), type: "button", role: "tab", "aria-selected": isActive, "aria-controls": getPanelId(value), "aria-disabled": disabled, disabled: disabled, "data-active": isActive, "data-disabled": disabled, tabIndex: isTabStop ? 0 : -1, className: cx("inline-flex items-center justify-center 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", sizeStyles.tab, variantStyles.tab, isActive
+            ? variantStyles.tabActive
+            : variantStyles.tabInactive, variant !== "underline" && getRadius(radius), getStyles("tab"), className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            onValueChange(value);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            if (activationMode === "automatic" && !isActive) {
+                onValueChange(value);
+            }
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+            const nextKey = orientation === "horizontal"
+                ? "ArrowRight"
+                : "ArrowDown";
+            if (event.key === previousKey) {
+                event.preventDefault();
+                handleMove(-1);
+                return;
+            }
+            if (event.key === nextKey) {
+                event.preventDefault();
+                handleMove(1);
+                return;
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                handleBoundary("first");
+                return;
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                handleBoundary("last");
+                return;
+            }
+            if (activationMode === "manual" &&
+                (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                onValueChange(value);
+            }
+        }, ...props, children: children }));
+});
+TabsTab.displayName = "@refraktor/core/Tabs.Tab";
+export default TabsTab;

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

@@ -0,0 +1,35 @@
+import { MutableRefObject } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TabsActivationMode, TabsClassNames, TabsOrientation, TabsVariant } from "./tabs.types";
+export interface TabRegistration {
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+}
+export interface TabsContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    orientation: TabsOrientation;
+    activationMode: TabsActivationMode;
+    loop: boolean;
+    keepMounted: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: TabsVariant;
+    registerTab: (tab: TabRegistration) => () => void;
+    getTabs: () => TabRegistration[];
+    getTabId: (value: string) => string;
+    getPanelId: (value: string) => string;
+    getStyles: (part: keyof TabsClassNames) => string | undefined;
+}
+export declare const TabsProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: TabsContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useTabsContext: () => TabsContextValue;
+export declare function useTabsRegistry(): {
+    registerTab: (tab: TabRegistration) => () => void;
+    getTabs: () => TabRegistration[];
+};
+export declare function sortTabs(tabs: TabRegistration[]): TabRegistration[];
+export declare function getNavigableTabs(tabs: TabRegistration[]): TabRegistration[];
+//# sourceMappingURL=tabs.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.context.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACd,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,MAAM,IAAI,CAAC;IAClD,OAAO,EAAE,MAAM,eAAe,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC;CACjE;AAED,eAAO,MAAO,YAAY;;;+CAAE,cAAc,wBAGrC,CAAC;AAEN,wBAAgB,eAAe;uBAGW,eAAe;;EAmBxD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,EAAE,qBAqB/C;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,EAAE,qBAEvD"}

package/build/components/tabs/tabs.context.js

@@ -0,0 +1,40 @@
+import { createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [TabsProvider, useTabsContext] = createSafeContext("Tabs component was not found in tree. Make sure Tabs.List, Tabs.Tab and Tabs.Panel are wrapped with Tabs.");
+export function useTabsRegistry() {
+    const tabsRef = useRef([]);
+    const registerTab = useCallback((tab) => {
+        tabsRef.current = [
+            ...tabsRef.current.filter((x) => x.value !== tab.value),
+            tab
+        ];
+        return () => {
+            tabsRef.current = tabsRef.current.filter((x) => x.value !== tab.value);
+        };
+    }, []);
+    const getTabs = useCallback(() => sortTabs(tabsRef.current), []);
+    return {
+        registerTab,
+        getTabs
+    };
+}
+export function sortTabs(tabs) {
+    return [...tabs].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 getNavigableTabs(tabs) {
+    return tabs.filter((tab) => !tab.disabled);
+}

package/build/components/tabs/tabs.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAkB,kBAAkB,EAAa,MAAM,cAAc,CAAC;AAe7E,QAAA,MAAM,IAAI,wDA8FR,CAAC;AASH,eAAe,IAAI,CAAC"}