@refraktor/core 0.0.3 → 0.0.5

package/src/components/tabs/tabs.tsx

@@ -1,137 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { TabsList } from "./tabs-list";
-import { TabsPanel } from "./tabs-panel";
-import {
-    getNavigableTabs,
-    TabsProvider,
-    useTabsRegistry
-} from "./tabs.context";
-import { TabsTab } from "./tabs-tab";
-import { TabsClassNames, TabsFactoryPayload, TabsProps } from "./tabs.types";
-
-const defaultProps = {
-    orientation: "horizontal",
-    activationMode: "automatic",
-    loop: true,
-    keepMounted: false,
-    size: "md",
-    radius: "default",
-    variant: "underline"
-} satisfies Partial<TabsProps>;
-
-const toDomSafeValue = (value: string) =>
-    encodeURIComponent(value).replace(/%/g, "-");
-
-const Tabs = factory<TabsFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        value,
-        defaultValue,
-        onChange,
-        orientation,
-        activationMode,
-        loop,
-        keepMounted,
-        size,
-        radius,
-        variant,
-        className,
-        classNames,
-        ...props
-    } = useProps("Tabs", defaultProps, _props);
-    const classes = useClassNames("Tabs", classNames);
-    const _id = useId(id);
-
-    const [activeValue, setActiveValue, isControlled] = useUncontrolled<string>(
-        {
-            value,
-            defaultValue,
-            finalValue: "",
-            onChange
-        }
-    );
-
-    const { registerTab, getTabs } = useTabsRegistry();
-
-    useEffect(() => {
-        if (isControlled || activeValue) {
-            return;
-        }
-
-        const firstTab = getNavigableTabs(getTabs())[0];
-
-        if (firstTab) {
-            setActiveValue(firstTab.value);
-        }
-    }, [isControlled, activeValue, getTabs, setActiveValue]);
-
-    const getTabId = useCallback(
-        (tabValue: string) => `${_id}-tab-${toDomSafeValue(tabValue)}`,
-        [_id]
-    );
-
-    const getPanelId = useCallback(
-        (tabValue: string) => `${_id}-panel-${toDomSafeValue(tabValue)}`,
-        [_id]
-    );
-
-    const getStyles = useCallback(
-        (part: keyof TabsClassNames) => classes[part],
-        [classes]
-    );
-
-    return (
-        <TabsProvider
-            value={{
-                value: activeValue,
-                onValueChange: setActiveValue,
-                orientation,
-                activationMode,
-                loop,
-                keepMounted,
-                size,
-                radius,
-                variant,
-                registerTab,
-                getTabs,
-                getTabId,
-                getPanelId,
-                getStyles
-            }}
-        >
-            <div
-                ref={ref}
-                id={_id}
-                className={cx(
-                    "w-full",
-                    orientation === "vertical" && "flex items-start gap-3",
-                    classes.root,
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        </TabsProvider>
-    );
-});
-
-Tabs.displayName = "@refraktor/core/Tabs";
-Tabs.configure = createComponentConfig<TabsProps>();
-Tabs.classNames = createClassNamesConfig<TabsClassNames>();
-Tabs.List = TabsList;
-Tabs.Tab = TabsTab;
-Tabs.Panel = TabsPanel;
-
-export default Tabs;

package/src/components/tabs/tabs.types.ts

