@refraktor/core 0.0.3 → 0.0.4

package/src/components/scroll-area/scroll-area.types.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+
+export type ScrollAreaClassNames = {
+    root?: string;
+};
+
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<"div"> {
+    /** Scroll direction behavior @default `vertical` */
+    orientation?: ScrollAreaOrientation;
+
+    /** Scrollbar thickness in pixels @default `6` */
+    scrollbarSize?: number;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ScrollAreaClassNames;
+}
+
+export interface ScrollAreaFactoryPayload extends FactoryPayload {
+    props: ScrollAreaProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ScrollAreaProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<ScrollAreaClassNames>
+        >;
+    };
+}

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

@@ -9,28 +9,28 @@ type SegmentedControlSizeStyles = {
 const sizes: Record<RefraktorSize, SegmentedControlSizeStyles> = {
     xs: {
         root: "p-0.5 gap-0.5",
-        control: "h-6 px-2 min-w-7",
-        label: "text-[10px]"
+        control: "h-4 px-2 min-w-6",
+        label: "text-[8px]"
     },
     sm: {
         root: "p-0.5 gap-0.5",
-        control: "h-7 px-2.5 min-w-8",
-        label: "text-xs"
+        control: "h-5 px-2.5 min-w-7",
+        label: "text-[10px]"
     },
     md: {
-        root: "p-1 gap-1",
-        control: "h-8 px-3 min-w-9",
-        label: "text-sm"
+        root: "p-0.5 gap-0.5",
+        control: "h-7 px-3 min-w-8",
+        label: "text-xs"
     },
     lg: {
-        root: "p-1 gap-1",
-        control: "h-9 px-3.5 min-w-10",
-        label: "text-base"
+        root: "p-0.5 gap-0.5",
+        control: "h-9 px-3.5 min-w-9",
+        label: "text-sm"
     },
     xl: {
-        root: "p-1.5 gap-1.5",
-        control: "h-10 px-4 min-w-11",
-        label: "text-lg"
+        root: "p-0.5 gap-0.5",
+        control: "h-11 px-4 min-w-10",
+        label: "text-base"
     }
 };
 

package/src/components/segmented-control/segmented-control.test.tsx

@@ -24,6 +24,24 @@ describe("@refraktor/core/SegmentedControl", () => {
         );
     });
 
+    it("renders data icon without changing accessible name", async () => {
+        await render(
+            <SegmentedControl
+                defaultValue="react"
+                data={[
+                    {
+                        value: "react",
+                        label: "React",
+                        icon: <span data-testid="react-icon">R</span>
+                    }
+                ]}
+            />
+        );
+
+        expect(screen.getByTestId("react-icon")).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "React" })).toBeInTheDocument();
+    });
+
     it("forwards ref correctly", async () => {
         const ref = createRef<HTMLDivElement>();
 

package/src/components/segmented-control/segmented-control.tsx

@@ -205,9 +205,10 @@ const SegmentedControl = factory<SegmentedControlFactoryPayload>(
                                     : 0
                             }
                             className={cx(
-                                "relative inline-flex items-center justify-center whitespace-nowrap select-none outline-none transition-colors",
+                                "relative inline-flex items-center justify-center whitespace-nowrap select-none outline-none transition-colors cursor-pointer",
                                 "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
                                 "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+                                item.icon && "gap-1.5",
                                 fullWidth && "flex-1",
                                 sizeStyles.control,
                                 sizeStyles.label,
@@ -222,6 +223,15 @@ const SegmentedControl = factory<SegmentedControlFactoryPayload>(
                                 handleKeyDown(event, index, isControlDisabled)
                             }
                         >
+                            {item.icon && (
+                                <span
+                                    aria-hidden="true"
+                                    className="inline-flex shrink-0 leading-none"
+                                >
+                                    {item.icon}
+                                </span>
+                            )}
+
                             <span className={cx("leading-none", classes.label)}>
                                 {item.label}
                             </span>

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

@@ -13,6 +13,9 @@ export interface SegmentedControlItem {
     /** Item label */
     label: ReactNode;
 
+    /** Optional item icon */
+    icon?: ReactNode;
+
     /** Whether item is disabled */
     disabled?: boolean;
 }