@refraktor/core 0.0.1

package/build/components/tabs/tabs.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { TabsList } from "./tabs-list";
+import { TabsPanel } from "./tabs-panel";
+import { getNavigableTabs, TabsProvider, useTabsRegistry } from "./tabs.context";
+import { TabsTab } from "./tabs-tab";
+const defaultProps = {
+    orientation: "horizontal",
+    activationMode: "automatic",
+    loop: true,
+    keepMounted: false,
+    size: "md",
+    radius: "default",
+    variant: "underline"
+};
+const toDomSafeValue = (value) => encodeURIComponent(value).replace(/%/g, "-");
+const Tabs = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, orientation, activationMode, loop, keepMounted, size, radius, variant, className, classNames, ...props } = useProps("Tabs", defaultProps, _props);
+    const classes = useClassNames("Tabs", classNames);
+    const _id = useId(id);
+    const [activeValue, setActiveValue, isControlled] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange
+    });
+    const { registerTab, getTabs } = useTabsRegistry();
+    useEffect(() => {
+        if (isControlled || activeValue) {
+            return;
+        }
+        const firstTab = getNavigableTabs(getTabs())[0];
+        if (firstTab) {
+            setActiveValue(firstTab.value);
+        }
+    }, [isControlled, activeValue, getTabs, setActiveValue]);
+    const getTabId = useCallback((tabValue) => `${_id}-tab-${toDomSafeValue(tabValue)}`, [_id]);
+    const getPanelId = useCallback((tabValue) => `${_id}-panel-${toDomSafeValue(tabValue)}`, [_id]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    return (_jsx(TabsProvider, { value: {
+            value: activeValue,
+            onValueChange: setActiveValue,
+            orientation,
+            activationMode,
+            loop,
+            keepMounted,
+            size,
+            radius,
+            variant,
+            registerTab,
+            getTabs,
+            getTabId,
+            getPanelId,
+            getStyles
+        }, children: _jsx("div", { ref: ref, id: _id, className: cx("w-full", orientation === "vertical" && "flex items-start gap-3", classes.root, className), ...props, children: children }) }));
+});
+Tabs.displayName = "@refraktor/core/Tabs";
+Tabs.configure = createComponentConfig();
+Tabs.classNames = createClassNamesConfig();
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Panel = TabsPanel;
+export default Tabs;

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

@@ -0,0 +1,18 @@
+import { RefraktorSize } from "../../theme";
+import { TabsOrientation, TabsVariant } from "./tabs.types";
+type TabsSizeStyles = {
+    list: string;
+    tab: string;
+    panel: string;
+};
+type TabsVariantStyles = {
+    list: string;
+    tab: string;
+    tabActive: string;
+    tabInactive: string;
+    panel: string;
+};
+export declare const getSize: (size?: RefraktorSize) => TabsSizeStyles;
+export declare function getVariant(variant?: TabsVariant, orientation?: TabsOrientation): TabsVariantStyles;
+export {};
+//# sourceMappingURL=tabs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE5D,KAAK,cAAc,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8BF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,mBAAgB,CAAC;AAsBnE,wBAAgB,UAAU,CACtB,OAAO,GAAE,WAAyB,EAClC,WAAW,GAAE,eAA8B,GAC5C,iBAAiB,CAqBnB"}

package/build/components/tabs/tabs.styles.js

