@refraktor/core 0.0.4 → 0.0.5

package/src/components/slider/index.ts

@@ -1,7 +0,0 @@
-export { default as Slider } from "./slider";
-export type {
-    SliderProps,
-    SliderClassNames,
-    SliderMark,
-    SliderFactoryPayload
-} from "./slider.types";

package/src/components/slider/slider.styles.ts

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

package/src/components/slider/slider.tsx

@@ -1,275 +0,0 @@
-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

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

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

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

@@ -1,31 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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-2" : "ml-2",
-                            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

@@ -1,62 +0,0 @@
-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/table/index.ts

@@ -1,24 +0,0 @@
-export { default as Table } from "./table";
-export { TableHead } from "./table-head";
-export { TableBody } from "./table-body";
-export { TableRow } from "./table-row";
-export { TableHeaderCell } from "./table-header-cell";
-export { TableCell } from "./table-cell";
-export { TableCaption } from "./table-caption";
-export type {
-    TableProps,
-    TableHeadProps,
-    TableBodyProps,
-    TableRowProps,
-    TableHeaderCellProps,
-    TableCellProps,
-    TableCaptionProps,
-    TableClassNames,
-    TableFactoryPayload,
-    TableHeadFactoryPayload,
-    TableBodyFactoryPayload,
-    TableRowFactoryPayload,
-    TableHeaderCellFactoryPayload,
-    TableCellFactoryPayload,
-    TableCaptionFactoryPayload
-} from "./table.types";

package/src/components/table/table-body/index.ts

@@ -1 +0,0 @@
-export { default as TableBody } from "./table-body";

package/src/components/table/table-body/table-body.tsx

@@ -1,37 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useTableContext } from "../table.context";
-import { getBodyStyles } from "../table.styles";
-import { TableBodyFactoryPayload } from "../table.types";
-
-const TableBody = factory<TableBodyFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const {
-            striped,
-            highlightOnHover,
-            withRowBorders,
-            getStyles
-        } = useTableContext();
-
-        const bodyStyles = getBodyStyles({
-            striped,
-            highlightOnHover,
-            withRowBorders
-        });
-
-        return (
-            <tbody
-                ref={ref}
-                className={cx("align-top", bodyStyles, getStyles("body"), className)}
-                {...props}
-            >
-                {children}
-            </tbody>
-        );
-    }
-);
-
-TableBody.displayName = "@refraktor/core/Table.Body";
-
-export default TableBody;