@refraktor/core 0.0.1

package/src/components/slider/slider.tsx

@@ -0,0 +1,275 @@
+import {
+    clamp,
+    getChangeValue,
+    useId,
+    useUncontrolled
+} from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    SliderClassNames,
+    SliderFactoryPayload,
+    SliderProps
+} from "./slider.types";
+import { ReactNode, useCallback, useRef, useState } from "react";
+import { getSize } from "./slider.styles";
+
+const defaultProps = {
+    min: 0,
+    max: 100,
+    step: 1,
+    size: "md",
+    radius: "full",
+    showLabelOnHover: false
+} satisfies Partial<SliderProps>;
+
+const Slider = factory<SliderFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        value,
+        defaultValue,
+        onChange,
+        onChangeEnd,
+        min,
+        max,
+        step,
+        precision,
+        size,
+        radius,
+        disabled,
+        label,
+        showLabelOnHover,
+        marks,
+        className,
+        classNames,
+        ...props
+    } = useProps("Slider", defaultProps, _props);
+    const classes = useClassNames("Slider", classNames);
+
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: min,
+        onChange
+    });
+
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const trackRef = useRef<HTMLDivElement>(null);
+
+    const _id = useId(id);
+    const sizeStyles = getSize(size);
+
+    const getPositionFromValue = (val: number) => {
+        return ((val - min!) / (max! - min!)) * 100;
+    };
+
+    const getValueFromPosition = useCallback(
+        (position: number) => {
+            return getChangeValue({
+                value: position,
+                min: min!,
+                max: max!,
+                step: step!,
+                precision
+            });
+        },
+        [min, max, step, precision]
+    );
+
+    const getPositionFromEvent = useCallback(
+        (
+            event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
+        ) => {
+            if (!trackRef.current) return 0;
+
+            const rect = trackRef.current.getBoundingClientRect();
+            const clientX =
+                "touches" in event ? event.touches[0].clientX : event.clientX;
+
+            const position = (clientX - rect.left) / rect.width;
+            return clamp(position, 0, 1);
+        },
+        []
+    );
+
+    const handleMove = useCallback(
+        (event: MouseEvent | TouchEvent) => {
+            if (disabled) return;
+
+            const position = getPositionFromEvent(event);
+            const newValue = getValueFromPosition(position);
+            handleChange(newValue);
+        },
+        [disabled, getPositionFromEvent, getValueFromPosition, handleChange]
+    );
+
+    const handleEnd = useCallback(() => {
+        setIsDragging(false);
+        onChangeEnd?.(_value);
+
+        document.removeEventListener("mousemove", handleMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleMove);
+        document.removeEventListener("touchend", handleEnd);
+    }, [handleMove, onChangeEnd, _value]);
+
+    const handleStart = useCallback(
+        (event: React.MouseEvent | React.TouchEvent) => {
+            if (disabled) return;
+
+            event.preventDefault();
+            setIsDragging(true);
+
+            const position = getPositionFromEvent(event);
+            const newValue = getValueFromPosition(position);
+            handleChange(newValue);
+
+            document.addEventListener("mousemove", handleMove);
+            document.addEventListener("mouseup", handleEnd);
+            document.addEventListener("touchmove", handleMove);
+            document.addEventListener("touchend", handleEnd);
+        },
+        [
+            disabled,
+            getPositionFromEvent,
+            getValueFromPosition,
+            handleChange,
+            handleMove,
+            handleEnd
+        ]
+    );
+
+    const position = getPositionFromValue(_value);
+    const showLabel =
+        label !== undefined && (isDragging || (showLabelOnHover && isHovered));
+
+    return (
+        <div
+            {...props}
+            ref={ref}
+            id={_id}
+            className={cx(
+                "relative w-full",
+                disabled && "opacity-50 cursor-not-allowed",
+                classes.root,
+                className
+            )}
+        >
+            <div
+                ref={trackRef}
+                className={cx(
+                    "relative w-full bg-[var(--refraktor-bg)] cursor-pointer",
+                    sizeStyles.track,
+                    getRadius(radius),
+                    disabled && "cursor-not-allowed",
+                    classes.track
+                )}
+                onMouseDown={handleStart}
+                onTouchStart={handleStart}
+            >
+                <div
+                    className={cx(
+                        "absolute h-full bg-[var(--refraktor-primary)]",
+                        getRadius(radius),
+                        classes.bar
+                    )}
+                    style={{ width: `${position}%` }}
+                />
+
+                {marks && marks.length > 0 && (
+                    <div
+                        className={cx("absolute inset-0", classes.markWrapper)}
+                    >
+                        {marks.map((mark, index) => {
+                            const markPosition = getPositionFromValue(
+                                mark.value
+                            );
+                            const isActive = mark.value <= _value;
+
+                            return (
+                                <div
+                                    key={index}
+                                    className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center"
+                                    style={{ left: `${markPosition}%` }}
+                                >
+                                    <div
+                                        className={cx(
+                                            "w-1 h-1 rounded-full",
+                                            isActive
+                                                ? "bg-[var(--refraktor-colors-white)]"
+                                                : "bg-[var(--refraktor-text-tertiary)]",
+                                            classes.mark
+                                        )}
+                                    />
+                                    {mark.label && (
+                                        <span
+                                            className={cx(
+                                                "absolute top-4 text-xs text-[var(--refraktor-text-secondary)] whitespace-nowrap",
+                                                classes.markLabel
+                                            )}
+                                        >
+                                            {mark.label}
+                                        </span>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+
+                <div
+                    role="slider"
+                    tabIndex={disabled ? -1 : 0}
+                    aria-valuemin={min}
+                    aria-valuemax={max}
+                    aria-valuenow={_value}
+                    aria-disabled={disabled}
+                    className={cx(
+                        "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
+                        "bg-[var(--refraktor-colors-white)] shadow-md border border-[var(--refraktor-border)]",
+                        "cursor-grab active:cursor-grabbing transition-transform hover:scale-110 focus:outline-none",
+                        sizeStyles.thumb,
+                        getRadius(radius),
+                        disabled && "cursor-not-allowed hover:scale-100",
+                        classes.thumb
+                    )}
+                    style={{ left: `${position}%` }}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    {showLabel && (
+                        <div
+                            className={cx(
+                                "absolute bottom-full left-1/2 -translate-x-1/2 mb-2",
+                                "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] rounded",
+                                "whitespace-nowrap pointer-events-none",
+                                sizeStyles.label,
+                                classes.label
+                            )}
+                        >
+                            {typeof label === "function"
+                                ? (label as (value: number) => ReactNode)(
+                                      _value
+                                  )
+                                : (label ?? _value)}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+});
+
+Slider.displayName = "@refraktor/core/Slider";
+Slider.configure = createComponentConfig<SliderProps>();
+Slider.classNames = createClassNamesConfig<SliderClassNames>();
+
+export default Slider;

package/src/components/slider/slider.types.ts

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

package/src/components/switch/index.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from "./switch";
+export type { SwitchProps, SwitchClassNames } from "./switch.types";

package/src/components/switch/switch.styles.ts

@@ -0,0 +1,31 @@
+import { RefraktorSize } from "../../theme";
+
+const sizes: Record<RefraktorSize, Record<string, string>> = {
+    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: RefraktorSize = "md") => sizes[size];

package/src/components/switch/switch.tsx

@@ -0,0 +1,132 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    SwitchClassNames,
+    SwitchFactoryPayload,
+    SwitchProps
+} from "./switch.types";
+import { getSize } from "./switch.styles";
+
+const defaultProps = {
+    size: "md",
+    radius: "full",
+    labelPosition: "right"
+} satisfies Partial<SwitchProps>;
+
+const Switch = factory<SwitchFactoryPayload>((_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: React.ChangeEvent<HTMLInputElement>) => {
+        handleChange(event.currentTarget.checked);
+        onChange?.(event);
+    };
+
+    return (
+        <div className={cx("inline-flex flex-col", classes.root, className)}>
+            <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}
+            >
+                <input
+                    {...props}
+                    id={_id}
+                    ref={ref}
+                    type="checkbox"
+                    className={cx("sr-only", classes.input)}
+                    checked={value}
+                    onChange={handleOnChange}
+                    disabled={disabled}
+                />
+
+                <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}
+                >
+                    <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
+                        )}
+                    />
+                </div>
+
+                {label && (
+                    <span
+                        className={cx(
+                            "text-[var(--refraktor-text)]",
+                            labelPosition === "left" ? "mr-3" : "ml-3",
+                            sizeClass.label,
+                            classes.label
+                        )}
+                    >
+                        {label}
+                    </span>
+                )}
+            </label>
+
+            {description && (
+                <p className="text-[var(--refraktor-text-tertiary)] text-xs mt-1">
+                    {description}
+                </p>
+            )}
+
+            {error && error !== true && (
+                <p className="text-[var(--refraktor-colors-red-5)] text-xs mt-1">
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+});
+
+Switch.displayName = "@refraktor/core/Switch";
+Switch.configure = createComponentConfig<SwitchProps>();
+Switch.classNames = createClassNamesConfig<SwitchClassNames>();
+
+export default Switch;

package/src/components/switch/switch.types.ts

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

package/src/components/tabs/index.ts

@@ -0,0 +1,18 @@
+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";

package/src/components/tabs/tabs-list/index.ts

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

package/src/components/tabs/tabs-list/tabs-list.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTabsContext } from "../tabs.context";
+import { getSize, getVariant } from "../tabs.styles";
+import { TabsListFactoryPayload } from "../tabs.types";
+
+const TabsList = factory<TabsListFactoryPayload>(
+    ({ 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 (
+            <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}
+            </div>
+        );
+    }
+);
+
+TabsList.displayName = "@refraktor/core/Tabs.List";
+
+export default TabsList;

package/src/components/tabs/tabs-panel/index.ts

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