@@ -0,0 +1,61 @@
+const sizes = {
+    xs: {
+        list: "p-0.5 gap-0.5",
+        tab: "h-6 px-2 text-xs",
+        panel: "pt-2 text-xs"
+    },
+    sm: {
+        list: "p-0.5 gap-0.5",
+        tab: "h-7 px-2.5 text-xs",
+        panel: "pt-2.5 text-sm"
+    },
+    md: {
+        list: "p-1 gap-1",
+        tab: "h-8 px-3 text-sm",
+        panel: "pt-3 text-sm"
+    },
+    lg: {
+        list: "p-1 gap-1",
+        tab: "h-9 px-3.5 text-base",
+        panel: "pt-3.5 text-base"
+    },
+    xl: {
+        list: "p-1.5 gap-1.5",
+        tab: "h-10 px-4 text-lg",
+        panel: "pt-4 text-lg"
+    }
+};
+export const getSize = (size = "md") => sizes[size];
+const variants = {
+    pills: {
+        list: "bg-transparent",
+        tab: "border border-transparent",
+        tabActive: "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]",
+        tabInactive: "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]",
+        panel: "text-[var(--refraktor-text)]"
+    },
+    underline: {
+        list: "",
+        tab: "border-transparent",
+        tabActive: "text-[var(--refraktor-text)]",
+        tabInactive: "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]",
+        panel: "text-[var(--refraktor-text)]"
+    }
+};
+export function getVariant(variant = "underline", orientation = "horizontal") {
+    const styles = variants[variant];
+    if (variant !== "underline") {
+        return styles;
+    }
+    return {
+        ...styles,
+        list: orientation === "horizontal" ? "gap-1" : "gap-1 pr-1",
+        tab: orientation === "horizontal"
+            ? "rounded-t-[var(--refraktor-radius-sm)] border-b-2 border-transparent"
+            : "rounded-l-[var(--refraktor-radius-sm)] border-r-2 border-transparent justify-start",
+        tabActive: orientation === "horizontal"
+            ? "text-[var(--refraktor-text)] border-[var(--refraktor-primary)]"
+            : "text-[var(--refraktor-text)] border-[var(--refraktor-primary)]",
+        tabInactive: "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] hover:border-[var(--refraktor-primary)]"
+    };
+}

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

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

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

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

package/build/components/tabs/tabs.test.js

