@refraktor/core 0.0.1

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

@@ -0,0 +1,23 @@
+import { RefraktorSize } from "../../../theme";
+import { InputVariant } from "../input.types";
+
+const sizes: Record<RefraktorSize, string> = {
+    xs: "h-5 px-2 text-[8px]",
+    sm: "h-6 px-2.5 text-[10px]",
+    md: "h-8 px-3 text-xs",
+    lg: "h-10 px-3.5 text-sm",
+    xl: "h-12 px-4 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];

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

@@ -0,0 +1,94 @@
+import { createComponentConfig, factory, useProps } from "../../../utils";
+import { useId } from "@refraktor/utils";
+import { InputFieldFactoryPayload, InputFieldProps } from "../input.types";
+import { getSize, getVariant } from "./input-field.styles";
+import { useTheme } from "../../../theme";
+
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default"
+} satisfies Partial<InputFieldProps>;
+
+const InputField = factory<InputFieldFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        variant,
+        size,
+        radius,
+        error,
+        leftSection,
+        rightSection,
+        className,
+        classNames,
+        style,
+        disabled,
+        ...props
+    } = useProps("InputField", defaultProps, _props);
+
+    const _id = useId(id);
+
+    return (
+        <div
+            className={cx(
+                "relative w-full grid items-center transition-all",
+                leftSection && rightSection && "grid-cols-[auto_1fr_auto]",
+                leftSection && !rightSection && "grid-cols-[auto_1fr]",
+                !leftSection && rightSection && "grid-cols-[1fr_auto]",
+                !leftSection && !rightSection && "grid-cols-[1fr]",
+                (leftSection || rightSection) && "gap-2",
+                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,
+                classNames?.root
+            )}
+            style={style}
+        >
+            {leftSection && (
+                <div
+                    className={cx(
+                        "flex h-full self-stretch items-center justify-center text-[var(--refraktor-text-secondary)] shrink-0 select-none",
+                        classNames?.leftSection
+                    )}
+                >
+                    {leftSection}
+                </div>
+            )}
+
+            <input
+                id={_id}
+                ref={ref}
+                disabled={disabled}
+                aria-invalid={error ? true : undefined}
+                className={cx(
+                    "w-full h-full outline-none border-none bg-transparent p-0",
+                    "text-[var(--refraktor-text)]",
+                    "placeholder:text-[var(--refraktor-text-tertiary)]",
+                    disabled && "cursor-not-allowed"
+                )}
+                {...props}
+            />
+
+            {rightSection && (
+                <div
+                    className={cx(
+                        "flex h-full self-stretch items-center justify-center text-[var(--refraktor-text-secondary)] shrink-0 select-none",
+                        classNames?.rightSection
+                    )}
+                >
+                    {rightSection}
+                </div>
+            )}
+        </div>
+    );
+});
+
+InputField.displayName = "@refraktor/core/InputField";
+InputField.configure = createComponentConfig<InputFieldProps>();
+
+export default InputField;

package/src/components/input/input-label/index.ts

@@ -0,0 +1,2 @@
+export { default as InputLabel } from "./input-label";
+export type { InputLabelProps } from "./input-label";

package/src/components/input/input-label/input-label.tsx

