@refraktor/core 0.0.1 → 0.0.3

package/src/components/segmented-control/segmented-control.types.ts

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export interface SegmentedControlItem {
+    /** Item value */
+    value: string;
+
+    /** Item label */
+    label: ReactNode;
+
+    /** Whether item is disabled */
+    disabled?: boolean;
+}
+
+export type SegmentedControlClassNames = {
+    root?: string;
+    control?: string;
+    label?: string;
+};
+
+export interface SegmentedControlProps extends Omit<
+    ComponentPropsWithoutRef<"div">,
+    "onChange"
+> {
+    /** Items to render */
+    data: SegmentedControlItem[];
+
+    /** Selected value (controlled) */
+    value?: string;
+
+    /** Initial selected value (uncontrolled) */
+    defaultValue?: string;
+
+    /** Callback called when selected value changes */
+    onChange?: (value: string) => void;
+
+    /** The size of segmented control @default `md` */
+    size?: RefraktorSize;
+
+    /** The radius of segmented control @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Whether segmented control should take full width @default `false` */
+    fullWidth?: boolean;
+
+    /** Whether segmented control is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Hidden input name for forms */
+    name?: string;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: SegmentedControlClassNames;
+}
+
+export interface SegmentedControlFactoryPayload extends FactoryPayload {
+    props: SegmentedControlProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<
+            typeof createComponentConfig<SegmentedControlProps>
+        >;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<SegmentedControlClassNames>
+        >;
+    };
+}

package/src/components/select/select-dropdown/select-dropdown.tsx