@@ -1,128 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { TabsList } from "./tabs-list";
-import { TabsPanel } from "./tabs-panel";
-import { TabsTab } from "./tabs-tab";
-
-export type TabsOrientation = "horizontal" | "vertical";
-export type TabsActivationMode = "automatic" | "manual";
-export type TabsVariant = "pills" | "underline";
-
-export type TabsClassNames = {
-    root?: string;
-    list?: string;
-    tab?: string;
-    panel?: string;
-};
-
-export interface TabsProps extends Omit<
-    ComponentPropsWithoutRef<"div">,
-    "onChange"
-> {
-    /** Children containing subcomponents */
-    children: ReactNode;
-
-    /** Active tab value (controlled) */
-    value?: string;
-
-    /** Initial active tab value (uncontrolled) */
-    defaultValue?: string;
-
-    /** Callback called when active tab changes */
-    onChange?: (value: string) => void;
-
-    /** Tabs orientation @default `horizontal` */
-    orientation?: TabsOrientation;
-
-    /** Keyboard activation mode @default `automatic` */
-    activationMode?: TabsActivationMode;
-
-    /** Whether keyboard navigation should wrap around @default `true` */
-    loop?: boolean;
-
-    /** Keep all panels mounted and toggle hidden state @default `false` */
-    keepMounted?: boolean;
-
-    /** The size of tabs @default `md` */
-    size?: RefraktorSize;
-
-    /** The radius used for list and tabs @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Visual style variant @default `underline` */
-    variant?: TabsVariant;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: TabsClassNames;
-}
-
-export interface TabsListProps extends ComponentPropsWithoutRef<"div"> {
-    /** The tab list content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TabsTabProps extends Omit<
-    ComponentPropsWithoutRef<"button">,
-    "value"
-> {
-    /** The tab value used to link with panel */
-    value: string;
-
-    /** Whether the tab is disabled @default `false` */
-    disabled?: boolean;
-
-    /** The tab label */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TabsPanelProps extends ComponentPropsWithoutRef<"div"> {
-    /** Panel value used to match tab */
-    value: string;
-
-    /** Panel content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TabsFactoryPayload extends FactoryPayload {
-    props: TabsProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TabsProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<TabsClassNames>>;
-        List: typeof TabsList;
-        Tab: typeof TabsTab;
-        Panel: typeof TabsPanel;
-    };
-}
-
-export interface TabsListFactoryPayload extends FactoryPayload {
-    props: TabsListProps;
-    ref: HTMLDivElement;
-}
-
-export interface TabsTabFactoryPayload extends FactoryPayload {
-    props: TabsTabProps;
-    ref: HTMLButtonElement;
-}
-
-export interface TabsPanelFactoryPayload extends FactoryPayload {
-    props: TabsPanelProps;
-    ref: HTMLDivElement;
-}

package/src/components/textarea/index.ts

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

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

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

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

@@ -1,34 +0,0 @@
-import { RefraktorSize } from "../../../theme";
-import { InputVariant } from "../../input";
-import { TextareaResize } from "../textarea.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "px-2 py-1 text-[8px]",
-    sm: "px-2.5 py-1.5 text-[10px]",
-    md: "px-3 py-2 text-xs",
-    lg: "px-3.5 py-2.5 text-sm",
-    xl: "px-4 py-3 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];
-
-const resizes: Record<TextareaResize, string> = {
-    none: "resize-none",
-    vertical: "resize-y",
-    horizontal: "resize-x",
-    both: "resize"
-};
-
-export const getResize = (resize: TextareaResize = "vertical") =>
-    resizes[resize];

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

@@ -1,96 +0,0 @@
-import { createComponentConfig, factory, useProps } from "../../../utils";
-import { useId } from "@refraktor/utils";
-import {
-    TextareaFieldFactoryPayload,
-    TextareaFieldProps
-} from "../textarea.types";
-import { getSize, getVariant, getResize } from "./textarea-field.styles";
-import { useTheme } from "../../../theme";
-import TextareaAutosize from "react-textarea-autosize";
-
-const defaultProps = {
-    variant: "default",
-    size: "md",
-    radius: "default",
-    autosize: false,
-    minRows: 2
-} satisfies Partial<TextareaFieldProps>;
-
-const TextareaField = factory<TextareaFieldFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        variant,
-        size,
-        radius,
-        error,
-        className,
-        style,
-        disabled,
-        autosize,
-        minRows,
-        maxRows,
-        resize,
-        rows,
-        ...props
-    } = useProps("TextareaField", defaultProps, _props);
-
-    const _id = useId(id);
-
-    const resolvedResize = resize ?? (autosize ? "none" : "vertical");
-
-    const textareaClassName = cx(
-        "w-full outline-none border-none bg-transparent p-0",
-        "text-[var(--refraktor-text)]",
-        "placeholder:text-[var(--refraktor-text-tertiary)]",
-        getResize(resolvedResize),
-        disabled && "cursor-not-allowed"
-    );
-
-    const wrapperClassName = cx(
-        "w-full transition-all refraktor-scrollbar",
-        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
-    );
-
-    if (autosize) {
-        return (
-            <div className={wrapperClassName} style={style}>
-                <TextareaAutosize
-                    id={_id}
-                    ref={ref}
-                    disabled={disabled}
-                    aria-invalid={error ? true : undefined}
-                    minRows={minRows}
-                    maxRows={maxRows}
-                    className={textareaClassName}
-                    {...props}
-                />
-            </div>
-        );
-    }
-
-    return (
-        <div className={wrapperClassName} style={style}>
-            <textarea
-                id={_id}
-                ref={ref}
-                disabled={disabled}
-                aria-invalid={error ? true : undefined}
-                rows={rows ?? minRows}
-                className={textareaClassName}
-                {...props}
-            />
-        </div>
-    );
-});
-
-TextareaField.displayName = "@refraktor/core/TextareaField";
-TextareaField.configure = createComponentConfig<TextareaFieldProps>();
-
-export default TextareaField;

package/src/components/textarea/textarea.tsx

@@ -1,64 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { createComponentConfig, factory, useProps } from "../../utils";
-import { TextareaFactoryPayload, TextareaProps } from "./textarea.types";
-import { InputWrapper } from "../input/input-wrapper";
-import { TextareaField } from "./textarea-field";
-
-const defaultProps = {
-    variant: "default",
-    size: "md",
-    radius: "default"
-} satisfies Partial<TextareaProps>;
-
-const Textarea = factory<TextareaFactoryPayload>((_props, ref) => {
-    const { id, label, description, error, required, withAsterisk, ...props } =
-        useProps("Textarea", defaultProps, _props);
-
-    const _id = useId(id);
-
-    const hasWrapper = label || description || error;
-
-    if (!hasWrapper) {
-        return (
-            <TextareaField
-                ref={ref}
-                id={_id}
-                required={required}
-                error={!!error}
-                {...props}
-            />
-        );
-    }
-
-    return (
-        <InputWrapper
-            label={label}
-            description={description}
-            error={error}
-            required={required}
-            withAsterisk={withAsterisk}
-            inputId={_id}
-        >
-            <TextareaField
-                ref={ref}
-                id={_id}
-                required={required}
-                error={!!error}
-                aria-describedby={
-                    error
-                        ? `${_id}-error`
-                        : description
-                          ? `${_id}-description`
-                          : undefined
-                }
-                {...props}
-            />
-        </InputWrapper>
-    );
-});
-
-Textarea.displayName = "@refraktor/core/Textarea";
-Textarea.configure = createComponentConfig<TextareaProps>();
-Textarea.Field = TextareaField;
-
-export default Textarea;

package/src/components/textarea/textarea.types.ts

@@ -1,80 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { createComponentConfig, FactoryPayload } from "../../utils";
-import { InputWrapperProps, InputVariant } from "../input";
-import { TextareaField } from "./textarea-field";
-
-export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
-
-export type TextareaFieldClassNames = {
-    root?: string;
-};
-
-export interface TextareaFieldProps extends Omit<
-    ComponentPropsWithoutRef<"textarea">,
-    "size"
-> {
-    /** Textarea variant @default `default` */
-    variant?: InputVariant;
-
-    /** Textarea size @default `md` */
-    size?: RefraktorSize;
-
-    /** Textarea radius @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Error state */
-    error?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Class names for sub-elements */
-    classNames?: TextareaFieldClassNames;
-
-    /** Enable auto-resizing based on content @default false */
-    autosize?: boolean;
-
-    /** Minimum number of rows (only works with autosize) @default 2 */
-    minRows?: number;
-
-    /** Maximum number of rows (only works with autosize) */
-    maxRows?: number;
-
-    /** Controls the resize behavior @default `none` when autosize, `vertical` otherwise */
-    resize?: TextareaResize;
-}
-
-export interface TextareaProps extends Omit<TextareaFieldProps, "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 TextareaFactoryPayload extends FactoryPayload {
-    props: TextareaProps;
-    ref: HTMLTextAreaElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TextareaProps>>;
-        Field: typeof TextareaField;
-    };
-}
-
-export interface TextareaFieldFactoryPayload extends FactoryPayload {
-    props: TextareaFieldProps;
-    ref: HTMLTextAreaElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TextareaFieldProps>>;
-    };
-}

package/src/components/timeline/index.ts

@@ -1,11 +0,0 @@
-export { default as Timeline } from "./timeline";
-export { TimelineItem } from "./timeline-item";
-export type {
-    TimelineProps,
-    TimelineItemProps,
-    TimelineClassNames,
-    TimelineOrientation,
-    TimelineLineVariant,
-    TimelineFactoryPayload,
-    TimelineItemFactoryPayload
-} from "./timeline.types";

package/src/components/timeline/timeline-item/index.ts

@@ -1 +0,0 @@
-export { default as TimelineItem } from "./timeline-item";