@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef } from "react";
+import { factory, useProps, cx } from "../../../utils";
+
+export interface InputLabelProps extends ComponentPropsWithoutRef<"label"> {
+    /** Show required asterisk */
+    required?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+const InputLabel = factory<{
+    props: InputLabelProps;
+    ref: HTMLLabelElement;
+}>((_props, ref) => {
+    const { required, className, children, ...props } = useProps(
+        "InputLabel",
+        null,
+        _props
+    );
+
+    return (
+        <label
+            ref={ref}
+            className={cx(
+                "inline-block text-xs font-medium mb-0.5",
+                "text-[var(--refraktor-text)]",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            {required && (
+                <span
+                    className="ml-1 text-[var(--refraktor-colors-red-5)]"
+                    aria-hidden="true"
+                >
+                    *
+                </span>
+            )}
+        </label>
+    );
+});
+
+InputLabel.displayName = "@refraktor/core/InputLabel";
+
+export default InputLabel;

package/src/components/input/input-wrapper/index.ts

@@ -0,0 +1,2 @@
+export { default as InputWrapper } from "./input-wrapper";
+export type { InputWrapperProps } from "../input.types";

package/src/components/input/input-wrapper/input-wrapper.tsx

@@ -0,0 +1,43 @@
+import { factory, useProps, cx, createComponentConfig } from "../../../utils";
+import { InputDescription } from "../input-description";
+import { InputError } from "../input-error";
+import { InputLabel } from "../input-label";
+import { InputWrapperFactoryPayload, InputWrapperProps } from "../input.types";
+
+const InputWrapper = factory<InputWrapperFactoryPayload>((_props, ref) => {
+    const {
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        inputId,
+        children,
+        className,
+        ...props
+    } = useProps("InputWrapper", null, _props);
+
+    const showAsterisk = withAsterisk || required;
+
+    return (
+        <div ref={ref} className={cx("flex flex-col", className)} {...props}>
+            {label && (
+                <InputLabel htmlFor={inputId} required={showAsterisk}>
+                    {label}
+                </InputLabel>
+            )}
+
+            {description && <InputDescription>{description}</InputDescription>}
+
+            {children}
+
+            {error && typeof error !== "boolean" && (
+                <InputError>{error}</InputError>
+            )}
+        </div>
+    );
+});
+
+InputWrapper.displayName = "@refraktor/core/InputWrapper";
+
+export default InputWrapper;

package/src/components/input/input.tsx

@@ -0,0 +1,71 @@
+import { useId } from "@refraktor/utils";
+import { createComponentConfig, factory, useProps } from "../../utils";
+import { InputFactoryPayload, InputProps } from "./input.types";
+import { InputWrapper } from "./input-wrapper";
+import { InputLabel } from "./input-label";
+import { InputDescription } from "./input-description";
+import { InputError } from "./input-error";
+import { InputField } from "./input-field";
+
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default"
+} satisfies Partial<InputProps>;
+
+const Input = factory<InputFactoryPayload>((_props, ref) => {
+    const { id, label, description, error, required, withAsterisk, ...props } =
+        useProps("Input", defaultProps, _props);
+
+    const _id = useId(id);
+
+    const hasWrapper = label || description || error;
+
+    if (!hasWrapper) {
+        return (
+            <InputField
+                ref={ref}
+                id={_id}
+                required={required}
+                error={!!error}
+                {...props}
+            />
+        );
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            <InputField
+                ref={ref}
+                id={_id}
+                required={required}
+                error={!!error}
+                aria-describedby={
+                    error
+                        ? `${_id}-error`
+                        : description
+                        ? `${_id}-description`
+                        : undefined
+                }
+                {...props}
+            />
+        </InputWrapper>
+    );
+});
+
+Input.displayName = "@refraktor/core/Input";
+Input.configure = createComponentConfig<InputProps>();
+Input.Wrapper = InputWrapper;
+Input.Label = InputLabel;
+Input.Description = InputDescription;
+Input.Error = InputError;
+Input.Field = InputField;
+
+export default Input;

package/src/components/input/input.types.ts

@@ -0,0 +1,111 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { createComponentConfig, FactoryPayload } from "../../utils";
+import { InputLabel } from "./input-label";
+import { InputDescription } from "./input-description";
+import { InputError } from "./input-error";
+import { InputField } from "./input-field";
+import { InputWrapper } from "./input-wrapper";
+
+export type InputVariant = "default" | "filled" | "outline";
+
+export type InputFieldClassNames = {
+    root?: string;
+    leftSection?: string;
+    rightSection?: string;
+};
+
+export interface InputWrapperProps extends ComponentPropsWithoutRef<"div"> {
+    /** Label text */
+    label?: ReactNode;
+
+    /** Description text displayed below the label */
+    description?: ReactNode;
+
+    /** Error message */
+    error?: ReactNode;
+
+    /** Whether the field is required */
+    required?: boolean;
+
+    /** Display an asterisk next to the label */
+    withAsterisk?: boolean;
+
+    /** Input id for label association */
+    inputId?: string;
+
+    /** Children (input field) */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface InputFieldProps
+    extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+    /** Input variant @default `default` */
+    variant?: InputVariant;
+
+    /** Input size @default `md` */
+    size?: RefraktorSize;
+
+    /** Input radius @default `md` */
+    radius?: RefraktorRadius;
+
+    /** Error state */
+    error?: boolean;
+
+    /** Left section content */
+    leftSection?: ReactNode;
+
+    /** Right section content */
+    rightSection?: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    classNames?: InputFieldClassNames;
+}
+
+export interface InputProps extends Omit<InputFieldProps, "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 InputFactoryPayload extends FactoryPayload {
+    props: InputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<InputProps>>;
+        Wrapper: typeof InputWrapper;
+        Label: typeof InputLabel;
+        Description: typeof InputDescription;
+        Error: typeof InputError;
+        Field: typeof InputField;
+    };
+}
+
+export interface InputWrapperFactoryPayload extends FactoryPayload {
+    props: InputWrapperProps;
+    ref: HTMLDivElement;
+}
+
+export interface InputFieldFactoryPayload extends FactoryPayload {
+    props: InputFieldProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<InputFieldProps>>;
+    };
+}

