@refraktor/core 0.0.4 → 0.0.5

package/src/components/for/for.tsx

@@ -1,53 +0,0 @@
-import { Fragment } from "react";
-import type { JSX } from "react";
-import type { ForProps } from "./for.types";
-
-const normalize = <T,>(collection?: ForProps<T>["each"]): T[] => {
-    if (!collection) {
-        return [];
-    }
-
-    if (Array.isArray(collection)) {
-        return collection.slice();
-    }
-
-    return Array.from(collection as Iterable<T> | ArrayLike<T>);
-};
-
-const For = <T,>({
-    each,
-    children,
-    fallback = null,
-    keyExtractor
-}: ForProps<T>): JSX.Element | null => {
-    const items = normalize(each);
-
-    if (items.length === 0) {
-        return fallback === null ? null : <>{fallback}</>;
-    }
-
-    const lastIndex = items.length - 1;
-
-    return (
-        <>
-            {items.map((item, index) => {
-                const meta = {
-                    index,
-                    length: items.length,
-                    isFirst: index === 0,
-                    isLast: index === lastIndex,
-                    previous: index > 0 ? items[index - 1] : undefined,
-                    next: index < lastIndex ? items[index + 1] : undefined
-                };
-
-                const key = keyExtractor?.(item, index) ?? index;
-
-                return <Fragment key={key}>{children(item, meta)}</Fragment>;
-            })}
-        </>
-    );
-};
-
-For.displayName = "@refraktor/core/For";
-
-export default For;

package/src/components/for/for.types.ts

@@ -1,40 +0,0 @@
-import { Key, ReactNode } from "react";
-
-/**
- * Supported collections for the For component. Accepts arrays, array-likes and iterables.
- */
-export type ForList<T> = readonly T[] | Iterable<T> | ArrayLike<T>;
-
-/**
- * Metadata passed to the render function for each item in the collection.
- */
-export type ForRenderMeta<T> = {
-    /** Index of the current item in the collection. */
-    index: number;
-
-    /** Total number of items in the collection. */
-    length: number;
-
-    /** Indicates whether the current item is the first in the collection. */
-    isFirst: boolean;
-
-    /** Indicates whether the current item is the last in the collection. */
-    isLast: boolean;
-
-    /** Previous item in the collection if it exists. */
-    previous?: T;
-
-    /** Next item in the collection if it exists. */
-    next?: T;
-};
-
-export type ForProps<T> = {
-    /** Collection that should be iterated. */
-    each?: ForList<T> | null;
-    /** Render function that receives the current item and helpful metadata. */
-    children: (item: T, meta: ForRenderMeta<T>) => ReactNode;
-    /** Node rendered when the collection is empty. */
-    fallback?: ReactNode;
-    /** Optional function to derive a stable React key for each item. */
-    keyExtractor?: (item: T, index: number) => Key;
-};

package/src/components/for/index.ts

@@ -1,2 +0,0 @@
-export { default as For } from "./for";
-export type { ForList, ForProps, ForRenderMeta } from "./for.types";

package/src/components/index.ts

@@ -1,35 +0,0 @@
-export * from "./accordion";
-export * from "./avatar";
-export * from "./badge";
-export * from "./breadcrumbs";
-export * from "./button";
-export * from "./checkbox";
-export * from "./chip";
-export * from "./color-swatch";
-export * from "./drawer";
-export * from "./file-input";
-export * from "./for";
-export * from "./input";
-export * from "./loader";
-export * from "./modal";
-export * from "./menu";
-export * from "./number-input";
-export * from "./password-input";
-export * from "./pin-input";
-export * from "./pagination";
-export * from "./popover";
-export * from "./portal";
-export * from "./progress";
-export * from "./progress-circle";
-export * from "./radio";
-export * from "./scroll-area";
-export * from "./select";
-export * from "./segmented-control";
-export * from "./slider";
-export * from "./switch";
-export * from "./table";
-export * from "./tabs";
-export * from "./timeline";
-export * from "./textarea";
-export * from "./tooltip";
-export * from "./transition";

package/src/components/input/index.ts

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

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

@@ -1,2 +0,0 @@
-export { default as InputDescription } from "./input-description";
-export type { InputDescriptionProps } from "./input-description";

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

@@ -1,36 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { factory, useProps, cx } from "../../../utils";
-
-export interface InputDescriptionProps extends ComponentPropsWithoutRef<"p"> {
-    /** Editing root class name */
-    className?: string;
-}
-
-const InputDescription = factory<{
-    props: InputDescriptionProps;
-    ref: HTMLParagraphElement;
-}>((_props, ref) => {
-    const { className, children, ...props } = useProps(
-        "InputDescription",
-        null,
-        _props
-    );
-
-    return (
-        <p
-            ref={ref}
-            className={cx(
-                "text-xs leading-relaxed",
-                "text-[var(--refraktor-text-tertiary)]",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-});
-
-InputDescription.displayName = "@refraktor/core/InputDescription";
-
-export default InputDescription;

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

@@ -1,2 +0,0 @@
-export { default as InputError } from "./input-error";
-export type { InputErrorProps } from "./input-error";

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

@@ -1,36 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { factory, useProps, cx } from "../../../utils";
-
-export interface InputErrorProps extends ComponentPropsWithoutRef<"p"> {
-    /** Editing root class name */
-    className?: string;
-}
-
-const InputError = factory<{
-    props: InputErrorProps;
-    ref: HTMLParagraphElement;
-}>((_props, ref) => {
-    const { className, children, ...props } = useProps(
-        "InputError",
-        null,
-        _props
-    );
-
-    return (
-        <p
-            ref={ref}
-            className={cx(
-                "text-xs mt-0.5",
-                "text-[var(--refraktor-colors-red-5)]",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-});
-
-InputError.displayName = "@refraktor/core/InputError";
-
-export default InputError;

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

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

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

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

@@ -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";