@@ -0,0 +1,61 @@
+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 Tabs from "./tabs";
+describe("@refraktor/core/Tabs", () => {
+    it("renders default active tab and panel", async () => {
+        await render(_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", children: "Security" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "security", children: "Security panel" })] }));
+        expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByText("Account panel")).toBeInTheDocument();
+        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
+    });
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        function Demo() {
+            const [value, setValue] = useState("account");
+            return (_jsxs(Tabs, { value: value, onChange: (nextValue) => {
+                    onChange(nextValue);
+                    setValue(nextValue);
+                }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", children: "Security" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "security", children: "Security panel" })] }));
+        }
+        await render(_jsx(Demo, {}));
+        await user.click(screen.getByRole("tab", { name: "Security" }));
+        expect(onChange).toHaveBeenCalledWith("security");
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+    it("supports keyboard navigation with automatic activation", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", children: "Security" }), _jsx(Tabs.Tab, { value: "billing", children: "Billing" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "security", children: "Security panel" }), _jsx(Tabs.Panel, { value: "billing", children: "Billing panel" })] }));
+        screen.getByRole("tab", { name: "Account" }).focus();
+        await user.keyboard("{ArrowRight}");
+        expect(screen.getByRole("tab", { name: "Security" })).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+    it("supports manual activation mode", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Tabs, { defaultValue: "account", activationMode: "manual", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", children: "Security" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "security", children: "Security panel" })] }));
+        screen.getByRole("tab", { name: "Account" }).focus();
+        await user.keyboard("{ArrowRight}");
+        expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByRole("tab", { name: "Security" })).toHaveFocus();
+        await user.keyboard("{Enter}");
+        expect(screen.getByRole("tab", { name: "Security" })).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+    it("keeps inactive panels mounted when keepMounted is true", async () => {
+        await render(_jsxs(Tabs, { defaultValue: "account", keepMounted: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", children: "Security" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "security", children: "Security panel" })] }));
+        const hiddenPanel = screen.getByText("Security panel");
+        expect(hiddenPanel).toBeInTheDocument();
+        expect(hiddenPanel).toHaveAttribute("hidden");
+    });
+    it("skips disabled tabs during keyboard navigation", async () => {
+        const user = userEvent.setup();
+        await render(_jsxs(Tabs, { defaultValue: "account", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "account", children: "Account" }), _jsx(Tabs.Tab, { value: "security", disabled: true, children: "Security" }), _jsx(Tabs.Tab, { value: "billing", children: "Billing" })] }), _jsx(Tabs.Panel, { value: "account", children: "Account panel" }), _jsx(Tabs.Panel, { value: "billing", children: "Billing panel" })] }));
+        screen.getByRole("tab", { name: "Account" }).focus();
+        await user.keyboard("{ArrowRight}");
+        expect(screen.getByRole("tab", { name: "Billing" })).toHaveAttribute("aria-selected", "true");
+        expect(screen.getByText("Billing panel")).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,91 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { TabsList } from "./tabs-list";
+import { TabsPanel } from "./tabs-panel";
+import { TabsTab } from "./tabs-tab";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+export type TabsVariant = "pills" | "underline";
+export type TabsClassNames = {
+    root?: string;
+    list?: string;
+    tab?: string;
+    panel?: string;
+};
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Children containing subcomponents */
+    children: ReactNode;
+    /** Active tab value (controlled) */
+    value?: string;
+    /** Initial active tab value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback called when active tab changes */
+    onChange?: (value: string) => void;
+    /** Tabs orientation @default `horizontal` */
+    orientation?: TabsOrientation;
+    /** Keyboard activation mode @default `automatic` */
+    activationMode?: TabsActivationMode;
+    /** Whether keyboard navigation should wrap around @default `true` */
+    loop?: boolean;
+    /** Keep all panels mounted and toggle hidden state @default `false` */
+    keepMounted?: boolean;
+    /** The size of tabs @default `md` */
+    size?: RefraktorSize;
+    /** The radius used for list and tabs @default `default` */
+    radius?: RefraktorRadius;
+    /** Visual style variant @default `underline` */
+    variant?: TabsVariant;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: TabsClassNames;
+}
+export interface TabsListProps extends ComponentPropsWithoutRef<"div"> {
+    /** The tab list content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> {
+    /** The tab value used to link with panel */
+    value: string;
+    /** Whether the tab is disabled @default `false` */
+    disabled?: boolean;
+    /** The tab label */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface TabsPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /** Panel value used to match tab */
+    value: string;
+    /** Panel content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface TabsFactoryPayload extends FactoryPayload {
+    props: TabsProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TabsProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<TabsClassNames>>;
+        List: typeof TabsList;
+        Tab: typeof TabsTab;
+        Panel: typeof TabsPanel;
+    };
+}
+export interface TabsListFactoryPayload extends FactoryPayload {
+    props: TabsListProps;
+    ref: HTMLDivElement;
+}
+export interface TabsTabFactoryPayload extends FactoryPayload {
+    props: TabsTabProps;
+    ref: HTMLButtonElement;
+}
+export interface TabsPanelFactoryPayload extends FactoryPayload {
+    props: TabsPanelProps;
+    ref: HTMLDivElement;
+}
+//# sourceMappingURL=tabs.types.d.ts.map

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

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

package/build/components/tabs/tabs.types.js

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

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

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

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

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

package/build/components/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./textarea";
+export * from "./textarea.types";

package/build/components/textarea/textarea-field/index.d.ts

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

package/build/components/textarea/textarea-field/index.d.ts.map

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

package/build/components/textarea/textarea-field/index.js

@@ -0,0 +1 @@
+export { default as TextareaField } from "./textarea-field";

package/build/components/textarea/textarea-field/textarea-field.d.ts

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

package/build/components/textarea/textarea-field/textarea-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/textarea-field/textarea-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,2BAA2B,EAE9B,MAAM,mBAAmB,CAAC;AAa3B,QAAA,MAAM,aAAa,oEAwEjB,CAAC;AAKH,eAAe,aAAa,CAAC"}

package/build/components/textarea/textarea-field/textarea-field.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentConfig, factory, useProps } from "../../../utils";
+import { useId } from "@refraktor/utils";
+import { getSize, getVariant, getResize } from "./textarea-field.styles";
+import { useTheme } from "../../../theme";
+import TextareaAutosize from "react-textarea-autosize";
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default",
+    autosize: false,
+    minRows: 2
+};
+const TextareaField = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, variant, size, radius, error, className, style, disabled, autosize, minRows, maxRows, resize, rows, ...props } = useProps("TextareaField", defaultProps, _props);
+    const _id = useId(id);
+    const resolvedResize = resize ?? (autosize ? "none" : "vertical");
+    const textareaClassName = cx("w-full outline-none border-none bg-transparent p-0", "text-[var(--refraktor-text)]", "placeholder:text-[var(--refraktor-text-tertiary)]", getResize(resolvedResize), disabled && "cursor-not-allowed");
+    const wrapperClassName = cx("w-full transition-all refraktor-scrollbar", getSize(size), getVariant(variant), getRadius(radius), "focus-within:border-[var(--refraktor-primary)]", error && "border-[var(--refraktor-colors-red-6)]", disabled && "opacity-50 cursor-not-allowed", className);
+    if (autosize) {
+        return (_jsx("div", { className: wrapperClassName, style: style, children: _jsx(TextareaAutosize, { id: _id, ref: ref, disabled: disabled, "aria-invalid": error ? true : undefined, minRows: minRows, maxRows: maxRows, className: textareaClassName, ...props }) }));
+    }
+    return (_jsx("div", { className: wrapperClassName, style: style, children: _jsx("textarea", { id: _id, ref: ref, disabled: disabled, "aria-invalid": error ? true : undefined, rows: rows ?? minRows, className: textareaClassName, ...props }) }));
+});
+TextareaField.displayName = "@refraktor/core/TextareaField";
+TextareaField.configure = createComponentConfig();
+export default TextareaField;

package/build/components/textarea/textarea-field/textarea-field.styles.d.ts

@@ -0,0 +1,7 @@
+import { RefraktorSize } from "../../../theme";
+import { InputVariant } from "../../input";
+import { TextareaResize } from "../textarea.types";
+export declare const getSize: (size?: RefraktorSize) => string;
+export declare const getVariant: (variant?: InputVariant) => string;
+export declare const getResize: (resize?: TextareaResize) => string;
+//# sourceMappingURL=textarea-field.styles.d.ts.map

package/build/components/textarea/textarea-field/textarea-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/textarea-field/textarea-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAUnD,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,WAAgB,CAAC;AAUnE,eAAO,MAAM,UAAU,GAAI,UAAS,YAAwB,WACvC,CAAC;AAStB,eAAO,MAAM,SAAS,GAAI,SAAQ,cAA2B,WAC1C,CAAC"}

package/build/components/textarea/textarea-field/textarea-field.styles.js

@@ -0,0 +1,21 @@
+const sizes = {
+    xs: "px-2 py-1 text-[8px]",
+    sm: "px-2.5 py-1.5 text-[10px]",
+    md: "px-3 py-2 text-xs",
+    lg: "px-3.5 py-2.5 text-sm",
+    xl: "px-4 py-3 text-base"
+};
+export const getSize = (size = "md") => sizes[size];
+const variants = {
+    default: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)]",
+    filled: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)]",
+    outline: "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)]"
+};
+export const getVariant = (variant = "default") => variants[variant];
+const resizes = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize"
+};
+export const getResize = (resize = "vertical") => resizes[resize];

package/build/components/textarea/textarea.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAiB,MAAM,kBAAkB,CAAC;AAUzE,QAAA,MAAM,QAAQ,4DA6CZ,CAAC;AAMH,eAAe,QAAQ,CAAC"}

package/build/components/textarea/textarea.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { createComponentConfig, factory, useProps } from "../../utils";
+import { InputWrapper } from "../input/input-wrapper";
+import { TextareaField } from "./textarea-field";
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default"
+};
+const Textarea = factory((_props, ref) => {
+    const { id, label, description, error, required, withAsterisk, ...props } = useProps("Textarea", defaultProps, _props);
+    const _id = useId(id);
+    const hasWrapper = label || description || error;
+    if (!hasWrapper) {
+        return (_jsx(TextareaField, { ref: ref, id: _id, required: required, error: !!error, ...props }));
+    }
+    return (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: _id, children: _jsx(TextareaField, { ref: ref, id: _id, required: required, error: !!error, "aria-describedby": error
+                ? `${_id}-error`
+                : description
+                    ? `${_id}-description`
+                    : undefined, ...props }) }));
+});
+Textarea.displayName = "@refraktor/core/Textarea";
+Textarea.configure = createComponentConfig();
+Textarea.Field = TextareaField;
+export default Textarea;

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

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createComponentConfig, FactoryPayload } from "../../utils";
+import { InputVariant } from "../input";
+import { TextareaField } from "./textarea-field";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+export type TextareaFieldClassNames = {
+    root?: string;
+};
+export interface TextareaFieldProps extends Omit<ComponentPropsWithoutRef<"textarea">, "size"> {
+    /** Textarea variant @default `default` */
+    variant?: InputVariant;
+    /** Textarea size @default `md` */
+    size?: RefraktorSize;
+    /** Textarea radius @default `default` */
+    radius?: RefraktorRadius;
+    /** Error state */
+    error?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Class names for sub-elements */
+    classNames?: TextareaFieldClassNames;
+    /** Enable auto-resizing based on content @default false */
+    autosize?: boolean;
+    /** Minimum number of rows (only works with autosize) @default 2 */
+    minRows?: number;
+    /** Maximum number of rows (only works with autosize) */
+    maxRows?: number;
+    /** Controls the resize behavior @default `none` when autosize, `vertical` otherwise */
+    resize?: TextareaResize;
+}
+export interface TextareaProps extends Omit<TextareaFieldProps, "error"> {
+    /** Label text */
+    label?: ReactNode;
+    /** Description text */
+    description?: ReactNode;
+    /** Error message */
+    error?: ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Display an asterisk next to the label */
+    withAsterisk?: boolean;
+}
+export interface TextareaFactoryPayload extends FactoryPayload {
+    props: TextareaProps;
+    ref: HTMLTextAreaElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TextareaProps>>;
+        Field: typeof TextareaField;
+    };
+}
+export interface TextareaFieldFactoryPayload extends FactoryPayload {
+    props: TextareaFieldProps;
+    ref: HTMLTextAreaElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TextareaFieldProps>>;
+    };
+}
+//# sourceMappingURL=textarea.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.types.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.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,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,MAAM,MAAM,uBAAuB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC5C,wBAAwB,CAAC,UAAU,CAAC,EACpC,MAAM,CACT;IACG,0CAA0C;IAC1C,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,kCAAkC;IAClC,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,yCAAyC;IACzC,MAAM,CAAC,EAAE,eAAe,CAAC;IAEzB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAErC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACpE,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,uBAAuB;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC1D,KAAK,EAAE,aAAa,CAAC;IACrB,GAAG,EAAE,mBAAmB,CAAC;IACzB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,aAAa,CAAC,CAAC,CAAC;QACnE,KAAK,EAAE,OAAO,aAAa,CAAC;KAC/B,CAAC;CACL;AAED,MAAM,WAAW,2BAA4B,SAAQ,cAAc;IAC/D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,mBAAmB,CAAC;IACzB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC3E,CAAC;CACL"}

package/build/components/textarea/textarea.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Timeline } from "./timeline";
+export { TimelineItem } from "./timeline-item";
+export type { TimelineProps, TimelineItemProps, TimelineClassNames, TimelineOrientation, TimelineLineVariant, TimelineFactoryPayload, TimelineItemFactoryPayload } from "./timeline.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EACR,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,0BAA0B,EAC7B,MAAM,kBAAkB,CAAC"}

package/build/components/timeline/index.js

@@ -0,0 +1,2 @@
+export { default as Timeline } from "./timeline";
+export { TimelineItem } from "./timeline-item";

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.d.ts","sourceRoot":"","sources":["../../../../src/components/timeline/timeline-item/timeline-item.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAE/D,QAAA,MAAM,YAAY,mEAkJjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTimelineContext } from "../timeline.context";
+import { getConnector, getSize, getStatus } from "../timeline.styles";
+const TimelineItem = factory(({ date, title, bullet, line = true, children, className, __timelineIndex, __timelineCount, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { orientation, size, radius, lineVariant, active, getStyles } = useTimelineContext();
+    const isActive = typeof __timelineIndex === "number" &&
+        active >= 0 &&
+        __timelineIndex <= active;
+    const sizeStyles = getSize(size);
+    const statusStyles = getStatus(isActive);
+    const connectorStyles = getConnector(lineVariant, orientation);
+    const isLast = typeof __timelineIndex === "number" &&
+        typeof __timelineCount === "number" &&
+        __timelineIndex === __timelineCount - 1;
+    const showConnector = line && !isLast;
+    const connectorColorStyle = {
+        "--refraktor-timeline-connector-color": statusStyles.connectorColor
+    };
+    return (_jsxs("div", { ref: ref, role: "listitem", "data-active": isActive, "data-orientation": orientation, className: cx("min-w-0", orientation === "horizontal"
+            ? "flex-1 flex flex-col"
+            : "flex items-stretch last:pb-0", orientation === "vertical" && sizeStyles.itemSpacing, sizeStyles.itemGap, getStyles("item"), className), ...props, children: [_jsxs("div", { className: cx("shrink-0", orientation === "horizontal"
+                    ? "w-full flex items-center"
+                    : "h-full self-stretch flex flex-col items-center", orientation === "vertical" && sizeStyles.bulletWrapper, getStyles("bulletWrapper")), children: [_jsx("span", { "data-timeline-bullet": "true", className: cx("inline-flex items-center justify-center", "select-none", sizeStyles.bullet, getRadius(radius), statusStyles.bullet, getStyles("bullet")), children: bullet && bullet }), showConnector && (_jsx("span", { "aria-hidden": "true", "data-timeline-connector": "true", style: connectorColorStyle, className: cx(connectorStyles, orientation === "vertical" &&
+                            sizeStyles.connectorExtend, getStyles("connector")) }))] }), _jsxs("div", { className: cx("min-w-0 flex flex-col", orientation === "horizontal" && "mt-1", sizeStyles.contentGap, getStyles("content")), children: [date && (_jsx("div", { "data-timeline-date": "true", className: cx("leading-none", sizeStyles.date, statusStyles.date, getStyles("date")), children: date })), title && (_jsx("div", { className: cx("font-medium leading-tight", sizeStyles.title, statusStyles.title, getStyles("title")), children: title })), children !== undefined && children !== null && (_jsx("div", { className: cx("leading-snug", sizeStyles.description, statusStyles.description, getStyles("description")), children: children }))] })] }));
+});
+TimelineItem.displayName = "@refraktor/core/Timeline.Item";
+export default TimelineItem;

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

@@ -0,0 +1,15 @@
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TimelineClassNames, TimelineLineVariant, TimelineOrientation } from "./timeline.types";
+export interface TimelineContextValue {
+    orientation: TimelineOrientation;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    lineVariant: TimelineLineVariant;
+    active: number;
+    getStyles: (part: keyof TimelineClassNames) => string | undefined;
+}
+export declare const TimelineProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: TimelineContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useTimelineContext: () => TimelineContextValue;
+//# sourceMappingURL=timeline.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.context.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACH,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,kBAAkB,KAAK,MAAM,GAAG,SAAS,CAAC;CACrE;AAED,eAAO,MAAO,gBAAgB;;;+CAAE,kBAAkB,4BAG7C,CAAC"}

package/build/components/timeline/timeline.context.js

@@ -0,0 +1,2 @@
+import { createSafeContext } from "@refraktor/utils";
+export const [TimelineProvider, useTimelineContext] = createSafeContext("Timeline component was not found in tree. Make sure Timeline.Item is wrapped with Timeline.");