@refraktor/core 0.0.3 → 0.0.5

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

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

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

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

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

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

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

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

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

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

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

package/src/components/loader/loader.tsx

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

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

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

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