@refraktor/core 0.0.1

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,137 @@
+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";
+import { TabsClassNames, TabsFactoryPayload, TabsProps } from "./tabs.types";
+
+const defaultProps = {
+    orientation: "horizontal",
+    activationMode: "automatic",
+    loop: true,
+    keepMounted: false,
+    size: "md",
+    radius: "default",
+    variant: "underline"
+} satisfies Partial<TabsProps>;
+
+const toDomSafeValue = (value: string) =>
+    encodeURIComponent(value).replace(/%/g, "-");
+
+const Tabs = factory<TabsFactoryPayload>((_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<string>(
+        {
+            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: string) => `${_id}-tab-${toDomSafeValue(tabValue)}`,
+        [_id]
+    );
+
+    const getPanelId = useCallback(
+        (tabValue: string) => `${_id}-panel-${toDomSafeValue(tabValue)}`,
+        [_id]
+    );
+
+    const getStyles = useCallback(
+        (part: keyof TabsClassNames) => classes[part],
+        [classes]
+    );
+
+    return (
+        <TabsProvider
+            value={{
+                value: activeValue,
+                onValueChange: setActiveValue,
+                orientation,
+                activationMode,
+                loop,
+                keepMounted,
+                size,
+                radius,
+                variant,
+                registerTab,
+                getTabs,
+                getTabId,
+                getPanelId,
+                getStyles
+            }}
+        >
+            <div
+                ref={ref}
+                id={_id}
+                className={cx(
+                    "w-full",
+                    orientation === "vertical" && "flex items-start gap-3",
+                    classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </TabsProvider>
+    );
+});
+
+Tabs.displayName = "@refraktor/core/Tabs";
+Tabs.configure = createComponentConfig<TabsProps>();
+Tabs.classNames = createClassNamesConfig<TabsClassNames>();
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Panel = TabsPanel;
+
+export default Tabs;

package/src/components/tabs/tabs.types.ts

@@ -0,0 +1,128 @@
+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;
+}

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea-field/index.ts

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

package/src/components/textarea/textarea-field/textarea-field.styles.ts

@@ -0,0 +1,34 @@
+import { RefraktorSize } from "../../../theme";
+import { InputVariant } from "../../input";
+import { TextareaResize } from "../textarea.types";
+
+const sizes: Record<RefraktorSize, string> = {
+    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: RefraktorSize = "md") => sizes[size];
+
+const variants: Record<InputVariant, string> = {
+    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: InputVariant = "default") =>
+    variants[variant];
+
+const resizes: Record<TextareaResize, string> = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize"
+};
+
+export const getResize = (resize: TextareaResize = "vertical") =>
+    resizes[resize];

package/src/components/textarea/textarea-field/textarea-field.tsx

@@ -0,0 +1,96 @@
+import { createComponentConfig, factory, useProps } from "../../../utils";
+import { useId } from "@refraktor/utils";
+import {
+    TextareaFieldFactoryPayload,
+    TextareaFieldProps
+} from "../textarea.types";
+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
+} satisfies Partial<TextareaFieldProps>;
+
+const TextareaField = factory<TextareaFieldFactoryPayload>((_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 (
+            <div className={wrapperClassName} style={style}>
+                <TextareaAutosize
+                    id={_id}
+                    ref={ref}
+                    disabled={disabled}
+                    aria-invalid={error ? true : undefined}
+                    minRows={minRows}
+                    maxRows={maxRows}
+                    className={textareaClassName}
+                    {...props}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className={wrapperClassName} style={style}>
+            <textarea
+                id={_id}
+                ref={ref}
+                disabled={disabled}
+                aria-invalid={error ? true : undefined}
+                rows={rows ?? minRows}
+                className={textareaClassName}
+                {...props}
+            />
+        </div>
+    );
+});
+
+TextareaField.displayName = "@refraktor/core/TextareaField";
+TextareaField.configure = createComponentConfig<TextareaFieldProps>();
+
+export default TextareaField;

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,64 @@
+import { useId } from "@refraktor/utils";
+import { createComponentConfig, factory, useProps } from "../../utils";
+import { TextareaFactoryPayload, TextareaProps } from "./textarea.types";
+import { InputWrapper } from "../input/input-wrapper";
+import { TextareaField } from "./textarea-field";
+
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default"
+} satisfies Partial<TextareaProps>;
+
+const Textarea = factory<TextareaFactoryPayload>((_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 (
+            <TextareaField
+                ref={ref}
+                id={_id}
+                required={required}
+                error={!!error}
+                {...props}
+            />
+        );
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            <TextareaField
+                ref={ref}
+                id={_id}
+                required={required}
+                error={!!error}
+                aria-describedby={
+                    error
+                        ? `${_id}-error`
+                        : description
+                          ? `${_id}-description`
+                          : undefined
+                }
+                {...props}
+            />
+        </InputWrapper>
+    );
+});
+
+Textarea.displayName = "@refraktor/core/Textarea";
+Textarea.configure = createComponentConfig<TextareaProps>();
+Textarea.Field = TextareaField;
+
+export default Textarea;

package/src/components/textarea/textarea.types.ts

@@ -0,0 +1,80 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createComponentConfig, FactoryPayload } from "../../utils";
+import { InputWrapperProps, 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>>;
+    };
+}

package/src/components/timeline/index.ts

@@ -0,0 +1,11 @@
+export { default as Timeline } from "./timeline";
+export { TimelineItem } from "./timeline-item";
+export type {
+    TimelineProps,
+    TimelineItemProps,
+    TimelineClassNames,
+    TimelineOrientation,
+    TimelineLineVariant,
+    TimelineFactoryPayload,
+    TimelineItemFactoryPayload
+} from "./timeline.types";

package/src/components/timeline/timeline-item/index.ts

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