package/src/components/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as Loader } from "./loader";
+export type { LoaderProps } from "./loader.types";

package/src/components/loader/loader.tsx

@@ -0,0 +1,89 @@
+import { CSSProperties, useMemo } from "react";
+import { createComponentConfig, cx, factory, useProps } from "../../utils";
+import { LoaderFactoryPayload, LoaderProps } from "./loader.types";
+import { useId } from "@refraktor/utils";
+
+const defaultProps = {
+    size: 32,
+    color: "var(--refraktor-primary)",
+    speed: 1,
+    stroke: 3,
+    strokeLength: 0.6,
+    bgOpacity: 0.1
+} satisfies Partial<LoaderProps>;
+
+const Loader = factory<LoaderFactoryPayload>((_props, ref) => {
+    const {
+        id,
+        size,
+        color,
+        speed,
+        stroke,
+        strokeLength,
+        bgOpacity,
+        className,
+        ...props
+    } = useProps("Loader", defaultProps, _props);
+    const _id = useId(id);
+
+    const radius = Math.max(0, size / 2 - stroke / 2);
+    const viewBoxSize = size;
+    const viewBox = `0 0 ${viewBoxSize} ${viewBoxSize}`;
+
+    const { dashArray } = useMemo(() => {
+        const r = Math.max(0, size / 2 - stroke / 2);
+        const c = 2 * Math.PI * r;
+        return { circumference: c, dashArray: `${c * strokeLength} ${c}` };
+    }, [size, stroke, strokeLength]);
+
+    const commonStyle = {
+        "--loader-speed": `${speed}s`
+    } as CSSProperties;
+
+    return (
+        <div
+            ref={ref}
+            id={_id}
+            className={cx("inline-flex items-center justify-center", className)}
+            role="status"
+            {...props}
+        >
+            <svg
+                className="loader-spin"
+                viewBox={viewBox}
+                width={size}
+                height={size}
+                style={commonStyle}
+            >
+                <circle
+                    cx={viewBoxSize / 2}
+                    cy={viewBoxSize / 2}
+                    r={radius}
+                    strokeWidth={stroke}
+                    fill="none"
+                    className="transition-colors duration-500 ease-in-out"
+                    style={{
+                        stroke: color,
+                        opacity: bgOpacity
+                    }}
+                />
+                <circle
+                    cx={viewBoxSize / 2}
+                    cy={viewBoxSize / 2}
+                    r={radius}
+                    strokeWidth={stroke}
+                    strokeDasharray={dashArray}
+                    strokeLinecap="round"
+                    fill="none"
+                    className="transition-colors duration-500 ease-in-out"
+                    style={{ stroke: color }}
+                />
+            </svg>
+        </div>
+    );
+});
+
+Loader.displayName = "@refraktor/core/Loader";
+Loader.configure = createComponentConfig<LoaderProps>();
+
+export default Loader;

package/src/components/loader/loader.types.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef } from "react";
+import { createComponentConfig, FactoryPayload } from "../../utils";
+
+export interface LoaderProps extends ComponentPropsWithoutRef<"div"> {
+    /** The size of the loader @default `32` */
+    size?: number;
+
+    /** The color of the loader @default `var(--refraktor-primary)` */
+    color?: string;
+
+    /** The speed of the loader @default `1` */
+    speed?: number;
+
+    /** The size of the stroke @default `3` */
+    stroke?: number;
+
+    /** The length of the stroke @default `0.6` */
+    strokeLength?: number;
+
+    /** The opacity of the background @default `0.1` */
+    bgOpacity?: number;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface LoaderFactoryPayload extends FactoryPayload {
+    props: LoaderProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<LoaderProps>>;
+    };
+}

package/src/components/menu/index.ts

@@ -0,0 +1,24 @@
+export { default as Menu } from "./menu";
+export { MenuTrigger } from "./menu-trigger";
+export { MenuDropdown } from "./menu-dropdown";
+export { MenuItem } from "./menu-item";
+export { MenuLabel } from "./menu-label";
+export { MenuSeparator } from "./menu-separator";
+export { MenuSub } from "./menu-sub";
+export { MenuSubTrigger } from "./menu-sub-trigger";
+export { MenuSubDropdown } from "./menu-sub-dropdown";
+export type {
+    MenuProps,
+    MenuTriggerProps,
+    MenuDropdownProps,
+    MenuItemProps,
+    MenuLabelProps,
+    MenuSeparatorProps,
+    MenuSubProps,
+    MenuSubTriggerProps,
+    MenuSubDropdownProps,
+    MenuClassNames,
+    MenuPositioning,
+    MenuMiddlewares,
+    MenuTriggerType
+} from "./menu.types";

package/src/components/menu/menu-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as MenuDropdown } from "./menu-dropdown";