@@ -201,6 +201,7 @@ const SelectDropdown = factory<SelectDropdownFactoryPayload>(
                 transition="fade"
                 duration={150}
                 mounted={select.select.opened}
+                style={{ position: "relative", zIndex: 1000 }}
                 {...select.transitionProps}
             >
                 <div
@@ -211,6 +212,7 @@ const SelectDropdown = factory<SelectDropdownFactoryPayload>(
                     tabIndex={-1}
                     style={{
                         ...select.select.floatingStyles,
+                        zIndex: 1000,
                         width: referenceWidth,
                         ...style
                     }}
@@ -273,16 +275,15 @@ const SelectDropdown = factory<SelectDropdownFactoryPayload>(
             </Transition>
         );
 
-        const wrappedContent = select.select.opened ? (
+        const wrappedContent = (
             <FloatingFocusManager
                 context={select.select.context}
                 modal={false}
                 initialFocus={-1}
+                disabled={!select.select.opened}
             >
                 {dropdownContent}
             </FloatingFocusManager>
-        ) : (
-            dropdownContent
         );
 
         return select.withinPortal ? (

package/src/components/select/select-item/select-item.tsx

@@ -92,10 +92,9 @@ const SelectItem = factory<SelectItemFactoryPayload>(
                 aria-selected={isSelected}
                 aria-disabled={disabled}
                 className={cx(
-                    "w-full text-left p-1.5 text-sm rounded-none appearance-none border-none bg-transparent",
+                    "w-full text-left p-1.5 text-xs rounded-none appearance-none border-none bg-transparent",
                     "inline-flex items-center gap-2 outline-none transition-colors",
                     "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]",
-                    "data-[selected=true]:bg-[var(--refraktor-bg-hover)]",
                     "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
                     getRadius(select.radius),
                     select.getStyles("item"),

package/src/components/select/select-root/select-root.tsx

@@ -1,9 +1,18 @@
 import { useId, useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect, useRef } from "react";
+import {
+    Children,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef
+} from "react";
+import type { ReactNode } from "react";
 import { useTheme } from "../../../theme";
 import { factory, useClassNames, useProps } from "../../../utils";
 import {
     focusSelectItem,
+    getNodeTextValue,
     getNavigableSelectItems,
     SelectProvider,
     useSelectItemsRegistry
@@ -18,6 +27,7 @@ import type {
     SelectRootProps
 } from "../select.types";
 import { useSelect } from "../use-select";
+import { InputWrapper } from "../../input/input-wrapper";
 
 const defaultProps = {
     positioning: {
@@ -37,11 +47,52 @@ const defaultProps = {
     closeOnEscape: true
 } satisfies Partial<SelectRootProps>;
 
+function collectSelectItemLabels(node: ReactNode, labels: Map<string, string>) {
+    Children.forEach(node, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+
+        const typeDisplayName = (child.type as { displayName?: string })
+            .displayName;
+        const props = child.props as {
+            value?: string;
+            textValue?: string;
+            children?: ReactNode;
+        };
+
+        if (
+            typeDisplayName === "@refraktor/core/Select.Item" &&
+            typeof props.value === "string"
+        ) {
+            labels.set(
+                props.value,
+                getNodeTextValue(props.children, props.textValue) || props.value
+            );
+        }
+
+        if (props.children !== undefined && props.children !== null) {
+            collectSelectItemLabels(props.children, labels);
+        }
+    });
+}
+
+function getSelectItemLabels(node: ReactNode) {
+    const labels = new Map<string, string>();
+    collectSelectItemLabels(node, labels);
+    return labels;
+}
+
 const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
     const { cx } = useTheme();
     const {
         id,
         children,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
         value,
         defaultValue,
         onChange,
@@ -74,6 +125,8 @@ const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
     const _id = useId(id);
     const listId = `${_id}-listbox`;
     const triggerId = `${_id}-trigger`;
+    const hasWrapper = label || description || error;
+    const inferredLabels = useMemo(() => getSelectItemLabels(children), [children]);
 
     const [selectedValue, setSelectedValue] = useUncontrolled<string | null>({
         value,
@@ -153,8 +206,12 @@ const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
             return "";
         }
 
-        return labelsRef.current.get(selectedValue) ?? selectedValue;
-    }, [selectedValue]);
+        return (
+            labelsRef.current.get(selectedValue) ??
+            inferredLabels.get(selectedValue) ??
+            selectedValue
+        );
+    }, [selectedValue, inferredLabels]);
 
     const focusFirstItem = useCallback(() => {
         const items = getNavigableSelectItems(getVisibleItems());
@@ -216,6 +273,8 @@ const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
         searchPlaceholder,
         nothingFound,
         disabled: !!disabled,
+        error: !!error,
+        required: !!required,
         size,
         radius,
         variant,
@@ -238,16 +297,33 @@ const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
         getStyles
     };
 
+    const content = (
+        <div
+            ref={ref}
+            id={_id}
+            className={cx("relative w-full", classes.root, className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+
     return (
         <SelectProvider value={context}>
-            <div
-                ref={ref}
-                id={_id}
-                className={cx("relative w-full", classes.root, className)}
-                {...props}
-            >
-                {children}
-            </div>
+            {hasWrapper ? (
+                <InputWrapper
+                    label={label}
+                    description={description}
+                    error={error}
+                    required={required}
+                    withAsterisk={withAsterisk}
+                    inputId={triggerId}
+                >
+                    {content}
+                </InputWrapper>
+            ) : (
+                content
+            )}
         </SelectProvider>
     );
 });

package/src/components/select/select-trigger/select-trigger.tsx

@@ -81,6 +81,8 @@ const SelectTrigger = factory<SelectTriggerFactoryPayload>(
                         select.triggerInputRef.current = node;
                     }}
                     readOnly
+                    required={select.required}
+                    error={select.error}
                     disabled={select.disabled}
                     value={hasValue ? selectedLabel : ""}
                     placeholder={hasValue ? undefined : placeholder ?? select.placeholder}

package/src/components/select/select.context.ts

@@ -29,6 +29,8 @@ export interface SelectContextValue {
     searchPlaceholder: string;
     nothingFound: ReactNode;
     disabled: boolean;
+    error: boolean;
+    required: boolean;
     size: RefraktorSize;
     radius: RefraktorRadius;
     variant: InputVariant;

package/src/components/select/select.test.tsx

@@ -36,6 +36,20 @@ describe("@refraktor/core/Select", () => {
         });
     });
 
+    it("renders defaultValue label in trigger before opening", async () => {
+        await render(
+            <Select
+                defaultValue="apple"
+                data={[
+                    { value: "apple", label: "Apple" },
+                    { value: "orange", label: "Orange" }
+                ]}
+            />
+        );
+
+        expect(screen.getByRole("combobox")).toHaveValue("Apple");
+    });
+
     it("renders searchable input inside dropdown", async () => {
         const user = userEvent.setup();
 
@@ -152,4 +166,25 @@ describe("@refraktor/core/Select", () => {
         expect(onChange).toHaveBeenCalledWith("vue");
         expect(screen.getByRole("combobox")).toHaveValue("Vue");
     });
+
+    it("supports input wrapper props", async () => {
+        await render(
+            <Select
+                label="Framework"
+                description="Pick one option"
+                error="Selection is required"
+                transitionProps={transitionProps}
+                data={[
+                    { value: "react", label: "React" },
+                    { value: "vue", label: "Vue" }
+                ]}
+            />
+        );
+
+        const trigger = screen.getByLabelText("Framework");
+
+        expect(trigger).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Pick one option")).toBeInTheDocument();
+        expect(screen.getByText("Selection is required")).toBeInTheDocument();
+    });
 });

package/src/components/select/select.types.ts

@@ -82,6 +82,21 @@ export interface SelectRootProps
     /** Children containing select subcomponents */
     children: ReactNode;
 
+    /** 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;
+
     /** Selected value (controlled) */
     value?: string | null;
 

package/src/components/select/use-select.ts

@@ -114,7 +114,8 @@ export function useSelect(options: UseSelectProps = {}): UseSelectReturn {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
 
     const click = useClick(floating.context, {

package/src/components/switch/switch.tsx

@@ -100,7 +100,7 @@ const Switch = factory<SwitchFactoryPayload>((_props, ref) => {
                     <span
                         className={cx(
                             "text-[var(--refraktor-text)]",
-                            labelPosition === "left" ? "mr-3" : "ml-3",
+                            labelPosition === "left" ? "mr-2" : "ml-2",
                             sizeClass.label,
                             classes.label
                         )}

package/src/components/table/index.ts

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getSize } from "../table.styles";
+import { TableCaptionFactoryPayload } from "../table.types";
+
+const TableCaption = factory<TableCaptionFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <caption
+                ref={ref}
+                className={cx(
+                    "caption-bottom mt-2 text-[var(--refraktor-text-secondary)]",
+                    sizeStyles.caption,
+                    getStyles("caption"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </caption>
+        );
+    }
+);
+
+TableCaption.displayName = "@refraktor/core/Table.Caption";
+
+export default TableCaption;

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

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

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

@@ -0,0 +1,33 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+import { TableCellFactoryPayload } from "../table.types";
+
+const TableCell = factory<TableCellFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, withColumnBorders, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <td
+                ref={ref}
+                className={cx(
+                    "align-middle text-[var(--refraktor-text)]",
+                    sizeStyles.cell,
+                    getColumnBorder(withColumnBorders),
+                    getStyles("cell"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </td>
+        );
+    }
+);
+
+TableCell.displayName = "@refraktor/core/Table.Cell";
+
+export default TableCell;

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

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

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

@@ -0,0 +1,29 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { TableHeadFactoryPayload } from "../table.types";
+
+const TableHead = factory<TableHeadFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useTableContext();
+
+        return (
+            <thead
+                ref={ref}
+                className={cx(
+                    "border-b border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
+                    getStyles("head"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </thead>
+        );
+    }
+);
+
+TableHead.displayName = "@refraktor/core/Table.Head";
+
+export default TableHead;

package/src/components/table/table-header-cell/index.ts

@@ -0,0 +1 @@
+export { default as TableHeaderCell } from "./table-header-cell";

package/src/components/table/table-header-cell/table-header-cell.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+import { TableHeaderCellFactoryPayload } from "../table.types";
+
+const TableHeaderCell = factory<TableHeaderCellFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { size, withColumnBorders, getStyles } = useTableContext();
+        const sizeStyles = getSize(size);
+
+        return (
+            <th
+                ref={ref}
+                className={cx(
+                    "text-left font-medium align-middle text-[var(--refraktor-text-secondary)]",
+                    sizeStyles.headerCell,
+                    getColumnBorder(withColumnBorders),
+                    getStyles("headerCell"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </th>
+        );
+    }
+);
+
+TableHeaderCell.displayName = "@refraktor/core/Table.HeaderCell";
+
+export default TableHeaderCell;

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

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

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

@@ -0,0 +1,30 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { TableRowFactoryPayload } from "../table.types";
+
+const TableRow = factory<TableRowFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { highlightOnHover, getStyles } = useTableContext();
+
+        return (
+            <tr
+                ref={ref}
+                className={cx(
+                    "align-middle",
+                    highlightOnHover && "transition-colors",
+                    getStyles("row"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </tr>
+        );
+    }
+);
+
+TableRow.displayName = "@refraktor/core/Table.Row";
+
+export default TableRow;

package/src/components/table/table.context.ts

@@ -0,0 +1,18 @@
+import { createSafeContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TableClassNames } from "./table.types";
+
+export interface TableContextValue {
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    striped: boolean;
+    highlightOnHover: boolean;
+    withRowBorders: boolean;
+    withColumnBorders: boolean;
+    getStyles: (part: keyof TableClassNames) => string | undefined;
+}
+
+export const [TableProvider, useTableContext] =
+    createSafeContext<TableContextValue>(
+        "Table component was not found in tree. Make sure Table subcomponents are wrapped with Table."
+    );